次世代ランチ検索coozoをリリースしました

LINEで送る
Pocket

次世代型のランチ検索サービスcoozo(食うぞ)をリリースしました。

coozo | 次世代ランチ検索
coozo | 次世代ランチ検索

coozoはレストラン単位ではなく料理単位で検索する事ができます。例えば担々麺を食べたい場合にお店毎の担々麺の写真を比較しながらお店を選ぶ事ができます。

続きを読む 次世代ランチ検索coozoをリリースしました

LINEで送る
Pocket

CakePHP2.1で英語と日本語の二言語対応サイトを作る(前編)

LINEで送る
Pocket

最低限の要素で2言語対応のサイトを実際にCakePHP2.1で作る方法を紹介します。
完成イメージは以下のサイト
九寨溝国家級名勝区の紹介
上記サイトをブラウザの言語を切り替えながら表示してみると、英語モードでは英語、日本語モードでは日本語で表示されることがわかります。
ブラウザの設定を切り替える方法はこちら
ブラウザの設定を切り替える

やる事

  • ・文字は直接書き込まず、特殊関数「__()」を使って書く
  • ・翻訳ターゲットをcakeシェルにて翻訳ファイルに出力
  • ・翻訳ファイルを翻訳する
  • ・URLが言語毎に区別できるようにする(※)
  • ・ブラウザの言語と逆のURLにアクセスした場合の補正
  • ・解析ツール(adsenseタグ)の読み分け
  • ・botからのアクセスへの考慮(いいねボタンとか)
  • ・長文コンテンツは翻訳ファイルを使わずに、別viewとして管理
 ここで再び「九寨溝国家級名勝区」のサイトを見てください。
サブドメインによって日本語と英語を切り分けているのがわかります。

 


 

文字は直接書き込まず、特殊関数「__()」を使って書く

通常viewに書き込む文字は直接書き込まず、下記のように記述します。

<?= __('type message here in english.') ?>

例:通常の書き方(app/View/Jiuzhaigou/index.ctp)

<ul>
    <li><?= $this->Html->link('Rizegou Valley', '/jiuzhaigou/rizegou')?>
    <li><?= $this->Html->link('Zezhawagou Valley', '/jiuzhaigou/zezhawagou')?>
   <li><?= $this->Html->link('Shuzhenggou Valley', '/jiuzhaigou/shuzhenggou')?>
</ul>

例:多言語対応の書き方

<ul>
    <li><?= $this->Html->link(__('Rizegou Valley'), '/jiuzhaigou/rizegou')?>
    <li><?= $this->Html->link(__('Zezhawagou Valley'), '/jiuzhaigou/zezhawagou')?>
   <li><?= $this->Html->link(__('Shuzhenggou Valley'), '/jiuzhaigou/shuzhenggou')?>
</ul>

この段階では上記は両方ともレンダー後に同じhtmlになります。

レンダー後

<ul>
    <li><a href="/jiuzhaigou/rizegou">Rizegou Valley</a>
    <li><a href="/jiuzhaigou/zezhawagou">Zezhawagou Valley</a>
   <li><a href="/jiuzhaigou/shuzhenggou">Shuzhenggou Valley</a>
</ul>

 

翻訳ターゲットをcakeシェルにて翻訳ファイルに出力

コンソールからソースのrootに移動して cake i18n コマンドを実行

$ cd {project root}/app
$ Console/cake i18n
Welcome to CakePHP v2.1.2 Console
-------------------------------------------------------
App : app
Path: C:\xampp\jiuzhai\trunk\app\
-------------------------------------------------------
I18n Shell
-------------------------------------------------------
[E]xtract POT file from sources
[I]nitialize i18n database table
[H]elp
[Q]uit
What would you like to do? (E/I/H/Q)
> E            <--------------------------------------------type E and Enter
What is the path you would like to extract?
[Q]uit [D]one
[C:\xampp\jiuzhai\trunk\app\] > <---------------------------type Enter

What is the path you would like to extract?
[Q]uit [D]one
[D] > <-----------------------------------------------------type Enter

What is the path you would like to output?
[Q]uit
[C:\xampp\jiuzhai\trunk\app\Locale] > <---------------------type Enter

Would you like to merge all domains strings into the default.pot file? (y/n)
[n] > <-----------------------------------------------------type Enter

Processing ..............

Error: default.pot already exists in this location. Overwrite? [Y]es, [N]o, [A]ll (y/n/a)
[y] > <-----------------------------------------------------type Enter

Error: cake.pot already exists in this location. Overwrite? [Y]es, [N]o, [A]ll (y/n/a)
[y] > <-----------------------------------------------------type Enter

Error: cake_dev.pot already exists in this location. Overwrite? [Y]es, [N]o, [A]ll (y/n/a)
[y] > <-----------------------------------------------------type Enter

[E]xtract POT file from sources
[I]nitialize i18n database table
[H]elp
[Q]uit
What would you like to do? (E/I/H/Q)
> Q <-------------------------------------------------------type Q and Enter

上記により以下に翻訳ファイルが生成されます。

app/Locale/cake.pot
app/Locale/cake_dev.pot
app/Locale/defalut.pot

 

翻訳ファイルを翻訳する

翻訳ファイルのエディタ(Poedit)を入手してください。

「app/Locale/default.pot」ファイルをPoeditで開いてください。

原文を順に選択していき、対訳の日本語を記述して以下の場所に保存してください。

app/Locale/jpn/LC_MESSAGES/default.po

たったこれだけで日本語と英語に対応したサイトができます。

まずは、先ほどの「ブラウザの設定を切り替える」で英語と日本語を切り替えながら表示を確認してみてください。

各設定に従って表示が変わる事が分かると思います。

それでは今回はこのへんで。

次回は「URLが言語毎に区別できるようにする」から。

LINEで送る
Pocket

ツイッターで楽しく遊ぶ

LINEで送る
Pocket


ホットなうにマイルーム機能が追加されました!

⇒今すぐマイルームを使う

マイルームって?

マイルームは共通の話題についてツイッター上で語られている事をまとめて表示しその場でコミュニケーションができるサービスです。
好きなアーティストについて語るのもいいし、情報を得るだけでも使えます。
イベントの最中に専用の部屋を作って中継したりしても楽しいよ!

好きな話題の部屋を作る!

マイルームでは、自分の好みに合わせた部屋を作ってツイッターで話題を共有できます。

日本語でトピックを入力してハッシュタグを決めればできあがり!

部屋を作ったら「@hottonau」が自動でツイートしてみんなにお知らせするよ。

部屋を作った作者は誰にもわからないので気軽に作って気軽にみんなで共有しよう。

話題に参加する

部屋に入ったら、ツイートボックスから直接ツイートすればその場で話題に書き込めるよ。

自動的に設定したハッシュタグが付きます

他人の作った部屋に参加する

@hottonau のツイートから興味のある部屋を見つけたらURLをクリックして話題に参加しよう!

気にいった部屋はその場でマイルームに登録する事ができます。

※ポイント – リツイートして拡散!

自分の部屋を作ったら沢山の人と情報共有するために、「ツイートする」ボタンでツイートしたり、@hottonau のツイートをリツイートしてどんどん拡散していこう!

操作手順

①ログインしてマイページを表示しましょう

マイルームを表示

②トピックとハッシュタグを入力して作成完了!

部屋の作成

③ホットなうが匿名でみんなに伝えるよ!

ホットなうツイート

④部屋に入ったら話題に参加

⑤他人の作った部屋をマイルームに登録する事もできるよ!

自分の部屋で話題を共有

ご意見・ご要望はこちらのアカウントにリプライで

@hottonau
LINEで送る
Pocket

車を押せ!Push a car

LINEで送る
Pocket

昔Flashで作った遊びコンテンツ。

車がガス欠してしまい怒り狂う!

どうする!?

もう押すしかない!

無情、乳母車のおばあちゃんにも楽々抜かれていくのでした。。。

Pushing a car

Pushing a car

▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽▼▽

>>> 遊んでみる <<<

▲△▲△▲△▲△▲△▲△▲△▲△▲△
遊び方は簡単。

【タイトル画面】

右上の「Start Walking」を押して車を押す

【アニメーション画面】

右上の「Take a break」を押すと休憩する。

休憩中に、右上の「Push」ボタンを押すと再度歩き始める。

お婆ちゃんの「Do you wanna give up??」を押すとタイトルに戻る。
※ 音が出るので仕事中の方は気をつけてください。

LINEで送る
Pocket

ツイッターでお友達を作るには

LINEで送る
Pocket

私事ですが、ツイナビというサイトを作っております。

こんな奴

「ツイッター始めたけど仲間が見つからない」

とか、

「誰をフォローしていいかわかんない」

とか言った声をよく聞きますので、ツイナビの中のツリーというコンテンツを紹介したいと思います。

ツリーで写真カテゴリを検索してみた
ツリーで写真カテゴリを検索してみた

ツリーで写真キーワードを検索してみました。

写真に興味のある人が1696人もいましたね。

気になる人がいたらフォローしてみましょう!

因みに、ツリーで僕(@euonymus)

開発, 写真, 一眼レフ, イラスト, 絵, ギター, 旅行, 語学, 英語, 韓国語

などを登録しています。

僕と同じキーワードを3つ以上登録している人を抽出してみたらこんなにいらっしゃいました!

@totoro0614 さん: [写真][一眼レフ][旅行][英語]
@chieko0601 さん:[旅行][語学][英語]
@The_Hirox_666 さん:[写真][ギター][旅行]
@maria_wisteria さん:[旅行][語学][英語]
@youkub さん:[写真][旅行][英語]
@GUNz7099 さん:[写真][絵][旅行]
@dahyechoice さん:[旅行][英語][韓国語]
@azuma_ya さん:[写真][イラスト][絵]
@maidabaayo さん:[写真][絵][旅行]
@yukko_13 さん:[旅行][英語][韓国語]
@ko_shu さん:[写真][旅行][英語]
@ulysses43 さん:[写真][旅行][英語]
@chuxon さん:[写真][旅行][英語]
@mittaron さん:[絵][旅行][英語]
@mumimy さん:[写真][一眼レフ][旅行]
@shino100930 さん:[旅行][英語][韓国語]
@hige3higetarou さん:[イラスト][絵][ギター]
@kinazo1213 さん:[旅行][語学][英語]
@halu0326 さん:[写真][絵][旅行]
@nordnord さん:[写真][旅行][語学]

これだけ興味が一致すれば意外な運命の出会いがあるかもしれませんね。
ぜひ試してみてください。

LINEで送る
Pocket

最近よく聞くOAuthって何じゃ?

LINEで送る
Pocket

最近Twitterなどを利用していると良く聞くようになったOAuthという物について解説。
「言葉はよく聞くけど何だかよくわかりまへん」という方のために初歩の初歩から超ザックリ説明します。

■OAuthとは

ユーザーがサービスプロバイダーの情報を第3者機関のサービスに提供し利用する事を許可する為のプロトコル
※ 第3者機関の事をコンシューマーと呼ぶ

■OAuthを使ったサービス例

僕が開発しているツイナビというサイトがあります。
ツイナビでは、ツイッター上の情報を表示したり更新したりする事ができます。
大抵の事はツイッターサイト自体に行かずにツイナビ上で処理できてしまいます。

これはユーザーが「ツイッター上の情報をツイナビに提供し利用・編集されても構わない」という許可をOAuthという仕組みを使って与えているからです。

■各機関のロール

サービスプロバイダー:ツイッター(例)
コンシューマー:ツイナビ(例)
ユーザー:あなた(例)

■OAuthの特徴

・ユーザーはコンシューマーにサービスプロバイダーのパスワードを渡す必要がない。
・ユーザーはいつでもプロバイダー側からコンシューマーへの認証を取り消すことができる。
・平文でパスワードが流れるベーシック認証等に比べてセキュア

■認証に利用されるトークン

認証にはIDとパスワードの代わりにトークンと呼ばれる物を使用します。

Consumer key ( Consumer key, Consumer secret )
Request token ( Request Token key, Request Token secret )
Access token ( Access Token key, Access Token secret )
※ 利用方法は後述

■コンシューマーアプリケーションの作成手順概要

ステップ1:アプリケーションの登録
予めサービスプロバイダー(ツイッター等)に対してコンシューマーアプリケーションの情報を登録する必要があります。
登録が完了すると、Consumer key と呼ばれる認証情報が与えられます。

ステップ2:認証フローに沿った処理を実装
Consumer key を適切に保存して認証フローに沿った処理を実装する。
※ 詳細は別途

■ユーザーがサービスを使って認証する時のフロー

ユーザーがコンシューマーに許可を与えるまでには複雑な処理の過程を踏む必要がある。
まず初めに動きを体感してもらうために、ユーザーから見た画面遷移を説明する。

【ユーザーから見たOAuth認証】
例として、単純なサンプルページを作成しました。
http://euonymus.info/experiment/

ステップ1:Euonymus Mediaの実験ページを閲覧している。
「OAuthテスト」ボタンを押す。

ステップ2:ツイッターの認証画面が表示される。
「許可する」ボタンを押す。

ステップ3:Euonymus Mediaのアプリケーション完了画面に戻る
ツイッターの情報へのアクセスが許可され、Euonymus Mediaからツイートしたりできる様になる。
※ ここでのロール(サービスプロバイダー:ツイッター / コンシューマー: Euonymus Media)

【通信のフロー】
アプリケーションを作る開発者は上記のフローを実現する為に複雑な処理を書く必要がある。

以下が実際のフローとなる。

OAuthユーザーフロー:ステップ1
OAuthユーザーフロー:ステップ1
OAuthユーザーフロー:ステップ2
OAuthユーザーフロー:ステップ2

ステップ1:コンシューマーサイトから「認証開始」のリンクをクリックする

・ユーザーはコンシューマーページに配置された「認証開始」のリンクをクリックする。
・コンシューマーは予め保存していた Consumer key をサービスプロバイダーに渡す。
・この時コンシューマーは「Callbackページ」を指定する必要がある。
・サービスプロバイダーはコンシューマーに対して Request toke を返り値として渡す。
・コンシューマーは Request token と共にブラウザに対して「認証確認ページ」へのリダイレクトを返す。
・ブラウザはリダイレクト命令を受けてサービスプロバイダー上にある認証確認ページを表示する。

ステップ2:認証確認ページで「許可」をする
・ユーザーはサービスプロバイダーの認証確認ページで許可ボタンを押す。
・この際ユーザーはID/PWを入力するがサービスプロバイダーへの直接アクセスであるため安全。
・認証の許可を確認したサービスプロバイダーはブラウザに対して認証確認済みのRequest token と共に予め指定された Callbackページへのリダイレクトを返す。
・ブラウザはリダイレクト命令を受けてコンシューマー上にあるCallbackページにアクセスする。
・この時認証許可済みのRequest tokenも渡される。
・コンシューマーはRequest tokenをサービスプロバイダーに渡す。
・サービスプロバイダーはRequest token の認証許可済みを確認して Access tokenをコンシューマーに渡す。
・コンシューマーはブラウザに表示したいページを返す。

ステップ3:コンシューマーによるアクセス
・コンシューマーは Access token を使ってサービスプロバイダーの情報を扱う事ができる。
(例えばツイートをする。とか。)

実際には複雑な通信の流れや、httpヘッダーの生成など面倒な事も多いので、本編はOAuthの大まかな概要にとどまる説明といたします。

具体的な実装については、別項でライブラリを使った方法を紹介する予定です。

LINEで送る
Pocket

Webサービス treeを公開しました!

LINEで送る
Pocket

皆さまこんにちわ。

tree というWEBサービスを作りました。もちろんお仕事で。

Twitter やってるみなさまは遊んでみて下さいね!!

http://twinavi.jp/tree

松嶋から帰還後に怒涛の開発をして今まで作業が及んだ苦労作ですYo。

昨日は深夜地下鉄に監禁されたし。。(- . -;)

「ツイナビ」で検索すると僕が出てきます。

作った特権で登録は一番乗りだぜぃ。げへへ。

tree on twinavi
tree on twinavi
LINEで送る
Pocket

ツイナビに掲載されました!

LINEで送る
Pocket

僕が作ったアプリケーション「みんなで作文5w」ツイナビに紹介されました!

みんなで作文5w」とは、Twitterを使って見知らぬ誰かと文章を作るサービスです。
「いつ」「誰が」「どこで」「誰と(誰に)」「何をした」の中からどれか好きな物を選んで文節をつぶやこう。
いろんな人から5つの文節がすべて集まった時、それが結合されて思いもよらぬ文章が出来上がります!

●ツイナビの記事はこちら

ツイナビトップ
ツイナビトップ

などと張り切ってみましたが、大したアプリではありませんので、恐縮です。
詳細や細かい使い方は下のリンクから。

●詳細はこちら
●使い方はこちら
●みんなの作文はこちら

ってか、そもそもツイナビ作ってるのオレですからツイナビに乗ったも何も・・・って感じなんですがね。

えへへ。

LINEで送る
Pocket