2014年12月13日土曜日

いろいろ考えさせられたオランダ国王王妃両陛下のご来日

日経14.10.30朝 宮中晩餐会に雅子さまら出席 オランダ国王夫妻歓迎

…皇太子妃雅子さまは11年ぶりの宮中晩餐会出席となった…

雅子妃殿下が11年ぶりに宮中晩餐会にご出席!ご回復の兆し\(^o^)/

オランダには、過去に雅子妃殿下を気遣って療養に招かれた恩がある。ひょっとしたら雅子妃殿下はご無理をされているのかもしれないが、逆にその無理をおすことができるようになったということは、やはりご回復の兆しと考えていいのではないだろうか。

英国にも心配されているようだし、一日も早いご回復を祈るばかりだ。

BBC News - Japan Crown Princess Masako attends first banquet in 11 years

一方、今回のオランダ国王王妃両陛下のご来日を自国の思惑に利用しようという動きもあり…

オランダ国王、天皇主催の宮中晩餐会で「歴史」に言及 - Chosun Online | 朝鮮日報

…しかし、日本が自国に与えた侵略の歴史については全く譲らなかった。アレクサンダー国王は「先祖が残した誇らしい歴史もつらい歴史も全て継承すべきだ。第2次世界大戦当時、オランダの民間人と兵士が体験したことを忘れずにいる。忘れることもできない」と述べた。第2次大戦当時、日本軍はオランダの植民地だったインドネシア(当時は東インド)を占領し、オランダの兵士と民間人約10万人を収容所に監禁し、民間女性を慰安婦として強制動員したことを指摘したものだ。…

しかし、オランダ国王陛下のスピーチの原文(英語)をみると、そのようなことをおっしゃってはいない。

Speech by His Majesty the King at the state banquet on the occasion of the State Visit to Their Majesties the Emperor and Empress of Japan, Tokyo - Het Koninklijk Huis

So we will not forget - cannot forget - the experiences of Dutch civilians and soldiers in the Second World War. The wounds inflicted in those years continue to overshadow many people's lives. Grief for the victims endures to this day. Memories of imprisonment, forced labour and humiliation have left scars on the lives of many.

The Japanese people, too, suffered terribly during the war, especially in the final phase, marked by such destructive violence.

朝鮮日報は「forced labour and humiliation」(強制労働と屈辱)を拡大解釈して慰安婦と結びつけ、「民間女性を慰安婦として強制動員した」と断言している。

さらに日本の中には反オランダの動きもあり、「オランダ国王は白い韓国人である」という意見もあった。

「So we will not forget - cannot forget - the experiences of Dutch civilians and soldiers in the Second World War.」(オランダ国民と兵士が第二次世界大戦で経験したことを我々は忘れない。忘れることはできない。)

というお言葉に対する反発のようだが、そのすぐ後に

「The Japanese people, too, suffered terribly during the war…」(日本国民も戦争でひどく苦しんだ)

と続いており、これはむしろ正しい態度だと思う。

米国は今でこそ日本の同盟国で友好国だと考えているが、自分だってそんな米国に対して「君たちは友人だ。だがしかし、核を落としたことを忘れていない。」と言うだろう。

そんなこんなで、このたびのオランダ国王王妃両陛下のご来日は色々と考えされられた。

2014年12月10日水曜日

Android Wearは将来「病気発見器」になる

日経14.10.29朝 グーグル ITで医療 がん発見に着用端末 ナノテクと融合、早期診断

【シリコンバレー=小川義也】…

ナノテクノロジー(超微細技術)を活用し、健康状態を分子レベルで監視。病気のわずかな兆候も見逃さないようにする…

研究部門「グーグルX」のライフサイエンスチームが担当する。

具体的には、がん細胞など血液中の特定の細胞と結合する「ナノ粒子」と、それを測定するウエアラブル端末を組み合わせる…

ウエアラブル端末は腕輪型で、手首の内側の静脈にナノ粒子を集めてデータを測定する…

日常生活の邪魔にならない方法で健康状態を常に監視し、病気の兆候をいち早く見つける技術を確立するのが我々の目標だ…

「ウエアラブル端末は腕輪型」ということは、おそらくAndroid Wearの拡張版のことだろう。

ということは、Wearに心拍計が付いているのはこの技術に対する布石で、将来のAndroid Wearは病気の早期発見にも使われることになるのだろうと思う。

人の健康状態は究極のプライバシー情報と言える。Googleはそれまでも握ろうと言うのか…

そしてその情報は、間違いなく製薬会社や医療機関への導線となる。現在のGoogleのメインの収益である広告以上の収益になるかもしれない。

Google…恐ろしい子w

WIREDでも記事が出ていた。

グーグルが目指す「医療の革新」:ナノ粒子で癌や心臓発作などを早期発見するプロジェクト « WIRED.jp

2014年12月8日月曜日

干からびても生き返り、高温にも低温にも放射線にも強い細菌のDNAをエボラウイルスが取り込んだら…

日経14.10.26朝 ユスリカ 驚異の生命力 乾燥に耐える特殊な遺伝子

干からびても水をかけると生き返り、普通の生物は死んでしまう高温や低温に耐え、放射線にも強い…アフリカに住む昆虫のネムリユスリカはその代表格だ…

「乾燥無代謝休眠(乾眠)」…17年以上経ってから水を与えて蘇生した例も…

今年2月、宇宙飛行士の若田光一さんがISSで、乾眠状態の幼虫が入った容器に水を入れて観察したところ、100匹のうち6匹がサナギになり、1匹が成虫になったという…

乾眠状態では、細胞を傷つける氷の結晶ができなくなるため、極低温でも生きながらえる。放射線を浴びても水がないので、遺伝子などを傷つける活性酸素の発生が抑えられ、放射線にも強くなるという。

不思議なことに、成虫やさなぎ、卵にはこうした能力はなく、干からびると死んでしまう。では、幼虫はなぜ不死身になるのか…

ネムリユスリカには、乾燥時に働く遺伝子が多数並んだ「遺伝子領域(ARId)があり…

乾燥に耐える様々な遺伝子はもともとは細菌にあったものだと考えられるという。ネムリユスリカの幼虫がすむ土の中には、細胞膜などを乾燥から保護する働きがあるたんぱく質の遺伝子を持つ細菌がいる。「幼虫が細菌を食べて、その遺伝子がネムリユスリカのゲノムに組み込まれたのではないか」…

細胞を乾燥保存し、必要なときに水に戻して使うことができるようになるかもしれない…

(編集委員 西山彰彦)

ネムリユスリカの幼虫は、対乾燥能力のあるたんぱく質の遺伝子を持つ細菌を食べてDNAに組み込みこの能力を得たらしい。恐るべき能力だ。

乾燥に耐えるということがポイントで、高温、低温、放射線にも強いのは、乾燥している(=水が無い)ことによる副次的なもののようだ。

気になるのは、その能力のソースがネムリユスリカ自身ではなく、「細菌」であるらしいこと。

エボラ出血熱のウイルスがある程度乾燥に強いことを思い出してしまった。もちろん、ウイルスと細菌は違う。

ウイルスと細菌の違い

しかし、細菌ではないユスリカが細菌のDNAを取り込んでその能力を得たことを考えれば、同様にエボラウイルスが細菌のDNAを取り込んでその能力を得ることだって考えられるのではないか。

エボラウイルスがそんな能力を得る前に、すぐに撲滅しなければ。。。

2014年12月7日日曜日

香港で広東語を守るために歌ってデモする人たち

日経14.10.26朝 広東語 歌って守る 政府の「標準語化」に反発

中国広東省で「広東語」を守ろうという市民の地道な取り組みが続いている。国内の隅々にまで標準語を浸透させようとの姿勢を政府が強めるなか、町のあちこちに集まっては地元の言葉で歌を披露する…

地元広東テレビのニュース番組「正点報道」が今年6月30日から半月間、広東語ではなく普通話で放送した…

テレビでの使用言語が一時的に変更された背景には、省政府が広東語放送の許可制を導入するといった動きを強めたことなどがあるとされる。

2010年…夏、広東語の使用を規制する動きに対し、数千人の市民がデモを繰り広げた…

(広州で、桑原健)

香港で反政府デモが起きているが、どうやら最近に始まった動きではないようだ。

少なくとも2010年から広東語を規制して「標準語」を浸透させようという動きがあり、デモも起こっていたようだ。

言葉などの文化を同化し、やがて政治を同化する…侵略者の常套手段だ。

広東語は古き良き香港映画で親しんでいる。抑揚が激しくて、まるで歌っているような楽しい言語だと思う。

そんな言語を使う彼らのデモの一つは歌うことか。彼ららしいじゃないか。応援したい。

2014年11月29日土曜日

「イスラム国」を目指す学生への池上彰さんの提言と「イスラム国」が欲しがる人材

日経14.10.20朝 池上彰の大岡山通信 若者たちへ 「イスラム国」目指した学生 殺害組織に命を懸ける愚

…その動機ははっきりしません。就職活動に失敗したから、という説もあるようですが、そんなことで命を懸ける気になるのでしょうか。

いま私は「そんなことで」と書きましたが、最近の学生にとって、就活で失敗することは、人生の一大事だと受け止めてしまう傾向もあるようです…

ストレスの多い日本社会。鬱屈した気分から、やけになって、”冒険”をしたくもなるのでしょうか。

しかし「イスラム国」は、抵抗する者は容赦なく殺害する組織。ここに戦闘員として加わるなら、「人を殺す」ということになるのです…

現状を打破したいと思っても、その結果が何をもたらすのか、その点への想像力が欠けているように見えることが残念です…

カンボジア系日本人の男性…彼が、このニュースを知って、怒ること、怒ること。「生きがいを見いだせないのなら、人々が生きるのに必死なカンボジアに来たらどうだ」と嘆くのです…

「就活失敗!人生\(^o^)/オワタ」という気持ちは分からないでもない。確かに日本は一度道を踏み外すとなかなか元の道に戻れないという流動性の少ない社会だと思うから。だからといって、自分は戦闘員になって人を殺そうとは思わないけれど。

池上さんはそういう若者に対し、「イスラム国」に行くくらいなら、カンボジアなど途上国に行ってはどうか?と提案する。

これも賛同できる。ただし、もし「イスラム国」が本当に残虐なだけのテロ組織であるならば。

どうも聞くところによると、「イスラム国」が完全制圧しているところはむしろ治安が良くなっていて、インフラも整備されてきているらしい。

確かに「イスラム国」は平気で首を切り落とすなど残虐な組織ではあると思う。しかし、どうもただ残虐なだけではないようにも思う。

その一つの理由として、「イスラム国」は戦闘員ばかりを集めているわけではなく、医者、経営者、技術者などを集めているらしいことが挙げられる。

ISIS Is Hiring Judges, Doctors And Engineers As Al-Qaeda Prepares For War Against Caliphate | Zero Hedge

As Al Arabiya reports, the newly named “caliph” said the appeal especially applied to “judges and those who have military and managerial and service skills, and doctors and engineers in all fields.”

つまり、「イスラム国」は彼らなりのやり方で本気で国家を建設しようとしているのではないかと。

だとすると、池上さんが「途上国に行って人の役に立て」というのは一つの選択肢だと思うが、それはひょっとすると「イスラム国」にも当てはまるのではないだろうか。

ただ問題は、「どこの国でも有能な人材を欲しがっている」ということだ。逆に言えば、「どこの国に行っても無能なら職は無い」ということだ。

そもそも有能な人材なら、社会が閉塞しているからと人のせいにしてヤケを起こしたりせず、自らの力で道を切り開くだろう。そういう人はきっとどこの国でも通用する。もちろん日本でも。

結局のところ、どのような境遇においても自分を磨くほか無いと改めて思い知る。

2014年11月26日水曜日

ionic frameworkのWebViewとしてCrosswalkを使う

Use Crosswalk With Ionic Framework Android Apps

ふむ。どうやらionicでもWebViewとしてCrosswalkを使えるらしい。実際にやってみよう。


Crosswalkのダウンロード

まずはこちらからCrosswalkをダウンロード。

Crosswalk - build world class hybrid apps


Canaryはちょっと怖いし、Stableはちょっと保守的過ぎるので、Betaチャンネルを選んだ。アーキテクチャは欲張らずにARMのみにした。ほとんどのAndroid機はARMだし、ARM+x86だとapkが重くなるそうなので。


追記14.12.03:Stableをダウンロードすべし。Canaryは動作せず。Beta版は動作はするがcordovaのAPIが動かないので。

Beta版で動かしたときのコンソール出力
----追記ここまで


Crosswalkの組み込み

新しくプロジェクトを作ってCrosswalkを組み込む。

$ ionic start IonicCrosswalk blank
$ cd IonicCrosswalk/
$ ionic platform add android
$ rm -rf platforms/android/CordovaLib/*
$ cp -a /Users/jun/Downloads/crosswalk-cordova-10.39.235.6-arm/framework/* platforms/android/CordovaLib/
$ cp /Users/jun/Downloads/crosswalk-cordova-10.39.235.6-arm/VERSION platforms/android/
$ cd platforms/android/CordovaLib/
$ android update project --subprojects --path . --target "android-19"
$ ant debug
$ cd ..(androidディレクトリまで戻る)
$ vi AndroidManifest.xml

WIFI_STATEとNETWORK_STATEのパーミッションを追加。

...
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">
...

$ cd ../../(プロジェクトのルートディレクトリまで戻る)
$ ionic run android

起動した!

Chromeの chrome://inspect/#devices で見ると


とCrosswalkのWebViewを使っていることを確認できる。


便利なシェルスクリプトを使って一発組み込み

元記事のコメントにシェルスクリプトを作ってくれている人がいたので、これを使ってStableとCanaryバージョンも試してみよう。Thank you very much, Nolan Lawsonさん!

Helper script to convert an Ionic/Cordova app to a Crosswalk app

「Download Gist」からダウンロードし解凍。パスが通った適当なところにコピー。

$ cp /Users/jun/Downloads/prepare_crosswalk.sh ~/bin/
$ cd ~/bin/
$ chmod 744 prepare_crosswalk.sh

このスクリプトはarmとx86両方ともを要求するので、あらかじめ各チャンネルのarm版とx86版をダウンロードしておく。

新しくプロジェクトを作る。

$ cd /path/to/project/root
$ ionic start IonicCrosswalkStable blank
$ cd IonicCrosswalkStable
$ prepare_crosswalk.sh /Users/jun/Downloads/crosswalk-cordova-8.37.189.14-x86 /Users/jun/Downloads/crosswalk-cordova-8.37.189.14-arm

LiveReloadありで起動。

$ ionic run android --livereload

起動した。ライブリロードも確認できた。


末尾のバージョン番号が37〜になっていることに注目。

同様にCanaryもやってみたが、通常起動もライブリロード起動も、起動直後にクラッシュして起動しなかった。やっぱりCanaryはやめておいた方がいい(^^);

Anyway, thank you very much Nic Raboyさん! We did it!

Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「ionic」編

これまでCordova/PhoneGapのライブリロードについて色々と調べてきた。

琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「PhoneGap Developer App」編

琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「LiveReload + GapReload plugin」編

琴線探査: 「Chrome Apps for Mobile」で高速・簡単・快適なハイブリッドモバイルアプリ開発

琴線探査: 「Monaca Localkit」で高速・簡単・快適なハイブリッドモバイルアプリ開発

ionicのやり方は非常に簡単だ。

Live Reload All the Things: Ionic CLI's Latest Features

$ ionic  [run|emulate]  [options]

    [--livereload|-l] .... Live Reload app dev files from the device
    [--consolelogs|-c] ... Print app console logs to Ionic CLI
    [--serverlogs|-s] .... Print dev server logs to Ionic CLI

$ ionic run android --livereload --consolelogs --serverlogs

たったのこれだけ。アプリにプラグインを組み込んだり、LiveReload的なサーバーソフトなど、他のものは全く必要無い。

おまけにconsole.logも表示できる。Uncaught Reference Errorのようなエラーメッセージも表示できた。


これまで試した中では最も簡単で安定していると感じる。

2014年11月19日水曜日

SoundCloud SDK 2.0ではモバイルブラウザー上で音楽再生できない問題について

モバイルブラウザーで再生できない!

らしいのだ。

Playing a streaming on mobile not working. · Issue #5 · marcoscolina/player

まさかとは思ったが、SoundCloud SDK 2.0ではモバイルブラウザーで再生できない問題が本当にあることが分かった。Android 4.4.4と4.2のChrome、iOS8.1のSafariでダメなので、基本的にモバイルブラウザーでは再生できない問題があると言わざるを得ない。


SDK2をハックして再生可能に

SDK2のソースコードを解析した結果、問題が分かった。

デスクトップではHTML5AudioPlayerで再生するが、モバイルではHTML5Audioをサポートしているのにもかかわらずsingleaudioplayerというもので再生するようになっていた。ここを強制的にHTML5AudioPlayerで再生するように変更することで再生できるようになった。




このサンプルのコード一式はここにある。
junkoro/SoundCloud-SDK2-on-mobile

js/SoundCloud2.jsは http://connect.soundcloud.com/sdk-2.0.0.js を改造したもので、js/audiomanager.js はSDK2で自動的に読み込まれるものを改造したものだ。

とりあえず再生できるようにはなったものの多くの人が困っていると思われるので、この件についてSoundCloudに問い合わせてみようと思う。


AutoPlay問題

しかし、ひとつ問題があることが分かった。AutoPlay問題だ。再生することはできるのだが、再生するにはメディアをロードした後に必ずユーザーのタッチ操作が必要になる。

Overcoming iOS HTML5 audio limitations
http://www.ibm.com/developerworks/library/wa-ioshtml5/

Making HTML5 audio actually work on mobile | Pupunzi
http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/

iOSに限らず、Androidでも同様だ。ユーザーが望まない映像や音楽を自動的に再生できないようにという配慮なのだが、Webアプリにとっては非常に問題になる場合がある。

この問題の回避方法は恐らく無い。しかし、Cordovaなどでハイブリッドアプリを作っている場合には、WebViewの設定を変えたり、プラグインを介してネイティブのライブラリを呼ぶなどして回避できる可能性がある。

実際、Android上でWebViewとしてCrosswalkを使った場合には回避できた。iOS上では未確認。

2014年11月14日金曜日

「Monaca Localkit」で高速・簡単・快適なハイブリッドモバイルアプリ開発

「Localkit」でMonacaが最強ビルド環境として再浮上

昨日は 「Chrome Apps for Mobile」を試していた。

琴線探査: 「Chrome Apps for Mobile」で高速・簡単・快適なハイブリッドモバイルアプリ開発

しばらく使っていくうちに、ライブデプロイが少々不安定であることが分かった。(PC側のサーバープロセスが切れる)この程度なら問題無いと思っていたが、YouTubeの埋め込み再生でjsapiが有効にならないことが分かった。

Crosswalkに問題があるのだと思うが、「Chrome Apps for Mobile」そのものがディベロッパープレビュー状態であることもあって他の開発環境を試してみることにした。つい先日、MonacaのLocalkitという機能がリリースされたことを知っていたからだ。

Home | Monaca
Monaca Localkit | Monaca

実はMonacaは素のCordovaの次に試した開発環境だった。

  • 専用アプリによりiOS/Androidでライブリロード開発が可能(iOSの開発ライセンスすら必要無い)
  • リモートデバッグ
  • ローカルにビルド環境を作る必要が無い

など基本的には素晴らしい環境だったのだが、

  • ライブリロードが不安定
  • デバッグコンソールが不安定
  • Gitが使えない

などの理由で本格的開発は難しいと判断していた。しかし、ここへ来てLocalkitがリリースされ、これらの問題が解消された!

少なくとも今は無料プランユーザーでも使えるので、ハイブリッドアプリの開発をしようとしている人には是非試してみて頂きたい。

使い方のドキュメントがまだ無いようなので、デバッグするまでの方法を書き残しておこうと思う。

追記14.11.17:見られなかったPDFマニュアが見られるようになった

Monaca Localkit β版 利用マニュアル(PDF)

Crosswalkエンジンを組み込んでMonacaで作るAndroidアプリを一気に高速化させる。 : アシアルブログ

----


Localkitのインストール

Monaca LocalkitはChrome AppなのでChromeが必要だ。Chromeからこちらにアクセスしてインストールする。

Monaca Localkit - Chrome ウェブストア



Localkitの起動とログイン

Chromeのアプリランチャーから


Localkitを起動する。


ここでログインを求められる。アカウントが無ければ作る。


プロジェクトの作成


「New Project」でプロジェクトを作成する。


適当にプロジェクトを作成する。「Working Directory」はプロジェクトが作成されるディレクトリそのものなので注意。あらかじめ新しいディレクトリを自分で作っておいた方が方がいい。


「Create」するとこのようにプロジェクトが作成される。


Monaca Debuggerのインストール

ここで実機の方にMnaca Debuggerをインストールしておく。ここにリンクを書いておくよりもAppStoreやGooglePlayで「monaca」と検索した方が早いだろう。

iOSでは「monaca」と言えば一つしかないが、Android版は2つ存在する。通常版がシステムのWebViewを使うデバッガーで、ハイパフォーマンス版はCrosswalkのWebViewを使うデバッガーだと思われ。


特に理由がなければハイパフォーマンス版をインストールしておいた方がいいだろう。


デバッグの開始

プロジェクトを開いて


デバッグを開始する


実機の方でデバッガーを起動する。初回起動時にはログインが要求される。


ペアリングを要求される。


ペアリングの認識は実機とPCが同一WiFi内にいることが条件だ。したがって、実行するだけならUSBケーブルで接続する必要は無い!すごい!ただ、ChromeやSafariなどの開発者ツールを使うにはUSBケーブル接続が必須なので、あらかじめ接続しておく方がいいだろう。

「ペアリング」のタップでペアリングコードが表示される。


これをLocalkit側で入力して「Pair」。


Localkitではこのように見える。


実機ではこのように見える。


デバッグしたいプロジェクト名*ではなく*ペアリング済みPC(ここではMacBookAir)をタップすると、このように実行される。


デバッグについては一般的なUSBデバッギングを使う。iOSの場合はSafari、Androidの場合はChromeの開発者ツールを使う。

Monaca Debugger with USB Debugging

iOSの場合はSafariで検証可能なタブとして表示されなかった。原因は不明。Debuggerの問題かもしれないので、その場合はそのうち解決されるだろう。


追記14.11.17:AppStoreで配布しているMonaca DebuggerではUSBデバッグできないことが判明。カスタムビルドしたDebuggerが必要らしい。

Monaca Debugger with Safari Remote Debugging (for iOS and Mac only)

This debugging option can only be used with Monaca custom built debugger. In order to get the custom built debugger, please refer to iOS 向け Monaca デバッガー.

----

Androidの場合はChromeで接続できた。


「crosswalk」の文字があるので、Monaca Debuggerのハイパフォーマンス版はやはりCrosswalkエンジンを使っているということが分かる。

なお、GapDebugが使えればChromeだけで済むから楽なので使えないかと試してみたが、iOSはダメだった。Androidは通常版はOKでハイパフォーマンス版はNGだった。

コンソールの安定性は抜群だ。ライブリロードも非常に安定している。それはやはりローカル接続だからだろう。


で、YouTubeのiframeのAPIでjsapiを有効にできるのか?

できた!

おそらく現状でMonaca Localkit以上に良いハイブリッドアプリ開発環境は無いだろう。

追記14.11.26:実はそういう事も無いかも…
琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「ionic」編

2014年11月13日木曜日

「Chrome Apps for Mobile」で高速・簡単・快適なハイブリッドモバイルアプリ開発

「Chrome Apps for Mobile」とは?

ここのところCordovaアプリを作るための環境を色々と考えてきた。

琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「PhoneGap Developer App」編

琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「LiveReload + GapReload plugin」編

もう一つの選択肢がこれだ。

Create Chrome Apps for Mobile Using Apache Cordova

一言で言えば、Chrome Appsをモバイルのネイティブアプリとして動作させるためのツール群だ。Cordovaをベースに開発されている。

ただし、ステータスとしてはディベロッパー・プレビュー状態なので、プロダクションレベルで使うには注意が必要だ。


メリットとしては…

  • Google Play Store、Apple App Storeで配布可能
  • デスクトップでも動作するアプリを同時に開発できる(Chromeウェブストアで配布)
  • Cordovaのプラグインに加えてChrome APIも使える(identityとかGCMとか
  • Chrome App Developer Toolを使えばライブデプロイできる
  • デフォルトで高速WebView「Crosswalk」を使える(Crosswalkのメリットとデメリット
  • 「Crosswalk」を使うことでWebViewが古いAndroidでも高速かつ最新の技術を使えるようになる

などがある。


前提条件

  • Node.jsをつかえる環境
  • Androidアプリを開発できる環境(Android SDK)
  • iOSアプリを開発できる環境(Xcode)


ccaのインストールと環境のチェック

ccaはcordovaコマンドに相当するコマンドラインツールだ。

# sudo npm install -g cca
# cca checkenv
cca v0.4.3
Android Development: SDK configured properly.
iOS Development: SDK configured properly.


プロジェクトの作成と実行

# cd /path/to/project/parent
# cca create YourApp com.your.company.YourApp "Your App" (ディレクトリ名、App ID、アプリ名)

ここでAndroidをUSBデバッグモードでつなぐ。

# cca run android

「cordova run android」した時のようにapkがandroidにインストールされて実行される。


CADTのインストールとライブデプロイの確認

CADT(Chrome Apps Developer Tool)はライブデプロイを実現するためのモバイルネイティブアプリで、「PhoneGap Developer App」とよく似ている。

まずはアプリのバイナリをこちらからダウンロードする。

Releases · MobileChromeApps/chrome-app-developer-tool

多くのAndroid機はARMなので、「android-armv7-debug.apk」をダウンロードする。iOS用は自分でビルドする必要あり。

ここでAndroidをUSBデバッグモードでつなぐ。

# adb install android-armv7-debug.apk

Android機でCADTを起動する。


ライブデプロイを開始する。CADTにAndroid機のIPが表示されるので、そのIPをtargetに指定する。

# cd /path/to/project
# cca push --target=192.168.0.160 --watch

この方法でライブデプロイする場合はAndroid機が同一WiFi内にあるならUSBで繋がっていなくてもよい。

つまり、この方法で複数のコンソールを開いてtargetを変更してライブデプロイすれば、複数のAndroidで一気に内容が変わるということでもある。

以前に試したLiveReload+GapReloadで行うライブデプロイよりも設定が簡単で、しかも変更の反映が速くて安定している。


デバッグ

デバッグの方法は色々とあるが、Androidの場合はChromeを使うのが簡単で一番いいだろう。

琴線探査: Cordova/PhoneGap開発のデバッグを何とかする

残念ながらGapDebugではうまくデバッグできなかった(´・ω・`)

Chromeのomniboxに「chrome://inspect」と打つとこのような画面になる。


ここで「inspect」をクリックするとこのような画面になる。


ふむ。おなじみのChromeのDevToolsですな。あとは通常のWebアプリをデバッグする方法と同じというわけだ。


Crosswalkで動いているのか?確認

Chrome Apps for Mobileはデフォルトで高速版WebViewである「Crosswalk」を使うはずなので特に確認する必要は無いとは思う。

しかし、念のためJelly Bean(Android 4.2.2)で動かすとWebViewが古いためレンダリングがおかしくなるCordovaアプリをccaで再コンパイルして動作させてみた。

cordovaでコンパイル

ccaでコンパイル

レンダリング結果が明らかに違う。Crosswalkが動作しているのかどうかは確認できないが、デフォルトのWebViewを使っていないことは確かだ。


Cordovaアプリと何が違うのか?とりあえず分かったことだけ


cordova.jsを読み込む必要が無い

勝手に読み込まれているようだ。document.addEventListener('deviceready'…するとdevicereadyのイベントを取得できるので。むしろ自分で読み込むとエラー的なメッセージがコンソールに表示された。


cordovaプラグインは本当に動くのか?

ひとつ(GapReload)しか試していないが、動く。


アプリ名やアプリID(パッケージID)はどこで指定するのか?

アプリ名はmanifest.json、アプリIDはmanifest.mobile.json。これらを変更した上で「cca prepare」するとconfig.xmlや各プラットフォームに独自のファイルが書き換わる。


YouTubeのiframe APIは動くか?

ビデオを再生することはできた。しかし、new YT.Player()で返却されたプレイヤーオブジェクトにplayVideo()などのメソッドが追加されておらず、JSによるコントロールができなかった。

enablejsapi関連の問題と思うが、原因は不明。PCでは返却されたオブジェクトY.F = trueとなっているのに、Crosswalk上ではY.F = falseとなっているのが関係しているかもしれない。


追記14.11.14:monacaのCrosswalkでは動いた!

琴線探査: 「Monaca Localkit」で高速・簡単・快適なハイブリッドモバイルアプリ開発

----

とりあえず以上。

追記14.11.26:ionicは簡単!参考に。
琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「ionic」編

2014年11月7日金曜日

Angular-Materialを動かすための最小限テンプレートサンプル

最近Angular-Material(以下「AM」)を使ってみている。

material.angularjs.org

AMはまだ開発の初期段階ではあるものの、すでに結構使える状態ではないかと思う。

しかし、まだドキュメントが不十分でとっつきにくい。デモページでソースコードが見られるようになってはいるものの、headの終端から始まっていてコード全体が見通しにくい。


結局、AMのリポジトリをクローンしてデモの中身を直接見に行かなければならなかった。

そこで、ここにAMを動かすための最小限テンプレートの例を書いておきたいと思う。最終的にはこのように表示される。



Angular-Materialコンポーネントのインストール

まずは適当な場所にプロジェクトディレクトリをつくり、AMをインストールする。

# cd ~/git
# mkdir AngularMaterialMin
# cd AngularMaterialMin
# bower install angular-material

これで必要なモジュールが全て揃う。


index.html
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
  <head>

    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

    <title>AngularMaterialMin</title>

    <!-- CSS -->
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
    <link rel="stylesheet" type="text/css" href="css/app.css" />

    <!-- JS -->
    <script src="bower_components/hammerjs/hammer.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.min.js"></script>
    <script src="bower_components/angular-material/angular-material.min.js"></script>
    <script src="js/app.js"></script>

  </head>
  <body layout="vertical">

    <!-- ツールバー -->
    <md-toolbar>
      <div class="md-toolbar-tools">
        <span flex>AngularMaterialMin</span>
        <md-button aria-label="ボタン" ng-click="onClickBtn();">ボタン</md-button>
      </div>
    </md-toolbar>

    <!-- コンテンツ -->
    <md-content class="md-padding">
      <p>ここにコンテンツ</p>
    </md-content>

  </body>
</html>

ここでのポイントはbodyタグの「layout="vertical"」。これを指定しないとコンテンツ部分が長くなってスクロールしたときにツールバーも上にスクロールしてしまう。


css/app.css
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
}

input[type=text] {
  -webkit-user-select: auto;
}

Cordovaでのモバイルアプリ開発を意識した設定を入れているが、通常のWebアプリを開発するならハッキリ言ってこのCSSは無くてもいい。AMを動かすために独自のCSSで色々と設定する必要は無い。


js/app.js
var app = angular.module("app", ["ngMaterial"]);
app.controller('AppCtrl', function ($scope) {

  console.log('メインコントローラー初期化');

  $scope.onClickBtn = function(evt) {
    console.log("onClickBtn()");
  }

});

ここでのポイントは追加モジュールとして「ngMaterial」を指定すること。これを指定しないと全く動かない。


テーマを指定する

テーマの読み込みと指定方法を探すのに少々苦労した(^^);

デフォルトテーマは「angular-material.min.css」。その他のテーマは追加でthemesの配下にあるテーマファイルを読み込む。

例えばこのようなファイル「bower_components/angular-material/themes/amber-theme.css」。テーマのCSSを読み込む順番は任意で構わない。

その上で、各コンポーネントに「md-theme」のアトリビュートを使ってテーマを指定する。

<md-progress-linear md-theme="amber" mode="determinate" ng-value="50"></md-progress-linear>

md-buttonはデフォルト状態ではテーマを変更しても色が変わらない。「class="md-primary"」などの色が付くようなクラスを指定する必要がある。


全プロジェクトファイル

GitHubに上げてある。

junkoro/AngularMaterialMin

ライセンス?

WTFPL – Do What the Fuck You Want to Public License

PolymerとAngularJS、Material DesignとPaper Elements、そしてAngular-Materialの関係の整理

PolymerとAngularJS、Material DesignとPaper Elements、そしてAngular-Materialの関係をざっくり整理してみたいと思う。


Polymer

Welcome - Polymer

PolymerはW3C標準のWeb Components(カスタムエレメント)を作るためのライブラリと言えるだろう。データバインディングの機能も持っている。

Data binding overview - Polymer


AngularJS

AngularJS — Superheroic JavaScript MVW Framework

AngularJSはWebアプリを作成するための汎用ライブラリと言えるだろう。Polymerのように、AngularJSにもデータバインディングとカスタムエレメント(ディレクティブ)を作る機能がある。


Material Design

Introduction - Material design - Google design guidelines

Material DesignはGoogleが提唱しているデザインガイドライン。色やアニメーション、スペーシングなどが事細かに決められている。

Metrics & keylines - Layout - Google design guidelines

これはむしろ、「デザインガイドライン」というより「デザイン規約」、もしくは「デザイン仕様」と言った方がいいかもしれない。


Papar Elements

Material Designを実装した(規約・仕様に準拠した)コンポーネント(カスタムエレメント)集と言えるだろう。

Material Designのサイト内で実際のコンポーネント例としてPaper Elementsが使われていることから、少なくとも現状ではMaterial Design ≒ Paper Elementsと考えて良さそうだ。

Buttons - Components - Google design guidelines

実際に動くPaper ElementsはPolymerのサイトにある。(PolymerによるPaper Elements実装)

Paper Elements Sampler


Angular-Material

material.angularjs.org

AngularJSによるPaper Elements実装と言えるだろう。PolymerによるPapar Elements実装よりも後発。


それぞれの関係性を図で表現してみる


PolymerとAngularJSは同一レイヤー。その上にMaterial Designというデザインコンセプトが乗っかっている。

Polymerにより実装されたPaper Elementsと、AngularJSモジュールのAngular-Materialにより実装されたPaper Elementsがある。

そのほか、Android SDKにもMaterialテーマがあることから、JavaによるPapar Elements実装もあると考えて良いだろう。

Getting Started | Android Developers

PolymerとAngularJSの違いについてはこちらが参考になる。

Here's the difference between Polymer and Angular - Binpress

2014年11月6日木曜日

SIMロック解除義務化の対象が来年5月以降に発売の端末(の予定)っておかしくないか?

日経14.10.25朝 携帯のSIMロック解除 来年5月から義務化 総務省

…総務省が月内にも新たな制度案を発表する。その後の意見公募を経て、年内に正式に決める。

具体的には15年5月以降に投入される新製品から、利用者が求めれば携帯会社は解除しなければならなくなる…

あたかも決定事項のような見出しだけど、実はまだパブコメの段階で正式決定は年内だと。まぁ、ほぼ決まりなのだろうけれど。

問題はその対象端末だ。なぜ来年5月以降発売の端末だけなのか?

すでに端末代金を払い終わった端末は?解除の手数はかかるわけだから、タダでとは言わない。端末代金を払い終わった端末こそ是非!

しかしこうなると、キャリアの奨励金が減り、端末を買い換える人が減り、特に日本の端末メーカーはさらに厳しい状況になりそうだ。

ユーザーとしては、確かにある点ではメリットがあると思う。しかし、見かけ上の端末価格が高くなって買い換えマインドが萎縮するだろうことや、キャリア、端末メーカーのことを考えるとどうだろう。

日本全体として本当にこれで幸せになれるのか、正しい政策なのかどうか、疑問ではある。

2014年11月3日月曜日

SNSの書き込み規制が行われているのは中国だけではないようだ。タイも、ベトナムも…

日経14.10.22朝 タイ、強まるネット規制 ソーシャルメディアを警戒 バンコク・ポスト(タイ)

…タイのプラユット暫定首相は…ソーシャルメディアを業務の妨げとみなしており…これまで声を上げられなかった層ともつながることができるという、インターネットの本質を理解していないようだ…

ベトナムでは、ソーシャルメディアで時事問題について論じることが禁じられ、「個人的」交流にしか使えない。

インドネシアにはネットでの書き込みを取り締まる法律があり…

フィリピンの最高裁判所は政府に広範囲な規制を認める判決を下した…

過去の出来事を自分に有利にするためにネット上のコンテンツを規制したり、形作ろうとしたりするリーダーが、数百万人のネットユーザーから反発を受けるのは間違いない。

(20日付)

どうやらSNSの書き込み規制が行われているのは中国だけではないようだ。これは初めて知った。タイも、ベトナムもか…

ということは、むしろアジアの国々では日本のように自由にSNSを使える国は少ないということなのかもしれない。

日本では表現の自由は憲法で保障されていて、その権利があることを当然のこととして考えているが、まわりを見回してみると実はそうでもないようだ。

そんな日本人としては「それでいいのか?」と聞きたくはなるが、他国のことだし、価値観を強制することはできない。

ただ、タイの新聞はその状況に満足してはいないようだ。

2014年11月2日日曜日

皇后陛下がA級戦犯に言及

日経14.10.20朝 「争いの芽 罪続ける努力を」皇后さま、80歳に

皇后さまは20日、80歳の誕生日を迎えられた。これに先立ち、宮内記者会の質問に文書で回答された…

宮内庁は皇后さまの公私にわたる様子を収めた写真や映像を公開した。宮中三殿で行われる秋期皇霊祭の儀などの宮中祭祀(さいし)の模様や…

映像は「皇后陛下 傘寿をお迎えになって」と題するDVDにまとめられ、20日から政府インターネットテレビで視聴できる…

こういうのはできる限り一次情報にあたらなければならない。ということで。

皇后陛下お誕生日に際し(平成26年) - 宮内庁

驚いたのは、A級戦犯について言及されていることだ。

私は,今も終戦後のある日,ラジオを通し,A級戦犯に対する判決の言い渡しを聞いた時の強い恐怖を忘れることが出来ません。まだ中学生で,戦争から敗戦に至る事情や経緯につき知るところは少なく,従ってその時の感情は,戦犯個人個人への憎しみ等であろう筈はなく,恐らくは国と国民という,個人を越えた所のものに責任を負う立場があるということに対する,身の震うような怖れであったのだと思います。

まさか不用意に言及されたはずはなく、宮内庁、政府、天皇陛下にもご相談の上だろう。

あくまで過去の感情のことをおっしゃっているのであって、現在の感情と明言されてはいないものの、おそらくは今も同じ感情をお持ちなのではないかと思われ。

つまり、「A級戦犯に憎しみなど無い」という国民に対するメッセージなのではないかと思う。

日経の記事ではこの件はスルーされている。毎週ある皇室番組でもスルーされていたが、日テレの「皇室日記」だけはスルーしなかったということは覚えておきたい。

もう一つのポイント、非常にめずらしい皇后陛下の宮中祭祀の映像があるそうなのでチェックしてみた。

皇后陛下 傘寿をお迎えになって - 政府インターネットテレビ

残念ながらチラッとしか映ってなかったけど(´・ω・`)

2014年10月31日金曜日

Cordova/PhoneGap開発のデバッグを何とかする

Cordova/PhoneGapアプリは、ネイティブアプリでラッピングしたWebView内で動くWebアプリだと言える。

これをデバッグするには、そのWebViewからconsole.log等のデバッグ情報を取る必要があるが、どのように取得するのか?いくつかの方法を試した。


Monacaで開発する - NG

MonacaはWebアプリとして作られたIDEだ。

Monaca - HTML5モバイルアプリ開発プラットフォーム

Monacaには「Monaca Debugger」というアプリがAppStoreやGooglePlayで配布されている。

Monaca デバッガー - Monacaドキュメント

これをターゲットデバイスにインストールしておくと、ほぼリアルタイムにコードの変更を反映してくれる。コンソールはもちろん、スクリーンショットを取ったりする機能もある。


ちゃんと動いてくれればベストだったが、残念ながらコードの変更を反映するタイミングが少々遅いのと、いつまで経っても反映されないという状況に何度も陥った。

というわけで、コンソールを使う以前の問題で撃沈。


weinreを使う - NG

weinre(わいなりー)は「WEb INspector REmote」の略で、Webアプリのリモートインスペクターだ。Cordova/PhoneGapの開発では最も一般的な方法らしい。

weinre - Home

Webアプリ内に開発機上のサーバーとコミュニケーションできるようにするスクリプトを埋め込む必要があるので少々面倒だが、ChromeのDevToolsのような感じで取っつきやすい。


実際に使ってみるとconsole.logの内容は出るものの、WebViewが出すエラー(function not defined的なやつとか)がコンソールに出ない。調べてみたが、WebViewが出すエラーを表示する方法は見つからなかった。

これでは非常にキビシイ。。。というわけで撃沈。


Chromeのリモートデバッグを使う - (・∀・)

Android 4.4(kitkat)以降はAndroid上のChromeだけでなくWebViewのデバッグもできるようになった。

Remote Debugging on Android with Chrome - Google Chrome

これは完璧だった。


iOSの場合はSafariが同様の機能を持っているようだ。まだ試していないが、おそらくSafariで同様にデバッグできるだろう。


デバッグ以前の問題として、WebViewのリロードが問題になるだろう。この件についてはこの記事が役に立つだろう。

琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「LiveReload + GapReload plugin」編

2014年10月28日火曜日

ドコモの2年縛りからの解放時に「最も美しく」解約するタイミング

色々とMVNOのSIMに移行させているけれど、まだ1台だけドコモの機体がありまして。来月の上旬には晴れて2年縛りから解放されることとなる。

ところで、2年縛りからの解放時に「最も美しく」解約するタイミングはいつなのか?

それを聞くためだけにわざわざドコモショップへ行った。案の定待たされた。しかし、話はすぐに終わった(^^);

「来月5日でご契約が満二年になりますので、その月いっぱいになります。つまり、12月1日に解約すれば違約金などが発生しません。」との趣旨のお話し。

つまり、「契約満期日の翌月の1日」が最も美しく解約するタイミングだそうだ。

これから実際に12月1日を待って実証したいと思う。

追記14.12.01:(あとで結果を書く)

2014年10月27日月曜日

Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「LiveReload + GapReload plugin」編

この記事は「PhoneGap Developer App」編の続きです。

「PhoneGap Developer App」についてのJohannesさんの記事のコメントでSebastienさんが、カスタムプラグインをサポートしつつライブリロードする別の方法についてコメントしている。

Livereload for Phonegap/Cordova/Ionic - Johannes Schickling

…Hi, I wrote the GapReload plugin (https://github.com/fingerproof... which is a LiveReload Cordova/PhoneGap plugin that, unlike the PhoneGap app, works with custom plugins. Just wanted to let you know :) Hopefully you can try it and give me some feedback. …

これだね。早速試してみよう。

fingerproof/cordova-plugin-gapreload

全体的なイメージをつかむために、Sebastienさんが用意してくれているビデオを見ておいてもいいかもしれない。


GapReload Cordova/PhoneGap plugin demo from Sebastien Paul πtt° on Vimeo.

前提として、AndroidでCordovaアプリを動かす環境が整っていることとする。まだ整っていない場合はこの記事が参考になるだろう。

琴線探査: CordovaのAndroidアプリを動かすまで(MacOS XとAndroid Studioにて)


プロジェクトの作成とプラグインの組み込み

# cordova create TestApp
# cd TestApp
# cordova platform add android
# cordova plugin add https://github.com/fingerproof/cordova-plugin-gapreload --variable SERVER_HOST="192.168.xxx.xxx"


「LiveReloadの」インストールと設定

まず、こちらから「LiveReload」を開発機にインストールする。Mac版とWin版がある。

How do I start using LiveReload? – LiveReload Help & Support

MacのAppStoreに有料版があるが、とりあえず無料版のv2.3.66をインストールする。

起動するとメニューバーにこのようなアイコンが表示される。


これをクリックするとこのようなウインドウが表示されるので、「+」をクリックして「TestApp」のルートフォルダを選択する。


Optionsをクリックする。


「+」をクリックする。


TestApp/platformsとTestApp/pluginsを追加する。


「Disable live reflesh」をチェック。live refleshだとdevicereadyイベントが来ないでリフレッシュされてしまうので。


そして「Apply」。ここでLiveReloadがクラッシュするかもしれないが、めげずに再起動させて続ける。

「Run custom command…」からの「cordova prepare」を入力して「Apply」。


これでLiveReloadの設定は終了だ。


アプリの起動とサーバーの起動、そしてアプリからサーバーへの接続

Androidの実機をデバッグモードで開発機に接続しておく。

# cordova run
# cordova serve

アプリからサーバーへ接続する。



コンテンツの編集とライブリロードの確認

起動時はこのような画面が表示されているはず。


ここで、TestApp/www/index.htmlを適当に編集して、アプリの表示が自動的に変更することを確認する。


保存してから変更されるまでに多少のタイムラグがある。リロードされると「cordova serve」したコンソールにこのようなログが表示されるので確認するといい。

Static file server running on port 8000 (i.e. http://localhost:8000)
CTRL + C to shut down
200 /android/www/index.html
200 /android/www/css/index.css
200 /android/www/cordova.js
200 /android/www/js/index.js
200 /android/www/img/logo.png
200 /android/www/cordova_plugins.js
200 /android/www/plugins/pro.fing.cordova.gapreload/gapreload.js
200 /android/www/plugins/org.apache.cordova.device/www/device.js
200 /android/www/plugins/com.ququplay.websocket.WebSocket/www/phonegap-websocket.js
200 /android/www/gapreload.xml
200 /android/www/index.html
200 /android/www/css/index.css
200 /android/www/cordova.js
200 /android/www/js/index.js
200 /android/www/img/logo.png
200 /android/www/cordova_plugins.js
200 /android/www/plugins/pro.fing.cordova.gapreload/gapreload.js
200 /android/www/plugins/org.apache.cordova.device/www/device.js
200 /android/www/plugins/com.ququplay.websocket.WebSocket/www/phonegap-websocket.js
200 /android/www/gapreload.xml

あとはwww以下のコンテンツをバリバリ編集していくだけだ。

最後にもう一点。アプリのインストール時にはUSBで接続しておかなければならないが、一度インストールしたらケーブルを使わなくてもWiFiでデバッグできる\(^o^)/

追記14.11.26:ionicは簡単!
琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「ionic」編

Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「PhoneGap Developer App」編

Cordova/PhoneGapでの開発は、HTMLやJavaScript、CSSなどの頻繁に変更されるファイルの編集がメインになる。

つまり、基本的にはこれらのファイルを変更するたびにコンパイルし直して端末・エミュレーターにインストールして…という非常に時間のかかる作業を繰り返すことになる。これでは極めて生産性が低い。

そこで、端末にインストールしたアプリのHTMLコンテンツの部分だけを変更のたびにライブリロードするという便利なネイティブアプリがあるので試してみる。(AndroidとiOS、WindowsPhone用)

PhoneGap Developer App

まず開発マシン上でWEBサーバーを起動し、

# phonegap serve
[phonegap] starting app server...
[phonegap] listening on 192.168.0.150:3000
[phonegap]
[phonegap] ctrl-c to stop the server
[phonegap]

アプリ側からサーバーに接続する。


ここでHTMLコンテンツの何かを変更すると、アプリが自動的にリロードしてくれるようになる。これでいちいちコンパイルとインストールを繰り返さなくて済むわけだ。

しかし、このシステムには大きなデメリットがある。それは、PhoneGapの標準プラグインは動作するものの、カスタムプラグインが動作しないことだ。

Livereload for Phonegap/Cordova/Ionic - Johannes Schickling

…PhoneGap Developer App doesn't support custom plugins yet…

しかし、このように書かれているので、将来的にはサポートされるかもしれない。

PhoneGap | PhoneGap Developer App


At the moment, we’re focusing on:

Windows Phone 8 support (already under development)
Custom plugin support support
Remote Web Inspector support
PhoneGap Build integration

この記事の後に1.3.0までバージョンアップしているが、まだサポートされていない。

PhoneGap | PhoneGap Blog

しかしながら、PhoneGap Developer AppにはiOSの開発者ライセンスを持っていなくても簡単にiOS上での開発ができるという大きなメリットもある。

ただ、実際の開発ではカスタムプラグインが使えないことは非常に問題なので、他の道を探ることにした。

琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「LiveReload + GapReload plugin」編

追記14.11.26:ionicは簡単!
琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「ionic」編

2014年10月25日土曜日

日本でも「モバイルファースト」のアプローチを取るべきだということに納得するグラフ

日経14.10.12朝 高1の9割スマホ保有 総務省調べ 利用も長時間に

…半数が休日に3時間以上使っている…平日でも3割強が3時間以上使っていた…

「パソコン」の保有率は52.2%まで低下…

休日で「6時間以上」は15.7%いた…

日経記事より

第1に、スマホ中毒的な子達が少なからずいること。最近の高校生は忙しいと言うけれど、実はスマホのせいかもね(^^);

第2に、もはやPCはほぼオワコンということ。

第3に、タブレットは高校生の間ではあまり使われていないこと。スマホがあれば十分というのと、コストの問題だろう。

第4に、PCからスマホへの転換点は2012年の中盤あたりだったということ。まあこれは今更知ってどうなるものでもないけれど、現実に転換点は過ぎているという確認の意味はあるだろう。

結論としては、モバイルファーストのアプローチを取らなければならないということだろう。PCサイトよりもモバイルサイトを、モバイルサイトよりもネイティブのアプリを作れということだ。

「アクアマリンふくしま」の入場者数はいまだピークの6割(´・ω・`)

日経14.10.11夕 ふるさと再訪 福島・いわき 2 アクアマリンふくしま

…安部義孝館長(73)。不思議なご縁である。海獣ショーも無く「サンマやイワシ、メヒカリなどカリスマ性のない魚」と「芸術」を前面に出した環境水族館。館内で釣った魚を食べて食物連鎖を学び、干潟・磯・砂浜で生物に触れるユニークさで年100万人近くを集客すると知り、安部館長の取材に通ったのが2010年9月だ…

再会から3年余。様々なドラマがあったが、館長は冷静だ。福島県というだけで観光客に敬遠され「13年度の入場者数はピーク時のまだ6割」。沿岸で捕獲した魚の放射線量を公開して風評被害の払拭に努める…

そうかぁ…まだ6割くらいしか戻ってないのかぁ(´・ω・`)

自分は震災の1年後くらいにアクアマリンふくしまに行った。

琴線探査: 「アクアマリンふくしま」のこの看板に涙が出た

琴線探査: サンマが泳ぐ姿@アクアマリンふくしま

琴線探査: 「アクアマリンふくしま」の愉快な面々

琴線探査: 「アクアマリンふくしま」バックヤードツアー

琴線探査: くじら汁とくじらフライ@アクアマリンふくしま

震災の影響でまだ色々と未整備な箇所があったものの、「環境水族館」というコンセプトのアカデミックな感じで、単に「楽しい」というより「興味深い」という意味でとても楽しめる水族館だった。

その後はきっと未整備な箇所も無くなってきているはずだけど、まだ6割とは…やっぱり風評被害というものがまだ根強くあるのだろうか。

自分はまた行きたいなと思っているけどね。

ルクセンブルクが1人あたりのGDP世界No1で、スノッブで、ライブでなかなかノってこない理由が分かった気がしたアマゾンの税優遇問題の記事

日経14.10.08朝 アマゾン税優遇も調査 欧州委、ルクセンブルク対象に

【ロンドン=黄田和宏】欧州連合(EU)の執行機関である欧州委員会は7日、加盟国のルクセンブルクが米アマゾン・ドット・コムに適用してきた法人税の優遇策が欧州委の規定に違反する疑いがあるとして、正式に調査を始めたと発表…

米アップルのアイルランドなどの措置に続き、企業の「税逃れ」に厳しく臨む姿勢…

アマゾンの欧州販売子会社は、ウェブサイトの使用権などを名目として同国内の関連会社に税金を控除できるロイヤルティー(使用料)を支払ってきた。この関連会社はルクセンブルクで法人税を納める義務がなく…

最終的に違反と判断されれば、アマゾンは多額の追加納税を求められる可能性が…

アイルランドやルクセンブルク、オランダなどは低い法人税率や優遇措置を売り物に、インターネット関連などの企業の誘致に力を入れてきた…

まず、自分も色々とモノを買っている企業は、法律ギリギリのあらゆる手を尽くして世界中で活動してコストカットしてるんだなと。

これもビジネスモデルだと思うのだけど、その構造は複雑で一瞬では理解できない。いや、よく見た後でも理解できているかどうか。こんなのよく考えるな(^^);

日経記事より

正直、記事自体にはあまり興味が無い。それなのになぜ目にとまったかといえば、この記事が出る少し前にFRIED PRIDEがルクセンブルクでライブをやってきたという話を聞いていたからだ。

ルクセンブルクという国は聞いたことはあるけれど、どんな国だが全く知らないのでWikiをちょっと見てみた。

ルクセンブルク - Wikipedia

わが神奈川県と同じくらいの広さで、人口はたったの50万人足らず。神奈川県の人口は900万人以上というのだから凄まじい人口密度の低さだ。いや、神奈川県の方が異常なのか(^^);

さらに驚くべきは、一人当たりのGDPが世界No1だというところ!どんだけ頭がいいのか!どんだけ生産性が高いのか!

じゃあどんな産業があるのかというと、主な産業は重工業と金融だそうだ。人口が少ないことを考えると重工業はあまり儲からなそうなので、きっと金融がすごいんだろうなぁと思っていた。

そんな時にこの記事を見て、1人あたりのGDP世界No1という意味がなんとなく分かった気がした。あと、ルクセンブルク人がスノッブで、ライブでなかなかノってこない理由もね。

つまり、すごく頭が良くて気位が高いんだろう。

A4サイズ、約400g、iPhoneを約90分で急速充電可能なソーラーパネル「SunPad10」

日経14.10.07朝 太陽光で急速充電 システムトークスの超薄型太陽光パネル「SunPad(サンパッド)10」

米アップルのスマートフォン(スマホ)「iPhone(アイフォーン)」を約90分で急速充電できる厚さ3ミリメートル、A4サイズ台の黒色の薄型パネル。重さは407グラムで携帯しやすい…6048円…

本家サイトより

これですなぁ。

iPhoneを最短90分で急速充電できる発電力!SunPad 10新発売 SS-10SPD 

これ自体には充電池が付いていないようなので、干しておいて電気を貯める事はできないもののその分軽く、A4なので鞄などにもすっぽり入るところが良い。

ポイントなのはUSBだけでなく12Vの出力があるところ。12Vの出力があれば、最近気に入っているSONYのSRS-X5というBluetoothスピーカーも充電できそうだ。アウトドアでずっと大音量のBGMを流しておくなんてことが可能かもしれない。



システムトークス社のより大きなソーラーパネルなら、インバーターをかましてノートPCやルンバも充電可能らしい。これは布団を干す感じだね。

ナノ発電所 情報サイト / パーソナル・スマート・グリッド



最近Twitterでフォローしているガザの女の子が、電気が止まってiPhoneを充電できなかったり夜に明かりが無くて勉強できないなど色々と困っている。

もしこれがあれば…日本の電化製品のクオリティーは非常に高い。日本はこういったものでも国際貢献ができるかもしれないなぁと思う。

地震が多い日本の災害時にも有効だろう。ひとつ買ってみるかなぁ。こういうソーラー的なので当たったこと無いんだけど(^^);

2014年10月23日木曜日

CordovaのAndroidアプリを動かすまで(MacOS XとAndroid Studioにて)

Android Studioのインストール

従来ならeclipseをインストールするところだが、ナウなヤングはAndroid Studioにしよう。

eclipseのADTプラグインはもう開発が停止しているようで、これから新しく始めるならこちらの方がいいと薦められている。

Android SDK | Android Developers

Get Android Studio Beta

Android Studio is a new IDE powered by IntelliJ that provides new features and improvements over ADT. It's currently in beta but will be the official Android IDE once it's ready.

If you're a new Android developer, you should consider starting with Android Studio, because the ADT plugin for Eclipse is no longer in active development.

また、eclipseよりAndroid開発に特化しているので扱いやすいというメリットもある。例えば、Android SDKは「Android Studio.app」の中に内蔵されているので、必要なファイルがバラけなくていい。

こちらからdmgをダウンロードして解凍する。

Android Studio | Android Developers

インストールは「Android Studio.app」をアプリケーションフォルダなどに放り込むだけだ。


Android SDK Managerで必要なパッケージをインストール

Android Studio.appを起動して適当なプロジェクトを作る。

ツールバーにこのようなアイコンがあるので、クリックしてSDK Managerを起動する。


Android SDK Build-Toolsは最新のものに入れ替えた。


Android 5.0(API 21)はインストールが初期選択。Android 4.4.2(API 19)は最新版のcordovaでAndroidアプリをビルドするのに必要なので選択しておく。



Extrasは適当でいいが、ドキュメントで推奨されていたものを一応入れておく。
Adding SDK Packages | Android Developers



Antをインストールする

cordovaでAndroidアプリをビルド・実行するために必要。こちらから「apache-ant-1.9.4-bin.zip」をダウンロードしてダブルクリックで解凍する。

Apache Ant - Binary Distributions

インストール場所は任意で構わないが、自分は/usr/local/apache-ant-1.9.4にインストールしておいた。

# sudo mv /Users/username/Downloads/apache-ant-1.9.4 /usr/local


Android SDK関連の環境変数の設定

Android SDKはAndroid Studioのアプリ内(Android Studio.app/sdk)にあるが、アプリ名にスペースが入っているためcordovaのコマンドラインツールで不具合を起こす。

そこで、参照するときにスペースが入らないようにするため、あらかじめシンボリックリンクを張っておく。シンボリックリンクの場所は任意で構わないが、自分は/usr/local/android_sdkとした。

# sudo ln -s /Applications/Android\ Studio.app/sdk /usr/local/android_sdk

.bashrcを編集する。

# vi ~/.bashrc

ANDROID_HOME="/usr/local/android_sdk"
ANT_HOME="/usr/local/apache-ant-1.9.4"

export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANT_HOME/bin

# source ~/.bashrc

環境変数とパスの確認。

# echo $ANDROID_HOME
# echo $ANT_HOME
# echo $PATH
# android -h (これがAndroid SDK Manager)
# adb version
# ant -v


Node.jsのインストール

こちらからpkgをダウンロードしてダブルクリックでインストールする。

node.js

インストール確認。

# node -v
# npm -v


cordovaのインストール

# sudo npm install cordova -g

「-g」はグローバル。

インストール確認。

# cordova -v


cordovaプロジェクトの作成と実行

まずAndroidの実機をデバッグモードでつないでおく。

# cd /path/to/cordova/projects/home
# cordova create TestApp
# cd TestApp
# cordova platform add android
# cordova run android

成功するとこのような画面が表示される。


以上、終了!