SE奮闘記

WordPressの１ページをReactを使って開発したいと勉強しているときの覚書。 環境： CentOS 7.6, node v11.14.0 今まで通りPHPでさくっと作れるけれど下記理由で今に至る Flutterを最近使い始めたから。FlutterがインスパイアーされたReactの仮想DOMの考え方を学びたい 予約システムやLINEのようなコミュニティシステムの開発は、SPA(Single Page Application)になると思う そろそろ技術の淘汰が進んで学びやすくなっていそう まずはReact公式サイトを読む Create a New React App – React そこからリンクされている記事を参考にする。 Creating a React App… From Scratch. - Noteworthy - The Journal Blog 作業環境を作る $ mkdir react-demo $ cd react-demo/ $ npm init -y 各種ディレクトリ作成 $ mkdir public src dist index.htmlは Gist のを流し込む。 $ vi public/index.html Babelのインストール Babelの公式サイト で各種パッケージの説明がある。 $ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react Babelの設定ファイルを作る $ vi .babelrc {   "presets": [     "@babel/preset-env", "@babel/preset-react"   ] } Webpackのインストール まずは必要なものだけ。 $ npm install --save-dev webpack webpack-cli babel-loader 設定ファイルを作る $ webpack.config.js const path = require("path"); module.expo...

React（仮想DOM）を試してみたくて、WordPressサイトの一部（ログイン後の管理画面）をReactで構築したときの覚書。 Reactの基礎 Reactは「UI構築のためのJavaScriptライブラリ」 React – ユーザインターフェース構築のための JavaScript ライブラリ Reactの主な特徴 「learn once, use everywhere（一度学習すれば、どこでも使える）」が目標 SPA(Single Page Application)を構築するのに優れている。 仮想DOMの考え方はFlutterにも影響を与えた。 参考： 翻訳記事:俺のFlutterはレボリューション(革命)だ！ - Qiita Reactの参考書籍 買ったのはこの本 Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門 余計なことを掲載せず「Reactとは」を理解するには良書だと思う。 詳しいことはウェブに全部あるし。 React.jsとVue.jsとの比較 VueはReactの考え方を元に、よりシンプルに記述できるよう設計された。 参考サイト   ReactとVueのどちらを選ぶか - Qiita 他のフレームワークとの比較 — Vue.js 【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口 Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA 決めてになったのは最期の速度比較記事。 バックエンドがPHP(WordPress)なので、Vueの方が合っているような気もするけど、将来的なことを考えてReactを採用することにした。 …というか、これから試して実装するか判断する。 【関連記事】 「Flutter」でAndroidアプリ、iOSアプリ開発計画 CentOS6でv8をソースからビルド

ReactのチュートリアルをやっているときにBabelのビルドツールとしてWebpackを導入したときの覚書。 環境： CentOS 7.6, Node.js v11.14.0, webpack v4.39.3 今までのタスクランナーは Grunt → PhpStormのファイル監視機能 を使って問題なく開発していた。 Reactを学ぶ際に、最近流行りのWebpackも覚えておこうとやってみた。 Webpackとは Node.jsで動くビルドツール。タスクランナー、開発ウェブサーバーとしても機能もある。 最近はGulpやGruntからWebpackに移行している流れ。 [意訳]私がGulpとGruntを手放した理由 - Qiita step by stepで始めるwebpack - Qiita 公式のチュートリアルをやる まずは大人しく公式のチュートリアルをやってみる（読んだだけでやった気にならない）。 Getting Started | webpack lessファイルをビルド チュートリアルのディレクトリで作業する。 Lessファイルを作成 $ mkdir less $ cd less $ vi variables.less @red: #ff0000; $ vi main.less @import "./variables"; body {   background-color: @red; } 公式に従いless-loaderをインストール（参考： less-loader | webpack ） $ npm install less-loader --save-dev 必要なモジュールをインストール $ npm install less style-loader css-loader --save-dev 設定変更 $ vi webpack.config.js const path = require('path'); module.exports = {   entry: './src/index.js',   output: {     filename: 'main...

駅から遠いお客様のところへタクシーを使うのも費用がかさむので、法人でタイムズカーシェアを契約したときの覚書。 公式ページはこちら。 カーシェアリングならタイムズカーシェア（旧タイムズカープラス） タイムズカーシェアのメリット 法人の場合は 月額基本料金0円 キャンペーン期間中はカード発行手数料も0円 使った分だけクレジットカード決済で 経費処理が楽 15分206円。 ガソリン代込み 主要な駅にはステーションがある 24時間入出庫可能 ゴルフ行くときなど早朝出発前から使える（夜中駐車場に停めておく必要ない） 使えるようになるまで約10日ぐらい掛かるので注意 ウェブサイトから入会申し込みして書類を発送 1週間ぐらいすると法人用ログインIDが発行される（メールが届く） 法人専用画面から法人でログインしたあと個人IDを確認 通常画面から個人IDでログインし直す 運転免許証を登録 →３営業日で認証される 入会申し込みして10日後ぐらいに法人カードが届いた アプリもある スマートフォンアプリ | カーシェアリングのタイムズカーシェア 公式サイトの利用シーンとかみると確かに便利そうだと思う。 利用シーン | カーシェアリングのタイムズカーシェア 使ってみた感想 いろんな車に乗れて楽しい ネットで事前予約するだけ（2週間前から可能）で使えるので、レンタカーみたいに受付がなくてスムーズ ニコニコレンタカーを使わなくなった 法人であれば登録しておいて損はない。 自宅近くの駅前にステーションがあったし、もっと早く利用すれば良かったと思ったほど。

FlutterとFirebaseを使う方針が立ったので、具体的なアプリ開発に向けてFlutterを勉強しているときの覚書。 環境： Windows 10 Pro 64bit 1903, Flutter SDK v1.7.8, Android Studio 3.4.2 下記のチュートリアルを進める。 Write Your First Flutter App, part 1 | Google Codelabs Write Your First Flutter App, part 2 | Google Codelabs Firebase for Flutter | Google Codelabs 感想など 昔は一文字変えるだけでもビルドし直していたので、ホットリロードは感動する。 アプリ開発がウェブ開発と同じくらいやりやすくなってきた。 Dart言語もJavaScriptに似ているので全く気にならない。 「全てがWidget」の考え方が分かってきた。 あとは必要なときにGitHubにあるサンプルをみれば大丈夫そう。 firebase/quickstart-android: Firebase Quickstart Samples for Android | GitHub 【関連記事】 Firebaseを理解するためにウェブチャットのサンプルを試す Flutterでアプリ開発。サンプルアプリを試す

Googleマイビジネス（GMB）に登録した写真がGoogle検索しても表示されないので調査したときの覚書。 サポートに問い合わせすれば対応してくれるらしい。 ビジネスオーナーが登録した写真が2週間たっても反映されない - Google 広告主コミュニティ サポートに問い合わせする方法 Googleマイビジネスの管理画面の左メニューにある「サポート」 「ご不明な点がある場合」 「ビジネス情報と編集」 「住所を変更する」 「メールサポート」 追加可能な写真の仕様 複数のビジネス情報に写真を追加する - Google マイビジネス ヘルプ 写真は JPG、GIF、PNG、TIFF、BMP のいずれかの形式にしてください。 各写真のサイズは 5 MB 未満としてください。 追加する写真は 720×720 ピクセル以上、3,000×3,000 ピクセル以下にすることをおすすめします。 写真の長い方の長さが、短い方の長さの 2 倍を超えないようにする必要があります。Google のサービスでは縦長の写真よりも横長の写真の使用をおすすめします。 1 つのビジネス情報に登録できる追加の写真は 25 枚までです。 ピントの合った十分に明るい写真を使用します。Photoshop などの画像編集ソフトによる加工や、過度のフィルタ使用は避けてください。画像は現実に則している必要があります。 引用元： ビジネス情報一括処理時の写真についてのガイドライン - Google マイビジネス ヘルプ 追加した写真はPhotoshopで明るさなど調整しているけど、傷を消したりなどの加工はしていない（撮影するときに現場でキレイに見せるための努力はしている）。 あと、一眼レフ＋広角レンズで撮影しているので、スマホでは撮れない絵にはなっている。 またサポートから返信があったら追記予定。 （2019/07/30追記）3日後サポートから「反映処理を行いました」と返信あり。 Googleマイビジネスの概要はさいたま起業家協議会で書いたコラムを参考に。 最低限知っておくべきSEO対策：「Googleマイビジネス」編 | さいたま起業家協議会 【関連記事】 Googleマイビジネスの「更新内容...

Flutterを使ったアプリ開発のバックエンドとしてFirebaseを検討しているときの覚書。 環境： Windows 10 64bit チュートリアルに従って単純なチャットアプリを試してみる。 Codelabsにチュートリアルがまとまっている。 Google Codelabs 個人的にウェブが得意なので、今回はこちらのチュートリアルを進める Firebase Web Codelab チュートリアルが分かりやすいので特に書くことはない。（笑） 「7. Set up user sign-in」のGoogleログインするときに下記エラー Error: restricted_client Application: Friendly Chat Web You can email the developer of this application at: This app is not yet configured to make OAuth requests. To do that, set up the app’s OAuth consent screen in the Google Cloud Console. このIssues を参考にGoogle Cloud Platform(GCP)のFirebase用に作ったプロジェクトを選択、 APIとサービス→認証情報 を開いて、OAuth同意画面のロゴにpublic\images\にあるfirebase-logo.pngを指定（何でもいい）で保存。 これで動いた。 「11. Show notifications」では下記エラーでdevice tokenを取得できなかった。 Unable to get messaging token. FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworke...

今まで仕事でもNikon D5500を使ってきたけど、一つ上のステップに進もうとZ6を買ったときの覚書。 D850、Z7、Z6で迷っていた。 ニコンZ6にした理由 瞳オートフォーカスが仕事で役に立ちそう 無音撮影がしたい。「カシャカシャ」が気になるお客様が多い フルサイズにしては軽い SnapBridgeでスマホ転送が便利そう 評判がいい Z7の間に10万円分の機能差はなさそう 買ったのはFTZマウントアダプターキット： 238,200円 価格.com - ニコン Z 6 FTZ マウントアダプターキット 価格比較 その他買ったのは 替えバッテリー XQDメモリーカード 64GB XQDアダプター レンズは前に持っていたものを使う。 AF-S NIKKOR 35mm f/1.8G ED - 概要 | NIKKORレンズ | ニコンイメージング AF-S DX NIKKOR 10-24mm f/3.5-4.5G ED - 概要 | NIKKORレンズ | ニコンイメージング 持ってみると意外にずっしりくるので、重量を比較してみた（バッテリー、メモリーカード込み）。 D6 + FTZ： 810g（675g + 135g） D5500： 470g プラス340gでもD5500に慣れていると重く感じる。 D5500は右手だけで持っていても全然疲れない。 でもZ6は持っていると疲れるので、どこかに置きたくなる。 「軽さは正義」を実感。 ちなみに現場ではネックストラップを付けずに Nikon FLX スリングバッグ ＋ Peak Design キャプチャー v2で機動力を発揮するのが自分にあっている。 まだZ6を仕事で使ってないので、しっかり使いこなしていきたい。 【関連記事】 一眼レフカメラデビュー。「ニコン D5500」を買った

FlutterをWindowsにインストールすることは成功したので、iOS開発用に古いMac mini(Mid 2010)でも可能か試したときの覚書。 環境： macOS High Sierra 10.13.6, Flutter SDK v1.5.4, Android Studio 3.4.1, Xcode 10.1 公式サイトを参考に。 MacOS install  - Flutter 以下はWindowsからTeraTermで操作している。 SDKインストール SDKをダウンロードして展開 $ cd Downloads/ $ curl -O https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip $ unzip flutter_macos_v1.5.4-hotfix.2-stable.zip ApplicationsディレクトリへインストールしてPATHの設定 $ mv flutter /Applications/ $ less ~/.bash_profile # Flutter export PATH=$PATH:/Applications/flutter/bin 反映して開発用バイナリデータをダウンロード。確認 $ source ~/.bash_profile $ flutter precache $ flutter doctor Warningになっているのをひとつずつ解決していく。 Android SDKの設定 Android Studioを最新にしてFlutterプラグインをインストール。 SDK ManagerからAndroid SDK 29をインストール。 Androidライセンスへ同意 $ flutter doctor --android-licenses これでAndroid toolchainにチェックマークが付いた。 iOS開発の設定 flutter doctorに表示されているコマンドを実行 $ sudo xcode-select --switch /Applications...

Flutterの開発環境を整えたので、今度はサンプルアプリを試してみたときの覚書。 環境： Windows 10 64bit, Flutter SDK v1.5.4, Android Studio 3.4.1 サンプルへのリンクは下記から Learn more  - Flutter samples/INDEX.md at master · flutter/samples | GitHub まずはシンプルそうなこちらから。 nisrulz/flutter-examples: [Examples] Simple basic isolated apps, for budding flutter devs. 適当なフォルダにcloneして、README.mdにあるようにパッケージを取得する。 > git clone https://github.com/nisrulz/flutter-examples.git > cd .\flutter-examples\ > .\get_packages.sh ...と思ったらシェルスクリプトだからWindowsで実行できない。 ソースをみたら各ディレクトリに移動してコマンドを実行しているだけなので、手動でやってみる。 > cd .\simple_material_app\ > flutter packages get simple_material_appフォルダをAndroid Studioから開く。 AVD Managerから仮想デバイスを起動。 Runボタンを押して実行。 Test drive  - Flutter 動いた。嬉しい。 あとはGitHub上の各フォルダのREADMEを見れば、どんな感じか分かる。 次にこちらのサンプルを試す。 iampawan/FlutterExampleApps: [Example APPS] Basic Flutter apps, for flutter devs. インスタグラムっぽいアプリをcloneしてみる。 > git clone https://github.com/iampawan...