42
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[翻訳] Ionicガイド(1/5)

Last updated at Posted at 2014-10-29

ネイティブなHTML5モバイルアプリケーションを構築できるIonicフレームワークのガイドを翻訳しました。

チャプター1: Ionicのすべて

Ionicの作者によって書かれた、HTML5モバイルアプリケーションを構築するためのIonicフレームワークの公式ガイド(http://drifty.com/) へようこそ。ここではあなたがIonicでアプリケーションを構築し始めるために知っておく必要なすべてが含まれており、より高度な開発のための基盤となります。

もし、あなたが過去に他のモバイル開発フレームワークを使用した経験があるのであれば、Ionicもほとんど同じように使えることでしょう。しかし、どのようなフレームワークでもとっかかりは常に困難なので、ここではシンプルに始めて基本的なコンセプトから発展していきます。しかし、最初に私たちは、Ionicがどのような開発に向いているのかや、なぜIonicを構築したのかなど、Iocniプロジェクト自体について少しだけ話す必要があります。

Ionicとはなんなのか、そしてどのような開発にむいているのか?

Ionicはハイブリッドなモバイルアプリを構築するのを対象としたHTML5モバイルアプリ開発フレームワークです。ハイブリッドアプリは、アプリの中のブラウザシェルで実行されていて、ネイティブのプラットフォーム層にアクセスすることもできる、小型のウェブサイトです。ハイブリッドアプリは、特にプラットフォームのサポート、開発のスピード、およびサードパーティ製のコードの利用面で、純粋なネイティブアプリケーションと比べて多くの利点を持っています。

Ionicはあなたのアプリを魅力的にするために必要なすべてのルック&フィールとUIの相互作用をしてくれるフロントエンドのUIフレームワークと思ってください。「ネイティブのためのBootstrap」のようですが、共通のネイティブモバイルコンポーネント、滑らかなアニメーションや美しいデザインを広い範囲でサポートします。

Ionicには、レスポンシブフレームワークとは異なり、iOSやAndoridのネイティブSDKで得られるような、いままでWebには存在しなかったような非常にネイティブなモバイルUIとレイアウトが含まれています。また、Ionicは既存のHTML5開発フレームワークをしのぐモバイルアプリケーション構築のための意固地ですが強力な方法と手段を提供します。

IonicはHTML5のフレームワークなので、ネイティブアプリケーションとして実行するためにはCordovaやPhoneGapのようなネイティブラッパーを必要とします。私たちはCordovaを使用するのを強く推奨します。以降ではIonicツールとしてCordovaを使用していきます。

なぜ私たちはIonicを構築したのか?

私たちは、HTML5がデスクトップの分野で起きたように、そのうちモバイルでも決定的になると強く信じてIonicを構築しました。デスクトップコンピュータは十分強力になり、ブラウザ技術が十分に進むことで、ほとんどの人が自分のコンピュータ上での時間をブラウザ内で費やすことになりました。そして、開発者は圧倒的にWebアプリケーションを構築するようになりました。最近のモバイル技術の進歩により、現在ではスマートフォンやタブレットでこれらと同じWebアプリケーションの多くを実行できるようになりました。

私たちは、モバイルのWebサイト開発のための素晴らしいツールはすでに存在していると感じていたので、IonicではモバイルのWebサイトの代わりに ネイティブ またはハイブリッドアプリに焦点を当ててHTML5のモバイル開発フレームワークを構築することにしました。ですので、IonicアプリはChromeやSafariのようなモバイルブラウザで実行すると言うよりも、Cordova/PhoneGapのようなツールによってラップしてiOSののUIWebViewやAndroidのWebViewのような低レベルのブラウザシェルで実行します。

そして何よりも、プロジェクトを中心に強力なコミュニティを助長するためのオープンソースなアプリだけではなく、商用のアプリケーションでも使用することができる寛大なオープンソースライセンスを有した上で、可能な限り確実にオープンソースとなるようにしました。私たちは、オープンソースの精神がなかったり、コマーシャルライセンスを購入しないと、オープンソースとソースを公開しないプロジェクト両方には使用できないなどの、 技術の上では オープンソースなフレームワークがたくさんあると感じていました。

Ionicでハイブリッドアプリを構築

Web開発に精通している人は、簡単にIonicでのアプリの構造を理解できることでしょう。その中核には、ネイティブアプリケーションシェルで実行されているだけのWebページです!つまり、HTML、CSS、およびJavaScriptの任意の種類を使用できることを意味します。唯一の違いは、他から参照されるウェブサイトを作成するのではなく、自己完結型のアプリケーション体験を構築します。

Ionicアプリの大部分は、HTML、JavaScript、およびCSSで書き込まれます。熱心な開発者は、カスタムCodovaプラグインやネイティブコードでネイティブ層へ掘り下げるかもしれませんが、それは素晴らしいアプリを作成するために必須ではありません。

また、Ionicはフレームワークのコア機能にたくさんのAngularJSを使用しています。CSS部分だけでもIonicを使用することができますが、今日のブラウザベースのアプリケーションを構築するための最良の方法の一つとして、私たちはAngularへの投資をお勧めします。

構築しましょう!

これで、あなたはIonicが何であるかを理解し、それが存在する理由、それを使って最初のアプリの構築を開始する準備ができました。必要なものをすべて取得してインストールし、Ionicで構築をはじめましょう!

チャプター2: インストール

ライセンス

この文章には、 Apache 2.0ライセンスで配布されている製作物が含まれています。

Copyright 2014 Hirotaka Mizutani

Apache License Version 2.0(「本ライセンス」)に基づいてライセンスされます。あなたがこのファイルを使用するためには、本ライセンスに従わなければなりません。本ライセンスのコピーは下記の場所から入手できます。

適用される法律または書面での同意によって命じられない限り、本ライセンスに基づいて頒布されるソフトウェアは、明示黙示を問わず、いかなる保証も条件もなしに「現状のまま」頒布されます。本ライセンスでの権利と制限を規定した文言については、本ライセンスを参照してください。

42
42
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
42
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?