AndroidアプリでHello World（Cordova編）

クロスプラットフォーム（モバイル）開発でもっとも使われているのが、PhoneGap/Apache Cordovaというツールだそうで*1、今回はそのCordovaを試してみる。

仕組みとしては、ネイティブアプリのWebView内でHTML5アプリを動かすハイブリッドアプリとなっているとのこと。

このCordovaのメリットとしては、比較的簡単にAndroidやiOS、などマルチデバイス対応のアプリが作れてしまうこと。デメリットとしては、やはりパフォーマンスが良くなくデバイス性能を活かしたアプリ開発も難しいということ。

ということを念頭に置きながら、では早速。

今回のソースはこちらから
https://github.com/FlyingHighAgain/HelloWorld-Cordova-Android

Cordovaのインストール

Cordovaのインストールについては前回記事
npm（node.js） のインストール - 一から開発技術を鍛え直すブログ
を参照のこと。

Hello Worldプロジェクトの作成

コマンドラインより下記のように入力しプロジェクトを作成。

>cordova create hello com.example.hello HelloWorld

helloフォルダが作成される。
中身はこんな感じ

\hello
│  config.xml
│
├─hooks
│      README.md
│
├─merges
├─platforms
├─plugins
└─www
    │  index.html
    │
    ├─css
    │      index.css
    │
    ├─img
    │      logo.png
    │
    └─js
            index.js

画面となるwww\index.htmlをブラウザで開いてみるとこんな感じ

ターゲットプラットフォームとしてAndroidを追加する。

>cd hello
>cordova platform add android

Android SDKやAntのPATH設定、Android SDKのバージョンが古いなどエラーで怒られながらも成功すると次のようになる。

index.htmlを編集し"Apache Cordova"を"Hello World"へ変更してビルド。

>cordova build

実機で動作確認するにはつぎのようにする。

>cordova run android

スクリーンショットがこちら。

今回はここまで。

*1:Pros and Cons of the Top 5 Cross-Platform Tools | Developer Economics http://www.developereconomics.com/pros-cons-top-5-cross-platform-tools/

npm（node.js） のインストール

最近はパッケージマネージャ的なツールが増え、コマンドライン一発入力でダウンロードからインストールまで自動でおこなってくれ便利である。

で最近は、npmによるダウンロード・インストールを推奨することも少なくなくなってきたようだ。
今回、そのような必要に迫られたのでインストールしてみる。

Linux機へのインストール

自宅のLinuxマシンには何年か前にnode.jsをインストールした際にインストールされてたのでは？と思ったが

$ npm
The program 'npm' is currently not installed. You can install it by typing:
sudo apt-get install npm

とお叱りをうけたので、アドバイス通りにDebian系のパッケージマネージャであるAPTを使ってインストール。

とまあ、あっさりとインストール完了。

Windows機へのインストール

Windowsへのnpmのインストールにはnodistを使うといいよ、という天の声を聞きnodistからインストールしてみる。

ここのGitHubから取得する。
https://github.com/marcelklehr/nodist

ZIPファイルをダウンロード・展開する方法もあるが…

折角なのでgitコマンドで取得する。

> git clone git://github.com/marcelklehr/nodist.git

PATHを通す。

updateコマンドを実行

> nodist update

と、ここで、変な警告が表示された。

pakage.json github-url-from-git@1.1.1 No repository field.
...

念のため、もう一度updateしてみたがちゃんとアップデートできている様子。

nodeコマンドやnmpコマンドも使えるのでＯＫということにする。

npmを使ったインストール

Apache Cordovaというフレームワークをインストールしたかったので試してみる。

>npm install -g cordova

無事インストールできた様子。

今回はここまで。

AndroidアプリでHello World（Android Studio編）

これまでAndroidアプリの開発には通常Eclipse+ADTを使うことが多かったと思うが、最近はIntelliJをベースにGoogleが開発したAndroid Studioなる開発環境があるそうなので試してみる。

今回のソースコードはこちら。（コードを書いていないので公開する必要はないのだが念のため。）
https://github.com/FlyingHighAgain/HelloWorld-Android

ダウンロード＆インストール

まずは下記URLよりダウンロードしてインストール

https://developer.android.com/sdk/installing/studio.html

インストール後実行しようとすると、「JVMが見つからない。または、JAVA_HOMEが設定されていない」という旨の英語のメッセージが表示され起動しない。
JDKはインストール済みなので、JAVA_HOMEの環境変数を手動設定してやることに。

これでまずは無事Android Studioが起動した。

Hello World アプリケーションの作成

とりあえず、お決まりのHello Worldを作成してみる。
「New Project...」を選択。

アプリケーション名やAndroidのターゲットバージョンを設定する画面。
アプリケーション名を変更しその他はデフォルトのままで。

アクティビティ（Androidアプリの画面のこと）の種類を選択する画面。
ここはデフォルトのまま。

アクティビティ名を設定する画面。
ここもデフォルトのまま。

「Finish」ボタンを押すとGradleというビルドツールが実行され必要なライブラリをインターネット上のリポジトリからダウンロード・インストールしてくれプロジェクトが構築される。

プロジェクトが構築されると、ここでやっとAndroidStudioのメイン画面が表示される。

res/layoutにあるxmlを開くとGUIデザイナが表示される。

メニューから「Run...」をクリックすると、ビルドされターゲットデバイスを選択するとアプリケーションが実行される。
エミュレータを使って実行することもできるが、私のＰＣの性能が貧弱なので手持ちのNexus7(2012)(Android 4.4.2)をＰＣに繋げて実行してみる。
無事にアプリケーションが実行され、次のスクリーンショットのような画面が表示された。

今回はここまで。

Bootstrapを使ってみる（その３） ～グリッドシステム～

Bootstrapの続き。
今回はグリッドシステムについて試してみる。

今回のソースファイルはこちら
FlyingHighAgain/bootstrap-test · GitHub

１２分割でレイアウトする

BootstrapではHTMLの表示項目をレイアウトするのに、画面横幅を論理的に１２分割した擬似的なグリッドでレイアウトを指定する。具体的にはclassに"col-md-"などで始まり数字を付加したクラス名を付け、数字の合計が１２になるように指定する。
例えばこんな感じ。

<div class="container show-grid">
  <p>12分割</p>
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <p>2分割</p>
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
  <p>3分割</p>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <p>4分割</p>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-3">.col-md-3</div>
  </div>
  <p>1:2:1割</p>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
  </div>
</div>

さらに細かく分割する

ネストすることでさらに細かく分けることもできる。
先ほどの12分割したものをさらに半分(6:6)に分けてみると

<p>24分割</p>
<div class="row">
  <div class="col-md-1">.col-md-1
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
  </div>
  <div class="col-md-1">.col-md-1
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
  </div>
  <!-- 以下省略 -->

オフセットを指定する

classに"col-md-offset-"などで始まり数字を付加したクラス名をつけると前に指定列数分だけ間をあけてくれる。
例えば１列数分だけスペースを空けて配置したい場合

<p>1列とばし</p>
<div class="row">
  <div class="col-md-2">.col-md-2</div>
  <div class="col-md-2 col-md-offset-1">.col-md-2 .col-md-offset-1</div>
  <div class="col-md-2 col-md-offset-1">.col-md-2 .col-md-offset-1</div>
  <div class="col-md-2 col-md-offset-1">.col-md-2 .col-md-offset-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>

ディスプレイサイズによってレイアウトを切り替える

Bootstrapでは４種類のデバイス／ディスプレイサイズが想定されている。

• xs - エクストラスモールデバイス（スマートフォンなど　768px未満）
• sm - スモールデバイス（タブレットなど 768px以上）
• md - ミディアムデバイス（デスクトップパソコン 992px以上）
• lg - ラージデバイス（デスクトップパソコン 1200px以上）

また列幅がsmでは60px,mdでは78px,lgでは95pxと決まっているようだ。*1

たとえば、"col-md-"ではミディアムデバイスの992px以上を想定したレイアウトのため、ブラウザの横幅をだいたい992pxより狭くしていくと分割されずに折り返されて表示される。

"col-sm-"だと768px以上なのでもう少し狭くしてもまだ折り返しを耐える。

"col-xs-"だと基本的には折り返されずに分割が保たれるが、列幅が小さくなってしまうため中身の文字などがはみ出たり折り返されてしまうことになる。

"col-lg-","col-md","col-sm","col-xs"は併用することができ、ディスプレイサイズによってレスポンシブルを実現することが可能だ。

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6">.col-lg-3 .col-md-4 .col-sm-6</div>
  <div class="col-lg-3 col-md-4 col-sm-6">.col-lg-3 .col-md-4 .col-sm-6</div>
  <div class="col-lg-3 col-md-4 col-sm-6">.col-lg-3 .col-md-4 .col-sm-6</div>
  <div class="col-lg-3 col-md-4 col-sm-6">.col-lg-3 .col-md-4 .col-sm-6</div>
</div>

今回はこれまで。

*1:ビューポートのscale=1の場合

Bootstrapを使ってみる（その２） ～フォーム部品～

前回のBootstrapの続き

フォーム部品に適用してみる

フォーム部品に関しては、基本的にはclass属性で"form-control"などとすることでBootstrapのCSSが適用される。
各部品の具体的な使い方はCSS · Bootstrapを参照のこと。
HTML5で追加されたコントロールも含めテストしてみる。

controls.html

<div class="container" style="padding:10px 0">
    <form class="form">
        <!-- text -->
        <div class="form-group">
            <label class="control-label">text</label>
            <input type="text" class="form-control" placeholder="Text" />
        </div>
        <!-- textarea -->
        <div class="form-group">
            <label class="control-label">textarea</label>
            <textarea class="form-control" placeholder="TextArea"></textarea>
        </div>
        <!-- checkbox -->
        <div class="checkbox">
            <label>
                <input type="checkbox"/>
                checkbox
            </label>
        </div>
        <!-- radio -->
        <div class="radio">
            <label>
                <input type="radio" name="radio"/>
                radio1
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="radio"/>
                radio2
            </label>
        </div>
        <!-- select -->
        <div class="form-group">
            <label class="control-label">select</label>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
        <!-- password -->
        <div class="form-group">
            <label class="control-label">password</label>
            <input type="password" class="form-control" placeholder="Password" />
        </div>
        <!-- date -->
        <div class="form-group">
            <label class="control-label">date</label>
            <input type="date" class="form-control"/>
        </div>
        <!-- time -->
        <div class="form-group">
            <label class="control-label">time</label>
            <input type="time" class="form-control"/>
        </div>
        <!-- week -->
        <div class="form-group">
            <label class="control-label">week</label>
            <input type="week" class="form-control"/>
        </div>
        <!-- number -->
        <div class="form-group">
            <label class="control-label">number</label>
            <input type="number" class="form-control"/>
        </div>
        <!-- email -->
        <div class="form-group">
            <label class="control-label">email</label>
            <input type="email" class="form-control"/>
        </div>
        <!-- color -->
        <div class="form-group">
            <label class="control-label">color</label>
            <input type="color" class="form-control"/>
        </div>
        <!-- range -->
        <div class="form-group">
            <label class="control-label">range</label>
            <input type="range" class="form-control"/>
        </div>
        
    </form>
</div>

表示結果はこのようになった。

ちなみにBootstrapの適用を外してみると…

外観の違い

全体的にみてBootstrapを適用するとレイアウトが非常にゆったりとして見易くなる。
またフォーカスされたコントロールには、きれいなbox-shadowが適用される。

Bootstrapを適用したほうのレイアウトでコントロールの横幅が異様に長くなってしまっているのは、BootstrapのGrid Systemというものを無視してしまっているためで、きちんとカラムサイズ（画面横幅を12等分した幾つなのか）を指定すればよいようだ。

今回はこれまで。

Bootstrapを使ってみる（その１） ～ボタン / アイコン付きボタン～

BootstrapというCSSフレームワークがあるそうで
私のようなWebデザイン初心者でもそれなりの見栄えのものが作れてしまうらしい。
では、早速使ってみる。

準備

Bootstrapの公式サイトからファイルをダウンロードする。*1

ダウンロードしたZIPファイルを解凍しておく。
またBootstrapを試すためのhtmlファイルを用意する。とりあえずこんな感じ。

template.html (UTF-8で保存すること)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Bootstrapを使ってみる</title>

        <meta charset="utf-8">
        
        <!-- Bootstrap -->
        <link rel="stylesheet" href="/css/bootstrap.min.css"/>
        <script src="/js/bootstrap.min.js"></script>

    </head>
    <body>
    
    
    </body>
</html>

ボタンを使ってみる

class属性に"btn"や"btn-???"を指定することによりBootstrapのCSSが適用される仕組みだそうだ。
先ほどのtemplate.htmlを元にbody要素内に下記コードを挿入してみる。

button.html

<div style="padding:10px 0">
    <button type="button">標準のボタン</button>
    <button type="button" class="btn">Bootstrapボタン(Default)</button>
    <button type="button" class="btn btn-primary">Bootstrapボタン(Primary)</button>
    <button type="button" class="btn btn-success">Bootstrapボタン(Success)</button>
    <button type="button" class="btn btn-info">Bootstrapボタン(Info)</button>
    <button type="button" class="btn btn-warning">Bootstrapボタン(Warning)</button>
    <button type="button" class="btn btn-danger">Bootstrapボタン(Danger)</button>
    <button type="button" class="btn btn-link">Bootstrapボタン(Link)</button>
</div>

このようにカラフルで今どきのフラットなデザインのボタンが表示される。

アイコン付きボタンを作ってみる

ダウンロードしたBootstrapのfontsフォルダのフォントを利用して今風のアイコンをお手軽に利用できるらしい。
ボタンのラベルにアイコンを付けてみたい場合、こんな感じに記述すると…

button-with-icon.html

<div style="padding:10px 0">
    <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i> OK</button>
    <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i> 検索</button>
    <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-zoom-in"></i> 拡大</button>
    <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-cog"></i> 設定</button>
    <button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-print"></i> 印刷</button>
</div>

こんなイケてるボタンが手軽に作れてしまう。

標準で使えるアイコンについてはComponents · Bootstrapを参考に。

本日はここまで。

今回の全ソースファイルはこちら
FlyingHighAgain/bootstrap-test · GitHub

*1:ダウンロードせずとも こちらのcss jsのリンクを使わせていただく手もあるようです。

GitHubを使ってみる

今更ではあるが、GitHubというバージョン管理システムのサービスを使用してみたいと思う。では、さっそく。

ユーザー登録

まずは、GitHubのページにアクセスしユーザー登録をする。
https://github.com/

画面の「Sign up for GitHub」をクリック。

アカウント作成画面に必要事項を記入して「Create an account」をクリック。

プラン選択画面では、有料プランもあるが今回初めてなのでフリーのプランにする。
「Free」を選択し「Finish sign up」をクリック。

メールが届いているので、リンク先に飛んで「Confirm」ボタンを押せば登録完了。

GitHubにログインした状態。

クライアントソフトのインストール

クライアントソフトとして、今回はGitHub for Windowsというものを使ってみたいと思う。

トップページのDownloadボタンをクリックし、GitHubSetup.exeを実行する。
インストール画面からして、どうやらClickOnceアプリケーションのようだ。

インストールが完了するとソフトが起動し、デスクトップにはアイコンが２つできた。

使ってみる

ログイン画面で、先ほどユーザー登録したアカウントでログインする。

GitHub Windows画面にはリポジトリ作成を促す画面が表示されている。
ドラッグも可能だと書いてあるので、試しに前回記事で作成したサンプルコードのフォルダをドラッグ＆ドロップしてみる。

ドロップしたフォルダをレポジトリとして作成する画面に変わったので
説明文などを付けたし、「Push to GitHub」のチェックを付けた状態で「Create」を押す。

この段階でサーバー上にレポジトリは作成されるが、ソースはまだアップされていない状態。
画面のローカルレポジトリでレポジトリ名の横にある「→」を押すとドラッグしたフォルダの内容が表示される。

画面右上で適当に名前をつけて「Commit to master」を押す。この段階ではまだGitHubサーバー上にアップロードされていない。

サーバーへアップロードするために、右上の「publish」ボタンを押す。

以上で無事にソースを登録したわけであるが、
念のため本当にアップロードできたのかブラウザから確認してみる。

FlyingHighAgain/foobar · GitHub

今回のまとめ

できてしまえば簡単なことのように思えるのだが、実際今回試してみるにあたり結構いろいろとハマってしまった。やはりちゃんと使いこなせるようになるにはShellからコマンドを叩けるようになったほうがよさそう。

またGitHubの特徴であるfork（分岐）やらpull request（取り込み要求）やら、もう少し調査してみないといけない。

とりあえず今回はここまで。