開発ノート ⁽⁹¹⁾

ionic2でハイブリッドなアプリ開発：チュートリアルをチュートリアル：サンプルプロジェクトを導入して実機で実行するまでこの記事の通りですが、とりあえずionic2のサンプルをそのままならば実行できる状態になりました。が、もちろんそれでは何も面白くありませんので、チュートリアルの本編を敷衍して、アプリ開発の流れを俯瞰します。なお可能であれば以下のionicチームによるAngular2の解説を読んでおくと、よりスムーズに理解できると思います。が、たぶん読まなくても何とかなります。Learn Angular 2 · Learn Angular 2 まずプロジェクトのフォルダを作成します。前回、紛らわしいのは避けるようにと書いたくせに、project2と付けてしまいました。tutorialとなっている引数は、プロジェクトのテンプレートを指定する部分です。tutorialは公式が提供しているionic2のチュートリアルのためのテンプレートです。何も指定しない場合には、tabs starterテンプレートが使用されます。 $ cd project2$ ionic serve ちなみにですが、ionicには公式IDEは無いようですが、オススメ環境はあるようです。Ionic 2 Resources | Editors and IDEs – Ionic 2 Developer Preview – Ionic Framework私はもともとatomを使っていたのですが、さらにオススメとあれば使わない手はありません。atomで環境を構築する事にします。コードハイライタや補完機能はもともと備わっているので、とりあえずbrowser-plusを入れて、全画面表示でコードとブラウザの両方を同時に見られるようにしてみました。Terminal-Plusも入れているので、ターミナルも同一画面内で操作できます。これでmonacaのcloudIDEっぽくなりました。 ionic startを実行してできあがるフォルダツリーはCordovaの標準的な構成らしいです。そのためCordvaプラグインをインストールすることができますし、プラットフォーム特有のファイルを置くこともできます。www/index.htmlがアプリの一応のエントリポイントです。 アプリに必要となるスクリプトをこのHTMLから読み込みます。ですが、このファイルはcssを読み込んだり、bootstrapを読み込んだりするためだけのものに過ぎません。ionicの開発でこのファイルをいじることは少ないようで、実際にはapp/app.jsをエントリポイントとして扱います。ionic開発ではこのappフォルダにコンパイル前のコードが収蔵されていて、作業の中心的な場所になります。このフォルダ内のコードはionic serveの実行時にトランスパイルされるので、appフォルダではES6やTypescriptが使用できます。app.jsのMyAppクラスには以下のデコレーターが付いています。すべてのionicアプリケーションはルートになるコンポーネントを持ちますが、Appデコレーターを付けるとルートと扱われます。指定されているtemplateUrlがbuildフォルダになっていますが、このファイルはapp/app.htmlがビルド時にコンパイルされたものなので、編集する際にはapp/app.htmlを編集します。 Pages {{p.title}} id属性で指定されている名前は、後でこのコンポーネント（ion-menuとかion-navのひとまとまり）をgetComponent関数で指定するために使用します。 起動直後の画面では、Menusを使っています。Menus : ionic 2 Components – Ionic 2 Developer…

ハイブリッドアプリでシステム開発:JSでボタンへのイベント登録はloadの後じゃ無いとだめ | 法務ネット：弁護士 川内康雄先日Monacaも軽く触っていたのですが、感想はデバッガが良くできているなというところでした。そこでIonicとMonacaの開発の私的なサクサク感を比較してみたいと思います。ちなみに比較対象のMonacaはフリー版です。CLIが使えるGold以上だとまた印象が変わってくるのかも知れません。ionicもMonacaも、「HTML5+JavaScriptハイブリッドアプリ」という点では同じですので、ブラウザで開発中のアプリの実行結果を確認できます。Monacaの場合はクラウドIDEですのでクラウド環境での実行、ionicはionic serveコマンドでサーバーを作ってローカルで実行という違いはあります。が、レスポンスに特段の差は無く、デバッグのサクサク感はそれほど変わらないと思いました。ChromeのJavaScriptコンソールによるデバッグ情報の表示も、どちらの環境も同じように行えます。強いて言うとバグやconsole.logの実行行の特定が、ionicの方が若干楽という程度でしょうか。app.bundle.jsがエディタ上で簡単に見えるので、対象行の発見が楽です。が、Monacaにしてもchromeからソースを追えば発見可能です。一方、実機上でデバッグを行う場合には、両者の使用感には差があります。 Monacaの場合は、クラウドIDEでの開発内容をMonacaアプリにダウンロードして実行します。もともとIDEがクラウド上にありますから、ビルドする度にアップロードをするという手間がかかりません。またビルドも自動的に実行されるので、コードを保存したらすぐにMonacaアプリで結果を確認できます。そしてconsole.logの内容は、アプリのフローティングメニューからたどれる表示画面で内容を確認できます。更にネットワーク経由で送信されているようで、少し遅れますがクラウドIDEに情報が表示されます。ionic viewはmonnacaデバッガーにぱっと見は似ていますが、・コードを変える都度ビルドしてアップロードするという手間をかけないと変更が反映されない・これ自体にデバッグ出力を持っていないのでconsole.logを確認できないという制限があります。そのためがんがんコードを書き換えながら実機で確認するという用途には余り向いていません。How to debug on Ionic View [not the question， here’s the answer!]この方法でconsole.logを確認することもできそうですが、出自の分からないサービスだと継続性やセキュリティの問題がありますので、簡単に頼ることもできないと思います。ただしionicにはライブプレビューという機能があります。これは、母艦にAndroidを有線で接続している場合には、ionic runを-lオプション付きで起動すると、ソースを変更する度に自動的にAndroid実機に反映されるという仕組みです。-cオプションを付けている場合には、ionic runを起動したコンソールにログが出力されます。そんなわけでデバッグ環境の充実度、使いやすさはionicよりもMonacaが一歩リードしていると感じました。次は実際にコードを書いてみて、開発しやすさを比較してみたいと思います。”””

ionicのローカルテスト環境はブラウザ上で動いているので、ブラウザのCORS制限に引っかかります。別にプロキシをインストールする方法もあるようですが、ionic CLI自体にプロキシ機能が備わっているようなので、これを使うことに。How to fix CORS issues， revisitedHandling CORS issues in Ionicが、ここらへんに書かれている設定をいじってもウンともスンとも反応しません。404になるだけです。 というか、ionic.projectを消してしまってもブラウザ環境でプログラムが走ります。この設定ファイルってそもそも関係無いのではと悩んでいて、フォーラムに質問を投げたら回答をしてくれる人がいました。Proxy Problems with Ionic 2設定を記述する場所がionic2で変わったようで、ionic.projectではなくてionic.config.jsに記述するとのこと。 早速実行してみると、ブラウザからローカルのプロキシのポートにアクセスしても、ちゃんと目標の所に転送（というか代わって取得）してくれました。スクリプトからもOKです。こういう人柱的なところがあるのはベータ版を使う際の悩みですね。”””

Raspberry PiでIoTなシステム開発： Raspberry Pi にバイナリでNode.jsをインストールしばらく前に公式サイトからnodeのARM用バイナリが提供されなくなり、ネットでバイナリを探してインスト−ルをしていました。が、遂に公式でのARM用バイナリの配布が再開されたようです。それもv6/v7/v8も、4系も5系もとう大盤振る舞い。[pi@raspberrypi:~ $ curlcurl: try ‘curl –help’ or ‘curl –manual’ for more informationpi@raspberrypi:~ $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed100 7766 100 7766 0 0…

Raspberry Pi上でTypescriptのコンパイルをやってみようと思い、tscを実行してみたところ、コマンドラインにもどって来ません。あれ、コンパイラが壊れているのかなと思っていたら、その後で戻ってきます。単に時間がかかっていただけのようです。tscには計測機能がついているのでコンパイル時間を計ってみるとこの通り。 pi@raspberrypi:~/ts $ tsc --diagnostics st.tsFiles: 2Lines: 17319Nodes: 77389Identifiers: 29814Symbols: 44284Types: 4340Memory used: 32591KI/O read: 0.02sI/O write: 0.00sParse time: 2.20sBind time: 1.37sCheck time: 6.05sEmit time: 0.23sTotal time: 9.86s なにか凄いコードをコンパイルしたとか言うわけでは無く、公式のこの５行のコードを食わせただけです。 function greeter(person: string) { return ""Hello， "" + person;}var user = ""Jane User"";document.body.innerHTML = greeter(user);…