Webブラウザからアクセスできる端末側の機能は増加しており、Webアプリでも随時サポートしていく姿勢が必要です。Webアプリの進歩を止めてしまえば、Webアプリの存在自体が過去のものとなってしまうでしょう。 PWAは比較的新しい概念ですが、開発コミュニティでは以前から活発に議論されています。コミュニティの参加者は過去2年間で堅実に成長しており、今後も一定のペースで増え続けていくでしょう。 著名な企業もこの時流に乗りPWAを採用し始めています。たとえば、Twitter（3億2,800万人のユーザーを有するソーシャルネットワーク）とAliExpress（世界最大級のeコマースサイト）では、すでにPWAを実用化しています。実用化されているPWAを手に取って確認したい方は Twitter Lite をお試しください。 PWAのメリット PWAには次のようなメリットがあります。これらは開発者・エンド
MonacaでPWAを作ってFirebaseにDeployする Monacaはアシアル株式会社が運営しているアプリ開発環境で、 3個までの非商用のプロジェクトであれば無料から使えます。 Monaca クラウド IDEというブラウザ上で動くIDEを使用すると 環境構築の必要なく、iOSやAndroidアプリの開発ができます。 また最近では、ネイティブアプリのような動作をするウェブアプリである PWA(Progressive Web Apps)の開発も可能です。 Monacaは外部サービスと連携してクラウド IDEから 直接Deployすることも可能です。 FirebaseでBasic認証 社内専用のアプリやテスト用のアプリのように公開されては困る場合 アクセス制限のためにせめてBasic認証くらいはかけたいですよね。 FirebaseでBasic認証をかけてHostingするやり方については
cordova-plugin-inappbrowser v3.1.0から、message イベントが追加されています。詳しくは、InAppBrowser.addEventListener を参照してください。 このmessageイベントは、targetを _blank で実行した InAppBrowser で使用することができます。InAppBrowserで開いた外部サイトからメッセージを送信し、アプリ側がメッセージを受信すると、アプリ側に設定されているmessageイベントのコールバック関数が実行されます。 このmessageイベントを使用すると、外部サイトから送信されたメッセージ内容によって、アプリ側の処理を変更するということもできます。 messageイベントの使用例 アプリ側にInAppBrowserのmessageイベントを設定し、InAppBrowserで表示している外部サイト
PWA（Progressive Web App）は、主にスマートフォン向けのWebアプリをネイティブアプリ風にするためのテクニックとして注目されています。あまり知られていませんが、PWAはデスクトップのWebブラウザでも恩恵があり、キャッシュを使った高速化や、Webプッシュなどの機能が利用できます。さらにブラウザにGoogle Chromeを使うことで、PWAに対応したWebアプリをデスクトップアプリケーションのようにインストールすることができます。 今回、クラウド版のMonaca IDEもPWAに対応し、皆さんのローカルコンピュータ上に配置できるようになりました！ 利用手順は、WindowsもmacOSも同じ操作になります。 Google Chromeの設定を変更する 執筆時点（2019年01月現在）ではデスクトップPWAに対応するためにGoogle Chromeの設定を変更しなければな
祝PWA対応！MonacaアプリをFirebase/GitHub Pagesへデプロイする 2018年12月3日 技術情報 Firebase, GitHub Pages, Monaca, PWA 中津川篤司 MonacaはHTML5/CSS/JavaScriptを使ってスマートフォンアプリを開発します。ネイティブのプラグインも使えますが、基本的にはWeb標準の技術を用います。そのため、アプリのコードをWebサイトでも使いたいという声をよく聞きます。 そこで、アプリとWebサイトをゆるく繋ぐ技術として注目したいのがPWA（Progressive Web Apps）です。PWAは特定の技術ワードという訳ではなく、Webアプリケーションをよりスマートフォンアプリに近づけるためのベストプラクティス集といった位置づけになります。 先日、MonacaがPWA開発に対応しました。今回はその基本的な使い方
スマートフォンアプリを日々受託開発されている【エンジニア】の皆様を対象に、 Monacaによる【プッシュ通知機能】組み込みハンズオンを開催致します！ 最近のアプリにおいて、「プッシュ通知」はゲーム・ツールなどのジャンルを問わず必須の機能になってきています。 とはいえアプリによってプッシュ通知の機能が大きく変わるということはなく、 基本的には「予約配信」「絞込み配信」などのシンプルな機能が【安定】して利用できればよい、というケースが多いでしょう。 そういった場合には、mobile backendのようなプラットフォームサービスの活用で、 開発・テスト・運用の手間や工数を【大幅カット】するのがオススメです！ 本セミナーでは、前半にて「受託開発におけるmobile backend活用によるアプリ開発の効率化」「プッシュ通知が必要な理由」についてセミナー形式にてご紹介した後、後半に「Monaca×
今回は実際にpush通知を端末に送ることと、push通知受信後の挙動も制御してみました。 前回の記事：https://utage.headwaters.co.jp/blog/?p=6406 目次 実装【Monaca】 FireBase送信画面【Firebase】 受信【端末】 モーダル表示(応用)【Monaca x Firebase】 1.実装【Monaca】 Android端末でpush通知を受信できるよう準備します。 ・下記のソースを記述 <script> ons.ready(function() { /** * ［プッシュ通知設定］ */ window.FirebasePlugin.grantPermission(); window.FirebasePlugin.onNotificationOpen(function(notification){ console.log(notifi
アプリを識別する一意の ID です。 逆ドメイン形式を推奨します ( mobi.monaca.appname など )。 英数字とピリオドのみ使用できます ( ピリオドは最低限 1 つ使用 )。 各節 ( 各レベルのドメイン ) はピリオドで区切り、各節の先頭には英字を使用します。 ※Monaca 上でのアプリ設定では、App ID に、アスタリスク (*) は使用できません。 ※使用した場合、ビルドが失敗します。また、この App ID には、iOS DevCenter で登録した/する Explicit App ID と同じものを使用します。 設定後、 保存する をクリックします。 ・iOS のビルド設定 Monaca クラウド IDE のメニューから、 設定 > iOS ビルド設定 を選択します。 既存の秘密鍵をインポートする場合には、その秘密鍵に関連付けされた証明書も Monaca
今まではAngularの1.4とOnsen UIでMonacaアプリを作っていたのですが、新しくMonacaアプリを作る際のフレームワークとしてOnsen UI for Vueを使ってみたかったので、試しに簡単なTODOアプリを作ってみました。 Monaca CLIでプロジェクト作成 Onsen UI for Vueはコードのコンパイルが必要なのでクラウドIDEでは作成できません。 コンパイルが必要なMonacaの新規プロジェクトの作成には、MonacaCLIが便利です！ MonacaCLIの詳しい紹介は省きますが、今回は Onsen UI and Vue.js のミニマムテンプレートをベースに作ってみます。 プロジェクトを作成して monaca preview でプレビューしてみるとこんな画面が表示されます。 ミニマムテンプレートの中身を覗いてみる 何やらたくさんファイルが入ってます。w
Cordovaとは Cordova（旧PhoneGap）は、HTML5/CSS/JavaScriptといったWebのクライアントサイド技術でモバイルアプリを制作するためのフレームワークです。 通常、iOSやAndroidのアプリ開発には以下のように異なるネイティブ言語と開発環境を利用しなければなりません。 OS ネイティブ言語 開発環境 そこで、プラットフォームに依存しないアプリを制作するための手法として、最近注目を浴びているのがCordovaです。 Cordovaでは、HTML5で作成したソースコードをWebView上で実行する仕組みにより、 ワンソースでマルチプラットフォームに対応したアプリを制作することができます。 また、ネイティブコードからしか実行することができない、 カメラやコンパスなどの端末固有の機能へのインターフェイスも提供されています。 これにより開発者はネイティブコードを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く