2011年12月29日木曜日

オンラインゲーム情報サイト オンラインゲームインフォ

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
オンラインゲーム情報サイト「オンラインゲームインフォ」を作ってみました。
内容はゲームの情報をジャンル別に見ることができるのと
各ゲームに対しての評判をコメントとして書くことができる。
まだまだ情報が少ないですが、ゲームコンテンツをいろいろみていきたいというのもあり
少しずつ更新してデータを増やしていこうと思います。
(名前はドメインの.infoが安かったのでそれにあわせてみました。)

削除しました。
















今回よくありそうな情報サイトを作ったのはPHPでサイトを作ってみようと思ったからです。
Railsはよく開発速度が速い、コードの書く量が少ないといわれますが
Railsから入った自分はその辺の感覚がないので、一度PHPでフレームワークなしで
こつこつ作ってみようと作成してみました。

感想は・・・大変でした。
PHPを一から覚えるという点もあったのですが
それを差し引いてもなかなかうまく進んでくれないところがあり
Railsのほうが使いやすいかなーという印象でした。

作る前は、シンプルなよくある構造であればPHPで局所を作ったほうが早いのでは?
と思っていたのですが、データの管理部分、いわゆるCRUD機能を付けていくと
結局Railsのようなフレームワークの形になっていくんですね
同じようなファイルを何個も作って時間を費やしたと思います。
一度作ってしまえば同じ構造であれば使いまわしができるのでそれほどではなさそうですが
それでもデータテーブルを2,3増やしてデータを増やしていこうとすると時間がかかりますね
この辺はPHPの慣れや使い方によるとは思うのですが
自分の感想では、言語を覚えるとこからはじめてもRailsのほうが楽かなーと感じました。
(というよりフレームワークの問題かな)
でもPHPのほうが需要は多いし、サンプルコードも拾い易いし
デフォルトで使えるレンタルサーバーも多いし、Railsは自分で環境構築しないとダメだし
言語としてどちらを選んでやっていくか悩ましいところです。

作り終えて、今回PHPを使えたという点も大きいのですが
初めてドメイン取得をしたり、さくらのレンタルサーバーを借りたり
CSS3のグラデーションで見栄えをよくしたりと
今までより少し進んでWEBサイトの製作ができたのが自分の中でよかったです。

次は、HTML5、CSS3、Jqueryなどサイトを表現するスキルもまだまだなので
その辺も身につけてWEB製作できれば。

2011年12月22日木曜日

ウェブデザイン技能検定 3級について

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

11月に受けてみたウェブデザイン技能検定 3級について1週間遅れで合格発表があり
今日確認したところ合格していました。良かった~。

実際、力量を見る上では資格より実績なので飾りみたいなものですがやっぱうれしいですね。
一応国家資格らしいんですが、3級は合格率50%くらいあると聞いたんで難易度的には普通なんでしょう。
1級にもなると10%くらいらしいです。

3級の実際の試験の内容についてちょっと。
学科はインターネットの基本的な知識やサイト作成に関する基礎知識を問われる問題でした。
合格基準は7割正解。サイトを作成したことがあるなら7割は知っているような問題です。
ただそれだと心配なので教材を買って、1,2回通して、知らない用語を暗記して合格できたという感じかな。
4択の25問だったと思います。かなり時間が余った。受けていたほとんどの人は時間前に退出していました。

実技のほうは、これもサイトを作成したことあるなら基本的な内容です。
問題の指示に従って、HTMLで文章を修正したり、メニューのリンクを関連付けたり、正しい背景画像、素材を選択してCSSで適応させたり。
内容自体は難しくないのですが、実際やってみると結構てこずりました。時間ぎりぎりだったと思います。

実技に関しては以下を注意したほうがいいかもしれません。
①問題の理解
②違うOS、パソコンでの操作
③マークアップツールの選択

①についてですが、どの試験もいえることなのですが
何を試されている問題なのかを理解しないと、せっかくやった作業を一からやり直さないといけません。
何も考えずに指示通りやっていると、ミスに気が付かないであとで気付くことがあります。
これは教材とほぼ同じ形式の問題なので慣れておいたほうがいいかもしれません。

②と③については特に重要だと感じました。
自身古いWINのOSとNetbeansでコーディングに慣れているのですが
違う環境のパソコンで操作すると慣れるに時間がかかりました。

例えば違う人のパソコンを操作したことがあるなら、まずマウスの挙動に違和感を感じるでしょう。
それがOS、コーディングのツールが違えばどうなるか想像できると思います。
自分はこれを軽く見て何の対策もしてなかったので痛い目に合いました。
試験スタート!から5分程度操作に慣れるのに時間を費やしてしましました。
また各問題でファイルの作成、コピー、削除などの操作に1分程度てこずっていたと思います。
その結果、失った時間を気にして焦ってしまい、1つのミスをして
それを全部書き直して時間ぎりぎりでなんとか完成したという感じでした。

まあ受かったので良しとしますが、初めて受ける方はこの経験を参考にしてもらえればと思います。


また並行して勉強していた基本情報処理も合格しました。こっちのほうがうれしい。
私自身いままで情報系の学校にいったことがないのですが、難かしくないですか?・・・
情報系の学生はなんなくこなすんでしょうか。うーん、全然修行が足りませんね。

資格を2つ取れて名目上は国から基本的な知識を持っていると認められたということで。
資格は次どうしようかなあ。2級と応用処理が次段階としてありますが
知識があっても実績がないと・・・。
しばらくはサイト作成、プログラミングに励もうかな

2011年12月2日金曜日

ゲームプログラミングの本を読んだ感想

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

ゲームプログラミングを少し深いところまで見てみたいということで
いくつか本をあさって読んでみた感想


一つ目は、「ゲームプログラマになる前に覚えておきたい技術」
一線でやってきたプロの経験から書かれたプログラミングの技術に特化した本として
内容の濃さに評判が高いということなので読んでみた。
言語はC++、やったことのない自分にはすべてを十分理解することはできなかった。
他言語でゲームプログラミングをしたことがあるならざっくりとわかる感じはする。
数学、物理の知識も必要。ページ数は800以上とまさにバイブルといった感じ。

内容については、コンソールゲーム→2D→3Dと段階的にステップアップして実現に必要な技術が細かに説明されている。コードから説明するのではなく、なぜそのようなコードを書くのか?といったところに重点を置いて説明されていると思う。
最終的なゲームサンプルがセガの3Dのロボット対戦ゲーにそっくりなので、そういったゲームを作る人には特に知っておいてもいい技術かもしれない。

現在、多くの便利なゲームライブラリがあって、趣味でゲームを作る場合、それに頼るのが楽だしその中で使われている機能の技術を知らなくても作ることは可能ではある。
しかし、新しい機能を追加してコード化する場合は、少なくともその中身に技術は知っておく必要があるだろうし、新しいゲームの表現を実現させる為にも必要なのだろう。

正直、自分にはちょっと難易度的には高かった。ゲームプログラミングの入門書ではない。
筆者自身も入社する前は本の内容はすべて理解していなかったと書かれている。
1回読んですべてを理解できる人は、プロとして十分知識、実力がある人だろう。(そう信じたい)

(下はamazon)



2つ目は「ゲームコーディングコンプリート」
ウルティマシリーズのプログラマによる本。
サブタイトルが「一流になるためのゲームプログラマ」。これに釣られて読むことになった。
これもプロの経験からの技術が書かれているが上の本と違ってゲーム開発全般について、技術だけでなく開発の中の経験談ような他で学べないようなことが書かれている。ゲームの基礎から3D、AI、ネットワークプログラミング、エディター開発と範囲は広い。

元は英語だと思うが、若干読むのに苦労するかもしれない。あとページ数も800以上で且つ文字が非常に多い。読み終えるだけでも相当時間かかった。上の本と同様に入門書ではない。
内容についてすべて理解はできてないが、プロの開発者を本気で目指すのであれば、事前にこれを読むことで、その開発の苦労や面白さがわかるのかもしれない。ゲーム開発がただプログラミングできたらOKではないことがわかる。

(下はamazon)


以上、趣味で規模の小さい3DMMOの模型的なものが作れないかなー軽い気持ちで2冊選んでみたんですが、うーん、想像以上にきついですな

本格的になるとC言語が今でも主流みたいですね。
しかしJavaやRubyと違いコードの使い方が複雑で慣れるだけでも時間がかかりそうだし
小規模で速度が必要なければスクリプトでもいいんじゃないか?とも思ってしまう。
スクリプトの速度もあがってくると、使いやすさと開発速度で有利になってくると思うし
ブラウザで実行できるFlashやhtml5、またUnityの使いやすさの魅力も無視できない
趣味でやる分にはこの辺で落ちつかせておいていいかな

2011年11月22日火曜日

TEDが英語習得に役立つときいて

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
はてなぶっくマークで最近あがっていたので聞いてやってみました。
そのブックマークのソースが埋もれてわからなくなったのですが
以下のブログの記事にも同じようなことが書かれています。

http://blog.langrich.com/2011/11/14/ted000/


TEDのURLはこちら http://www.ted.com/

TEDってなんだろう。めんどくさいので調べていない
動画を見てみると、興味深い話題について外国人の方がtalkしている

translationsのカテゴリから見れる動画は
ボランティアの方がtalk内容を訳した文がテロップで表示されるようだ
英文もテキストで取得できる。

何回も聞いたりして耳を慣らして覚える・・・うんたらかんたら
というのは上のブログ参照ということで

で、自分は元々、他教材のCDの英文を何回も聞いて耳に慣らしたりしてたんですが
それもあってTEDの内容は多少聞き取れるようになっていた。
なのでTEDも同じように何回も聞いて耳に慣らしていくと自然と聞き取れるようになれるのだろう。

それはそれでいいとして
TEDをはじめて見て非常に驚いたことがいくつか
(英語と関係ないことなんですが)

外国人の方のプレゼン力というかなんというかすごいですね。人の心をひきつける。
人に考えさせるような話し方だから?深いというか・・・

もしも、自分が受けた授業がこういう形であれば
いろんなことに興味を持って必死に勉強したかもしれない
・・・・ということにしておこう


2つの動画を見たのですが
1つ目は拡張現実についての話、いわゆるARです

以下がURL
http://www.ted.com/talks/lang/ja/marco_tempest_the_augmented_reality_of_techno_magic.html

詳細は動画みればわかるのですが
自分としてはARなんて遊びでしかつかえないんでしょ?
リアルとバーチャルの間の中途半端な存在、としか思っていなかったんですが
これを見て考え変わりました。すごいですね。今はここまで進んでいるんですね。
こういう技術を才能のある人が気づいて使うと新しいジャンルのコンテンツになっていくんでしょう


もう1つがアメリカの爆撃機照準器の開発にまつわる話
以下がURL
http://www.ted.com/talks/lang/ja/malcolm_gladwell.html

多少長い話ですが引き込まれるように聞き入っていました
内容は爆撃機の照準器の精度の向上を過去から現代まで話している
深い話なんですが、自分としての解釈、感想としては
技術の進歩に伴ってそれを利用する人も賢くならなければならない
と感じました。

以上
まだ2つしか見てませんが自分的にはアタリかな
英語の勉強もかねて今後も見ていこう

2011年10月30日日曜日

Unityの3Dショットゲームサンプルを試す

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

公式のチュートリアルにあるサンプルです。

3rd Person Shooter
3人称視点でのショットゲームのサンプル閉じる
http://www.unity3d.com/support/resources/example-projects/3rdpersonshooter

NPC相手に1対1のショットゲーム
マウスでaimをターゲットにあわせてクリックするとGUNがショットされる。
HPが設定されており、GUIでHPバーが表示されている。
HPがなくなるとゲームオーバー

















こっちはちょっとカスタムされたyoutubeの動画





リアルな表現をするためには細かいアニメーションが重要ですが
このサンプルではそれを表現するのに多くのアニメーションスクリプトが実装されています。
Unityではその辺が扱いやすくなっているとはいえ
ここまでくるとコードがそれなりに複雑になってきて作り上げるのもかなり苦労しそう。

2011年10月29日土曜日

UnityのCharacter Animationを試す

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
まだまだUnityに慣れていない自分は公式にあるサンプルが勉強になります。
まずはキャラクターを自由に動かしてみたいということでアニメーション部分をさぐる。
Unityの標準?についているThirdpersonAnimationでも十分くらい動いているんですが
animationの理解のためにいろいろ探る。

●Character Animation 公式
http://unity3d.com/support/resources/example-projects/character-animation
zipの中には4つのシーンでデモを見ることができる。

・シーン1 Goober
シンプルなマリオアクションとアニメーション




・シーン2 Robot Crossfade

画面がゆっくりと移り変わりゆく技法

・シーン3 Robot Simple Mixing

動作をミックスする。動きながら銃を構えるなど




・シーン4 Soldir Blend Advanced

ちょっと複雑な歩くアニメーションのブレンド





各種デモに含まれているアニメーションのスクリプトを参考にして
複雑なアニメーションを作っていけたら。
しかしJavascriptは慣れないなあ。

2011年10月19日水曜日

Rails PandaStreamをちょっとだけ試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

小規模の動画サイトかライブ放送サイトが作れないかいろいろ探っています。
その中でherokuでアドインとして追加できるPandaStreamをちょっと試してみました。
(ただ、自分は動画のエンコード関係は全然わかりません)

・PandaStream
クラウド型で動画エンコードのサービスをしてくれるという
amazonS3のストレージと連携して使うらしい。
エンコードの特徴としてH.264へのエンコードなどができる。
動画圧縮規格の一つで高画質を保ちつつ圧縮して転送。

エンコードは画質と保ったまま圧縮する技術で
転送容量を減らしユーザーの待ち時間を減らす効果となるらしい。メモメモ

Pandastream 公式のrailsでの使い方
http://www.pandastream.com/docs/integrate_with_rails

ここに使い方がのっている。

実装サンプルがそのままあるらしいので以下

https://github.com/pandastream/panda_example_rails

gemの説明はここに載っている
https://github.com/pandastream/panda_gem

アップロード制限10MBのFree版があるので試してみた。

・準備として
amazonS3のアカウント登録 http://aws.amazon.com/jp/s3/
Bucketsを作っておく

PandaStreamのアカウント登録 http://www.pandastream.com/
ログインしてcreate new cloudでエンコードクラウドを作る
その際にamazons3のアクセスキーと、シークレットキーとBucket名が必要。

準備おわり

・gemファイル インストール

gem 'panda' (落としたサンプルはすでにソースに書かれている)
bundle installして 実行
rake db:migrateしておく

・config/panda.ymlファイルを修正
サンプルではpanda.yml.exampleになっていたのでそれをpanda.ymlとした
中身の api_host: access_key:  secret_key:  cloud_id:を埋める
amazonS3ではなくPandaのアクセスキーやシークレットキーを使う。
各キーはPandaのAPIAccessから確認できる。
クラウドIDは作ったクラウドに書かれている

production:
  api_host: (pandaのapi_host)
  access_key:(pandaのアクセスキー)
  secret_key:  (pandaのシークレットキー)
  cloud_id: (pandaのクラウドid)
  # Uncomment the line below if your account is in the EU
  # api_host: api-eu.pandastream.com
development:
  access_key: (pandaのアクセスキー)
  secret_key:  (pandaのシークレットキー)
  cloud_id: (pandaのクラウドid)
  # Uncomment the line below if your account is in the EU
  # api_host: api-eu.pandastream.com
test:          
  api_host: (pandaのapi_host)
  access_key:(pandaのアクセスキー)
  secret_key:  (pandaのシークレットキー)
  cloud_id: (pandaのクラウドid)

で実行。

newでは画像をアップロードができる




画像を選択してuploadをクリック
プログレスバーが表示されて完了したらshowページに移動
(自分の場合はなぜか更新しないとうまく表示されなかった)
以下のようにhtml5用とflv用の動画プレイヤーで動画が表示される。
(動画サンプルはGOMプレイヤーのサンプルより拝借)
























実装が非常に簡単。動画サイトであれば特に問題なさそうではある。
ただFree版は1回のアップロード制限10MBだと約1分ちょいくらいの動画までか・・・。
Pandaの有料版のSoloの場合だとその制限が解除されて月99ドル。(8000円くらい?)
これに加えてA3のストレージ容量と転送費用もある。
うーんちょっと厳しい。

・補足
RTMPによるStreamingもあるみたいだ。
ダウンロードしながら再生する。メモメモ
http://www.pandastream.com/docs/video_streaming



2011年10月17日月曜日

Ruby DxRubyでテトリスを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
Rubyの勉強がてらテトリスを作ってみました。
ついでにRailsでスコアランキングのサイトも作ってみました。

テトリスR






















(ゲーム置場サイトホーム マイゲームカフェ


よくあるテトリスですがタイムアタックモードを追加してちょっと難易度もあげています。
興味ある方はやってみてください。
パッドにデフォルトで対応しているのでもっている方はそちらをおすすめします。
ベストスコアがでるとランキングサイトにスコアを登録できるので
自信のある方はとことん上を狙ってもいいとおもいます。


・作るにあたって
ゲームライブラリはDxrubyという2D用のゲームライブラリを使わせてもらっています。

DXruby公式
http://dxruby.sourceforge.jp/
こっちも公式?
http://dxruby.sourceforge.jp/cgi-bin/hiki.cgi

Sceneクラスのサンプルもチュートリアルにあるので
それを使いながら画面遷移をすれば簡単なゲームはすぐ作ることができます。
SFCやFCという昔のゲームでも良作は今やっても非常に良くできてるしおもしろい。
そういったものを目指す場合はDxrubyといった2Dライブラリで十分かとおもいます。

テトリスのRubyのコードを見ようとする方は参考にしないほうがいいかもしれません(笑
モジュールや継承を使って綺麗にまとめて作らないとねえ・・・

2011年10月15日土曜日

急にgit pushができなくなった件

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
はまってしまったのでメモ。

git push heroku  masterで以下のエラー

fatal: The remote end hung up unexpectedly

よくある鍵の問題か?前までは普通にできていたのに
鍵を確認したらちゃんと存在する。

以下もやってみた。
git remote show heroku

同じように以下のエラー
fatal: The remote end hung up unexpectedly

なんでなん!エラーの原因探そうにもこれ以上のログがない・・・


6時間くらいググりまくったり、いろいろ試した挙句
使っているウイルスセキュリティーZEROを一時的に無効にしてやるとその間はpushできた。

そういうことかよ~。どっと疲れた・・・。

2011年10月7日金曜日

Unity Locomotion System歩行運動をちょっと試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

リアルな歩行運動のアニメーションをさせることができる機能を実装
をちょっとだけ試してみました。(というか動画見て、サンプルをちょっと動かしただけ)

Locomotion System (歩行運動)
公式の http://unity3d.com/support/resources/unity-extensions/locomotion-ik
からダウンロードできる

Unity 3D Locomotion System 日本語チュートリアル動画
すばらしい日本語のチュートリアル解説




ボーンつきのモデルにスプリクトを追加して
足の各種部分にアニメーションを設定する感じ。
(Blenderでモデルを作っている)
機能の紹介+オリジナルのモデルに歩行運動を追加する順序が説明されている

実際にパッケージを取り込んで中にあるサンプルを試してみた。

中には4つのサンプルのシーンがある
・StepWalk
段差のある床を自然な感じでアニメーションさせて歩かせる
人、犬、鳥のサンプルがある

・Planetwalk
鉄アレイをつなげたような小さな惑星の上を歩いてる感じに歩く
中心に重力が働いて逆さまになっても落ちない

・MotionAnalysis
足の動きのアニメーションタイムライン的なものが見ることができる。
人、犬、鳥のサンプルがある

・Crate climbing 木枠を登る
積み木の上を登って歩くアニメーション























ドキュメントがhtmlファイルで中にある。
英文なので理解するには訳が必要(時間があれば)

リアルな歩行運動を表現できてすごいんだけど
まだ自分には早いところかな。

Unity 爆発エフェクトDetonatorExplosionを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

Unityで爆発のエフェクトを作成することができるサンプルがいくつか用意されている。もとある素敵なサンプルを使うか、カスタムして使う。

youtubeにある参考動画


ここでブラウザでテストできる。(見れない場合はUnityプレイヤー必要?)

Asset storeからDetonatorExplosionで検索してダウンロードインポート
パッケージ内にすでにプレハブとして数種類用意されているのでそれを使うのがよさそう




うーん、爽快。

Unity Lens Flaresを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

輝くようなエフェクト、閃光や太陽の光などを表現するためのエフェクトセット
Lens Flaresを試してみました。

Lens Flares http://unity3d.com/support/resources/assets/lens-flares


Asset storeでLens Flaresをダウンロードインポート

1.Gameobject作成してComponet→Rendering→Lens Flare
2.InspecterのFlareに好きなフレアをセットする。





うーん まぶしい。

2011年10月5日水曜日

Netbeansでruby-debug19を試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク


今までデバッグツールを使わず puts などでエラー箇所を探していたのですが
エラー箇所を特定するのに時間がかかるようになったので
デバッグツールを使ってみようということで。

gem はruby-debug19を使います。ruby1.9はこれ系じゃないと駄目?
Netbeansはデバッグ機能がついていて使いやすいらしい。


以下参考です。

github
https://github.com/denofevil/ruby-debug19

インストール方法
https://github.com/mark-moseley/ruby-debug/wiki/Installation%3A-IDE-version
参考ブログ
http://d.hatena.ne.jp/touhu-bjs/20110106/1294281778
(英語)
http://noteslog.com/post/netbeans-6-9-1-ruby-1-9-2-rails-3-0-0-debugging/


Netbeansでruby1.9のデバッグ
①gemのインストール
gem install ruby-debug19 --platform=ruby
gem install ruby-debug-ide19 --platform=ruby

②コードを修正が必要
ruby-debug-ide19-0.4.12\lib\ruby-debug-ide.rbの中142行目くらい
#replace code ruby-debug-ide19-0.4.12
#          $stderr.printf "Fast Debugger (ruby-debug-ide 0.4.9) listens on #{host}:#{port}\n"
          $stderr.printf "Fast Debugger (ruby-debug-ide19 0.4.12) listens on #{host}:#{port}\n"


ruby-debug-ide19-0.4.12\bin\rdebug-ide.rbファイルの中 78行目くらい
# replase code ruby ruby-debug-ide19-0.4.12
#Debugger::PROG_SCRIPT = ARGV.shift
script = ARGV.shift
Debugger::PROG_SCRIPT = (script =~ /script([\\\/])rails/ ? Dir.pwd + $1 : '') + script

で早速実行。


あれ、エラーエラー
Uncaught exception: undefined method `run_init_script' for Debugger:Module

require 'ruby-debug'
を追加したらいけた。
railsだとgemにかいてあるからいらないのかもしれない。

シンプルテストコード
require 'ruby-debug'

@x=5
5.times {
  @x+=1 #例えばここにブレークポイント
}
















変数をウォッチ登録すると中の値の変化がみれる。
便利すぎ、最初から使うべきでしたね・・・。

Unity 地形を作るTerain toolkitを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

UnityにはデフォルトでTerainを作って加工する機能があるのですがちょっと手間がかかるので
公式にある拡張のツールをUnityExtensionのTerrain toolkitを使ってみた。

以下
・ドキュメント http://www.sixtimesnothing.com/terraintoolkit/
・こっちもドキュメント(フル)http://www.sixtimesnothing.com/terrain-toolkit-manual/
・チュートリアル動画 http://www.youtube.com/watch?v=YnO9RtarzHE

以下の動画を参考にしつつやってみました。




用意されているメニューを選択するだけでだいたいの地形が作れる感じですね
岩の形状、地面の凸凹加減、さらにそこから熱、水圧、風などの浸食効果も加えることができる。
また、テクスチャーを地形の高さごとに割り当てて自動で張ってくれるので見た目もいい感じにしてくれます。各種微調整も数値でできるようです。

公式にはこういった便利な拡張機能やチュートリアルがあるので
ちょっとずつやっていこうかな

Terrain toolkitを試してみたときのメモをまとめてみたので
興味のある方は見て見てください。

Terrain Toolkit お試しメモ

2011年10月2日日曜日

簡単に無料で3Dゲーム開発ができるUnityを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
業界では1年くらい前から話題らしいんですが
1ヶ月くらい前のニュースではソーシャルゲームのGreeへの開発環境の提供が発表されてたので
気になって試してみました。

公式はこちら

Unity
http://unity3d.com/unity/

以下はyoutubeさんからの動画



・公式デモはこちら
横アクションゲーム http://unity3d.com/gallery/

こっちは実際にプレイきるがプレイヤーがないとできないかもしれない
ショットアクションぽい感じの http://unity3d.com/gallery/live-demos/index.html#angrybots


入門書を買って一通りためしてみました。

Unityの特徴として
・コードを書かずに3Dモデルの移動、配置ができる。
・3Dモデルの振る舞いも便利な機能がメニューとしてあるので
それを追加するだけで結構いろんなことができる。
(ないものは自分でscriptを書く)
・3DモデルやテクスチャーがWEBから落とせる。Freeもある。
・動かせるプラットフォームが多くてしかもビルドが簡単
スタンドアロン、Webプレイヤーを試しましたが、メニューをちょといと選択するだけ。
iosやandroidは有料ライセンスで対応。(未確認ですが、xbox、ps3にも対応?)

Webプレイヤーにビルドして再生してみましたがちゃんと動いていました。
3Dゲームをブラウザ上で簡単に動かせるのには驚きました。

公式にはチュートリアルが豊富にあり、その中のカーレースを試してみました。
完成品をすぐに試しましたがちょっと前のメジャーなゲームくらいの3Dレースゲームな感じです。
同じ完成品の動画がyoutubeにあります。以下のような感じです。



3Dゲームといえば、x、y、z座標を射影変換してあたり判定をコードでごちゃごちゃ書いてというイメージが強かったのですが、グラフィック部分は簡単に実現できるようになったんですね。

あと。Cartutorialをやりつつ英語勉強がてら訳しながらやってましたが
メモとしておいてるのでUnityに挑戦してみようという方に参考になればとおもいます。
(結構適当な訳しかたですが)

Unityの資料倉庫


2011年9月27日火曜日

ホームページが無料で簡単につくれるサービスJimdoを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
Webアプリの進化はすごいもので
HTML、CSSを知らなくても誰でも簡単に無料で個人用、ビジネス用のホームページを一瞬のうちに作れるサービスがあるということで試してみました。

サイトはこちら
Jimdo
http://jp.jimdo.com/




元々、グーグルさんの話題の「みんなのビジネスオンライン」を試してみたかったのですが
会社専用みたいなのでサービス元のJimdoをやってみました。

アカウント登録→サイトのタイトルやら、レイアウトをテーマから選択して、大体5分くらいでしょうか
土台となるサイトができあがりました。

http://bookcafeole.jimdo.com/



テスト用のため適当に編集してあるのであまり意味のないサイトですが。

ここまでは他にも同じようなサービスがあるんじゃない?って思うところなんですが
編集機能がすばらしい!
いわゆるWygsyg的な編集なんですが
レイアウト、ヘッダー、フッターの編集、見出し、テキストからグーグルマップの挿入まで各部でメニューを開いて選択するだけ。パーツを取り替えたり、ドラッグアンドドロップでレイアウトをいじれたり。(htmlでコード編集もできるようです。)

また、追加できる機能も多数あります。
画像ギャラリー、動画、ブログ機能、掲示板機能、グーグルマップ、ショップ機能(無料プランは制限5個)まで。さっといろいろ試してみたページはこちら。

お試しページ

これらはすべてメニューを開いて→選択→決定というシンプルな流れで作れます。

無料でここまで作れますが、有料プランもあってアクセス解析やらショップ商品無制限、販売手数料無料といったもの。多くの機能は有料と同じ感じです。デザインセンスと文章力があればHTMLを知らなくても、プロに近いサイトができそうですね。

railsでこういうサービスが作りたいなあ

2011年9月22日木曜日

お気に入り画像投票サイト

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
画像アップロードサイトを作ってみようということで
お気にいりの画像を投票したりコメントできるサイトを作ってみました。


サイト:お気にいり画像投票
URL:http://okinigazotohyo.heroku.com/

















投票はコメントの機能を実装などのgemを使いながらやってみたのですが
カスタマイズや他との連携をしようとしたときにつまずくことが多かったです。
つまずいたときにgemの奥のほうまで調べないと原因がわからなかったり
その時間を考えたら簡単な機能であれば独自に実装したほうが早いかもしれないですね。
ただ、同じようなサイトを複数作る場合はgemを使ったほうが効率はよさそうです。
gemなどは上のメニューの「gemの一覧」を参考で、全部は使っていませんが。

次は動画サイトやストリームサイトに挑戦できれば。

2011年9月16日金曜日

国際化の日本語訳追加 i18n_generatorsを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

参考
https://github.com/amatsuda/i18n_generators

エラーメッセージとかを国際化に対応させて日本語訳もしてくれるらしい

準備 シンプルな投稿
rails g scaffold post title:string body:text
rake db:migrate

ここからi18n_generators
・gemに記述
gem "i18n_generators",:group=>:development
・インストール
bundle install

・ジェネレータ実行
rails g i18n ja
→エラー、なんでだろう・・・
could not find ja.yml on rails-i18n repository

公式を見ていろいろ
①rails g i18n_locale ja
→これもエラー、本当はファイル config/locales/ja.ymlを落としてくれるらしいが

できないので直接 https://github.com/svenfuchs/rails-i18n/tree/master/rails/locale
からja.ymlを落としてきた

次に
②rails g i18n_translation ja
で translation_ja.ymlが作成された。

本当はrails g i18n jaで一発で①、②を同時にやってくれるらしい
まあとりあえず試してみる


・バリーデーションの設定
タイトル必須で、文字数2文字~4文字として(適当で)
class Post < ActiveRecord::Base
  validates :title,:presence=>true
  validates_length_of :title, :within => 2..4
end

new画面でフォームの中は空欄でcreatetしてみると
エラーが日本語化してる。ついでにラベルも。いい感じ




2011年8月28日日曜日

rails typusでpaperclipを使って画像を扱ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

データ管理画面用のgem typusを使っているのですが
画像をアップロードしてサムネイルと表示させようとして
ちょっとはまってしまったのでメモ
(あとから考えると設定は非常に簡単だった・・・)

ここ参考しました
https://github.com/typus/typus/wiki/configuration-resources


バージョンは
ruby1.9
rails3.0
(typusはrails3.1推奨らしいが3.0でもできた)

gem typus
gem  paperclip
ともにインストールされていて
モデルPhotoimageが作成されているとする
そしてそのモデルに
rails g paperclip photoimagephoto
されて画像用のカラムが追加されているとする
この辺は以下を参照
rails 画像アップロード paperclipを試してみた


ここから作業

・モデルに 以下のように記述
class Photoimage < ActiveRecord::Base
  has_attached_file :photo, :styles => {:medium => "x450",:thumb => "150x150#"}
end

関連付けのためのhas_attached_fileの定義と
サムネイル用のスタイルとしてmediumとthumbの変数名でサイズを定義してやる。
デフォルトでこの名前らしい。
この名前が大事みたいで、名前を変える場合はconfigのtypus.rbで変更する。
  # Define paperclip attachment styles.
   #config.file_preview = :medium
   #config.file_thumbnail = :thumb


・config/typusの表示部分のapplication.ymlの変数名をhas_attached_fileした変数名と同じもの変えてやる
fields:
    default: photo
    list: photo

で、adminページ側からnewで画像をcreateすると
ちゃんとpaperclipのサムネイルが表示させることができた。









この仕組みがわからずちょっとはまってしまいました。
わかってしまえば設定が簡単でいいね。


あと、画像をクリックしたらプレビュー画面を表示させるために
gem 'jquery-rails' してやったらイイ感じになりました。



rails 画像アップロード paperclipを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

もう昔から使われている画像アップロードgem paperclipですが試してみました。

以下参照させてもらいました。
gith:https://github.com/thoughtbot/paperclip
参考1http://railscasts.com/episodes/134-paperclip
参考2http://asciicasts.com/episodes/134-paperclip

ruby1.9
rails3.0

準備
・ImageMagickのインストール、設定はここを参照させてもらった
http://www.waydotnet.com/blog/2010/02/rmagick-on-ruby-1-9-1-i386-mingw32-work-d/
ただバージョンはImageMagick-6.7.2-0-Q8-windows-dll.exeを選択した。(特に理由はなし)
※ここでうまくいかなく画像が表示できず苦労した。rubyのバージョンやらImageMagickのバージョンやらがうまく合わないとダメらしい。何回か入れなおしたりしてなんとかうまくいきました。

・テスト用モデル
rails g scaffold product title:string
rake db:migrate


準備終わり、ここからpaperclip
・gemfile記述 インストール
gem 'paperclip'
bundle install

・config/environments/development.rbに以下を追加Paperclip.options[:command_path] = "/usr/local/bin/"

・画像用のいくつかのカラムを追加
rails g paperclip product photo
rake db:migrate

・モデルに以下を記述
class Product < ActiveRecord::Base
   has_attached_file :photo
end

・ビューのproduct/_form.html.erbをアップロードできるように修正
multipartの記述
<%= form_for @product, :html => { :multipart => true } do |f| %>

file_fieldの追加
  <div class="field">
    <%= f.label :photo %><br />
    <%= f.file_field :photo %>
  </div>

・ビューのshowとindexを画像表示できるように以下を追加する
showへの追加
<%= image_tag @product.photo.url %>
indexへの追加
<%= image_tag product.photo.url %>

ここまでで完了。実行して/products/newから画像をアップロードしてみる

















うーん、画像が大きすぎる。のでindexの一覧表示はサムネイルにする。


・モデルに以下を記述、styleのパラメータにsmallのサイズを定義
class Product < ActiveRecord::Base
   has_attached_file :photo, :styles => { :thumb => "50x50>" }
end

これで画像アップロード時にthmbのサイズのサムネイルを用意してくれるらしい
やってみる。(さっきアップロードした画像は一応削除しておく)

・ビューのindexの画像表示部分を修正
<%= image_tag product.photo.url(:thumb) %>

再度、画像をアップロードして確認















コードをちょっと加えるだけで画像アップロードができる。paperclip便利すねえ。
個人的には管理画面用gemのtypusを使っていてpaperclipを使うと
画像アップロードの部分は簡単に設定できるのがいい。



2011年8月26日金曜日

rails ページネート kaminariを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
もうひとつの人気のあるページネートのgem kaminariを試してみた

参考
http://ja.asciicasts.com/episodes/254-pagination-with-kaminari
https://github.com/amatsuda/kaminari
https://github.com/amatsuda/kaminari/wiki/Kaminari-recipes
テーマ
https://github.com/amatsuda/kaminari_themes


準備
テスト用データ
rails g scaffold article title:string

rake db:migrate
ページネート確認の為適当にデータを入れておく

ここから kaminari
・gemfileに記述 インストール
gem "kaminari"

bundle install

・コントローラのindexを修正
  def index
    @articles = Article.order("title").page(params[:page]).per(1)

順番をtitle、1ページあたり1つのデータを表示

・ビューのindexにページネート表示部分を追加
<%= paginate @articles %>

/articlesから確認。問題なさそう












デフォルトではwill_pagenateより見た目はいい感じですね。first、lastのリンクもついてる

will_pagenateのinnder、outerwindowも同じように設定できる感じ
<%= paginate @users, :window => 2 :outer_window => 3 %>

カスタマイズするようのビューをジェネレータで作れるみたいなのでやってみる
rails g kaminari:views default
create  app/views/kaminari/_first_page.html.erb
create  app/views/kaminari/_gap.html.erb
create  app/views/kaminari/_last_page.html.erb
create  app/views/kaminari/_next_page.html.erb
create  app/views/kaminari/_page.html.erb
create  app/views/kaminari/_paginator.html.erb
create  app/views/kaminari/_prev_page.html.erb

たくさんページが作られる。これを自分なりに変更できるっていうことかな。
見た目はデフォルトなのでかわらない。

以下のコマンドで用意されているThemeをみることができる
rails g kaminari:views
他にgoogle githubの2つがあるようだ

早速着せ替えをしてみる。
rails g kaminari:views google

ビューのページネートのinner,outerの設定を修正
<%= paginate @articles,:window => 10, :outer_window => -1 %>

変更後を確認してみる







グーグルほぼまんまなんだが使って大丈夫なんだろうか・・・

次にgithubのthemeを使ってみる
rails g kaminari:views github

ビューのページネート部分を以下に修正
<%= paginate @articles %>

変更後を確認。















シンプルなOlderとNewerとシンプルなフォーム

themeを選んで設定できるのはいいですね。今後使えるテーマも増えていくのかな

最後にAjaxの設定も簡単みたいなので試してみる。
(rails g kaminari:views defaultでデフォルトに戻しておく)

・ビューのページネート部分を以下のように設定
<%= paginate @articles, :remote => true %>

・_articlelist.htmlを作成し、indexのテーブル部分を切り取って、貼り付け。
pagenate部分も入れておく、そしてdivでラップした

<div id="articlelist">
  <table>
    <tr>
      <th>Title</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>

    <% @articles.each do |article| %>
      <tr>
        <td><%= article.title %></td>
        <td><%= link_to 'Show', article %></td>
        <td><%= link_to 'Edit', edit_article_path(article) %></td>
        <td><%= link_to 'Destroy', article, :confirm => 'Are you sure?', :method => :delete %></td>
      </tr>
    <% end %>
  </table>

  <%= paginate @articles,:remote => true %>

</div>

表示は部分テンプレートで呼び出す
<%= render 'articlelist' %>

・コントローラーのindexのresponse部分にformat.jsを追加
    respond_to do |format|
      format.js if request.xhr?

・ビューのarticlesにindex.js.erbを作成してテンプレートを置き換えさせる
$("articlelist").update ("<%= escape_javascript(render :partial => 'articlelist' ) %>");
(この書き方はあまりよくないのかもしれない。ajax勉強しないとなあ)

で完成。indexページからページネート部分をクリックしてみるとちゃんとajaxでコードが書き換えられてる。

とりあえずここまで。ページネートの見た目をカスタマイズしやすいのとremoteの設定もしやすいのがいいですね。テーマまの着せ替えも簡単。でももうちょっとバリエーションがほしいかな。そこは自分でカスタマイズして対応か

2011年8月25日木曜日

rails ページネート will_pagenateを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ページネートでよく使われるgemでいまさら感はありますが
掲示板作成するときにも実際使っているのですが復習で試しておきました。

参考
ページネートのいろんなCSS


とりあえずテスト用データを作成
rails g scaffold memo title:string
rake db:migrate

ページネートが確認できるように適当に数個データを入れておく。

・gemfileに記述インストール
gem "will_paginate", "~> 3.0.pre2"

bundle install

・memoのコントローラのindexをページネート用に書き換え。
 def index
    @memos = Memo.paginate(:page => params[:page], :per_page => 1).order('created_at DESC')

10個のデータで試すのでpare_pageを1つにする。
並び順は意味ないがとりあえず降順を設定してみる

・ビューにページネート部分を表示する
<%= will_paginate @posts %>

これでシンプルなものは完成。indexページを見てみる。












問題なし。簡単に実装できて非常に使えますね。

ちょっといろいろ表記を変えてみたい。

使うのはこれくらいかな
:previous_label、:next_label、次へ、前へラベル
:inner_window、:outer_window ページリンクの表示数、内側、外側
:link_separator セパレータ
:class htmlのclass名

まずラベルをymlファイルで設定し変更してみる
・en.ymlファイルに以下を記述(日本語だけど)(ymlからの設定方法)
  will_paginate:
    previous_label: "前へ"
    next_label: "後へ"

・ページリンク表示数とセパレータの設定をindexのビュー側に追加(ビューからの設定方法)
<%= will_paginate @posts, :inner_window => '2', :outer_window => '2', :link_separator  => '-' %>

でどうなったか見てみる。



表示はうまくいったけど、inner_windowとouter_windowの挙動がなんか変。
ぐぐったらバグではなく仕様みたいだ。内部計算でページ最初と最後付近はうまく表示されないらしい。

次はCSSで見た目を変えてみる
以下を参考にして
http://mislav.uniqpath.com/will_paginate/

flickrのような見た目にしてみよう。
CSSを↑のところから拝借してコピペ

ビューのページネート部分にclassの設定タグを以下のようにした
<%= will_paginate @posts, :class=>'flickr_pagination' %>










外観のカスタマイズも簡単ですね、これは便利。

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
indextankはherokuで10000docまで無料の全文検索として使えるらしいので試してみた。
gemのtankerならそれを簡単に扱えるらしい。

本家
https://indextank.com/home

参考
https://github.com/kidpollo/tanker
https://github.com/adrnai/rails-3-tanker-demo
↑これを参考にしながら試してみました

準備
・テスト用データ
rails g scaffold post name:string title:string content:string
rake db:migrate

準備終わり。ここからtanker

・apiのurlを取得
indextank本家から
https://indextank.com/home
メールアドレスのみで取得できるようだ

・indexの作成
ダッシュボードのログインして
テスト用のindexをcreateする
とりあえずtestindextankという名前でcreatしてみた。


・gemfileに記述。インストール
gem 'tanker'
gem "will_paginate", "~> 3.0.pre2"
pagenateも使っているみたいなのでついでに書いておく

bundle install

・indextankaのapiのurlを記述する
config/initializers/tanker.rbを作成し以下を記述
YourAppName::Application.config.index_tank_url = 'http://:xxxxxxxxx@xxxxx.api.indextank.com'

YourAppNameにはrailsのアプリ名を、index_takn_urlには取得したPrivate API urlを登録してみた

次にモデルを修正
・postモデル
class Post < ActiveRecord::Base
  include Tanker
  tankit 'testindextank' do
    indexes :name
    indexes :title
    indexes :content
    indexes :timestamp do
      Time.new.to_i
    end
  end
  after_save :update_tank_indexes
  after_destroy :delete_tank_indexes

end

tankit 'indexの名前'のところに先ほど作成したindexを入れてある
name、title、content、timespampをindexとして作成して
saveのときにそれを実行して、destroyのときにindexを削除する。なるほど


次にコントローラーを修正
・posts_controllerにsearchメソッドを追加
 def search
    @posts = Post.search_tank(params[:query])

    respond_to do |format|
      format.html # index.html.erb
      format.xml  { render :xml => @posts }
    end
  end


次にビューを修正
・postにsearch.index.erbを作成し以下のように記述

<h1>Listing posts</h1>

<%= form_tag(search_path, :method => "get") do %>
  <%= label_tag(:query, "Search for:") %>
  <%= text_field_tag(:query) %>
  <%= submit_tag("Search") %>
<% end %>

<table>
  <tr>
    <th>Name</th>
    <th>Title</th>
    <th>Content</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

<% @posts.each do |post| %>
  <tr>
    <td><%= post.name %></td>
    <td><%= post.title %></td>
    <td><%= post.content %></td>
    <td><%= link_to 'Show', post %></td>
    <td><%= link_to 'Edit', edit_post_path(post) %></td>
    <td><%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>
</table>

<br />

<%= link_to 'New Post', new_post_path %>

indexにsearchフォームを追加した感じになっている。


最後にルートの修正
・config / routes.rbに以下のように修正
resources :posts
match '/search' => 'posts#search'

ここまででコードはできた。
早速、適当にpostデータを登録。データは適当に。












登録できたら、indexされているか確認してみる









ちゃんとindex登録されてる。いい感じ。
/searchから検索してみる。

・メロン











1つ検索された。OK

・りんご













2つ検索された。OK

・晴れ













contentの晴れの2つを検索。OK

・晴れ 雨(and検索)












contentの晴れときどき雨を検索。OK

うまくいけたんじゃないかな。
ただ、モデルを隔てて検索しようと思ったけど
すっきりする方法がわからない。
Tanker.search([Post,Comment],parms[:query])
という形で複数のモデルに対してデータは取得できるみたいだが
そこからいろいろ加工しないとダメなんだろうか。

あとググってしらべると日本語は完全にサポートがされてない?

まあとりあえずこの辺で。使うときに深く調べてみよう。

2011年8月24日水曜日

rails meta_whereとmeta_searchを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

シンプルな検索をさせるときに便利そうだったので試してみた。

meta_whereはSQL風にかかずにrubyぽくかけるファインダー
meta_searchは簡易的検索の実装。sort機能もある

以下参考サイト

http://ja.asciicasts.com/episodes/251-metawhere-metasearch
http://railscasts.com/episodes/251-metawhere-metasearch
http://metautonomo.us/projects/metawhere/
http://metautonomo.us/projects/metasearch/#security
https://github.com/ryanb/railscasts-episodes/tree/master/episode-251



準備
・gemfile記述
gem "meta_where"
gem "meta_search"

bundle install

・テストデータ
rails g scaffold item name:string price:decimal released_at:datetime
rake db:migrate

indexの表示部分をちょっとかっこよくしておく
<% @items.each do |item| %>
  <tr>
    <td><%= link_to item.name, item %></td>
    <td><%= number_to_currency(item.price) %></td>
    <td><%= item.released_at.strftime("%B %e, %Y") %></td>

●ここからmeta_search
・コントローラのindexを書き換え
def index
   @search = Item.search(params[:search])
   @items = @search.all
end

・ビューのindexの上のほうにsearchフォーム部分を追加
<h1>Listing items</h1>

<%= form_for @search do |f| %>
  <p>
    <%= f.label :name_contains %>
    <%= f.text_field :name_contains %>
  </p>
  <p class="button"><%= f.submit "Search" %></p>
<% end %>

シンボルを:name_containsとすることでnameカラムを対象にsearchできるみたいだ

実際にデータを入れて検索してみる。うまく動いているようだ。部分検索もできている。
and検索はできないようだ。

次に値段のレンジ指定したsearchの実装
・ビューのindexに以下を追加
 <p>
    <%= f.label :price_gte, "Price ranges from" %>
    <%= f.text_field :price_gte, :size => 8 %>
    <%= f.label :price_lte, "to" %>
    <%= f.text_field :price_lte, :size => 8 %>
  </p>

下限の指定は:price_gte、上限は:price_lteを使っている。
gteとlteでmete_whereが使われている

再度確認。priceの下限と上限を指定してsearchボタンをクリックするとちゃんと絞込みができている。
次にソート機能の実装をしてみる。
・ビューのindexのsearchフォームの下に以下を追加
<p>
  Sort by:
  <%= sort_link @search, :name %>
  <%= sort_link @search, :price, :default_order =>:asc %>
  <%= sort_link @search, :released_at , :default_order => :desc %>
</p>

sort_linkを使って カラムを指定してやるとsortするリンクが表示される
defalut_orderで初期の並び方を設定。

再度確認。リンクをクリックするごとに昇順、降順を順番に表示してくれる。
見た目はこんな感じ。



















使う際のセキュリティとしてビュー側からsearchするカラムを指定できることから
ビューがなんらかの問題で書き換えられた場合、想定しないデータが検索されて表示されてしまうこと。その対策はこちらを参照 http://metautonomo.us/projects/metasearch/#security

簡単にシンプルで並び替えや絞込みもできる検索フォームが作れるのがいいですね






2011年8月22日月曜日

rails フォームビルダーのformtasticを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
入力フォームを簡単に作成できるformtasicを試してみた。

参考
http://railscasts.com/episodes/184-formtastic-part-1
http://railscasts.com/episodes/185-formtastic-part-2
https://github.com/justinfrench/formtastic

rails 3.0.10
ruby 1.9.2

・gemfileに記述
gem 'formtastic', '2.0.0.rc1'
bundle install

(gem 'formtastic'だと、scaffoldで自動で変換はしてくれないようだ)

・formtasticインストール
rails g formtastic:install
  create  config/initializers/formtastic.rb
  create  public/stylesheets/formtastic.css
  create  public/stylesheets/formtastic_changes.css


・テスト用データ:category
rails g scaffold category name:string description:text
rake db:migrate

・入力フォーム部分は以下のような感じ

<% semantic_form_for @animal do |f| %>
  <% f.inputs do %>
    <%= f.input :name %>
    <%= f.input :born_on %>
    <%= f.input :category %>
    <%= f.input :female %>
  <% end %>
  <%= f.buttons %>
<% end %>


formtasticで変換されてシンプルな形になっている。
気になったのがバリデーションのエラー表示の記述がないのでどうなるのかと思ったが
ちゃんとポップアップみたいな感じで表示してくれる

もし、通常のエラー表示にしたいなら
config/initializersで
Formtastic::SemanticFormBuilder.inline_errors = :none
に変更して以下のようにエラーメッセージ表示を記述してやれば

<% semantic_form_for @animal do |f| %>
  <%= f.error_messages %>
  <% f.inputs do %>
  <!-- rest of form -->

通常のrailsのエラー表示にように戻せるみたいだ
まあこれはformtasticのままでいいかな

・さらにデータの追加
rails g scaffold animal name:string category_id:integer born_on:date female:boolean


・モデルに関連関係のものを記述
class Animal < ActiveRecord::Base
    belongs_to :category
end


class Category < ActiveRecord::Base
  has_many :animals
end


・各種パラメータの設定を変えてみる。form部分を書き換え
<% semantic_form_for @animal do |f| %>
  <% f.inputs do %>
    <%= f.input :name %>
    <%= f.input :born_on %>
    <%= f.input :category %>
    <%= f.input :female %>
  <% end %>
  <%= f.buttons %>
<% end %>

を下のように書き換える

パラメータを変更、追加
・1900年から表示
・空白を含まない選択リスト
・ラベルの変更+radioボタンでmale、femaleの2択

<% semantic_form_for @animal do |f| %>
  <% f.inputs do %>
    <%= f.input :name, :hint => "Use the owner's name if none is provided" %>
    <%= f.input :born_on, :start_year => 1900 %>
    <%= f.input :category, :include_blank => false %>
    <%= f.input :female, :as => :radio, :label => "Gender", :collection => [["Male", false], ["Female", true]] %>
  <% end %>
  <%= f.buttons %>
<% end %>

ちゃんと変更が反映されていた。
コード量が少ないのと、各種パラメータを設定しやすいのがいいですね。
でも、なぜかレイアウトがちょっと変だった。CSSの問題かな。

simple_formはrails3.0.10だとうまくいかなくて途中で断念。
formtasticより軽量でカスタムもしやすいらしいので使いたかったのになあ

2011年8月21日日曜日

rails profanity_filterを試してみたけれどうまくいかない

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
不適切発言をフィルターして見えなくするprofanity_filterを試してみた。

https://github.com/intridea/profanity_filter
本家

・gemfileに記述でbundleインストール
gem install profanity_filter
bundle install

モデルに以下を追加。:foo,:berは変えたい文字列(カラム)
profanity_filter :foo, :bar


準備はこれだけフィルターのmethodを設定すると置き換わり方を変えることができる。


profanity_filter :foo, :bar
  #=>禁止ワード→@#=>$%に置き換わる

profanity_filter :foo, :bar, :method => 'dictionary'
  #=>禁止ワード→config/dictionary.ymlの言葉に置き換わる

profanity_filter :foo, :bar, :method => 'vowels'
  #=>禁止ワード→母音だけ置き換える fuck→f*ck

profanity_filter :foo, :bar, :method => 'hollow'
  #=> 禁止ワード→最初と最後だけ残す。fuck→f**k

profanity_filter :foo, :bar, :method => 'stars'
  #=> 禁止ワード→*に置き換える

以下のようなメソッドもある
ProfanityFilter::Base.clean('frak')               #=> '@#$%'
ProfanityFilter::Base.clean('frak', 'dictionary') #=> 'fr*k

_originalをつけると元の言葉を表示
post.title          #=> '@#$% title'
post.title_original #=> 'Fraking title'

置き換わるのは3語以上必要?

すでに200語くらいの不適切ワードがdicrionary.ymlファイルに登録されているのですぐに使えるけど
アルファベットなので、日本語もできるか試してみた。
そのままymlファイルに同じように記述してもうまくいかない。アルファベットであれば問題なく追加できる。うーん、わからん。

rails thumbs_upをちょっとだけ試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク

投票的な機能を付加することができるgem thumbs_upをちょっと試してみた。
機能として3つあるらしい

  1. acts_as_voteable : 記事やコメントなどをvoted対象にする
  2. acts_as_voter : ユーザーをvoterとする
  3. has_karma : カルマ的なもの


自分はさわりの部分だけでvoteableだけ試してみました。

gem
https://github.com/brady8/thumbs_up

・gemfileに以下を記述
gem 'thumbs_up'

・インストール
bundle install

・voteのmigration作成
rails generate thumbs_up

・テスト用
rails g scaffold question title:string
rake db:migrate

・vote用コントローラー
rails g controller vote voteup votedown


で、コードを以下のように記述

・モデルにvote機能を付加
class Question < ActiveRecord::Base
  acts_as_voteable
end

・questions_controllerのshow
  def show
    @question = Question.find(params[:id])
    @vote = @question.votes.build

・votes_controllerののcreate
  def create
    @vote = Vote.new(params[:vote])
    @vote.voteable_id=params[:vote][:voteable_id]
    @vote.voteable_type=params[:vote][:voteable_type]
    @question = Question.find(params[:vote][:voteable_id])

・モデルのvote.rb
validates_uniqueness_of :voteable_id, :scope => [:voteable_type, :voter_type, :voter_id]
をコメントアウト

・ビューのquestions/show.html.erb
<p id="notice"><%= notice %></p>

<p>
  <b>Title:</b>
  <%= @question.title %>
</p>
<p>
  <b>vote_count_up:</b>
  <%= @question.votes_for %>
</p>
<p>
  <b>vote_count_down:</b>
  <%= @question.votes_against %>
</p>
<%= form_for @vote do |f| %>
  <% if @vote.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@vote.errors.count, "error") %> prohibited this entry from being saved:</h2>
 
      <ul>
        <% @vote.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <h2>vote</h2>
  <div class="field">
    <%= f.radio_button:vote,"true",{:checked=>true} %>voteup<br/>
    <%= f.radio_button:vote,"false",{:checked=>false} %>votedown<br/>
    <%= f.hidden_field :voteable_id %>
    <%= f.hidden_field :voteable_type %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<%= link_to 'Edit', edit_question_path(@question) %> |
<%= link_to 'Back', questions_path %>

・ルートの追加
resources :votes, :only => [:create]

で形はできたようだ。






















(titleが投票しくださいなってる・・・)
voteableのユニークをコメントアウトしないとvoteを1回しか登録できないというコードの中身を理解していないのとコードがごり押しすぎて変な感じがする。もっとシンプルな書き方があると思われる。
voterとkarmaの機能は試していない点を考えると使えるgemなのかなー
うーん、納得できていない。まだ自分には早いか
   

2011年8月20日土曜日

rails acts_as_commentableでコメント作成を試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
acts_as_commentableはコメント作成するときにいろいろやってくれるらしい。
早速やってみました。

本家
https://github.com/jackdempsey/acts_as_commentable


ここのuseを見ると

・コメントを付加するモデルに記述して
class Post < ActiveRecord::Base
acts_as_commentable
end

・コメントを追加
commentable = Post.create
commentable.comments.create(:title => "First comment.", :comment => "This is the first comment.")

・コメントを取得する。
commentable = Post.find(1)
comments = commentable.comments.recent.limit(10).all

といった具合にできるみたいです。

titleやuser_idの属性もあるみたいで、各ユーザー毎のコメントを取得したり
コメントにtitleをつけることも想定されているようです。

ここにgemの構造的な説明と使い方の例をが説明されてました。
http://www.arailsdemo.com/posts/16

英訳の練習で雑ですが訳してみました。訳的なもの
実際にこれにそってやってみました。(幾分ソースを省いています)


・gemfileに追加gem 'acts_as_commentable'

・インストールbundle install

・コメント用DB、モデル作成
rails generate comment

・テスト用postの作成
rails g scaffold post title:string
rake db:migrate

・コメントコントローラを作成 createメソッドを作成
rails g controller comment create


ここから各ファイルの内容
・model/post.rb
class Post < ActiveRecord::Base
  acts_as_commentable
end

・comment_controller
class CommentsController < ApplicationController
  def create
    @commentable = Comment.find_commentable(params[:comment][:commentable_type], params[:comment][:commentable_id])
    if @commentable
      @comment = @commentable.comments.build(params[:comment])
      if @comment.save
        redirect_to show_page_url, :notice => "Thanks for the comment."
      else
        flash.now[:alert] = "You had some errors for your comment."  # edited 10/28/10 use 'flash.now' instead of 'flash'
        render_error_page
      end
    else
      redirect_to root_url, :alert => "You can't do that."
    end
  end


  private
  def show_page_url
    case @commentable.class.name
    when "Post" then post_url(@commentable)
    else @commentable
    end
  end

  def render_error_page
    model_name = @commentable.class.name
    instance_variable_set("@#{model_name.downcase}", @commentable)
    render "#{model_name.underscore.downcase.pluralize}/show"
  end

end

・posts_controllerのshowメソッド
def show
    @post = Post.find(params[:id])
    @comment = @post.comments.build
    @post.comments.pop
 
    respond_to do |format|
      format.html # show.html.erb
      format.xml  { render :xml => @post }
    end
  end

・view/comments/_form.html.erbにコメント入力フォームのテンプレート作成
  <div class="field">
    <%= f.label :comment %><br />
    <%= f.text_area :comment %>
    <%= f.hidden_field :commentable_id %>
    <%= f.hidden_field :commentable_type %>
  </div>

・view/post/show.html.erbにコメント表示部分と作成部分を追加

<table>
  <tr>
    <th>comment</th>
  </tr>

<% @post.comments.each do |comment| %>
  <tr>
     <td><%= comment.comment %> </td>
  </tr>
<% end %>
</table>

<%= render 'comments/form' %>

・ルートを追加
resources :comments, :only => [:create]

で、コードはできあがり。

localhost/postsから新しい記事を作成して、作成された記事のshowリンクをクリック
コメント表示欄にコメントを入力してcreateボタンを押せば、記事毎のコメントを表示できました。
コメント機能は自作でもできそうですがあると便利ですね。






2011年8月19日金曜日

rails acts_as_taggable_on_steroidsを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
タグといえばほとんどのサイトに使われているんではないでしょうか?
有名なgemみたいで使い方は他のブログにもたくさん書いているので
ここでは機能をメモ用としてまとめておきます。

・gem

acts_as_taggable_on_steroids
https://github.com/jviney/acts_as_taggable_on_steroids

・使い方
 ruby script/generate acts_as_taggable_migration
 rake db:migrate
 対象モデルにacts_as_taggableをつける

・機能
(ちょっと説明が雑ですが)
対象モデルにタグ要素を付加して扱うことができる
p.tag_list # ["Funny", "Silly"] #タグを複数登録したり
p.tag_list.add("Great", "Awful") #タグを追加したり
p.tag_list.remove("Funny") #タグを削除したり

・タグをビューに表示したり
<%= f.label :tag_list %>
<%= f.text_field :tag_list, :size => 80 %>
※1つのフィールドに複数のタグを入力して半角,で区切ると一度に複数登録できるみたい。

・findや条件つけてタグを検索したり
Post.find_tagged_with('Funny, Silly', :match_all => true)

・タグクラウドを簡単につくれたり
@tags = Post.tag_counts


・タグをキャッシュに保存して負荷を軽減したり
  class CachePostTagList < ActiveRecord::Migration
    def self.up
      add_column :posts, :cached_tag_list, :string
    end
  end

View:
  <% tag_cloud @tags, %w(css1 css2 css3 css4) do |tag, css_class| %>
    <%= link_to tag.name, { :action => :tag, :id => tag.name }, :class => css_class %>
  <% end %>

・タグの区切り?を変えたり
TagList.delimiter = " "

できるらしい、すごく便利ですね。
サイトでタグはよく使われるでこれで簡単に扱えそうです。

以下のブログ参考させてもらいました。

タグクラウドの実践
http://wine4u.seesaa.net/article/169189619.html

メソッドが詳しくのってる
http://higelog.brassworks.jp/?p=93

rails 管理画面を簡単に作ってくれるtypusをやってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
railsのデフォルトの画面は文字だけでレイアウトもなく寂しい感じだが
typusを使うと簡単に管理画面を作ってくれるらしい。っていうことで試しました。
ついでにadminアカウント認証機能も付けれるみたいなのでそれもやってみました。

公式
https://github.com/typus/typus

こちらにデモがあります。
http://demo.typuscms.com/admin

・gemファイルに
gem 'typus'

・bundleインストール
bundle install

・admin登録できるようにする。
rails generate typus:migration

このコマンドでadmin_userが作成されるみたい

・テスト用のモデル
rails generate scaffold post tittle:string body:text
rake db:migrate

・ジェネレーターで、ビューを作る
rails generate typus

もし、あらたにモデルを作成したら
rails generate typusで対応するビューを作らないと反映されない。(これにちょっとはまった)

これでできあがり。localhost/adminにアクセスしてアカウント登録画面になる。


以下のwikiも参考になる。権限機能やDeviseとの連携もできるようだ。
https://github.com/typus/typus/wiki/recipes-devise-authentication


そのほかにもよくある管理機能追加のgemでは
railsadmin→見栄えもよく多機能。人気のやつ。(自分はなぜかうまくインストールできなく断念)。
http://demo.railsadmin.org/admin

activeadmin→個人的にはこれが良いとおもったけどあまり資料がないみたいで。データ検索は細かく設定できて高性能。ログイン管理もついてる。
http://demo.activeadmin.info/admin

ライセンスがどうなってるのかぼんやりしかわかってないので
無難なtypusかなあ。avtiveadminってすごい便利そうなのに使ってる人少ないのかな。

しかしいろんな機能を付けてくれるのはありがたいけど
細かいところは自分でしないといけないってなると
便利なgemを細かく理解するよりdeviseだけを使ってこつこつやったほうがやりやすい気がしてきた。
良いところをうまく使えるような器用さを身に付けたいですね

rails wep-app-themeを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ビジュアルを重視しなければシンプルですっきりとしたレイアウトを簡単に設定できる。
実際web製作ではビジュアルも大事だけど、こういうのがあると場所によっては楽できそう

・web-app-theme→シンプルでカラーのテーマを簡単に選択してつけることができる。


rails 3.0.10
ruby1.9
rake 0.87

・まずはgemfileに記述
gem 'web-app-theme'
bundle install

必要なライブラリをインストールしてくれる
(rake web_app_theme:dependences:installはしなくてもいけた。)

・テスト用のpostを作成
rails g scaffold post title:string body:text
・これは共用レイアウトすべてテーマを設定
rails g web_app_theme:theme
ここでweb-app-themeのテンプレートが適用される。
適用されるのはapplication_controllerなのですべてのビューに適用される

個別のコントローラービューに設定する場合
とりあえずadminのビューを作成
rails g controller admin index
指定のコントローラービューにテーマを設定
rails g web_app_theme:theme admin
指定コントローラービューのテーマを変更
rails g web_app_theme:theme admin --theme="blue"

でadmin/indexを見るとblueのテンプレートが適用されている。(postはデフォルトのthemeのまま)

その他コマンド
こうするとおそらくサインイン用のレイアウトになっているんだろう。たぶん
rails g controller sign index login logout
rails g web_app_theme:theme sign --layout-type=sign

これをするといい感じにかっこよくなる(デフォルトはtext?よくわからない)
rails g web_app_theme:theme sign --layout-type=crud

使いこなせたら簡単に以下のデモのようなスタイルが作れるみたい。





2011年8月18日木曜日

rails cancanを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
cancanは編集や削除権限などを付与して管理者はただのユーザーといった役割とあたえることができる。deviceとの併用も便利みたいだ

以下を参考

・gemfileに以下を記述してbundleインストール
gem 'cancan'
bundle install

・テスト用記事
rails g scaffold article title:string body:text

rake db:migrate

・abilityモデルを作成
rails g cancan:ability

・ablitityモデルに権限を設定する。
まずは読むだけのread権限(update,destroyができない)

#ability.rb
class Ability
include CanCan::Ability
def initialize(user)
can :read, :all
end
end

・articleのindexのedit,destroyリンク部分を修正、update、destory権限がなければedit、destroyリンクは見えない状態にする。

<% if can? :update,@articles %>
<%= link_to 'Edit', edit_article_path(article) %>
<% end %>
<% if can? :destroy,@articles %>
<%= link_to 'Destroy', article, :confirm => 'Are you sure?', :method => :delete %>
<% end %>

この状態でindexページを見るとedit、destroyリンクが消えてくれました。

ただ、このままではeditアクションのurlを直接指定すると編集できてしまう問題があるので
以下のように権限がなければ例外エラーを発生させる。

def edit
@article = Article.find(params[:id])
unauthorized! if cannot? :edit, @article
end

でもアクションごとに設定するのはめんどくさいので コントローラーごと設定できる。
load_and_aruthorize_resourceを記述する。

class ArticlesController < ApplicationController
load_and_authorize_resource

/articles/1/editを直接URL指定しても
アクセスする権限がない以下のエラーがでて編集できないようにできた。

「You are not authorized to access this page.」

ここからhttp://d.hatena.ne.jp/dimros/20110326/1301145073参照させてもらいました。

admin権限と見るだけのview権限を試す。

Userモデルに権限ROLESと、権限を確認するrole?を設定
まずはUserモデルにroleのcolomの追加

rails g migration add_role_to_users role:string
rake db:migrate

rails g devise:viewsでビューを書き換える
devise/registrationsのeditとnewに権限選択できるセレクターを追加

<%= f.label :role %>
<%= f.collection_select :role, User::ROLES, :to_s, :humanize%>

UserModelに以下を追加
attr_accessible :role
ROLES=%w[admin viewer]

def self.role?(role)
ROLES.include? role.to_s
end

権限として、adminの場合は全て使えて、viewerは見ることしかできないように権限設定
user ||= User.new # guest user (not logged in)
if user.role == "admin"
can :manage, :all
else
can :read, :all
end

でadminでサインインするとすべてのshow,edit,destroyが表示され
viewerでサインインするとshowだけが表示されました。
便利便利。

・こっちはadmin


・こっちはviewer、見るだけのひと

2011年8月17日水曜日

ウェブデザイン技能検定問題集 実技練習をやってみて

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ウェブデザイン技能検定3級問題集 実技練習をやってみました。
難易度的にはサイトを1つ作ったことがあれば特に問題なさそうな感じでした。
気をつけたいのは、コード補完に慣れていると実際に書けないことがある。
使えるのがテキストファイル、Terapad、サクラエディタということなのでそれにも多少慣れておきたいです。試験中で慣れるのに時間を費やすのはもったいないので。

以下の点の書き方を注意しておけば問題ないかなぁ。

・フォルダ、ファイルのパスの理解
上のディレクトリ ../folder/file

・リンクの書き方
<a href="folder/file.html">リンク</a>

・外部スタイルシートの適用
<link href="file.css" rel="stylesheet" type="text/css" />

・CSSのプロパティーの設定、背景色、文字色
background-color: #CCCCCC;
color: #CCCCCC;

・CSSのプロパティー設定、背景画像、繰り返し
background-image: url(mages/image.gif);
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repat;

画像種類 gif jpeg png

・構造化
<h1>タイトル</h1>
<p>文章</p>
<h2>サブタイトル</h2>

Ordered List 順序ありリスト
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

Unordered List 順序なしリスト
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>


あとは問題集についている模擬テストで様子見かな

2011年8月16日火曜日

ウェブデザイン技能検定問題集 ウェブ製作 運用管理部分

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
3級の問題集をやってきましたが学科部分はこれで終わりました。
最後のウェブ製作 運用管理部分です。
気になったキーワードをメモメモ。


7章 アクセシビリティー・ユニバーサルデザイン

・アクセシビリティー
高齢者・障害者を含む誰もが、さまざまな製品や建物やサービスなどを支障なく利用できるかどうか 参考サイト

・ユニバーサルデザイン
文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用することができる施設・製品・情報の設計(デザイン) 参考サイト

・ウェブコンテンツJIS JIS X8341-3
高齢者・障害者等配慮設計指針-情報機器における機器,ソフトウェア及びサービス-第三部:ウェブコンテン 参考サイト


8章 ウェブサイト設計、構築技術
・モックアップ、プロトタイプ
プロトタイプは試作品的な意味でモックアップは模型的な意味。

・EDI
商取引に関する情報を標準的な書式に統一して、企業間で電子的に交換する仕組み 参考サイト

・Eコマース
インターネットなどのネットワークを利用して、契約や決済などを行う取引形態 参考サイト

・ペルソナ法
仮想ユーザー設定。細かなプロフィールを設定し、ニーズを抽出して、要件定義し、アプリケーションに取り込んでいく方法 参考サイト

・インタラクティブ
双方向、対話という意味。

9章ウェブサイト運用・管理技術

・BASIC認証
ユーザ名とパスワードの組みをコロン ":" で繋ぎ、Base64でエンコードして送信する。全てのWebサーバおよびブラウザで対応している。盗聴や改竄が簡単であるという欠点を持つ 参考サイト

10章 安全衛星・作業環境構築
・アフォーダンス
ヒトが知覚できる「行為の可能性」。,物をどう取り扱ったらよいかについての強い手がかりを示してくれる。 参考サイト

・グレア
不快感や物の見えづらさを生じさせるような「まぶしさ」 参考サイト

・メタファ
隠蔽、隠喩という意味。 何かに例えた表現をすること。 参考サイト

・人間工学
人間が可能な限り自然な動きや状態で使えるように物や環境を設計し、実際のデザインに活かす学問 参考サイト

・VDT作業における労働衛生管理のためのガイドライン
VDT作業者の心身の負担をより軽減し、作業者がVDT作業を支障なく行ことができるようにするためのガイドライン。1日の作業時間、休止、連続作業時間、作業環境、使用機器、健康管理などについて書かれている 参考サイト


学科部分を初通しでだいたい7割正解でした。
↑のキーワードを全て知っている人であればまず問題なさそうな難易度です。
格基準が60%らしいので、2、3回とおせばいけるかなー。
引っ掛け的な問題が結構あったのでよく問題を理解することか。

次は実技のコーディングのほうをやっていきます。