2014-12-14

MeteorでAndroidアプリが動かせるのかどうか試す

本記事はMeteor Advent Calendar 2014の14日目の記事になります。

ネタの完成度がイマイチだったので、Qiitaでは無く自分のブログに書かせて頂くことにしました。

今回のお題は「MeteorでAndroidアプリが作れるのかどうか試します」ということで、早速始めます。

Meteorとは？

AdventCalendarの初日担当の方が詳しく説明して下さっているので、ここでは簡単な説明だけします。一言でいうと「リアルタイムなWebアプリケーションフレームワーク」ということです。

フレームワーク内部にデータベース（MongoDB）が内包されており、DBが更新されたタイミングでアプリ画面が逐一切り替わる動きを簡単に実装できたりします。一々ブラウザの更新を手動で行わなくてもいいのは地味に便利です。

詳細が気になる方はMeteor公式のチュートリアルをやってみると良いと思います。「おお・・！これ・・いいかも！」ってなること請け合いです。

AdventCalendarを書こうと思ったキッカケ

https://www.meteor.com/blog/2014/09/15/meteor-092-iOS-Android-mobile-apps-phonegap-cordova

「よし試そう！」って思いました。

アプリを作って、ローカル環境で動かす

※ここからの操作はMac、Linuxで行うことを想定しています。 Windows環境はまだ公式でサポートが始まっていないようです・・。

1.ターミナルで以下のコマンドを実行する。

curl https://install.meteor.com | /bin/sh

2.インストールが完了したら、任意のディレクトリで以下のコマンドを実行。アプリのプロジェクトファイルが作成されます。

meteor create myapp

3.作成されたプロジェクトファイル内に移動し、以下のコマンドを実行。

meteor

ローカル環境でアプリが立ち上がっていることを確認してみましょう。http://localhost:3000/

f:id:rukiadia0401:20141214230532p:plain

こんな画面が立ち上がれば成功です。

アプリをサーバーにデプロイする

Meteorには公式から提供されているサーバー環境があり、そこに自分のアプリをデプロイ出来るようになっています。（自前で用意する必要がなくて楽ですね）

1.プロジェクトディレクトリ直下で以下のコマンドを実行。

meteor deploy [任意のアプリ名].meteor.com

例：meteor deploy testapp.meteor.com

デプロイが完了したら、ブラウザで動きを確認してみましょう。コンソールにデプロイ先のURLが表示されている筈です。

アプリを動かす

meteor公式のwikiとか見ながら、アプリが動かせるかやってみます。

1.AndroidSDKを入れる

※結構大きいサイズのファイルをDLすることになるので、テザリングでやるのは控えたほうが無難です。

meteor install-sdk android

2.Androidを動作対象に加える

ディレクトリ直下で以下のコマンドを実行

meteor add-platform android

Android SDKのライセンス条項が表示されるので、サッと目を通しておきつつ同意。

meteor list-platforms

と打って、androidが出ていればOKです。

3.エミュレータでアプリを動かす

（※実機で動かすことも可能ですが、今回はエミュレータで動作確認を行ってみます）

meteor run android

しばらく待つと・・

f:id:rukiadia0401:20141214233642p:plain

こんな感じでエミュレータ上で先程作ったアプリが動かせます。

あとがき

実機で動かすことも出来るんですが、ブログを書くタイミング実行したら何故かビルドに失敗してしまったためやむなくエミュレータで動かすことにしました。

あと、投稿がギリギリになってしまったのは非常に良くなかったなと反省してます。

Meteor Advent Calendar 2014 14日目の記事は以上です。お疲れ様でした。

2014-10-05

第16回Androidデ部で発表してきた

表題の通り、第16回Androidデ部で15分くらい発表をしてきました。今回は!Androidなテーマでやるということで、最近興味が湧いている「フォーム」の話でもしようかと思ってスピーカー枠に申し込んでみました。

発表テーマは「フォームについて考えてみた」で喋りました。
資料はこちら。使いづらいフォームについての考察や改善案をつらつらと語っています。

資料に書いてあることをくどくどと書いても仕方ないので、ここでは質問タイムで上がっていた話題について書きます。

質問内容：「使いやすいと感じたフォームってありました？」

ありました

あったのですが、僕が発表資料に画像を載せ損ねたせいでその場でお見せすることが出来なかったため、ここで紹介することにします。

一休

f:id:rukiadia0401:20141005001312p:plain

ホテルやレストランを予約出来るサービスを展開しているサイトなのですが、ここのレストラン予約フォームが良い感じだなーと思いました。実際の画面は以下になります。

f:id:rukiadia0401:20141005002049p:plain

使いやすいと感じた点

画面に余計な要素（関係の無いページヘのリンク、バナー等）が無いので入力に集中できる。
お店に行く人数の内訳を入力すると、合計金額をリアルタイムで表示してくれる。幾らかかるか予約の段階で教えてもらえると安心できますよね。
このサービスに登録した氏名を「代表者お名前」に自動で入れておいてくれる。
「次へ」ボタンが「戻る」ボタンよりも大きめになっていて、色も分けられている（押し間違えの防止）。

画面を無駄なく使ってて、よく考えられてるページだなと思える良いフォームだと思います。

ちなみにレストラン予約サービスを使うには会員登録が必要なんですが、その会員登録中もイラッとさせられることも無かったです。

以上。勉強会への参加レポと、発表の質問に対する回答でした。ではまた。

2014-09-13

IE7でoverflow:hiddenが効かなかった話

ここのところ、ずっとIE7と戦いつづけています。
その結果、色々な別に知りたくなかったノウハウがたまる今日この頃・・。

2014年の9月にもなってIE7ネタを書くのも気がひけたんですが、同じ症状で詰まっている人が2,3人はいるだろう・・と思ったので書いてみました。

今回取り上げるネタ

「overflow:hiddenを指定した親要素内にposition:relativeを指定した子要素を配置すると、IE7ではoverflow:hiddenが機能せずに子要素がはみ出る」というものです。

対処法

この現象は「 親要素にposition:relativeを指定する 」で解決できます。

サンプル

現象を再現可能な簡単なHTMLを書くと、以下のようになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>doesn't work overflow hidden</title>
    <link rel="stylesheet" href="overflow.css">
</head>
<body>
    <div id="container">
        <p class="normal"></p>
        <p class="hidden"></p>
    </div>
</body>
</html>

#container {
    width: 400px;
    height: 400px;
    background: #eeeeee;
    overflow: hidden;
}

p {
    height: 100px;
    position: relative;
}

.normal {
    width: 100px;
    background: #aaaaaa;
}

.hidden {
    width: 600px;
    background: #aaaaaa;
}

比較的新しいIE、モダンブラウザだと何の問題もないのですが、IE7で上記のHTMLを表示すると子要素の2つ目のpタグが盛大に飛び出してしまいます。興味がある人はmodern.IEあたりで確認してみるといいかもしれません。

余談

なんでこれで上手くいくのかを調べてみたんですが、結局よくわからず（さじ投げ）。
SMACSSの作者の方が7年前に書かれていた記事のコメントを一通りみたところ「バグじゃね？？」みたいな流れになっていたので、この辺りで調べるのを諦めました。

教えてくれ五飛・・俺はいつまでIE7対応を続ければいいんだ・・。

お　し　ま　い

2014-07-02

checkboxの値でbuttonの状態を切り替える

フォーム内のチェックボックスにチェックを入れると、ボタンが押せるようになる

Webページのフォームではありがちな画面の動きですね。仕事をしていると、度々この動作を実装する機会があるのですが・・その度にやり方を忘れて時間を無駄にしているので、簡単にメモしておきます。

実装は以下の通りです。

・checkbox.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>チェックボックスとボタンの連動</title>
   <link rel="stylesheet" href="">
</head>
<body>

    <label>
        <input id="check" type="checkbox" onclick="checkValue(this)">
        同意しますか？
    </label>

    <!-- 初期状態では押せないbutton -->
    <input id="btn" type="button" value="押せない" disabled="disabled">

    <script src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

       /* buttonのdisable属性を書き換える */
       function checkValue(check){
           var btn = document.getElementById('btn');

           if (check.checked) {
               btn.value = '押せる';
               btn.removeAttribute('disabled');
           } else {
               btn.value = '押せない';
               btn.setAttribute('disabled', 'disabled');
           }
       }
   </script>
</body>
</html>

これでチェックボックスでボタンの状態を切り替える事が出来るようになりました。
動きを試したい方は、JSFIDDLEあたりでやってみてください。

thisって便利だなー（棒）

2014-07-01

『Web製作者のためのGit入門』を読みました

『Web製作者のためのGit入門』の献本を頂いたので、土日で読んだ感想を書いてみます。

Web制作者のためのGit入門 (Mynavi Advanced Library)

作者: 大杉充,外村和仁,CodeGrid
出版社/メーカー: マイナビ
発売日: 2014/06/28
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

読んでみた感想ですが、「Gitを使ったことがない人」や「普段Gitをなんとなく使ってる」って人は読んで損はしない内容だと思いました。僕自身、よく分かってなかった部分も多くあったので読んで良かったです。

本の簡単な説明ですが、まず内容構成は前半が「Git入門編」、後半が「Git実践編」となっています。

入門編はGitの概要の説明から始まり、

GitとSVNの違い
GitHubについての説明
Windows、Macの各環境でのGitの導入方法
GUI ツールの基本的な使い方
GitHubのリポジトリの作り方
コミット、プッシュ、クローンといった基本的な操作

等が説明されています。それらの説明に加え、Gitを使い始めたばかりの人がハマりがちな落とし穴の詳しい説明、それに対する対処等も記載されているので、初心者に優しい構成だと感じました。
「Gitコワイ」って先入観を持っている人も、この辺りの説明を繰り返し読めば安心してGitと向き合うことが出来るかもしれません。

後半の実践編はGit中級者を対象にした内容で、

適切なコミット履歴の作り方、良いコメントの書き方
コミット履歴の操作(checkout、reset、reflog、revert)
ブランチの操作、統合(rebase)
ローカルとリモートの連携

といった、より実践的な内容が説明されています。
後半部分で触れている内容は普通に難しくて、僕自身「知らなかった・・( ﾟдﾟ)」と思いながら読んでました。reflogとrevertの違いとか説明できない・・って感じでしたし。

とても勉強になりましたm(__)m。

ただ1つ注意点として、この本はあくまでGit入門のための本みたいなので、GitHubの詳細な説明(pull requestの話とか)は無いです。会社でGitHubを使うための知識やノウハウを求めている方は別の本を買いましょう。

Gitの勉強をしたいという人にはオススメな本なので、気になる方は是非。

僕の感想はこんな感じです。

2014-06-18

jQueryでdocument.getElementByIdしたいです

どうも、jQuery初心者です。

今更仰々しく書くような事でもないんですが、知らなかったことなので一応・・。

jQueryでdocument.getElementByIdするにはどうするか？

JavaScriptであれば、下記のように書けば指定したIDのエレメントが取得出来ます。

var element = document.getElementById('hoge');

jQueryで同じようにエレメントを取得しようとして書いたのが下記のコード。

$('#hoge');

しかし、想定した動きをしてくれません。それは何故か？
上記のjQueryのコードは生のエレメントではなく、jQueryのオブジェクトを取得してしまっているためです。
jQueryでエレメントを取得するためには、以下のように記述する必要があります。

// 書き方は二通り
$('#hoge').get(0);

$("#hoge")[0];

これまでの事を踏まえて、簡単なサンプルコードを書いてみます。

画面表示後に2秒待ってから、動画を再生する処理

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>動画再生画面</title>
</head>
<body>

    <video id="demo" controls width="800" height="480">
        <source src="sample.mp4">
        <source src="sample.ogv">
        <source src="sample.webm">
        <p>ご利用のブラウザでは再生することが出来ません</p>
    </video>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

index.js

$(document).ready(function(){

    // 2秒後に動画再生開始
    setTimeout(function(){
        // JavaScriptの場合
        //document.getElementById('demo').play();

        // jQueryの場合
        $('#demo').get(0).play();
    }, 2000);

});

説明は面倒なので省きますが・・、動画再生を行う部分でjQueryによるエレメント取得を行なっています。

※videoタグにはautoplayという自動再生のオプションがついているのですが、
今回は画面表示後に少し待ってから動画再生を行いたかったため、こんな処理を書いてます。

おしまい

ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。