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級戦犯に憎しみなど無い」という国民に対するメッセージなのではないかと思う。

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

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

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

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