アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

【裏話付】LaravelJPCon2019公式アプリをVue+Onsen UI+Monacaで作った話

明けましておめでとうございます、江口です。

2019/02/16(Sat)にLaravelJPCon2019というイベントが開催されました。
conference2019.laravel.jp


公式アプリ

LaravelJPCon

LaravelJPCon

  • Asial Corporation
  • ユーティリティ
  • 無料
play.google.com



公式Twitterはコチラ

セッションはLaravelネタに限らず、アプリケーションdeploy設計の話や、RDBMSに焦点を当てた話など、幅広くも奥深く、実践的な話が繰り広げられました!
また、別室ではLaravel相談会やUnitTestハンズオンも開催されており、初心者の方でも1からLaravelについて触れられる素晴らしい企画もありました。

委員長ytakeさんもブログ書いておりますので、全体の雰囲気はこちらに目を通して頂ければ伝わるかと!

blog.ytake.jp.net


なので、私からは以下の観点でLaravelJPCon2019についてブログにまとめてみようと思いました。

  • [裏話]初めてのコアスタッフ
  • 公式アプリができるまで
  • 無事にイベントを終えて...

[裏話]初めてのコアスタッフ

初めてのコアスタッフと書いてますが、実はイベントのスタッフ自体未経験です。。。
元々業務でもプライベートでもLaravelを使うことが多いのもあり、イベント運営側のことも知ってみたいと思うようになりました。
そこでLaravel系 or PHP系のイベントがないかTwitterで探していたところ、こんなツブヤキを見つけたのです。

f:id:eguchi_asial:20190217231142p:plain
コアスタッフ応募

「若干名?!急がねば!!!」。ソッコーでDM送って「スタッフ」になりました。
そのすぐ後にこれです...!!!

f:id:eguchi_asial:20190217231325p:plain
締め切り

無事に「スタッフ」となり、専用のSlackに招待され、軽く挨拶をしつつも、過去の会話なり今のやり取りを見て、何か違和感を感じました。

....あ、もしかしてこれ、想像してた「スタッフ」と違うのでは...???
チャンネルも「core」って書いてある。。。

そうなんです。私、焦りすぎて気づかなかったんですね。
本当は1day-staff的な気持ちで応募したら、「コアスタッフ」だったんですね!!
今改めて応募のTwitter見返したら「コアスタッフを若干名募集!!」って書いてありますね。。。
やっちゃいました。


でもいい機会だし、今抜ける方が迷惑なので、もう無心でやりきっちゃろ!と考えるようになりました。
Slackで流れを見る限り、自分が参加する前から、カンファレンス当日までの段取りやissuesもある程度固まっているようでした。

ではどこの馬の骨ともわからない自分が、イベント運営の勝手もわかっていない自分ができることは何だろう??
指示待ちでSlackを眺めているだけで焦る時間がしばらく続く中、こんなメッセージがありました。

担当できる人がいたら嬉しいなシリーズ

  • カンファレンスアプリ開発担当

これじゃね??
マルチプラットフォームなアプリを超短納期で作れる自信はある!!APIもアプリもワシやれます!

またも勢いでSlackで挙手し、「Monacaでアプリ作ればAndroidもiOSも作れますー!!」と提案したら、意外にあっさりアプリ担当に任命されたという、ありがたいお話な訳です。


これで自分もやっと役に立てる!

まあ、今になって思えば、本当に誰ですか?って感じの私をよく信用してアプリ作られせてくれたなとは思うんですよね。。
最初は怪しまれように会社名を出して名乗っていたとは言え、個人レベルでは信頼も何もないのですから。

コアスタッフの皆様の心の広さに感謝です。


ここまでがコアスタッフになるまでの裏話です。

カンファレンス当日は設営班としてお手伝いさせて頂きました。
緊張で夜眠れず、AM3:00に就寝し、AM5:30に起床し、支度を済ませて会場に向かいました。

f:id:eguchi_asial:20190218113038j:plain
早すぎて入れない...

到着が早すぎて会場に入れないという、完全に素人のソレです。
ちなみに1番乗りでした。

勉強になることの連続でした。。。。


公式アプリができるまで

公式アプリを作るに当たって、まず以下のことを行いました。

  • 情報収集
    • コンセプトは何だ?イメージは何色か?グランドデザインはあるのか?
  • よくあるカンファレンスアプリとはどのような機能でどんなUIなのか?
  • スケジュールは逆算してどれくらい?
  • iPhoneアプリ審査通るのだろうか?

スケジュールは2018年12月上旬に要件定義デザイン、中旬に開発着手し、2018年内までにはAPPLEに申請まで完了させることです。
これを本業の合間に作業するので中々タイトなものです。

まずは要件定義・デザイン。

いくつかカンファレンスアプリを研究しましたが、結構機能もUIもバラバラ。
概ねタイムテーブルとカンファレンスの概要、外部リンクが見れるといった感じ。

LaravelJPConに限っては、「赤い富士山とロゴ」は事前に頂いていたのでこれだけは譲れない!!

UIUXデザイナー出口のこだわりは以下のメモ。



【全体】
カンファレンスを見に来てくれた人にとって重要な情報ほど、画面の上部に来るようにしたこと。
(これは、カンファレンスアプリであり、あくまでもカンファレンスを見に来てくれた人を優先する)
主催者、スポンサー、登壇者情報はカンファレンスの内容に直結しないので、配置位置を下げるなど。

【タイムテーブル】
開始時間が同じなのに、会場となっている部屋が異なっている場合があるようなので、
開始時間ごとに区切ってわかりやすくしたこと。

【タイムテーブル詳細】
せっかく登壇していただいた登壇者自身のことをアピールできる場になればと思い、
アイコンを大きく入れたデザインにしたこと。


上記を踏まえ、あとはデザイナーが「イイ」と思ったデザインUIでお任せしつつ、
「アプリらしさ」を取り入れること、「このアプリがなぜ必要か」をAPPLEに説明しやすい形にするのがアプリ最短リリースへの道だろうと結論付けました。


デザイナーから手書きのラフをもらい...

f:id:eguchi_asial:20190218001758j:plain
ラフ画1枚目
f:id:eguchi_asial:20190218001824j:plain
ラフ画2枚目


色をつけて簡単な画面項目定義書を形にし、

f:id:eguchi_asial:20190218114112p:plain
画面項目定義

f:id:eguchi_asial:20190218114143p:plain
アイコンの定義

f:id:eguchi_asial:20190218114208p:plain
アイコン案

実行委員に共有し、イメージを伝えます。
イメージが伝わったら後はもう、物(アプリ)をとっとと作って逐一見てもらうだけです。

>逐一見てもらう
Monacaには「プロジェクト共有」という便利な機能があり、MonacaデバッガーにMonacaアカウントでログインしていれば、手元の端末でLaravelJPConの開発中アプリがいつでも動かせる訳です!!
この機能、本当に便利なのでチーム内でもクライアント様を挟んだプロトタイプ開発にでも使えてオススメです。
仕様確定のスピードが一気に上がります。

>iPhoneアプリ審査通るのだろうか?
ここ、結構悩みました。
ただのタイムテーブル確認ならWebサイトがあるし、「アプリの必要性とは??」に悩みます。
そのため、結果的に以下の機能を設けることでカテゴリー「SNS」として審査に出すことにしました。

  1. セッションへの「いいね」機能でフィードバック
  2. ハッシュタグTwitter連携でいつでも呟ける
  3. PUSH通知でセッション開始10分前にアラームしてくれる

想像以上に早く審査が降りてくれたので、本当にホッとしました。。。
2と3はコアスタッフの方からの意見で実現しました。さすがカンファレンスジャンキー(?)です。欲しい機能を完璧に把握してました!!

3のPUSHはlocalプッシュです。目覚まし時計みたいなものです。

こちらが当日実際にPUSH通知を受信した画面です。

f:id:eguchi_asial:20190218121551p:plain
PUSH通知受信した様子
※ちゃんとPUSHくるかドキドキだったので、当日はガッツポーズで喜んでましたw

最後に、公式アプリがどんな技術でできているのか?当日聞かれることが多かったです。嬉しいです。
今回のアプリは以下のような感じです。

  • アプリ・フロント
    • Monaca
      • プロジェクト共有やリリース時に利用
    • Cordova8.1.2
    • cordova-android 7.1.1
    • cordova-ios 4.5.4
    • vue 2.5.16
    • vue-onsenui 2.6.1
      • 全体的なデザインコンポーネントと主にページ遷移のstack管理に利用
    • vuex 3.0.1
      • stack管理やその他状態保持に利用
  • API
    • Lumen v5.7.6
  • サーバサイド
    • AWS

f:id:eguchi_asial:20190218120032p:plain
インフラ構成図

フロントのソースコードが見たいという方も何名かいらっしゃったのでGithubのリンク載せておきます。
https://github.com/yueguchi/LaravelJPCon

※スピード重視で作ってます。ご了承くださいw

無事にイベントを終えて...

最高でした。
もっとコアスタッフ、1dayスタッフの方々と挨拶、情報交換したかったですが、当日はそんな余裕はなくw
まあ、主役は来場してくださったお客様とスピーカー様なので、また別のカンファレンスで機会があれば積極的に参加していこうと思いました。

  • コアスタッフの皆様
  • 1dayスタッフの皆様
  • アプリのデザインにご協力頂いたデザイナーの出口さん、鴨田さん
  • 来場者の皆様
  • スピーカーの皆様

本当にお疲れ様でした。ありがとうございました!
PHPやLaravelの知名度が高いのは、上記のような方々が牽引してきてくれたからこそ、日本語の情報量も多いのだと感じました。
知らぬ間にいつもお世話になっていたのですね。

また、「自分もカンファレンスに関わってみたいけど、、、」と少しでも思っているけど躊躇している方へ。
飛び込んでみてから考えましょうwなんとかなります!
飛び込めばあとはやるしかないだけですし、やらないよりやった方が得るものが多いのは明白です!



カンファレンスのアプリで相談ありましたら弊社にどうぞw
次回また何か機会があれば次はPWAで作ってみたいなーっと思っております!!


以上です。お付き合い頂きありがとうございました。

Onsen UIが生まれたきっかけ



本記事はOnsen UI Advent Calendar 2016のエントリーです。Onsen UIが生まれたきっかけについて、簡単に紹介したいと思います。

当時PhoneGapといわれていたCordovaに足りなかったもの



2009年頃からWebViewを用いた、今でいうHTML5ハイブリッドアプリ開発をしていた訳ですが、当時のデバイスはパフォーマンスも低く、ブラウザーの機能が貧弱だったことも相まって、満足のいくアプリをHTML5「だけ」で作ることがほぼ不可能と言ってもいい状況でした。

思い返すとiOS 4Android 1.6の時代です。まだposition:fixedも使えず、CSSトランジションも怪しい動きをしていました。

一方で、コンテンツをHTML5で記述することのメリットは多く、アプリのマルチプラットフォーム対応や、サーバーからの動的配信で内容をアップデートすることができるなど、この分野の可能性を感じていました。

それがPhoneGap/Cordova/Monacaにつながっていくわけですが、とはいえUIWebViewだけでは、iOSAndroidのネイティブUIにかなう表現ができなかったのは事実です。

そこでネイティブUIフレームワーク



そこで2010年からMonacaを開発するに当たり、どのようにハイブリッドアプリでUI部分でブレークスルーを実現するかが特に大きな課題だと考えていました。その結果、私たちのチームが開発したのは「ネイティブUIとUIWebViewを組み合わせる」というアプローチです。

具体的には、コンテンツの中身はUIWebViewで記述しつつも、ナビゲーターやタブといったネイティブなトランジションが圧倒的に有利な部分はネイティブで描画する、という仕組みでした。

PhoneGapの拡張エンジンとして、オープンソースでリリースしました(メンテナンスはしていませんが、いまでも公開は続けています)。



このフレームワークでは、複数ページをスムーズに遷移するため、マルチWebView構成になっていました。ようするに、次のページに遷移した場合には別のWebViewが作られ、ページスタックが作られます。

ネイティブUIフレームワークの課題からOnsen UIへ



ただしこの仕組みには一つ大きな問題がありました。それは、WebViewが複数に分かれるため、JavaScriptでスコープを管理するのが大変難しくなったということでした。新しいページが全く別のJavaScriptインスタンスとして表示されるため、同じアプリであるにもかかわらず、ページ間でリソースを共有することが難しかったのです。

また、JSON形式でUI定義を記述できる仕組みとしていましたが、その結果デザインのカスタマイズに弱く、多様な表現をしたいアプリにとって制約になってしまうことも問題でした。

一方、iOS 7やAndroid 4が登場しフラットデザインが主流になるなか、WebViewでフルにUIを実装することの現実味が帯びてきました。そこで、社内で議論を行った末、これまで作っていたネイティブUIフレームワークを捨て、Onsen UIに移行するという決断を行いました。

これからのOnsen UI



最初はAngular 1のディレクティブ機能を使って実装したOnsen UIですが、当初は日本語の文献も全くなく、Angularは難しすぎるのではないか?という危惧もありました。しかし一方で、Angular以上にうまく部品をコンポーネント化できる仕組みがなく、Angularを選定したという経緯があります。

昨今ではCustom Elementsも安定したことから、Onsen UI 2.0よりAngularへの依存をなくし、ピュアなWeb Componentsフレームワークとなりました。そのメリットを生かし、Angular 2やReactへの対応とともに、Vue 2といったメジャーなフレームワークのサポートを進めていきたいと考えています。

ぜひ進化するOnsen UIにご期待ください。そして、日本発の世界的フレームワークの挑戦に向けて、GitHubのスターで応援ください!

「HTML5モバイルアプリDay」大盛況でした!

先日 秋葉原UDXにて行われた「HTML5モバイルアプリDay」が

大盛況の内に終えることができました。

ご来場いただいた皆様、またご協力いただいたご関係者の皆様、

誠にありがとうございました。

国内初のMonaca/Cordova関連の総合展示交流イベントで、

40ブースを超える関連製品やサービスの展示ブース、

セミナー、ワークショップが開催されました。


アシアルブースへも多数足を運んで頂きました。







アシアル代表取締役田中正裕と

株式会社オープンウェブ・テクノロジー代表取締役白石俊平氏との

基調講演テーマ「急速に拡大するウェブ技術の世界」には

立ち見が出るほどご来場頂きました。


各ワークショップも大盛況で

当社主催の「はじめてのOnsen UIワークショップ」も満席となりました。


こちら講師のMonacaエバンジェリスト 生形さん

ワークショップの合間にはMonaca姫として盛り上げます。



今後も準備期間を重ねて更にパワーアップした

ウェブの技術やアプリ開発、に関連した

イベントを実施して行きます。

お楽しみに!

『HTML5モバイルアプリDAY』まもなく開催します!



HTML5モバイルアプリDAY」

日時:2016年11月14日(月)11時~19時

場所:秋葉原UDX4Fギャラリー
     
チケット及び詳細はこちら



HTML5モバイルアプリDAY」は、

 ウェブ技術を使ってアプリを企画開発する人のための総合展示交流会です。


 弊社代表取締役社長 田中正裕と

 株式会社オープンウェブ・テクノロジー代表取締役CEO 白石俊平 氏による

 基調講演も開催します。
 
 是非詳細をご確認ください!

チケット及び詳細はこちら

Monaca / Onsen UIの専用ブログを開設しました

マーケティング担当の塚田です。

これまでアシアルブログの一カテゴリーとして運営をしておりましたMonacaブログですが、この度新たにMonaca / Onsen UI専用ブログを立ち上げました。



今後はMonaca / Onsen UIブログにて、関連技術情報、イベント情報などをお届けしますのでよろしくお願いします。

第8回Apache Cordova勉強会が開催されました

CordovaやPhneGapといったハイブリッドアプリ開発に興味のあるエンジニアが多数集まる第8回Apache Cordova勉強会が西新宿のニフティ社にて行われました。80名近くの方々に参加いただき、大いに盛り上がった会となりました。



こちらはそのレポート記事になります。



Cordova/Electron の構造を知る



ソニー株式会社 関 康治さん





最近、デスクトップ向けのハイブリッドアプリ開発環境として知られるようになってきたEletronとCordovaの相違点について紹介されていました。



CordovaプラグインではどのようにしてネイティブとJavaScriptが通信を行っているのかについて紹介しました。特に面白いのはAndroidiOSで手法が異なるということです。AndroidについてはOSの提供しているWebViewをそのまま使います(後述するCrosswalkは異なります)。



JavaScriptからネイティブへの通信は2つあります。一つは_cordovaNativeを使う方法で、2つ目はPromptというOS標準のAPIをコールする方法です。対して、JavaScriptで処理を受け取る時にはハック的な手法が存分に使われています。まずポーリングで、50msごとに確認する方法を使っています。さらにLOAD_URL方式として、webViewにあるLOAD_URLにJavaScriptを埋め込んで実行する。最後にONLINE_EVENT方式。ネイティブで強制的にオンラインとオフラインを切り替えます。デフォルトはONLINE_EVENT方式となっています。



Crosswalkを使った場合。Androidアプリの中にCrosswalk(ブラウザ)を梱包します。使えるAPIが固定化されるメリットなどはありますが、プラグインの通信については特に変わりません。



iOSの場合。最近のiOS9からUIWebViewからWKWebViewに変わりました。それに伴って、通信方式が変わっています。iOSでは標準で用意されているので、JavaScriptからネイティブは簡単です。UIWebViewでは逆(ネイティブからJavaScript)はハックがふんだんに使われています。まずiframe方式で、iframeのハッシュを書き換えることでメッセージが飛ばします。さらにXHR方式で、ローカルでAjaxをやっているような感じの動きをします。iOS9のWKWebViewはメッセージハンドラーを使って簡単に通信しています。



なお、CordovaはUbuntu向けにも開発できるのですが、これはUbuntu Oneという携帯電話向けOS用に開発されています。実装としては、Qtに依存しています。UbuntuではメッセージAPIを持っているのでスマートにデータの送受信ができます。



最近ではテレビなどにもブラウザが含まれるようになっています。そこでCordovaを使って他のプラットフォーム向けにアプリ提供ができないかどうか試してみました。その場合、問題になるのは利用するブラウザを自前で用意しなければならないことと、JavaScriptとネイティブの通信方法を確保するのが困難でした。



そこでElectronに注目しました。ElectronはWindows/Mac OSX向けのネイティブアプリが作れます。コンパイルしてできあがるバイナリはNode とChromiumを足した感じ。Chromiumとnodeは良い感じに通信してくれます。Cordovaのハック的なやり方に比べると随分スマートになっています。



なお、Electronのリスクとしては、開発を一人でやっている、Chromium、nodeが入っているので重い、Chromiumのセキュリティアップデートよりちょっとタイムラグがあるといった点になります。



CordovaとElectronはwebViewの調達方法が違うというのが今回の結論でした。似たような技術ですが、取り組みがまったく違うようです。



質問としては以下がありました。



ソニーのグラスやデバイスといったプロダクトにCordovaに組み込んだことありますか?



製品としては答えられません。実験的な実装であれば、Cordovaを社内的に使っています。



Cordova × EdTech



エレファンキューブの支倉常明さん





まず事例の紹介がありました。学校の授業用ツールのカンガルー(iPad向けApp Store)になります。ある問題に対して、特徴挙げていきつつグルーピングします。マインドマップ的な、授業中に使う思考ツールです。アプリはCordovaで作られていて、データはlocalStorageに保存するようになっています。



このアプリを開発したきっかけは、新潟大学教育学部附属新潟小学校の片山 敏郎 先生の要望から始まったとのこと。そこに多くの教師が参加しつつ、実際に開発できるのですが人が支倉さんしかいなかったので開発することにしたとのことです。



Cordovaを使ってみて実感するのは開発が爆速であるということ。Web上でも動くようにしたので、確認がとてもスムーズに進む。



さらに別な事例として◯◯を紹介しました。◯◯は海外向けの日本語教育アプリです。UIはOnsen UIを使っており、元々iOS/Android/Webサイトの3環境で使いたいという要望があったそうです。アプリ側の特徴としては、動画や音声をダウンロードするようになっています。



なお、WebViewなのでvideo/audioタグで問題ないかと思ったそうなのですが、Androidではうまく再生できない不具合にハマったとのこと。結局、Cordovaのプラグインを使っているのですが、Webブラウザでも動かすために分岐処理によって使う仕組みを切り替えるようにしているそうです。



ただ、その甲斐もあってワンソースでiOS/Android/Webブラウザに対応しています。



その他の機能として、受講者の学習履歴を閲覧したり、お知らせ/スケジュール配信といった機能があります。サーバサイドはPHPで作ってあるとのことです。



その他の問題として、ID/PWの仕組みを用意するとAppleがとりあえずリジェクトするそうです。また、課金の仕組みを用意していても問題になります。iCloudのバックアップは25MBまでしか使えないので、動画などを保存するとすぐにいっぱいになります。回避策としては、特定のメタデータを書き込むと除外できます。



ニフティクラウド mobile backend × Cordova





ニフティクラウド mobile backendエヴァンジェリストでもある筆者の登壇です。まずニフティクラウド mobile backendについて説明しました。いわゆるmBaaS(mobile Backend as a Service)の一つで、サーバサイドで必要になる機能をまるっと提供することでアプリ開発を高速化します。また、無料から使えるので開発コストを低コスト化することにもつながります。



主な機能はデータストア(データベース)、ファイルストア(ストレージ)、会員管理、プッシュ通知、スクリプトがあります。スクリプトは最も最近出てきた機能で、node.jsベースのコードでmBaaSを拡張できるようになります。



JavaScript SDKを提供しており、Cordovaと絡めて動かすこともできます。このセッション中でのデモは失敗したのですが(失敗した理由はCordovaのセキュリティ上のメタタグを設定し忘れたためです)、Cordovaプロジェクトへの組み込みはBower/npmを使って簡単にできます。



JavaScript SDKさえ組み込んでしまえば、ごく短いコードでデータをクラウド上に保存できるようになります。






Cordova勉強会は今後も行われるとのことで、ぜひ登壇者を募っているそうです。興味がある方は連絡してみてはいかがでしょうか。

Monacaのプレビューを使う際のTips

最近Monacaをハンズオンで使っています。開発環境を用意せず、ブラウザさえあればすぐに動くものが作れるというのは大きなポイントになります。



しかし普段の開発環境とは異なる分、詰まってしまうこともあるようです。そこで今回はMonaca IDEを使った開発において注意して欲しいポイントを紹介します。



Webブラウザとスマートフォンアプリでのイベントの違い



WebブラウザでjQueryなどを使った開発を行っている時に、 $(function() {}) をよく使うかと思います。これはDOMの構築などが終わり、JavaScriptを安全に実行できるようになった状態で呼び出されます。しかしMonaca(Cordova)アプリの場合、さらにプラグインの読み込みなども完了しなければ安全に開始できません。それは deviceready というイベントになります。ただしこのイベントはWebブラウザでは実装されていないので、Monaca IDEのプレビューでは使えません。



そこで次のようにコードを書くと便利です。





function onDeviceReady() {
    alert("読み込まれました");
}
var event = typeof cordova === 'undefined' ? 
                              'DOMContentLoaded' : 'deviceready';
document.addEventListener(event, onDeviceReady, false);


これはWebブラウザの場合はDOMContentLoaded、スマートフォンアプリの場合はdevicereadyをイベントリスナーに設定する指定です。iPhone/iPad/Androidの区別だけではスマートフォンのWebブラウザ判別には使えませんので、Cordovaアプリに特有のグローバル変数であるcordovaがあるかどうかを判定に使っています。これでプレビューの場合も確認が容易になります。



このテクニックはclickイベントとtapstartイベントを分ける際にも使えます。スマートフォンにおけるclickイベントは若干の遅延があるので、tapstartを積極的に使っていくべきなのですが、Monaca IDEのプレビューでは反応しなくなってしまいます。そこで処理分けすることでどちらでも動作する、かつ最適な動作が期待できるようになります。



リモートファイルを読み込む場合の注意



同様にMonaca IDEのプレビューではリモートファイルを読み込むのに制限(CORS)があります。そのため、スマートフォンアプリとして外部のXMLJSONを読み込む場合、同じファイルをMonacaプロジェクト内にも用意して、プレビューの時にはそのファイルを読み込むようにしましょう。処理分けは上記と同じ仕組みが使えます。



自社のアプリで、サーバと通信するといった場合にはCORSの設定を行っておけば問題ないでしょう。



JavaScriptエラーの確認の方法



Monaca IDEにはコンソールが表示されているので、プレビューで起こっているエラーも確認できるかと思ってしまう方がたくさんいます。しかしこれはMonacaデバッガー用のエラー表示になるので、プレビューのエラーは出ません。





そこでエラーの確認方法なのですが、プレビューのアプリの画面相当部分を右クリックします。そして出てきたコンテクストメニューで要素の検証であったり、検証といったDevToolsが開くメニューを選択します。これ以外の方法ですと、プレビュー全体であったり、Monaca IDEを対象としたDevToolsが開いてしまいますので注意してください。





DevToolsが開けば、コンソールを見てエラーメッセージが確認できます。なお、時々保存忘れというケースもありましたので、ちゃんとファイル保存されているかも確認してください。





プレビューはHTMLファイルを開いている時以外には表示されません



プレビューはあくまでもHTMLファイルを編集している場合に限って右側に表示されます。JavaScriptCSSなどを編集中に確認する場合は別ウィンドウとして表示されるので注意してください。なお、別ウィンドウの場合でもファイル編集後のリロードは自動的に行われます。








こうした点に注意すると、初学者の方であってもMonaca IDEを使ったアプリ開発がスムーズに開始できるかと思います。特にプレビューをうまく使えばデザインや動作確認が素早く行えるようになります。ぜひお試しください!

MonacaクラウドとGitHub連携方法

MonacaクラウドGitHubがついに連携しました。多数のご要望を頂いていた機能だけに、従来の開発にGitHubをご利用いただいている方には簡単に使いこなせると思いますが、GitHubアカウントでのMonacaへのシングルサインオンや、クローン、コミットやプッシュなど、MonacaクラウドIDE上のプロジェクトをGit管理ができるようになりましたので、画面を見ながら説明します。

1.MonacaGitHubの連携設定



Monacaダッシュボード画面からアカウント情報を選択すると「GitHub連携」メニューが追加されています。こちらを押下し、GitHub連携設定に進んでください。



このような、GitHubアカウント連携の設定画面に遷移しますので、「連携する」ボタンを押下してください。


すると、GitHubログイン画面へ遷移します。


ログインしたGitHubアカウントにMonacaとの連携を許可しましょう。

「Authorize applicatioin(Monacaアプリケーションを承認する)」ボタンを押下して、MonacaGitHub連携初期設定が完了します。
※なお、先に個別アカウントにのみ承認をしてしまって、あとからOrganizationに対して承認を行いたい場合は、一度MonacaとのGitHub連携を解除し、再度連携設定を最初から行い、本画面にてOrganizationからMonacaを承認する必要がありますのでご注意ください。







2.Monacaプロジェクトとリポジトリの紐づけ



次に、Monacaプロジェクトソースを連携しているGitHubアカウントへアップロードしましょう。もし連携したGitHubアカウント上に空のリポジトリが存在しない場合は、新規リポジトリを作成するようメッセージが表示されます。

「空のリポジトリを作成する」ボタンを押下してください。



すると、下記のような新規リポジトリを作成画面を遷移します。
なおプライベートリポジトリをご利用いただく場合は、有料となります。


空のリポジトリが作成できました。


さて、MonacaのプロジェクトIDEに戻ってください。
再度バージョン管理メニューから管理項目を選択すると、空のリポジトリが存在する場合はリポジトリ名称選択・通知などに使うメールアドレス選択が求められます。Organization(組織やチーム用リポジトリの場合は、コミット名の入力が追加されます。

入力が終わったら「設定する」ボタンを押下してください。


全てのコードがGitHubへアップロードされるまで、少し間があります。すべてのコードがアップロードされ、Monacaとの紐づけが完了すると、下記の画面が表示されます。


このように、GitHub上にもソースコードが管理されていることが確認できるでしょう。




3.コミット&プッシュ



それではコードを修正してリポジトリへのコミットを試してみましょう。バージョン管理メニューからコミットを選択してください。修正されたファイルの一覧が表示されますので、コミットしたいファイルを選択し、「コミット」ボタンを押下してください。


正常にコミットが完了したらこのような画面が表示されます。


ソースコードの修正差分をご覧いただきたい場合は、バージョン管理メニューからコードのコミット履歴を選択してください。リモート上のコミット履歴も閲覧できます。


開発を進めコミットされたコードを、リモートのGitHubにあるリポジトリにプッシュするには、上部メニューからプッシュを選択してください。




このようにしてGitHub連携をおこない、MonacaIDE上にて開発しているコードを管理することが出来るようになりました。


4.GitHubアカウントを使ったログイン



ひとたびMonacaGitHubの連携設定ができましたら、MonacaのIDとパスワードを入力することなくログインすることができるようになります。
なお、ご利用のブラウザでGitHubへログインしていない状態だと、GitHubのログイン画面へ遷移します。



5.GitHubからのソースコードインポート



プロジェクト新規作成時に、GitHubリポジトリからMonacaプロジェクトのソースコードをインポートすることが出来るようになりました。チームで開発する場合は、OrganizationとしてGitHubにて設定したアカウントと紐づけを行っておくと、インポートをしたいリポジトリ選択欄にOrganizationのリポジトリも掲載されます。
なお、Organizationのリポジトリをご利用いただく場合、Monacaパーソナルプランからご利用いただくことができます。

動画を使ったアプリ利用解析を実現するReproはMonacaで簡単に利用できます

Monacaでは多くの外部サービスと連携できるようになっています。今回はアプリマーケティングで欠かせない利用者を理解するのに役立つReproを紹介します。





Reproについて



Reproはアプリの操作を記録し、Web上で動画として操作を確認できるサービスです。ユーザの利用状態を可視化することで、どこでユーザが迷っているのかであったり、アクティブ率に関わるアプリ上の問題を発見することができます。



数多くのプラットフォームに対応しており、Monacaにも対応しています。しかも無料ユーザから利用できるようになっています。





Reproでトークンを取得する



まずReproにてユーザ登録を行います。そうするとトークンが取得できますので、コピーしておきます。Repro側で必要な作業はそれくらいで、とても簡単にはじめられます。



Monacaでの使い方



Monacaで適当なアプリを作成した後、設定メニューの*を選択します。





出てきた一覧の中でReproを選択します。





詳細な説明が出ますのでセットアップをクリックします。





確認が出ますのでOKをクリックして実行します。





これでReproのSDKがインストールされました。





設定を行う



次に測定するための情報を記述します。単純に全操作を記録する場合は次のように書きます。YOUR_APP_TOKENはReproにて取得したトークンに書き換えてください。





document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
    Repro.setup("YOUR_APP_TOKEN");
    Repro.startRecording();
}


さらに何かのイベント(クリックなど)を記録したい場合は任意の場所で次のように記述します。





Repro.track("App Launch");


また、ユーザを指定することもできます。





Repro.setUserID("foo@example.com");


これだけで使えますのでとても手軽です。



アプリをビルドする



Reproを使うためにはMonacaデバッガーではなくビルドしたアプリで使う必要があります。今回はiOSアプリとしてビルドしています。





ビルドが完了したら実機にインストールしてください。



Reproを試す



Reproを試す場合は、アプリを起動して適当に操作するだけでOKです。最後にホームボタンを押して終了です。アプリがバックグラウンドになると記録が停止します。動画がアップロードするまで管理画面には反映されませんが、ほとんど待ち時間なく反映されるはずです。





アップロードされた動画はWeb管理画面上でいつでも繰り返し再生ができます。イベントが記録がされていれば、動画の途中に印が入っています。








MonacaアプリにReproを組み込むのはとても簡単にできます。コード量も少ないので、すぐに使いこなせるでしょう。後はアプリの動線を解析し、より良いアプリ開発に取り組んでください。



Repro

Onsen UI 2.0の紹介と始め方

ハイブリッドによるスマートフォンアプリ開発を手軽なものにしてくれるUIフレームワークとして開発しているのがOnsen UIです。現在も開発が継続されており、間もなく2.0が正式リリースとなります(執筆時点でβ)。



特に大きな転換ポイントと言えるのが、AngularJSとの切り離しになります。そこで今回はOnsen UI 2.0の使い方を紹介します。



インストール方法は4つ



Onsen UIのインストール方法は主に4つ用意しています。いずれか使いやすいものを選んでください。



Node.js/npmを使う方法



Node.js/npmを使ってインストールする場合、次のようにコマンドを打ちます。





npm install onsenui@2.0.0-beta.7 --save // β版の現在の場合。
npm install onsenui --save // 2.0の正式版リリース後。現在は1.3系がインストールされます。


また、このままですと node_modules 以下に配置されて使いづらいので、browserifyをインストールします。





npm install -g browserify


そしてコードを書きます。例えばファイルを index.js とします。






require('onsenui');

// 自分のWebアプリケーションのコード


後は最後に browserify を実行します。





browserify index.js -o app.js


これで onsenuiが入った状態でJavaScriptコードが生成されます。JavaScript側ではapp.jsを読み込むようにすれば問題ありません。



Bowerを使う方法



BowerもNode.js/npm同様に進めることができます。Monaca IDEはBowerを使ったプロジェクトのインポートに対応していますので、さらに手軽と言えそうです。ただしBower自体はnpmを使ってインストールします。





npm instlal bower -g


そしてアプリを開発するプロジェクトのルートで bower initを実行します。





bower init


次にOnsen UIをインストールします。現在はバージョンを指定する必要があります。





bower install onsenui#2.0.0-beta.7 --save


ファイルは bower_components/onsenui/ 以下にインストールされます。



ファイルをダウンロードする



3つ目はJavaScript/スタイルシートファイルを直接ダウンロードする方法です。Releases · OnsenUI/OnsenUI-distから最新版がダウンロードできます。解凍したフォルダの中にあるjs/cssフォルダを好きな場所に配置してください。



Monacaのテンプレートを使う



最後にMonacaのテンプレートを使う方法です。Monacaのプロジェクトテンプレートの中に、Onsen 2.0 クイックスタートというテンプレートを用意していますので、これを選択するという方法になります。これは予めOnsen UI 2.0が組み込まれていますので手軽にはじめることができます。





こちらがOnsen UI 2.0クイックスタートプロジェクトです。



Reactと組み合わせたデモも内包されています。



実際に使ってみる



では実際にOnsen UI 2.0を使ってみたいと思います。例えばHTMLは次のようになります。ファイル名は index.html とします。





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <title>Onsen UI 2.0 Quickstart</title>
    <script src="node_modules/onsenui/js/onsenui.min.js"></script>

    <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
</head>

<body>
  <ons-page>
  </ons-page>
  <ons-tabbar>
  <ons-tab page="page1.html" label="Page 1" icon="square" active="true"></ons-tab>
    <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab>
    <ons-tab page="page3.html" label="Page 3" icon="square"></ons-tab>
    <ons-tab page="page4.html" label="Page 4" icon="square"></ons-tab>
    <ons-tab page="page5.html" label="Page 5" icon="square"></ons-tab>
  </ons-tabbar>
</body>


見て分かる通り、onsenui.min.jsしかJavaScript側では読み込んでいません。スタイルシートはベースになるonsenui.cssと、各種コンポーネント用のonsen-css-components.cssを読み込んでいます。



bodyタグの中身はを使ったOnsen UIの定義になります。さらにpage1.htmlを次のような内容で作成します。





<h3 class = "title-h3">iOS Switch</h3>
<p>
  <ons-switch></ons-switch>
</p>
<h3 class = "title-h3">Material Switch</h3>
<p>
  <ons-switch modifier="material" checked></ons-switch>
</p>


こちらはヘッダーもなく、いきなりbodyタグ内の内容を記述します。さらにpage2.htmlを次のように定義します。





<ons-list>
  <ons-list-header>Page 2</ons-list-header>
  <ons-list-item>Item</ons-list-item>
  <ons-list-item>Item</ons-list-item>
</ons-list>


こちらはを使っています。いずれのファイルもJavaScriptの定義であったり、AngularJSの記述は一切ありません。



このファイルを開くと、次のように表示されます。





まさにスマートフォンアプリ風のUIになっているのが分かるかと思います。さらにons-tabbarの一番左のページがデフォルト表示になります。今回はpage2.htmlまでしか作っていませんが、タブ1とタブ2がタップで表示切り替えできる点も確認できるかと思います。






このように外部ライブラリへの依存性が減ったことで、自由度が高まったり、すでに多数あるJavaScriptフレームワークと組み合わせた開発ができるようになっています。Onsen UI 2.0は間もなく正式リリースになります。ぜひお試しください!



Onsen: HTML5 Hybrid App Framework & UI Components