Experts.jp日本に、もっとエキスパートを。(3)Web制作してると、また新技術が出たのかと思うと、気づいたら「新常識」が増えてたということに頻繁に出会います。タスクランナー、SCSS、LiveReload、SPA、PWA、ハイブリッドアプリ。2」が先日リリースされましたので、ご紹介します。2の概要Ionic2は、アメリカのIonic社が中心となって開発しているオープンソースのモバイルフレームワークです。1の後継プロダクトとなり、当時の経験が反映され、とても完成度が高く仕上がっています。先日の2017年1月29日に正式リリースされました。Applicationを公開していますので、ぜひアクセスしてみてください。モバイルアプリのデモですので、スマホからアクセスするのがいいかと思います。2の世界観とデフォルトデザインの完成度の高さがよくわかるデモとなっています。2上に構築されているので高速という特徴があります。2でどのような体験ができるかをご紹介するために、実際にプロジェクトを立ち上げてみます。インストールください。最初に、ターミナル(Windowsの場合はコマンドプロンプト)を立ち上げ、以下のコマンドを入力します。CLIというパッケージをインストールします。cordova次に、プロジェクトを作るフォルダに移動して、以下のコマンドを入力します。するとProjectNameという名前のフォルダが作成され、2-3分でプロジェクトが作成されます。serveという開発を開始するためのコマンドを入力します。serveすると、自動的にブラウザが立ち上がり、画面が表示されます。CLIが自動的に開発用サーバを立ち上げてくれたためです。2の開発を体験!早速開発してみましょう。2は、様々な機能が実装されているためにいろいろな設定ファイルやフォルダが用意されていますが、最初はsrc/とwww/の中をさわれば事足ります。www/では、まずsrc/pages/の中を見てみましょう。4つのフォルダが、画面のそれぞれのComponentに対応しています。Home画面だと以下の通りです。メインコンテンツはhome/home.htmlが、タブのエリアはtabs/tabs.htmlがテンプレートになっています。試しに、home/home.htmlをログインフォームにしてみましょう。home/home.htmlの中身を以下に差し替えて見てください。block>Login</button></ion-content>そして保存すると、自動的にブラウザが更新されて、ログインフォームが表示されます。LiveReloadという機能で、一回いっかい更新ボタンを自分で押す必要がないので、複数ディスプレイで作業してる時とても捗ります。これって何?home/home.htmlのタグをみると、ion-headerやion-contentと見覚えのないタグが使われていることに気づくと思います。2オリジナルのものです。ion-button>Login</button>だと、これをJavaScriptが以下のように展開します。2が処理してくれますので、開発コードがとても可読性の高いものとなります。2が用意しているComponentsは、公式のサイトから一覧で確認できます。2を使っていると、最初は「ドキュメントにあるコンポーネントをコピペしていく」だけで大部分のUIデザインが完了します。ワイヤーフレーム段階からがしがし作っては捨てるタイプの小さく回す開発が可能です。2は、CSSを拡張したSCSSを採用しています。変数などが使えるので、!importantを使わずにThemeの変更をすることが可能です。実際に、SCSSの変数機能を利用して、Themeを自作してみましょう。src/theme/variables.scssを開いてみてください。現在設定されているThemeの変数を入れ替えたり、上書きするための設定ファイルです。この$colorsで設定されているprimaryがdefaultの色となります。試しにこの色をredに変更して保存してみてください。正常にLiveReloadが動作していれば、自動的に以下のようにThemeが変更されます。他にも、様々な設定変数がIonic2には用意されています。試しにツールバーの背景色を変更してみましょう。$colorsの下に、以下の値を入力してください。yellow;そしてリロードすると、ツールバーの背景色が黄色になるのを確認できます。Variablesに書いてありますので、ここを見ながら変数を作っていくと、簡単にオリジナルThemeを作ることができます。2は、それぞれのモバイルOSの文化に寄り添ったデザインで表示されるようになっています。SafariでみるとiOSのデザインに自動的に変更されます。それぞれのモバイルブラウザでどのように表示されるかを見比べる機能があるので使ってみましょう。http://localhost:8100/ionic-labにアクセスしてみてください。先程の表示画面がそれぞれのモバイルプラットフォーム毎にどのように表示されるのか見比べることができます。UI,UXを考える上で、それぞれのユーザのプラットフォームの文化に寄り添うのはとても重要な要素ですので、とても重宝する機能です。Phoneのアプリとしてコンパイルすることができ、それぞれのプラットフォーム上でのアプリストアで販売できます(このように作られたアプリをハイブリッドアプリといいます)コンパイルは、とても簡単です。Xcodeをインストール済みのMacでしたら、以下のコマンドを入力するだけでコンパイルが行われ、iOSアプリとしてのプレビューが行われます。WorkerというWebサイトをアプリとして使うための技術を積極的にキャッチアップしています。2はデフォルトでオフライン対応が実装されています。オフライン対応を有効するのはとても簡単で、src/index.htmlの17-24行目のコメントアウトを外すだけです。err));}</script>ただ注意事項が2点ありまして、1つはServiceWorkerはSSLでしか動かないです。ひとつは、現行ではiOS非対応ですので、iPhoneでの確認をすることはできません。--prodのに分かれます。開発環境では前者を、本番環境では後者を使います。Compileのコマンドは以下ですので、お気をつけください。AoTガイドをご覧ください。終わりにここまでは、入門的HowToをご紹介してきました。冒頭でもふれたとおり、近年のフロントエンドのキーワードをまとめてさわるにはとても優れたモバイルフレームワークです。2ベースのComponents開発であったり、SPA文化であったり、開発に入る前にもっと触れておいた方がいい知識があります。そこで、次の入り口として、3つをご案内して結びにかえさせていただきます。2では、初心者向けのチュートリアルを用意しています。英語なので少し大変かもしれませんが、大変わかりやすく書かれてありますのでおすすめです。2のチュートリアルをする前にぜひこちらを試してみてください。2はリリース前(特にβ版時代)はとても日本語情報が少なかったので、知見を共有するためにslackのオープンチャンネルを開設しました。分かる方がいれば有志が回答する形ですのでレスポンス速度はあまり高くありませんが、ご活用いただけましたら幸いです。