2014-07-03

AWS で"eb init" せず push するための設定

最近は新しい技術に触れる機会が多いのでとても刺激的な日常を過ごしています。^-^
ここのところ、新しいものをあまり勉強する機会がなかったのですが、自分のもっているスキルがいかに古くなってしまっているかを実感させられています。

(しかも嬉しいことに新しいことを学ぶ楽しさを思い出させてくれました。)

・・・ということで今回はAWS(Amazon Web Services) のGit を使ったデプロイシステム「EB」で、すでに作成されたレポジトリに後からアクセスする方法です。





[最終結論]: amazon が提供する zipファイルの中にしっかりと専用のファイルが入っていました。(汗)



では、まず前提としてなぜ "eb init" を使わないか、というと今回の案件の前任者がすでに作成していたので、新しくリポジトリを作成する必要がなかったからです。

もし、まだリポジトリを作成してない方はこのページは全く関係ないので注意してください。そして、もちろん git と eb はインストール済みという前提ですので、こちらも注意してくださいね。



では、順を追って実際の作業を説明します。


1.まず、AWS Elastic Beanstalk Command Line Tool からEBのパッケージをダウンロードして解凍しておきましょう。


2.ターミナル/コマンドプロンプト(以下のようなやつです)を開いて push したいプロジェクトまで移動しましょう。



例) cd /move/to/your/path


3.以下のコマンドを実行しましょう。


/(EBパッケージを解凍したフォルダ)/AWSDevTools/(Linux か Windows。←環境に合わせて選択)/AWSDevTools-RepositorySetup.sh

※Ubuntuなどの場合、もしかすると sudo とかが必要かも。


4.以下のコマンドを実行

git aws.config


5.以下の情報を入力

 ・パブリックキー
 ・シークレットキー
 ・リージョン(東京とか)
 ・AWS(EB)内のアプリケーションの名前
 ・環境

これで成功すれば、その場所で


git aws.push


とコマンドを打てば自動でデプロイしてくれます。
さらに、本番環境とテスト環境をもっている場合、


git aws.push --environmentの名前


とすると該当する環境の違う方へもデプロイができるそうです。(、、、が私は一度も試しておりません。^^;)


[参考ページ(というよりほぼ日本語訳にして丸写し。。)]:




Dan Hoerst, I appreciate you and your tip.
I could solve my problem earlier than I expected because of you!! :)


最後に、昔住んでたバンクーバーホテルの裏にあった図書館です。帰りたい、、、(笑)



2014-06-26

PHP + JavaScript(jQuery) でチャットするComet を作ったみた【ダウンロード可】

最近、おかげさまでホントに色々な案件に携わらせてもらっていて開発者としてまだまだレベルアップを感じている今日このごろです。^-^

ということで、今回は前々から気になっていた 擬似的なComet によるチャットシステムが必要になり、この部分は今後もきっと必要になる機会が多いんじゃないかと思いましたので、PHPとJSをパッケージ化して GitHub にアップしてみました。



使い方は README.md をご覧ください。(書き方はむちゃくちゃですが^^;)

[GitHub(Comet)]: https://github.com/SUKOHI/Comet/tree/master


[参考URL]: http://rewish.jp/blog/tech/php_with_jquery_comet

今回↑のページにはお世話になりました。ありがとうございます。 m_ _m


[追記]: 実際にテストページを作ってみました。





「 こんな短いブログ記事初めて(笑) 」

2014-06-10

Grunt が「Warning: watch ENOSPC」と警告を出した時の対処

現在、とても優秀な前任者から引き継いだ案件にとりかかっています。
この案件の中で彼がCSSやJavaScript の結合や軽量化をしてくれる「Grunt」と呼ばれる技術を使っていたので私もトライしてみたのですが、きちんとインストールしたにも関わらず「Warning: watch ENOSPC」という警告を多発していたので対処法を探ってみました。




[最終結論] ファイルを監視しておける数には限界が設けられているので、この数が足りなくなると警告が出される。


では、まずは私のPC環境から。

OS: Ubuntu 14.04
Grunt: 0.4.5

[エラーが出た状況] Grunt watch を使ってファイルを監視しようとすると以下のように毎回表示されていました。



少し Google で探ってみると以下のページにそのものズバリの回答と対処法が説明されていました。



これを読む限り、ユーザーが監視しておけるファイル数には限界が設けられていて、例えばDropBoxなどを利用しているとこの初期値を使い果たしてしまう。
そのためGruntがエラーを返していた、ということらしいです。


では、どのようにすればこの問題に対処できるか、というと・・・?


コマンドラインで、


echo fs.inotify.max_user_watches=100000 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p


を実行すればOKです。

※ちなにみ参照ページとは違い100,000という数に変更しています。


この命令は先ほど説明したファイル監視できる数を増やす命令文になります。
これを実行してから「Grunt watch」をすると、、、?




はい!うまく起動されてファイルが変更されるのを待ってくれています。


ということで今回は短い記事でしたが、私の場合はDropBoxがその原因になるという思いがけないものでしたので今回のTipをご紹介しました。

お疲れ様でした。m_ _m



Thanks, KDS!
Your tip helped me at once!

2014-06-01

Ubuntu 14.04 で再生されてる音を録音する方法

もうかれこれWindows→UbuntuへメインOSを変更して10ヶ月ほどが経ち、正直ほぼ何の問題もない今日このごろです。

そして、今回は以前windowsでもやったことがある「PC内で再生されている音を録音する」というのをUbuntuでもやってみたくなり、挑戦したところあっさりと実現できましたのでここに備忘録としてその方法を残したいと思います。




[最終結論] Audacity をインストールすれば後は設定だけでOK。


まず録音をするソフトウェアをインストールしましょう。
今回はターミナルを使わず簡単にインストールできる「Ubuntuソフトウェアセンター」を使います。

検索ボックスの中に「Audacity」と入力して検索すれば以下のようなマークのソフトウェアが出てくるのでそれをインストールしてください。



インストールが完了したらこのAudacityを開きましょう。

そして、音声の調整ができる pulseaudio というものがすでにインストールされているはずですので、これも起動してください。
(もしインストールされていなければ、Audacityと同様にUbuntuソフトウェアセンターからインストールできます。)

では、以下のようにAudacityの録音ボタンをクリックして録音を開始します。




次に、pulseaudio の方で以下のように、「録音」タブの中にある「ALSACapture から」の部分を

Monitor of 内部オーディオアナログステレオ

へ変更します。
この設定でPC内で再生されている音を録音することができます。

※なので、録音が終わったら元に戻しておくほうがいいと思います。試してませんが、おそらくこの設定のままでスカイプとかができなくなってしまうので。




さぁ、これで準備は万端です。
後はつないだ電子ピアノなどで音を鳴らせば Audacity 内で録音されていきます。

※ちなみにパソコンのスペックや環境によっては録音の遅延が起こり、なんともぼやけた音が録音されることがあります。その際は他のアプリケーションを閉じるなど工夫してみてください。

以上です。
おそらく他にもいろいろな録音設定があると思うのですが、今回のケースでは何の問題もなかったのでもし不具合が起こったら、また追記したいと思います。


ではでは。
最後に僕の中で一番天国に近い場所、バンクーバーの写真をご覧ください。^-^


2014-05-14

Laravel 4 のパスワード・リマインダーのメール件名を追加&日本語化

前回の記事に引き続き人気上昇中のPHPフレームワーク「Laravel4」について書きます。
というのも、このLaravelがホントにいたれりつくせりで開発者として感動させられるからです。

特にページネーションはホントに何もかもやってくれますし、データベースのAND、OR検索などもグループ化することで複雑なものさえも簡単に実現してくれます。

ただ、だからこそ最近見たネット記事で「プログラムさえ将来機械化してしまうから職がなくなるかも」という話題に信ぴょう性を感じてしまいました。。

ま、気を取り直して、タイトルの「パスワード・リマインダーのメール件名を追加&日本語化」をご覧ください。^-^



[結論] パスワード・リマインダーの件名はデフォルトでは空白なので改造が必要。メール内容の日本語化は簡単です。


まず、基本的なパスワード・リマインダーの作成は『パスワードリマインダーとリセット』 で完了させておいてください。

では先にパスワード・リマインダーに件名を追加する方法を紹介しましょう。


1.Laravel4のパスワード・リマインダーにメール件名をセット


先ほどのリンク先の作業を済ませると、

app/controllers/RemindersController.php


というコントローラーファイルがあるので、これを開きましょう。
そして、中ほどにある「postRemind」を探します。

デフォルトでは、以下のようになっています。


public function postRemind()
{
 switch ($response = Password::remind(Input::only('email')))
 {
  case Password::INVALID_USER:
   return Redirect::back()->with('error', Lang::get($response));

  case Password::REMINDER_SENT:
   return Redirect::back()->with('status', Lang::get($response));
 }
}


ここを以下のように少しだけ改造しましょう。↓↓↓


public function postRemind()
{
 $response = Password::remind(Input::only('email'), function($message){
  
  $message->subject(Lang::get('messages.password_reminder'));
  
 });
 
 switch ($response)
 {
  case Password::INVALID_USER:
   return Redirect::back()->with('error', Lang::get($response));

  case Password::REMINDER_SENT:
   return Redirect::back()->with('status', Lang::get($response));
 }
}



簡単に言うと、$response の中にfunction を作ってその中に $message->subject() を作るだけです。

※ちなみに、Lang::get('messages.password_reminder') はローカリゼーション用なので、日本語だけでいい方は直接「パスワードのリセット: (サイトタイトル)」など件名を書き込んでください。 

はい!
以上で件名の追加は完了です。



では、次にメール本文の日本語化をしましょう。

いたれりつくせりのLaravel4ですが、ここはまだローカリゼーション対応してくれていないようです。


2.Laravel4 のパスワード・リマインダー:メール本文の日本語化


こちらはホントに簡単で、

app/views/emails/auth/reminder.blade.php


の中にある、

To reset your password, complete this form:


の部分を日本語に変更するだけでOKです。
「パスワードをリセットするためにフォームを完成させてください。」などの日本語に変更しましょう。

※もちろんローカリゼーションする場合は、


Lang::get('messages.******'); 


という具合に変更します。


ちなみに、、、


app/config/mail.php

の中にgmail の情報を書き込んでおくと、ローカル環境からでも gmailから送信することができます。
これ、すごく便利ですね。
個人的に、今後はサーバー内のメールはあまり使わなくなるかもしれません。
(でも、開発で誤送信メールには気をつけなければ!!)

ということで、設定については『Laravel4、メールの送信』がとてもわかりやすいです。^-^

以上になります。
お疲れ様でした。^^



 Hirohisa Kawaseさん、いつも役立つLaravel情報ありがとうございます!

And also thank you, satie. Your tips helped me!!

[Solved] Password reminder without subject



2014-05-10

Laravel4 に reCAPTCHA を設置する方法

今現在、業務向けにAndroidアプリを作成しているのですが、機能的にサーバーとの連携が必要なため、以前から気になっていたPHPフレームワーク「Laravel4」を使ってページを作成することにしました。

Laravel4は最近特に海外で人気なようですし、前々から「良い良い」と聞いていたので、今後のために勉強をはじめましたがやはり完全に使いこなすまでには時間がかかりそうですね。

・・・ということで、自分自身のためにも今回の記事を投稿します。

(追記)どうやら reCAPTCHAは仕様が変わったらしくこの方法ではうまく行かない場合があるようです。そのため、以下のようなパッケージを利用することをおすすめします。

Laravel 4: https://github.com/mewebstudio/captcha/tree/master-l4
Laravel 5: https://github.com/mewebstudio/captcha




[最終結論] 公開されているプラグイン本家の設置方法をみただけではうまくいきませんでした。(汗)

まずは環境の方から。

OS: Ubuntu 14.04
PHP: 5.5.9
Laravel: 4.1.28
reCAPTCHA: publicキーとprivateキーを取得しておく。

そして、laravelに設置するプラグインは「greggilbert/recaptcha」です。


では、早速作業に入りましょう!



1.プラグインの情報を追加する


まずpublicフォルダの中にある「composer.json」を開いて、require の中に

"greggilbert/recaptcha": "dev-master"

を追加。




そして、app/config/app.phpを開いて、「providers」の中に

Greggilbert\Recaptcha\RecaptchaServiceProvider

を追加します。


2.composerを使ってインストール


ターミナルを開いて、laravelをインストールしたフォルダへ移動し、

composer update

を実行しましょう。


成功すれば、上のような画面になります。


3.reCAPTCHAの情報を追加

※追記

すみません。今見なおしたら、以下のコマンドを実行する手順が抜けていました。
ホントにごめんなさい。m_ _m
php artisan config:publish greggilbert/recaptcha


app/config/packagesにファイルが作成されているので、

app/config/packages/greggilbert/recaptcha/config.php

を開きましょう。
この中に以下のように、それぞれ public_key と private_key を設定する部分があるので、ここにreCaptchaで事前に取得したパスワードを書き込みます。




はい。以上でプラグインを使う準備は完了です。



4.ビュー&バリデートに設置

まずビューにreCAPTCHAを表示するためにコントローラー内で、

$this->layout->content = View::make('home.home, array(
    recaptcha' => Form::captcha()
));

を追加。そして、ビューの中で、

<?=$recaptcha; ?>

とします。

※追記

コントローラで作成しなくても、直接 View の中で以下のように利用することもできます。

{{ Form::captcha() }}

これで以下のような画像認証が表示されます。



あとは以下のように通常通りバリデートのルールにプラグインの情報を追加してあげれば完了です。(reCAPTCHA以外のバリデートが必要な場合は適宜追加してくださいね。)


$validator = Validator::make(
array(
'recaptcha_response_field' => Input::get('recaptcha_response_field')
),
array(
'recaptcha_response_field' => 'required|recaptcha'
)
);

if($validator->fails()) {

// 認証失敗 ;_;

}


はい!
これですべて完了です。

それにしても amazon で laravel4の本を探してみましたがまだ日本語板のものってないんですね。
そのうち 海外版kindle本を買う必要が出てくるかも、と思いました。
(もしかすると今はプログラムの本とかは売れないから出さないのかな・・・?)





Greg Gilbert, thank you from my heart!
Your plug-in is really useful.:)))

2014-05-02

左右にスライドして実行するAndroid-Bootstrap 拡張ボタンを作ってみた。(ダウンロード可)

前回の記事でも書きましたが、私は今 Android-Bootstrap にハマっています。
とても便利なので。(^-^)v

ということで今回は前回に引き続き Android-Bootstrap を拡張したスライドボタンをここで公開したいと思います。




とはいえ、作業はほぼ前回と同じなので簡単に説明します。


[準備編]

1.まずGitHub からBootstrapSlideButtonをダウンロードし解凍してください。

2.Android-Bootstrap の「src」の中に「com.sukohi.lib」というパッケージフォルダを作り、BootstrapSlideButton.javaをコピー(もちろん移動でもOK)

3.次に「layout」フォルダの中に、bootstrap_slide_button.xml をコピー。

4.最後に「values」の中にattrs.xml をコピーして上書きする。


はい。
以上で準備は完了です。


[実行編]

では、実際に使って見ましょう。

使いたいレイアウトのxmlの中で、

    <com.sukohi.lib.BootstrapSlideButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        bootstrap:bsb_type="success"
        bootstrap:bsb_slide_mode="both"
        bootstrap:bsb_right_text="Right Text"
        bootstrap:bsb_center_text="Center Text"
        bootstrap:bsb_left_text="Left Text"
        bootstrap:bsb_text_size="16"
        bootstrap:bsb_right_icon="fa-floppy-o"
        bootstrap:bsb_left_icon="fa-times-circle-o"
        bootstrap:bsb_restorable="true"
        bootstrap:bsb_padding="10"
        bootstrap:bsb_padding_top="10"
        bootstrap:bsb_padding_right="10"
        bootstrap:bsb_padding_bottom="10"
        bootstrap:bsb_padding_left="10" />

こんな感じでタグを配置します。
(※ネームスペースとして xmlns:bootstrap="http://schemas.android.com/apk/res-auto" を忘れずに!)

プロパティの意味は以下です。

bootstrap:bsb_type ・・・ ブートストラップの色タイプ。「Default」「Primary」「Info」「Success Warning」「Danger」「Inverse」の7つ。

bootstrap:bsb_slide_mode ・・・ 右のみ、左のみ、両方にスライド可能かを決める。パラメータは「right」「left」「both」

bootstrap:bsb_right_text ・・・ 右側のテキスト

bootstrap:bsb_center_text ・・・ 中央のテキスト

bootstrap:bsb_left_text ・・・ 左側のテキスト

bootstrap:bsb_text_size ・・・ テキストのサイズ

bootstrap:bsb_right_icon ・・・ 右側のアイコン(fa-****という形。Android-Bootstrapと同じ)

bootstrap:bsb_left_icon ・・・ 左側のアイコン

bootstrap:bsb_restorable ・・・ スライドさせたあとも元に戻せるかどうか

bootstrap:bsb_padding ・・・ padding。これを使うと top, right, bottom, left を省略可。

bootstrap:bsb_padding_top
bootstrap:bsb_padding_right
bootstrap:bsb_padding_bottom
bootstrap:bsb_padding_left ・・・ 個別のpadding。


※コード内での使い方は「BootstrapSlideButton.java」の中にある「Example」を参照してください。


ちなみに今回のボタンは本日アップデートした『HTBニュース』で使われています。
ぜひ参考にしてみてくださいね。

ちなみに、このスライドボタンだけでなくチェックボックスやCalloutなどもGitHubで公開しています。もしもう少し数が多くなってきたら「Android-Bootstrap ○○」みたいな形でひとまとめにして公開したいと思います。
(・・・とはいえ、本家のBootstrap とは全く関係のないコンポーネントもありますけどね^^;)

お疲れ様でした。