SE奮闘記

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...

Flutterを試したときの覚書。 環境： Windows 10 64bit, Flutter SDK v1.5.4, Android Studio 3.4.1 公式ページが十分に分かりやすいので、そちらを参考に。 Windows install  - Flutter SDKインストール Android SDKと同じフォルダ「D:\Documents\Android」に配置。 flutter_console.batをダブルクリックで実行。 PATHを設定してコンソールを起動するだけみたい。 Windowsの「Environment Variables」からユーザーパスを設定。 PATHに「D:\Documents\Android\flutter\bin」を追加。 （編集しやすくなっていて驚いた） PowerShellを起動して、flutterコマンドが使えるか確認。 同じくPowerShellでチェックコマンドを実行 > flutter doctor Flutter SDKがインストールされていることが確認できる。 環境変数にANDROID_HOMEもないといけないようなので設定する。 PowerShellを再起動して確認 > flutter doctor Android SDK version 27.0.3を使っていて、Android SDK 28に上げろと言われたので、Android StudioのSDK Toolsから最新のAndroid SDK Build-Tools 29をインストールしてみた。 PowerShellで確認 > flutter doctor Android toolchainのところでライセンスがどうのこうのとあるので書いてあるコマンドを実行 > flutter doctor --android-licenses yを押して了承していく。 確認 > flutter doctor ここでFlutterとAndroid toolchainにチェックマークがついた。 Android Studioの設定 Android Studioはインストール済みだったので、Flutterプラグ...

「犬猫家族アプリ」を再起動しようとしているときの覚書。 4年ほど前はAppcelator Titanium + Node.jsで作っていたけど、今度はFlutter + PHP7(WordPress)にしていく。 Flutterとは。 Googleが開発しているマルチプラットフォーム開発環境。2018年12月にFlutter 1.0がリリースされた。 Flutter - Beautiful native apps in record time Flutter - Wikipedia Flutterの特徴 記述はDart言語。 対応するプラットフォームは モバイルアプリ ウェブ デスクトップアプリ 組み込みアプリ で真のマルチプラットフォームを目指している。 その他ウェブから集めた情報など Dart言語はJavaScriptに似ているので敷居が低い ドキュメントやサンプルが充実していて開発者に優しい。 あとはとりあえずやってみることが大事。 【関連記事】 犬猫家族アプリのAMP＋PWA化計画 KotlinでiOS開発は出来るのか調査 Appcelerator Titaniumで作った「犬猫家族」アプリ

PHPStormを使うようになってからは、PHPStormの機能だけでJavaScriptの文法チェックをしていたけど、ちゃんとlintツールを使うように設定したときの覚書。 環境： Windows 10, PHPStorm 2019.1.2 lintはバグの原因になるような曖昧な記述を警告してくれるプログラム（の総称）。 lint - Wikipedia JavaScriptのLintツールは今なら「ESLint」を使っておけば間違いない。 まずは公式のスタートガイドを読む。 ESLint - Pluggable JavaScript linter Getting Started with ESLint - ESLint - Pluggable JavaScript linter npmでインストールする。 # npm install --save-dev eslint 設定ファイルを作る # vi .eslintrc.json {   "extends": ["eslint:recommended"],   "env": {     "browser": true,     "jquery": true   },   "rules": {     "strict": ["error", "function"],     "no-console": "error"   } } PHPStormの設定 公式サイトのヘルプを参考に。 ESLint - Help | WebStorm ESLintを「Manual ESLint configuration」にする。 .eslintrc.jsonをPHPStormで編集した後は右クリックで「Apply ESLint Code Style Rules」で読み込む。 単独のjsファイルは問題ないのだけれど、PHPファイル内のscriptタグにはESLintでチェックされない？ JavaScriptのコーデ...

メールログを見ていて下記エラーが目に留まった時の覚書。 環境： CentOS 7.6, Postfix 2.10.1 postfix/smtp[13310]: connect to gmail-smtp-in.l.google.com[2404:6800:4008:c01::1a]:25: Connection timed out postfix/smtp[13310]: Trusted TLS connection established to gmail-smtp-in.l.google.com[108.177.125.26]:25: TLSv1.2 with cipher ECDHE-RSA-AES128-GCM-SHA256 (128/128 bits) 最初のログはIPv6で接続しようとしていてタイムアウトしている。 タイムアウトを待つ分だけメール送信に時間が掛かっていた。 IPv6を無効にするのも何となく不安なので、IPv4から先に試すように設定。 「smtp_address_preference」を使う。Postfix 2.8から使える設定。 Postfix Configuration Parameters Postfixのバージョンを確認 # yum info postfix postconfを使う方法もある # postconf -d | grep version 設定ファイルを編集 # less /etc/postfix/main.cf # Enable IPv4, and IPv6 if supported inet_protocols = all # Try IPv4 first smtp_address_preference = ipv4 testしてサービス再起動 # postfix check # systemctl restart postfix ログを監視しながら動作確認 # tail -f /var/log/maillog # mail hoge@gmail.com 【関連記事】 CentOS7で/var/log/maillogを作るrsyslogのインストールと設定 CentOS7 + Nginx + PHP7 + Maria...