開発

ハイブリッドアプリの開発でChromeに入れておくと便利な拡張機能

投稿日:

Apache Cordovaなどのフレームワークを使ってハイブリッドアプリの開発をおこなう際に入れておくと便利なChrome用の拡張機能を3つ紹介します。

実際に作業しているのはIonic 1.3.1とちょっと古めなんですが、他の開発環境でも共通で使えると思います。

QRコード作成器 (Quick QR)

QRコード作成器 (Quick QR)

これは定番なので既に入れている人が多いかもしれないです。

アプリ開発に限らず、スマートフォンサイトを実機で確認する場合にも便利です。

それまではQRコード作成するサイトでアドレスを入れて作ったQRコードを撮影していたのでかなり楽になりました。

Restlet Client

APIのデータを参照するのに便利な拡張機能です。

これを使うまでは主にソース上にconsole.logを仕込み、Chromeのデベロッパーツールからデータを見るといった方法をとっていましたが、ちょっとした確認だったらわざわざプログラムをいじらなくても済みます。

起動時にサインインする画面が出てきますけど、下の「Use without an account」を押せば普通に使えます。

Restlet Client「Use without an account」

HTTPメソッド、URL、クエリーパラメータを入れて送信すれば下部にレスポンスが表示されます。

Restlet Client

条件は保存しておけるので一度登録してしまえばいちいち資料を確認しなくても大丈夫。

保存してある条件を変更してそのままSaveして上書きされてしまうといったことが何回かありました。元の条件を残す場合は忘れずに横のプルダウンからSave asを選ぶようにしてください。

シナリオを作成して複数のAPIを叩くといった高度な使い方もできます。

Allow-Control-Allow-Origin

Allow-Control-Allow-Origin

ビルドして実機で確認すれば問題ないのにPCのブラウザ上でエミュレートするとデータが取得できないといった問題が発生した時に使いました。

原因としてはセキュリティ上の問題で異なるオリジン(ドメイン、プロトコル、ポート)からの HTTPリクエストを制限してしまうことだったようです。

このままでは動作チェックする度に毎回ビルドしなければなりません。

それを解決してくれたのがこの拡張機能。

「Enable cross-origin resource sharing」のスイッチをいれるときちんとデータが取れるようになりました。

注意点としてはハングアウトを使う場合にスイッチを入れたままにしておくと、メッセージが送れなくなってしまうことです。

使った後は忘れずにスイッチを切るようにしましょう。

-開発
-

Copyright© Workerブログ|仕事を続けるための工夫 , 2020 All Rights Reserved Powered by STINGER.