ionic – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 HTML5 Experts.jp 2014年の年間読まれた記事ランキングTOP20！ /yusuke-naka/11973/ Fri, 26 Dec 2014 06:47:16 +0000 /?p=11973 日本初のHTML5技術専門サイト「HTML5 Experts.jp」も開設から1年5カ月が経ちました。2014年は時事ネタをタイムリーに取り入れた特集記事を充実させて参りましたが、皆様、お楽しみいただけましたでしょうか？今年最後の記事は、記事公開後１週間の閲覧数（PV）をもとに、2014年の年間読まれた記事ランキングTOP20！をお届けします。

年間読まれた記事ランキングTOP20！

＜1位＞
1 Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント
── 川田寛



＜2位＞
2 モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」
── Tomomi Imura



＜3位＞
2 Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
── 中島 直博



＜4位＞
2 Web Componentsが変えるWeb開発の未来
── 泉水翔吾



＜5位＞
2 HTML5とかモバイルとかJSフレームワークとか、ぶっちゃけどうなの座談会
── 村地彰



＜6位＞
2 初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
── 小山田 晃浩



＜7位＞
2 いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念会
── 佐川 夫美雄



＜8位＞
2 HTML5で実現できる！環境光に合わせたレスポンシブなUI
── Tomomi Imura



＜9位＞
2 いま、UXを語るのはなぜ悩ましいのか？─長谷川恭久ロングインタビュー
── 白石 俊平



＜10位＞
2 エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
── 酒巻瑞穂



＜11位＞
2 Web技術者も知るべきデモ・プレゼンの極意（西脇資哲氏）「Microsoft de:code」イベントレポート
── 岩瀬 義昌



＜12位＞
2 HTML5が変える、エンタープライズITの可能性とこれから
── 川田寛



＜13位＞
2 【速報】Google I/O 2014 キーノート ライブレポート
── 岩瀬 義昌




＜14位＞
2 自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
── 石本 光司



＜15位＞
2 キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！
── 金井 健一



＜16位＞
2 話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう
── 佐藤歩



＜17位＞
2 HTML5ハイブリッドアプリ開発、最新動向はやわかり！
── 久保田 光則



＜18位＞
2 ミツエーリンクスのCTOに「UXとWebアクセシビリティ」について聞いてきた─木達一仁ロングインタビュー
── 白石 俊平



＜19位＞
2 Web Componentsを構成する4つの仕様 ー Web Components基礎編
── 泉水翔吾




＜20位＞
2 NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編)
── 高橋 登史朗





モバイルWeb、WebComponets、AngularJS…

モバイルWebというキーワードは今年注目を集めましたね。関連記事がいくつかランクインしています。また、WebComponets、AngularJSという今年話題になった技術の記事もランクインしています。特集では、GoogleI/O特集やExperts Opinions「UX」特集が注目を集めました。UX特集は年明けにも記事公開を予定していますので、お楽しみに！

HTML5 Experts.jpは2014年も多くの方々にご愛読いただきまして、執筆陣・編集部共々感謝しています。ありがとうございました。来年も引き続き宜しくお願いいたします。

]]> キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！ /canidoweb/7359/ Mon, 07 Jul 2014 01:00:05 +0000 /?p=7359 連載： ハイブリッドアプリ開発最前線 (4)

ionic

ionic 概要

ionicはそのサイトのデザインからも見てわかるとおり、シンプルかつ美しいUIを取り揃えたコンポーネント群で、Apache Cordova を拡張して作られているフレームワークです。
また、動的なUIコンポーネントを実装するために、 AngularJS を採用してる点もその特徴の1つです。

ionicがサポートしているプラットフォームは、iOS 6+とAndroid 4+です。（ただしAndroidについては、2.3+でもいくつかの機能を提供してるとのこと）
現状ではこの2つのプラットフォームのみですが、Windows PhoneとFirefoxOSについても今後対応を進めていくようです。

特徴

  • Apache Cordovaを拡張して作られている、モバイルUIフレームワーク＆開発ツール
  • UIがシンプル、かつ美しい
  • AngularJS を採用している
  • 現状はiOS 6+とAndroid 4+のサポートのみで、Windows PhoneとFirefox OSについては今後対応予定

ionicでHello, World

事前準備

ionicでアプリケーションを開発するためには、 Node.js がインストールされている必要があります。 インストールされていない場合は、上記のリンクからダウンロードしてインストールしておきましょう。
また、各プラットフォーム（Android、iOS）ごとに必要なSDKのインストールも必要です。
こちらについては本稿では触れませんのでご了承ください。

1. cordova-cliとionic-cliのインストール

Node.jsのnpm-cliを利用して、cordova-cliとionic-cliをインストールします。
今回はiOSを対象に解説していくため、ios-sim-cliもインストールしておきます。
これは後述するiOSのエミュレータでの確認をするために必要となります。

$ sudo npm install -g cordova ionic
  $ sudo npm install -g ios-sim

2. ionicプロジェクトの作成

ionicのプロジェクトを作成します。

$ ionic start myApp tabs

実行すると”myApp”という名前のプロジェクトが作成されます。
“tabs”という引数はデフォルトのテンプレートの指定になります。
“blank”、”tabs”、”sidemenu”の3種類がテンプレートとして用意されていますので、ご自身で作成するアプリケーションの要件に応じて使い分けるとよいでしょう。
各テンプレートのレイアウトは以下の画像を参照してください。 project

3. 対象のプラットフォームを設定

次に、作成したプロジェクト内に移動して作成するプラットフォームを指定します。
iOS 向けの設定を追加します。

$ cd myApp
  $ ionic platform add ios

4. Hello, Worldを書く

今回のケースでは、アプリケーション起動時に表示されるhtmlはmyApp/www/templates/tab-dash.htmlなので、このhtmlファイルを編集します。
以下のように、h1要素のテキストを”Hello, World”に書き換えます。

<ion-view title="Dashboard">
      <ion-content class="has-header padding">
          
Hello, World

      </ion-content>
  </ion-view>

5. 変更を確認する

アプリケーションの動作確認をおこなうためには2つの方法があります。
主にデザインやレイアウトの確認を行なう場合であればWebサーバを起動して確認するとよいでしょう。

$ ionic serve

serve

$ ionic build ios
  $ ionic emulate ios

ネイティブのAPIを利用している箇所は、エミュレータを起動して確認しましょう。

emu

6. 実機での動作確認

Androidであれば、実機と開発環境をUSBケーブルで接続してから

$ ionic run android

で実機にインストールすることができます。

iOSの場合は、ionicコマンドから実機にインストールすることができません。
iOSでの実機確認を行なうには、XcodeからmyApp/platforms/iosを開いて実機にインストールすることができます。
これ以降はXcodeでの作業になります。

ionic の機能

ionicコマンドで作成されたプロジェクトには、以下のディレクトリが配置されます。
これらがionic独自のディレクトリで、Apache Cordovaとは大きく異なる点です。
Apache Cordovaで作られたプロジェクトにはこれらのディレクトリは存在しません。

myApp/www/lib/ionic
  myApp/scss/

myApp/www/lib/ionic配下のファイル群がionicが提供するUIコンポーネント群の実体です。
またionicはSassを採用しているので、myApp/scss/やmyApp/www/lib/ionic/scss配下のファイルを編集することで、UIコンポーネントをカスタマイズすることも可能です。
もちろん、myApp/www/lib/ionic/css配下のcssファイルを直接編集することも可能ですが、7000ステップ以上ありますので現実的ではありません。
カスタマイズを前提とするならば、Sassの導入は必須となります。

Optional

ionicは、タスクランナーとしてgulp.jsを採用しています。
gulp-cliを利用することで、Sassを自動コンパイルさせたりすることもできます。
設定方法について詳しく知りたい方はこちらを参照してください。

ngCordovaモジュール

2014/6/3に公式ブログから ngCordova のαリリースが発表されました。
cordova.js（ネイティブの機能を呼び出すためのApache Cordovaのライブラリ）をAngularJSでラップしたモジュールです。
ionicにとっては、cordova.jsを直接呼び出して使用するよりも、ngCordovaというAngularJSのモジュールとして扱うことで親和性が高くなり、これまで以上に機能拡張が容易になります。

最後に

以下のProductsのページには、”Coming mid-2014: Powerful mobile development tools and services for Ionic.”と記述されていて、近々大きなリリースを予定しているのが伺えます。
注目されているフレームワークの1つですので、今のうちから試してみてはいかがでしょうか。

products

参照リソース

]]>