ionicをWindowsで開発し LiveReloadを行う

ionicとは？

1つのソースで、Web、Android、iOS、Windowsネイティブ等の複数のアプリを生成するハイブリッドフレームワークです
ionicの特徴としては、Typescriptで記述し、Angular(React)フレームワークを使い、ネイティブ連携にCapacitor(Cordova)を使う事 つまり、HTML、CSS、JavaScriptというWebの資産が利用出来る事にあります
Vueも現在対応中とか！

インストールもnpmで行います

Windowsとの相性

公式曰く

ionicframework.com

In general, we recommend using the built-in terminals. Many third-party terminals work well with Ionic, but may not be supported. For Windows, Command Prompt and PowerShell are supported. WSL is known to work with Ionic, but may not be supported. For macOS, the built-in Terminal app is supported. Git Bash (from git-scm.com) does not support TTY interactivity and is not supported by Ionic.

ビルトインのシェルを使ってくれ（Git bash等は対応していない）
WindowsはCommandPromptとPowerShellは対応している。WSLは動くらしいけどサポートはしないよ

まあ、iOSビルドもあるし、基本的にはMacで開発するのが当然のようだ

Windowsで開発してみた

ionicでserveすると [ERROR] ng has unexpectedly closed (exit code 127). - C++幼女 みやたけゆき
先日記事にかいたが、とあるnodeのバージョンでは、起動時にエラーが出るという問題にピンポイントにぶつかったが
基本的には問題なく動いた

が、ライブリロードが効かないのである！！

Ionic live reload not working. · Issue #495 · microsoft/vscode-cordova · GitHub
など、様々なページでWindowsだとLiveReloadが効かないという話が出ている

ionicの起動はお世辞にも速いといえない（私のMBPで30秒かかる）ので、これは何とかしたいものだ・・

WSL2を使ってみた

公式からはサポートしないと言われているWSLを使ってみる
私はWSL2にしているので、WSL1はどうなるかわからない

まず、Windowsパス（/mnt/c の下）でionicを実行したが LiveReloadがされない
このパスはWSLからみるとCloud9でマウントされたネットワークドライブなので
挙動に問題があっても仕方がない

次に、Linuxパス(例えば ~/ の下) でionicを実行すると LiveReloadが実行された！！
しかも ionicは10秒で起動する
とても快適な環境が構築された！

ionicのチュートリアルをする

github.com

ionicのチュートリアルを空き時間に勉強している

初めての Ionic アプリ: Angular - Ionic Framework 日本語ドキュメンテーション 最初なので上記の記事をみながらかいている ただし、日本語化がされておらず、単純にコードをコピーするわけでなく
多少頭を使う（英語を読む）部分もあるので、一筋縄ではないが
これはこれで、多少頭を使って、単なるコピペにならないようになり
私も、記事を書くときに参考にしようと思う

だいたい一通りはわかったが、英語なのでよくわからないので
結局最後はコードをみて調べることにする

今は、iOS、Androidへのネイティブビルドまでいったが
iOSビルドをするために cocoapodsが必要であった

そういえばそんなもの、2光年前にインストールしたけど、環境リセットで消したんだった

まだ実機でのビルドはしていないが、だいたいわかってきた

ionicでserveすると [ERROR] ng has unexpectedly closed (exit code 127).

ionicを起動しようとしたときに下記のエラーがでた

[ERROR] ng has unexpectedly closed (exit code 127).

nodeのバージョンは下記
node v13.3

$ node
でコンソールに入り

const uuid = require('@loopback/context').uuid

と入力してエラーが出れば、node_modules\uuid が無い

諦めてnodeを別のバージョンにすれば解決

ionic frameworkを触ってみる

緊急なお仕事が入ってきまして、ionic frameworkを触っています

ionic frameworkとは

Web/iOS/Android/PC のハイブリッドフレームワークの1つです
PWAのようなWebViewではなく、完全にネイティブコードの出力を行います
いわゆる下記の仲間になります

ハイブリッド

PhoneGap（Cordova）、Monaca、Capacitor

クロスプラットフォーム

Xamarin、React Native、Flutter、Kotlin Native・・

ハイブリッドとクロスプラットフォームの違いはここでは
ハイブリッドはUIをHTML＋CSSで作り
クロスプラットフォームは専用のUIで作る事とします

ハイブリットフレームワークにした理由

スケジュールの関係から、WebデザイナーにUIを作ってもらう方がよかったからです
そのため、必然的にionicを採用することにしました

ionicインストール

インストールは非常に簡単でした
今回はAngularとCapacitorを使います
まずnodeとnpmを新しくしておき

npm i -g ionic 
npm install @ionic/angular@latest --save
apt install ng-common
npm uninstall -g ionic
npm install -g @ionic/cli


ionic start test_app --type=ionic-angular

これでテンプレートを作成できる

typeオプションでは下記の設定が可能だ

• angular
  ionic-angularとの違いがまだわかってない
• react
  reactも対応したらしい
• ionic-angular
  angularとの違いがまだわかってない
• ionic1
  過去の遺物なのでもう使わない

今後 Vue等も対応されるようだ

今回はTabアプリを選んだ

実行

ionic serve

これでブラウザで実行できる

AWSのAmazonLinuxで色々はまる件

nginxで簡単なサーバをデプロイするタスクで、色々とはまった

タスク

nginxでRTMP通信を受けて、別のRTMPサーバにリレーするサーバの構築
ローカルのUbuntu（WSL）ではあっさり動いたので、AWSでもすぐできると思ったが、いろいろなハマリポイントがあった

インスタンス作成から設定

テストなのでmedium程度のインスタンスを作成しセットアップ
OSに悩んだが、なれたUbuntuもいいが、AmazonLinuxにした
インバウンド、アウトバウンドを設定する
RTMPなのでTCP1935を開け、疎通確認やHLSの取得に80も開ける。sshも開ける

インストール

nginx-rtmpモジュールはnginxをビルドする必要があるので、yumで開発ライブラリを入れる
AmazonLinuxはCentOS系で、yumで入れられるものが極端に少ない＆古い
そのため、速攻でEPELを有効化する
そして yumを行うがyumがエラーになる
調べてみると、AmazonLinuxはyumのパッケージリポジトリにS3を使うらしく、VPCの設定からS3の許可をする必要があった
エンドポイントすら作成してなかったので、VPCにエンドポイントを作り、S3の許可を与える
yum出来た

開発に必要なツールをyumで入れ、nginx、nginx-rtmpのソースを落として、ビルド

www.servermania.com

Ubuntu例だが、設定は同じなので。

ソースビルドして実行するもエラー
このあたりはCentOS特有のセキュリティ強いので設定をする

nginx関連のユーザやグループを設定し、ファイルやフォルダに適切に権限を与え
存在しなく怒られていたディレクトリを作成
などなど行い、やっとHTTPが動くように

そこからnginxにRTMPの設定を行うも
vimの表示が壊れたり、コピーペーストするとゴミが入ったりで苦労した

結論

CentOS系はセキュアな反面、色々とハマる

尊敬するエンジニア、堤修一さんのYoutubeを見て

www.youtube.com

みなさん、ちゃんと堤さんのYoutubeを見て、チャンネル登録してくださいね！

私の思っている事（ただし出来てない事）と同じ事を説明していたりします

どうしても仕事が忙しくなると、アウトプットがおろそかになります
私も、アウトプットが最重要で、仕事を断ってでもアウトプットすべき
アウトプットしてたくさんの人にリーチすれば、仕事を選ぶ幅が広がりますからね

ただ、私の場合は目の前の仕事に忙しく、アウトプットを後回しにしているのだ・・
それは本当に良くないので、再度気を付けようと思う

あとは、アウトプットメディアについても興味深い。

アウトプット方針を考えなければならない
今後は下記のようにアウトプットの方針を決めようと思う

Qiita

私はお手軽でエンジニアがなんだかんだ観てくれるので好き
技術に特化していて、非常に技術記事を書きやすいのが素晴らしい
ただし、ｘｘさんの情報ではなく、Qiitaの情報となるので、名前を売るには弱い
なので、お手軽に技術情報やポエムをのせていこうとおもう

はてな

Qiitaに比べると技術記事を書きにくい（Markdownが厳密）であるが
個人の名前を売るには、これがベストである
Qiitaに書きにくい会社の運営の事や、自分を売るための技術ブログ
として、今後はメインに据え置く事にしよう
技術ブログとしてはQiitaと同じ内容を投稿することになるかもしれない

note

テストで書いた事はある程度だが、noteは現在3つの種類の記事が書ける

無料記事

技術の話はオープンに流したいので、全部無料で書く
多分最もライトな書き込みにするかも。
定期購読もあるのでファンを増やす事が目的にしよう

定期購読

定期購読をする読者＝ファンなので、マネタイズは考えていないが、ファンをつけて、ファンが喜ぶ　ふんわりした内容を書いてもいいかもと思ってる
唯一、読者に媚びるメディアとして、技術的な事はIndex程度にして、それ以外の事を書いていこうかと思う
進捗報告的な物を書くかもしれない

有料記事

今のところ有料記事を書く予定はないが、どうしようかなあ・・・
めちゃ頑張った記事は読ませたいので無料に置きたい
もしかしたら営業用や、会社経営のリアルな数字を出すときに使うかもしれないが
基本的に今はノーアイディア

Youtube

個人的には、これからボイスログだと思っているので、技術VLogを流行らせたい
今のところテスト

Twitter

なんだかんだ必須のメディア
もっと積極的にチラシの裏しよう

go testify

いま仕事で、一斉にTestを書いている
つまり、今までのツケが回ってきた

Goのテストフレームワークの中でも、Testifyが一番シェアが多いように思われる
testifyにはAssertion、mock、suiteなどがある
今日始めたばかりでノウハウはまだないが、いずれまとめたい