自然な言語を目指して

技術・日常をぐだぐだと

【お知らせ】Githubドリブン競技プログラミング始めました。

こんな感じで始めました。

本当に何となくだけど、BitbucketばかりでGithub全然使ってなかったので、そろそろ使っていきたいと思います。

無料で簡単に始められる、非エンジニアのためのハイブリッドアプリ開発フロー

はじめに

この記事では、チームでのハイブリッドアプリ開発のやり方について書いていこうと思います。 私のスペックとしては、Webサービスしか作ったことがなくて、ほぼフロントエンドにも触れたことがないビギナーエンジニアです。最近チームでアプリを開発しているのですが、使っているうちに何となく無料版Monacaでのチーム開発フローが分かってきたので、自分の備忘録とチームメンバーへの開発方法共有を兼ねてアウトプットしておきます。 本記事では、 Monaca Basicでのチーム開発の流れ に焦点を当てて、Monaca開発入門講座は機会があればまた別に書いていきたいと思います。目的としては、チーム内の非エンジニアの方に、簡単なレイアウトの変更やデザインの変更をしてもらう事を想定しています。

使用技術

必要なもの

Monacaについて

MonacaとはHTML5ハイブリッドアプリ開発ツールです。 monaca.png

ハイブリッドアプリ開発とは、簡単に書くと、HTMLでサービスを作って、アプリ内でブラウザを起動させる事で、簡単に複数のOSで動作するアプリが作れるようなイメージです。 専門的知識を身につけなくても、iOS,Androidに対応したモバイルアプリを簡単に作る事が出来ます。 Monacaにはいくつかプランがあるのですが、今回は無料でアプリ開発をしたい人を対象として無料版であるMonaca Basicを想定しています。 デバイスにMonacaのアプリをインストールするだけで、デバッグ作業も簡単に行う事が出来ます。

特徴

Monaca Basic

今回は無料版であるMonaca BasicではMonaca クラウドと呼ばれるWeb上の開発ツールを用いて、開発を行っています。基本的にMonaca Basicではバージョン管理機能も使えないし、チームでの開発機能もありません。 無料版とはいえ、バージョン管理をしておかないと、恐ろしいし、チームで開発する上で不便ですよね。 また、無料版なので、自分の好きなエディタを使う事が出来ないです。 クラウド開発ツールの良いところでもあり、欠点でもありますね。^1

チームでのアプリ開発フロー

私達のチームのエンジニアは2,3人なので、非常にシンプルな開発フローにしています。 もう少し人が多いと、うまくいかない部分があるかもしれません。

基本的にはHTML+CSS+JavaScriptだけなので、ローカルでメインの開発をしています。 また、開発のために使用するブラウザはGoogle Chromeを用いています。

  1. Monaca クラウドで新規プロジェクト作成
  2. Monaca クラウドからプロジェクトをエクスポート
  3. エクスポートしたフォルダを解凍して、Gitリポジトリを作成
  4. ファイルをいじる
  5. ローカルデバッグ
  6. 出来上がったら、フォルダーを圧縮して、Monacaの新規プロジェクトとしてインポートする。また、1で作成したプロジェクトは消す(書き換えたファイルが少ないのであれば、直接Monacaクラウドで書き換えてもよい)
  7. Monaca上でデバッグ

それでは具体的に説明をしていきます。

具体例

まずはMonacaに無料アカウントで登録をします。

1. Monaca クラウドで新規プロジェクト作成

そして、新規プロジェクトを押して、テンプレートを選びましょう。 今回は開発フローの例のため、一番シンプルなHello Worldを選んでみます。 shinki.png

2. Monaca クラウドからプロジェクトをエクスポート

テンプレートからプロジェクトを作成したら、エクスポートしてみましょう。 メニューバーのファイル→エクスポートで、エクスポート出来ます。 hello.png

3. エクスポートしたフォルダを解凍して、Gitリポジトリを作成

エクスポートを行うと、project.zipというファイルをダウンロードしてくると思います。 そのファイルを解凍すると、projectというフォルダが出来ます。 projectを好きな名前に変更して、そのフォルダ内でGitリポジトリを作ります。 そして、必要なファイルだけ追加、コミットして、Pushします。Gitでのバージョン管理の詳細については、他ページを参考にしてください。 また、今回はprojectHelloWorldDemoと書き換えます。

# 名前を変更
$ mv project HelloWorldDemo

$ git add .
$ git commit -m "Initial Commit"
$ git push 

4. ファイルをいじる

ディレクトリ構成

今回のテンプレートでのディレクトリ構成は以下のようになっています。

HelloWorldDemo/
 ├ config.xml
 ├ platforms/
 │ └ android/
 │ └ chrome/
 │ └ ios/
 │ └ winrt/
 ├ www
 │ └ components/
 │ └ css/
 │ └ phonegap-demo/
 │ └ index.html
 │ └ phonegap-demo.html

基本的にはwwwのフォルダ以下のファイルをいじっていく作業になります。

今回はindex.htmlの中に書かれている<h1>タグで囲われている「Hello World」という文字を「開発ふろーのテストだよ〜」と修正してみます。

5. ローカルデバッグ

先ほどのindex.htmlをブラウザ上で見てみるとこんな感じかと思います。 ブラウザ上でindex.htmlを開くためにはパスをブラウザに貼ってあげると見れます。 スクリーンショット 2016-03-21 18.10.14.png

めちゃくちゃボタンが長くなっていますね。このままでは、デバイスで見た時にどうなるか分かりません。 そこで、ブラウザ上で、デバイスから見た時になるのかシミュレートする必要があります。 ブラウザ上で、JavaScriptコンソールを起動します。 Google Chromeの場合は、表示→開発/管理→JavaScriptコンソールで起動出来ます。 (ショートカット覚えると楽です。Macの場合は、Cmd+Alt+J) スクリーンショット 2016-03-21 18.14.21.png

次に、デバイスの中から、どのデバイスでデバッグしたいかを選びます。 今回はiphone 5を選びました。

スクリーンショット 2016-03-21 18.16.02.png

今のままだと、改行が変になっているので、簡単に直します。 先ほどindex.htmlに書き加えた文字列を「開発ふろーの
テストだよ〜」に書き換えます。

スクリーンショット 2016-03-21 18.18.31.png

変更できました。 スクリーンショット 2016-03-21 18.20.55.png

また、Gitでバージョン管理を行っている場合、変更したファイルを追加して、プルリクを送るなりプッシュするなりを行います。Gitの使い方の詳細は他ページを参考にしてください。

今回の場合は、変更したファイルがindex.htmlのみなので、追加してコミットしてプッシュしておきます。

$ git add index.html
$ git commit -m "index.htmlの修正"
$ git push 

6. 出来上がったフォルダーを圧縮して、Monacaの新規プロジェクトとしてインポートする。また、1で作成したプロジェクトは消す(書き換えたファイルが少ないのであれば、直接Monacaクラウドで書き換えてもよい)

書き換えたHelloWorldDemoプロジェクトを圧縮して、Monacaの新規プロジェクトとしてインポートします。 ここがちょっと手間になりますので、簡単なファイル変更であれば、ローカルで書き換えたファイルを直接Monaca クラウドのファイルにコピペした方が早いです。

Monaca クラウド上で、最初に作成したプロジェクトの削除を行います。 スクリーンショット 2016-03-21 18.25.13.png

次に、新規プロジェクトを押して、Import Projectをクリックしましょう。 そして、プロジェクトのパッケージをアップロードを押して、先ほどローカルで作成した圧縮ファイル(zip)を選択して、アップロードします。

スクリーンショット 2016-03-21 18.25.37.png

7. Monaca上でデバッグ

インポートしたプロジェクトをMonaca クラウド上で確認すると、プレビュー画面で、先ほどローカルで確認した画面が簡易的に確認できます。

スクリーンショット 2016-03-21 18.30.33.png

また、実機で試すには非常に簡単です。 ios/androidのデバイスで、Monacaのアプリをダウンロードして、登録したアカウントでログインします。 そうすると、先ほど作成したモノがMonacaのアプリ上で動作を確認することが出来ます。

あとがき

エンジニアにとっては、本当に基礎的な事しか書いてなかったですね。 思ったより簡単な事しか書いていない記事になってしまいました。 ローカルで開発出来る事でバージョン管理が出来て、好きなエディターが使えて、超楽だという点と 非エンジニアでもHTML・CSSさえちょっと勉強すれば、簡単にMonacaいじれますよ。という事が書きたかったです。

質問・意見・謝辞

修正点やご意見がありましたらコメントを頂けると嬉しいです。 また、本記事は、太陽曰く燃えよカオスを無限ループして聞きながら書きました。 這いよれ!ニャル子さん製作一同に心より感謝を申し上げたいと存じます。

Mendeleyで"Open File Externally by default"コマンドをショートカットキーで使いたい

Mendeleyで"Open File Externally by default"コマンドをショートカットキーで使いたい

macのみの解決策となります。 無理やり割当ているので、自己責任でお願いします。

手順

BetterTouchToolを起動します。

スクリーンショット 2015-11-30 22.36.39.png

プラスボタンを押して、アプリケーションからMendely を追加します。

スクリーンショット 2015-11-30 22.37.09.png

割当したいショートカットキーをKeyboard Shortcutの欄に入力します。 それからAdd New Shortcut buttonを押します。 この時もし、ダブルクリックとか、マウスに割り当てたい場合は、NormalMiceタブに変更しましょう。

スクリーンショット 2015-11-30 22.39.04.png

Trigger Predefined Actionの欄に"trigger context menu item"と打ちましょう。 それで決定。

スクリーンショット 2015-11-30 22.49.47.png それから、"Open File Externally ;"と打ちましょう。

以上です。 これでうまく動かない人は、強行策に出てみます。

スクリーンショット 2015-11-30 23.47.34.png (4) ; (4)を入力します。

スクリーンショット 2015-11-30 23.45.55.png

次にattach additional actionにenterのtriggerを追加して完了です。

上記の図のようにやると、ポップアップメニューの4つ目にある"Open File Externally"が実行されます。

Hope your research life.


For Foreigner

How to attach shortcut key to "Open File Externally" in Mendeley

This menu bar doesn't have a shortcut key. So, I want to attach shortcut key forcibly using BetterTouchTool. This solution is for mac sorry.

This is how to attach.

first, you should download BetterTouchTool. and launch it.

スクリーンショット 2015-11-30 22.36.39.png

and, press + button

スクリーンショット 2015-11-30 22.37.09.png

add a path of "Mendeley"

enter "shortcut key what you want to attach"in Keyboard Shortcut blank, and press Add New Shortcut button. (if you want to attach mouch like double click, you choose Normal Mice tab instead of Keyboard tab.)

スクリーンショット 2015-11-30 22.39.04.png

put "trigger context menu item" in Trigger Predefined Action blank.

スクリーンショット 2015-11-30 22.49.47.png and put "Open File Externally ;"

Then finish.

if you cant use shortcut key in mendeley, Mandatory measure is following.

スクリーンショット 2015-11-30 23.47.34.png put (4) ; (4) in blank.

スクリーンショット 2015-11-30 23.45.55.png

and attach additional action "enter".

like this cause "Open File Externally" menu is in the 4th area.

Hope your research life.

iPythonがSublime Text(SublimeREPL)上でうまく動かない問題

普段リリースノートとかあんまり見ないんですけど、iPython 4.0が8月14日にリリースされたそうです。(参考)

新しいバージョンではipython notebookをJupyterとして分割しているらしいですね。

今までのiPython Notebookでも他の言語を実行する事は出来たのですが、Jupyterでは言語に依存せずに使う事が出来るそうですね。あんまりNotebookを使うような環境がなかったのですが、最近あちこちでNotebook熱いと聞くので、今回のリリースを機会にこれから使っていきたいですね。

今回の記事は、使ってみると割りと高性能なエディターなのに、プログラマーガチ勢に「デザイナーさんなの?」とか言わわれちゃうSublimerに向けた記事です。

iPythonがSublime Text(SublimeREPL)上でうまく動かない問題

iPythonのバージョンアップに伴い、SublimeREPLでiPythonが起動できなくなりました。

/Users/admin/.pyenv/versions/2.7.9/lib/python2.7/site-packages/IPython/config.py:13: ShimWarning: The ""IPython.config" package has been deprecated. You should import from traitlets.config instead.
  "You should import from traitlets.config instead.", ShimWarning)
/Users/admin/.pyenv/versions/2.7.9/lib/python2.7/site-packages/IPython/terminal/console.py:13: ShimWarning: The "IPython.terminal.console" package has been deprecated. You should import from jupyter_console instead.
  "You should import from jupyter_console instead.", ShimWarning)
/Users/admin/.pyenv/versions/2.7.9/lib/python2.7/site-packages/IPython/frontend.py:21: ShimWarning: The top-level "frontend" package has been deprecated. All its subpackages have been moved to the top "IPython" level.
  "All its subpackages have been moved to the top `IPython` level.", ShimWarning)
Traceback (most recent call last):
  File "/Users/admin/Library/Application Support/Sublime Text 3/Packages/SublimeREPL/config/Python/ipy_repl.py", line 45, in <module>
    from IPython.frontend.terminal.console.app import ZMQTerminalIPythonApp
ImportError: No module named app

***Repl Closed***

こんな感じのエラー。

ipythonのバージョンアップに伴い、色んなパッケージが変わってしまっていることによるエラーですね。

pip install -U jupyter ipython

一旦jupyterとipythonをinstallしましょう。

Sublime textを一旦起動して、Preference->Browse Packagesを開き、FinderでPackageを見れるようにします。 そこから、SublimeREPL/config/Python/ipy_repl.pyを開きます。

んでもって、こちらのgist をipy_repl.pyにコピペ。

f:id:daguniko:20151028050051p:plain

こんな感じで起動できるようになった。

おまけ

Pyenvを使っている人がSublime Text上でBuildする場合

あんまり気づかなかったけど、Sublime Text上でのBuildがデフォルトのシステムになっていました。 これだとPyenv入れていた場合、エラーが起きてしまう恐れがある。(ライブラリをインストールしたのに、Sublime Text上で実行すると読み込めないとか)

cockscombさん記事を発見。

Preferences.sublime-settingsのbuild_envに環境設定を足しましょう。

Sublime text上のTools->Build System->New Build System...を選択して、

{
    "cmd": ["/Users/ユーザー名/.pyenv/shims/python", "$file"]
    , "selector": "source.python"
    , "file_regex": "file \"(...*?)\", line ([0-9]+)"
}

を追加。

これでSublime text上でPythonプログラムを実行する場合は、Cmd+Shift+Bで一旦Pyenvを選択してから、Cmd+Bで実行できるようになる。

もっと良い解決方法あるかも。

参考資料

ipython shell does not work with sublime repl

理系じゃないけどSublime text3を使う

管理者権限がないサーバー上で、python+pip+pyenvを使いたい

管理者権限を持っていないサーバーを初めて扱い、pipが使えない問題で四苦八苦したので、備忘録を載せます。

まず、pipは通常、管理者権限を必要とする場所にライブラリを保存します。
しかし、管理者権限がないパソコンだったり、サーバーだったりすると、pipコマンドが使えないわけです。つまり、ライブラリが使えない。これは困った。

というわけで、解決方法を考えます。

解決案1 pipの設定自体を変更して、インストール先を変更する


軽く試してみたけど、pipのバージョンによって、コマンドが違ったりして結構面倒。

解決案2 pyenvを使って、python自体の(pipのインストール先も)保存先を変更する


これが楽でした。 pyenvを使って、python自体をサーバー接続先のデフォルトフォルダ(つまり、管理者権限が要らない場所)に保存してしまえば、pipもそのまま使える。

やりかた


手順1. pyenvのインストール
まずは、pyenvをインストールする。
デフォルトの~/.pyenvに保存するように設定する。(保存できればどこでもいいけど)
ちなみにpyenv-pip-rehashを入れると、rehashが自動で行われるので、入れておく(2行目)

$ git clone git://github.com/yyuu/pyenv.git ~/.pyenv
$ git clone https://github.com/yyuu/pyenv-pip-rehash.git ~/.pyenv/plugins/pyenv-pip-rehash

手順2. ターミナルの設定ファイルに記述
まずは、自分が何のシェルを使っているか把握する

$ echo $SHELL
/bin/bash

このコマンドでどのシェルを使っているか、把握できる。 今回はbashだったので、.bashrcに記述。

#pyenv settings
export PYENV_ROOT="${HOME}/.pyenv"
if [ -d "${PYENV_ROOT}" ]; then
   export PATH=${PYENV_ROOT}/bin:$PATH
   eval "$(pyenv init -)"
fi

しかし、ここで問題発生。
どうやら、今回のサーバーは.bashrcを自動的に読み込まない設定になっていたみたい。

なので、.bash_profile.bashrcを読み込む設定を記述する。

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

これで、.bashrcを自動で読み込んでくれるようになる。
ちなみに、.bashrc.bash_profileの使い分けはググって、覚えておくと便利でしょう。

手順3. pythonをインストール
後は、pyenvを通常通りに使うだけです。
今回の例ではpyenvに2.7.9をインストールしてみましょう。

$ pyenv install 2.7.9

でインストール。

$ pyenv versions

で現在使っているバージョンとインストールされているバージョンを確認できる。

あとは、ローカルだったり、グローバルだったり、お好みにpythonのバージョンの設定を行うだけ。

今回は全てのディレクトリにおいて、2.7.9を使うようにします。

$ pyenv global 2.7.9

でOK。

あとは、通常通りpip install numpyとかでライブラリをインストール出来る。

参考URL

pyenvを使ってPython環境を構築

WEBプログラマーの僕が研究でつまづいたこと

WEBプログラマーの僕が研究でつまづいたこと

今回は普段WEB開発ばかりしている僕が研究のプログラムでつまづいたことを書いていきます。

簡単な事だったのですが、理解するのに複雑なプログラムの実装だったため、デバッグしていたら1,2時間はかかってしまいました。

実はプログラムって…

浮動小数の等値比較に誤差があるんです。

簡単に言うと、プログラム的には 0.1 + 0.3 == 0.4はTrueにはならないのです。

どういうことかというと、

print 0.1 + 0.2 == 0.3

このプログラムの実行結果はFalseになるわけです。

これは浮動小数点数には誤差があるためなんですね。

解決策としては

Pythonならば

print round(0.1 + 0.2,10) == 0.3

roundの第二引数では小数の何桁目で誤差を丸めるかを行っています。

ちなみに17桁目で誤差が出るようです。

Rubyならば

print (0.1+0.2).round(10) == 0.3

どっちもroundメソッドで丸めこめば良いのですねー。

感想

本当はプログラマーなら誰しもが知る常識問題らしいのですが、Web系のプログラムばかり書いていたので、浮動小数の比較あまり使ったことがなかったんですね(言い訳)。

使ったとしても、大なりイコールとかなんです。0.2 <= i みたいな。

参考URL

http://inudaiskii.blogspot.jp/2013/08/python_12.html

https://randomascii.wordpress.com/2012/02/25/comparing-floating-point-numbers-2012-edition/

ビッグトラフィックCAMPに参加してきました

久しぶりの投稿です。
先週の土日、渋谷にて、サイバーエージェントさんのビッグトラフィックCAMPというイベントに参加してきました。

イベント概要
ビッグトラフィックCAMP | 株式会社サイバーエージェント

内容について
1日目はサーバサイドDayということで、仕様書が与えられて、その仕様に基づいたサーバサイドのAPIを作りましょう!という内容でした。
2日目はチューニングDayということで、作成したアプリケーションに対して、大規模なトラフィックに耐えるようなチューニングを行うという内容でした。

結論から言うと、2日間ほぼAPIの開発をしていたので、メインであるチューニングがほぼ出来ませんでした。

原因は2つ。
一つ目はサーバサイドの開発に、Sinatraを使用したのですが、情報量も少なく、初めて使う言語だったため、大分苦戦したこと。
二つ目はインフラまわりをほぼ触ったことがなくて、始めてAWSを触ったのですが、AWSにWEBサーバーを立ち上げる時点でかなり時間をとられたこと。ちなみにApacheを試していたのですが、どうにも動かず、最終的にはポート80番でSinatraを起動するという雑なAPIになってしまいました。

大規模なトラフィックに耐えうるようなチューニングがメインのハッカソンだったのに、ほぼAPIを作成していたので、ほぼ携わることなかったのが少し残念でしたが、インフラまわりと開発、かなり勉強になることが多くて大変有意義な時間を過ごせました。

サイバーエージェントさんについて
エンジニアさんの実際の開発時のお話を聞いたり、会社自体の説明の話も聞いたのですが、雰囲気もよさそうで、若手を大切に育てる会社だという印象を感じました。基本的にはわからない所はググるというスタンスでしたが、どうしても躓いた時は人に聞いた方がいいとメンターの方がアドバイスをくれて、サーバー周りで絶望しかけていた僕も最終的には楽しく開発していました。

また、今回のイベントは単独での開発だったわけですが、他の参加者ともワイワイ技術について話しながら開発できたので、非常に楽しいイベントでした。

結論
チューニングまで行うことができなかったけど、開発やっぱり楽しい!
開発時には、インフラとサーバ負荷あたりを意識しながら開発したら、より開発の幅も広がるんじゃないかなと感じました。

(サーバ周りのメモ)
始めてAWS周りをいじったわけですが、今回WEBサーバー構築のために導入したのはApacheとPassengerです。
Apacheの起動はうまくいっていたのですが、Passengerの設定がおかしいのか、Sinatraで書いたプログラムを起動しても、うまくいきませんでした。

なんとなーくググったり、他の人に相談してみたところ、多分Passengerではドキュメントルートにパスの最後にpublicフォルダを作っておかないと、うまく起動しないのかもしれません。