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 とは全く関係のないコンポーネントもありますけどね^^;)

お疲れ様でした。


2014-04-17

Stackicons もAndroid-Bootstrap で使えるようにしてみました。(ダウンロード可)

以前、「デザインが出来ないエンジニアのAndroid-Bootstrap利用方法」という記事を読んで以来 Android開発でも Bootstrap を活用しています。

なんといっても Font-Awesome の多様なアイコンが簡単に利用できるとあっていつも助けられているのですが、今回は Font-Awesome にはないアイコンが使いたくなったため、この「Android-Bootstrap」を拡張して「Stackicons」でも利用できるようにしてみましたのでGitHubにて公開したいと思います。

(※拡張、と言ってもほぼ全てAndroid-Bootstrap からのコピーですが。。^^)




[作業手順(3ステップ)]

手順としては Android-Bootstrap の FontAwesomeText とほとんど同じです。


1.Stackicons からファイルをダウンロードし、中に入っている「Stackicons-Social.ttf」をStackicons を使いたいプロジェクト内にある assets にコピーします。



2.Android-Bootstrap-Stackicons(GitHub) からZIPファイルをダウンロード&解凍。今度は AndroidBootstrap の中に「Stackicons.java」と「StackiconsText.java」を以下のように設置。



3.後は、以下のように xml にアイコン名を記述すればOKです。

<com.beardedhen.androidbootstrap.StackiconsText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="18sp"
    android:textColor="#000000"
    bootstrap:fa_icon="st-icon-amazon" />


※xmlns:bootstrap="http://schemas.android.com/apk/res-auto" の記述を忘れないでくださいね。


できました!



ちなみに上記の一覧は、ZIPファイル内に入っている 「MainActivity.java」と「activity_main.xml」を使えば見ることができます。

お疲れ様でした。




Parker Bennett, Bearded Hen and Dave Gandy, I appreciate you guys!!!

2014-03-05

GenymotionをUbuntu13.10にインストールする方法

今更ながらですが、高速Androidエミュレータの『Genymotion』をUbuntu13.10 にインストールしてみました。
前々から良いとは聞いてたのですが、通常のエミュレータでもそれほど遅くなかったのでずっとスルーしてきましたが、すこし時間ができたのでこの際チャレンジしてみました。

作業的には多少ありますが、これがまた高速です。
起動も高速、動作も高速。
新幹線を使わず飛行機で東京へ行った時のことを思い出しました。



[最終結論] Genymotion はホントに高速で動きます。インストール作業は多少ありますが、やる価値はありますよ!


では、インストールですが、多少作業することがあるので以下の3つのブロックに分けて説明します。

1.Virtualbox のインストール
2.Genymotion のインストール
3.エミュレータの使い方


〜 作業フォルダの作成 

作業にはいる前に、

/home/{あなたのユーザー名}/virtualbox

というフォルダを作っておいてください。
今回の作業でダウンロードするファイルは全てここに保存してください。

では、作業の開始です


第1部 〜 Virtualbox のインストール 

では、まずターミナル(端末)を開いてください。
そして、

sudo gedit /etc/apt/sources.list

でファイルをオープンしましょう。
そして、最後の行に

deb http://download.virtualbox.org/virtualbox/debian saucy contrib

と書いて保存&終了します。

次にpublicキーをダウンロードです。
はじめに作成した「virtualbox」フォルダへ移動しましょう。

cd /home/{あなたのユーザー名}/virtualbox

そして、

wget http://download.virtualbox.org/virtualbox/debian/oracle_vbox.asc

で、ファイルをダウンロードします。
で、virtualboxのインストールです。

sudo apt-get update
と、
sudo apt-get install virtualbox-4.3

でインストールしてください。
これで第1部は終了です。


第2部 〜 Genymotion のインストール 

では、次にGenymotionです。
まず以下のURLからユーザー登録しましょう。



上からユーザー名、メールアドレス、パスワード、パスワード(確認)、そして最後が利用規約に同意です。
送信が完了したら、入力したメールアドレスの中にアクティベーションコードが書かれたリンクがありますので、以下を参考にしてそれをクリックしてください。



はい、これでユーザー登録が完了しました。
では、次にGenymotion のダウンロードです。
以下のダウンロードページからUbuntu用ファイルをvirtualboxフォルダへ保存しましょう。


※ファイルはご自身のパソコンのあった方を選んでください。


では、実際にGenymotionのインストールをしていきましょう。
ターミナルに戻って、virtualboxフォルダへ移動します。
(そのままの人は必要ありません。)

cd /home/{あなたのユーザー名}/virtualbox

そして、ダウンロードしたファイルに対して以下のコマンドを実行します。
(ファイル名が違っている場合がありますので注意してください。)

chmod +x genymotion-2.1.1_x86.bin

と、
./genymotion-2.1.1_x86.bin


はい!これでGenymotionのインストールが完了です。
第2部は終了になります。


第3部 〜 エミュレータの使い方 

では、最後にGenymotionの起動と設定の仕方を紹介します。
ターミナルで、

cd /home/{あなたのユーザー名}/virtualbox/genymotion

でGenymotionのフォルダへ移動して、

./genymotion

で、Genymotionを起動します。
では次に動かしたい機種を設定しましょう。


右下にある「Connect」をクリックするとGenymotionのログイン情報を入力するエリアが表示されるので、そこにユーザ名とパスワードを入力し、「Connect」をクリックしてください。

すると、以下のように機種のリストが出てきますので、好きなものを選んで「Next」をクリック。
(私の場合はNexus 7 のAPIレベル19にしました。^^)


ダウンロードには少し時間がかかるのでしばらく待ちましょう。


はい!完了しました。


あとは、PlayボタンをクリックするだけでOKです。


うまく起動しました!


さらに、eclipseのDDMSを確認するときちんとデバイスとして認識されています。



後は、ご自身が作業しているAndroidアプリをeclipseから起動してGenymotionがいかに高速化を実感してみてください。
お疲れ様でした。


[参考ページ]:
Install GenyMotion in Linux/ubuntu 13.04

Your article helped me a lot.
Thank you, Linuxicle!!:)))

フェイスブックの検索履歴を消す方法【作業1分】

先日、YouTube で海外の CNETチャンネルをチェックしていたところ、フェイスブックの検索履歴を削除する方法が紹介されていたのでここでも紹介したいと思います。

私の場合は、特別見られて恥ずかしいものは出てきませんでしたが、いかにフェイスブックがありとあらゆる検索キーワードを保存しているかを実感させられました。

動画の中で「フェイスブックはぞっとする」とホストの方が言っていますがまさにそのとおりです。




[最終結論] 検索履歴は1分もあれば削除できる!

では、実際の作業に入りましょう。
まずはパソコンを使ってログインをしてください。

ログインしたら、画面の右上にある「歯車のマーク」をクリックして、さらに「アクティビティログ」をクリックしましょう。



次に、画面の左側に移動して、「他を見る」をクリックしましょう。
クリックしたらたくさんの隠れていた項目が表示されます。



そして、表示された項目の中の「検索」をクリックします。
(このページに表示されるものが今までフェイスブックで検索してきた全キーワードの履歴になります。)




では、これらを全て削除しましょう。
やり方はとても簡単です。
以下のように画面中央にある「検索をクリア」をクリック。



「全ての検索履歴を削除しますか?」
と聞いてくるので、「検索履歴をクリア」をクリック。



はい!完了ですよ♪

正直言うと最近はあまりフェイスブックをしなくなってきていますが、逆にいうとあまり利用しないのにいろんな情報をフェイスブックに保存したままにするいうのもいかがなものかなと感じました。
いいきっかけを与えてくれた CNETさん Donald Bellさん ありがとう!

では最後にネタ元の動画をどうぞ。
英語ですけど、短いので僕の説明よりわかりやすいかも^^;
(ちなみに彼のちょっとコミカルな動きは僕のお気に入りです^-^)



お疲れ様でした。




2014-02-25

ランサーズでプログラムを受注した感想

「今年は絶対にいい年にしよう!(なんせ去年が最悪だったので。。^^;)」
と思ったこともあり、この度ランサーズというクラウドソーシング・サービス(ネットを使った委託)に登録してプログラムの作成案件を受注してみました。
もちろん受注は過去にも何度もしてますけど、Lancersは初めてだったので久しぶりに気合が入りました。

ということで、今回はランサーズを利用してみた感想を書いてみたいと思います。


[結論] 全体的にランサーズが好きになりました。^^


・受注の流れ

では、まずお仕事の受注の流れから。

1.自分が引き受けられそうな案件を探す(これがとても楽しい!)
2.金額や作業期間などの提案を依頼主に送信
3.依頼主が選んでくれたらお仕事を開始

※逆に依頼主から指名してくれるパターンもあります。

ちなみに、個人的にですが案件をいろいろ見ているだけでもとても勉強になります。
やはりご依頼主は「お金を出してでもプログラムを作りたい!」と思っているわけですので、アイデア自体が非常におもしろかったり、最新の技術を利用しようとしている人もいらっしゃいますので新しい情報に触れる機会にもなっています。


・エスクロー

では、次にランサーズ最大の特徴「エスクロー」について。

エスクローとは、簡単にいうと仮支払いサービスです。
具体的に言うと、

1.仕事が始まる前に依頼主がお金をランサーズに支払う。
2.仕事が完了するとそのお金がランサーズからプログラマーに入金される。

という流れです。


ちなみに、私はこのエスクローがなければランサーズは利用してません。
というのも金額によって違いますが、システム利用料金が20%とべらぼうに高いのです。(汗)
できるならランサーズの中の方に消費税が8%にアップしますけどどう思います?って聞いてみたいですね。(笑)
(しかも、銀行への振込手数料までとられると知ったときは本当にガクゼンとしましたよ。。)

でも、それでも利用したい理由はひとつ。

「プログラム制作に集中できるから」

です。


実は以前雇われていた時の案件で、最後の最後にお金の支払いをゴネだした方がいらっしゃったことがありました。
その時は、何十万円かの支払いだったので本当に困り果てました。
そして何度も何度も支払いの催促をしているうちに時間が経ち、あるときこう思いました。

「これだったらもうあのお金放棄して別の案件を受注したほうが良かった。」

と。

なので、エスクローさえあればお金の取り立てはしなくてもよくなるので、そのメリットは果てしなく大きいです。(私はウェブ・ディベロッパーであって金融屋ではないので。)


・私が感じるクラウドソーシングの可能性

私はカナダのバンクーバーに留学していたのですが、もしクラウドソーシングを知っていればもう少し滞在をのばしていたかもしれません。
なぜなら滞在していたホテルでは wifi がありましたし、ノートパソコンを持って行っていたので部屋でお仕事もできたはずだからです。

※ちなみに留学エージェントの方いわく、インターネットであってもカナダ(アメリカも)からお金を稼ぐのはダメ。だけど、日本ならOKとのことでした。
私のケースは年齢の関係でノービザで渡航しましたので。

ということで、今後もし可能であればネット環境を利用して、憧れのオーストラリア(メルボルン)でお仕事、なんてこともできるかもしれませんし、物価がすごく安い土地に住みながら仕事を受注すれば結構いい暮らしができるかも?なんて想像しています。(実際には受注が続かないことも多いので、独自サービスからの収入との両輪という形が不可欠なると思います。)

また、今後は英語圏のクラウドソーシングにもチャレンジしてみようかと考えています。


今のところの感想は以上ですね。
ランサーズにはプログラムだけでなく、翻訳などいろいろな案件があるので副業などに興味がある人はぜひチェックしてみてください。

クラウドソーシング「ランサーズ」 - 日本最大級の仕事依頼サイト


※ちなみに、私個人にプログラムのご依頼をしたい方は以下からお願いいたします。
(もし全額先払いしていただけるのでしたら直接受注もいたしますよ^^)


[九保すこひ]
https://www.lancers.jp/profile/sukohi

ではでは。



2014-01-29

PHPBBに記事の編集ボタンを表示させる方法(5分で解決できます)

みなさん、遅くなりましたがあけましておめでとうございます!
昨年は個人的にも周り的にもひどい目にあった年だったので、今年はきっといい年になりそうです。^-^

さて、今回はPHPBBの話題です。海外ではよく利用されているのを見るオープンソースの掲示板システムで、もちろんPHPで動きます。
しかし、このPHPBBを導入してどうしてもできなかったのが「記事の編集」でした。

・・・というわけでPHPBBの「記事の編集」ボタンを表示されない場合の修正方法をお届けしたいと思います。




[最終結論] 利用しているスタイルのフォルダ内に「en」の中身と同じフォルダ「ja」を作成すればオッケーです。



では、まずは前提条件として、以下を確認してください。
1.ACPログイン(管理者ログイン)して「投稿」>「投稿設定」をクリック。


2.ページ中ほどにある編集の「タイムリミット」がゼロになっているかを確認してください。違う数字が入っていればゼロを入力して更新してください。




では、実際の作業をする前に原因を説明します。
それは結局のところ、「言語」なんです。つまり、


ネット上でダウンロードしてきたスタイルを利用してしまうと、日本語用のファイルが用意されていないため、記事の編集ボタンが表示できない。


というのが、理由なんです。T^T
(ファイルがなかったらデフォルトの画像を表示すればいいのに、、、というかそうなるものだとばかり思っていました(涙))


・・・ということで、作業の流れとしてはたった2ステップです。

1.スタイルのフォルダ内に「ja」フォルダを作成。
2.その中に 「en」フォルダ内にある全ファイルをコピー

では、わかりやすい方法で実際に実行してみましょう。


1.PHPBBのフォルダ内にある

/styles/あなたが選んだスタイルの名前/imagesets


を開いてください。

この中に「en」というフォルダがあるはずです。



このフォルダと同じ階層に日本語用のフォルダ「ja」を作成しましょう。


2.あとは、「en」フォルダ内の全ファイルを「ja」フォルダにコピーすればオッケーです。
サーバーでPHPBBを動かしている場合は、Filezillaなどを使ってサーバーの同じ場所に「ja」フォルダををアップロードしてください。

画像がきちんと表示されていると思います。

※ちなみに画像は以下のようなものになります。






はい!
以上で終了になります♪


・・・それにしても、こんなところに言葉の壁があるとは思いませんでいた。(笑)
おつかれさまでした。


[参考URL]

No Edit Button on posts - Lucid Lime
https://www.phpbb.com/customise/db/style/lucid_lime/support/no_edit_button_on_posts-t_90221-p_208887-sid_78f99effd9ae3d84f2fd934c36c010e3#p208887

Unless I found your post, I couldn't fix my PHPBB.
Thank you, KeithForever!!!