2012年11月3日土曜日

WEBデザインの練習をしてみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
とりあえず目標的なものとして
①使えるウェブデザインとコーディングを身に着ける。
②1つのWEBサイトを作って更新、管理する。

①については
個人で独学でやっている状態では自身を持って自分のスキルを説明しにくい
また実際に要求されるサイト作りに必要なノウハウを知ることができない。
ということから、やはり自分が作りたいものを作るだけでなく
他人が作りたいものを作れるようにもなっていきたいというのが動機です。

②については
逆に自分でサイトを管理する際に必要なものを覚えたいというのが動機です。
いくつか趣味で作りましたが正直、無管理ほったらかしと言う状態で
ユーザーの分析やサイトのレイアウトの分析といった作る以外の部分は
まったくといってやっていないからです。

さっそく①の使えるウェブデザインとマークアップ、コーディングを身に着けることを目標に
一番参考になると思われるプロが作った実際のサイトのデザインコードをみつつ
真似て作ってみました。

アップロード先URL






















元の公式サイト(http://www.kobayashi.co.jp/
勝手に同じようなデザインのものを作ってますが、実際に運営するわけでないので大丈夫でしょう
タイトル属性も入れてないの検索効果もないでしょう)

どうでしょう、ざっと見た感じでは似たように作れたんではないでしょうか

今回、作業を一度通し、今の自分でどこまでできるかチェックする感じでやっていきました。
手順は
①デザインカンプ作成
 画像加工ソフトですべて位置から書き直し
 できた画像をスライスして素材に

②マークアップ
 HTMLでのマークアップ、各種配置
 CSSでのレイアウト

③Javascriptコーディング
 文字サイズ変更、トップに戻る、メインビジュアルスライド
 ほぼコピペでコードを追いながら理解する感じで

デザインカンプ作成で7時間程度、その他で7時間程度でしょうか
この辺ももっと早く、正確にこなしていく必要があります。

デザインについてフリーソフトのGIMPでやっていますが
作る分にはとくに問題なさそうですね
出来栄えはというと、自分なりにはある程度確認できたと満足している部分がありますが
実際はもっと丁寧に仕上げる必要がありそうですね
この辺のチェックは自分では甘くなってしまうのが独学の悪いところです
でも繰り返し練習していけば同じように作れるようになると信じていますが。

マークアップについては
クロスブラウザ対応や特にCSSの理解が不十分だと感じました
この辺も繰り返し練習か

Javascirptコーディングについては
Jquery一本でいいと思いますが自分で組むにはまだまだ速い。
よく使う機能を見て言ってそこから必要なコードの理解をしていこう

ていうことでどんどんサイトを真似て実際に使う技術を吸収しつつ
フリーランスのWEBサービスの依頼なんかをつついてみたいなと考えています。

あと、3ヶ月ぶりの更新ですが
応用情報技術者の試験の勉強でサイト作りを中断していました。
10月末に実際受けましたが、難しいですねえ・・・。
午前は覚えてマークシートなので楽な方ですが
午後は記述がたくさんあるので実際の業務についていないと
なかなかそれっぽい答えにたどり着けないですね
5問は全て埋めたのですが、残り1問のうちいくつか空欄で残しちゃって
たぶん来年またうけることになるでしょう

資格はそれ自体で役に立たないことのほうが多いですが
勉強やスキルアップの動機には十分なので
またいくつか選んで並行してやっていこうかな

2012年8月4日土曜日

英語という言語は候補の機能とかあるのかなあ?

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
先の言語添削SNSで遊んでいてふと思ったのですが
普段日本語をPCで書いたりする場合、キーボードどでかちゃかちゃやってスペースで変換候補がでますね。漢字が弱い自分にとって非常に便利な機能です。

英語の場合はどうなんだろう。
自分が英文を書く場合、スペルをいちいち調べないといけないくらい覚えていない。
なんあら日本語と同じようにapp をうったら 変換候補で apple や applicationがでてきてさっと選べるような感じなら便利なのに。

ネイティブの人でもスペルって忘れるものだと思うんだが
そういう機能は不要なのだろうか・・・

2012年8月3日金曜日

英語の添削のサイトを英語習得に役立てたい

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
はてぶの記事であった

http://lang-8.com/

人の役に立てるって思うと添削しちゃいませんか
日本語の添削しても英語はあまり上達した感じにはなりませんが
自分の英語も添削してもらうようになれば、どんどん上達するのではないでしょうか

ちょっとはまってしまって、ずっと添削してました。
海外の方でも本当に日本語が上手な人が多いのでびっくりです。
自分のああいう風になりたいなあ。

で、気になったのがこのサイトの作り
見た目が完全にBootstrapじゃないですかー
よくあるテンプレートそのままでもちゃんと人気あるサイトにできあがるんですね
ほぼ個人で作ったのだと思われるのですが、
使いやすさ、機能が盛りだくさんな気がします。
4年前?くらいから開設してるらしいのですが
いろいろマイナーチェンジしながら、ここまで便利なものにできあがったんでしょうね。

自分も長く頑張ればこういうのを作れるかもしれないと妄想しながら。
もうちょっと練習しつつ、ひと段落着いたら腰すえてこういうのを作ってみたいな

2012年7月28日土曜日

Codeigniter フィールドのユニークチェック is_unique

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
前はDBのフィールドに対するユニークチェックのバリデーションを自前でやる必要があったのですが、バージョンが新しくなってis_uniqueが使えるようになったみたいですね。

is_unique[category.title]

テーブル名と フィールド名を指定するだけ。簡単。

ソーシャル的にWEBサイトを作り上げる方法はないものか

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ソーシャル的にとはなんなのか、よくわからない。
たぶんコミュニケーションとってごにょごにょすることだろう。

アマチュア一人ではそれなりのものしか作れない。でもネットでソーシャル的に協力すれば
その作業に誰でも参加できて、良い作品を作り上げることができるし、多くの人がそう感じてるのではないだろうか。

昔はネットがなかったからわからないことはすぐ調べるということができなかった。
いまはぐぐってしまえばある程度の知識はなんとかなるし、アマチュアでもWEBサイトが作れてしまう。ツールも進化して一人で多くの分野の作業もできるようになった。
それはたぶん、ネットで知識の共有のおかげで、プロの方がブログで知識を公開したり、サービスでコードを共有したり、知恵袋であったりするのだろう。

ネットは人類の脳という例えがどっかにあったがまさにそんな感じかな。
実現に50年、100年かかるといったものが半分になったりするんじゃないかと思うと
何かわくわくしてくる。

とはいえ、専門的な知識の進化も著しくなってきているので
一人がググって多くの分野にわたって高度なスキルを習得するのはかなりの時間がかかってしまうし、進化し続けることを考えると、追いつくのはほぼ不可能だと思う。

ちょっと本題からそれて、おっさん世代はネットで共同作業することに慣れてはいない。
記事で読んだが、今の中学生、高校生はそれを良くも悪くもうまく利用している。
Skypeやgoogleドキュメントを使って、分業して教えあい課題をクリアしていくことができる。

もし自分が今の学生の立場であるとしたらこんな使い方をしてみたい。
例えば夏休みに英文訳の課題 100 ページ分でたとする。
いまなら一人で翻訳ツール、辞書ツールを使いつつそれなりの速度でこなすことが出来るだろう。
でももっと楽をするのなら、同級生100人で1人1ページを分業して合わせれば1日で終わらすこともでき、残りを遊ぶ時間に他の勉強に当てることもできる。
これには。実際に訳する力が鍛えられないという問題はあるが、協力してお互い補完しあうことで1つの良い模範訳を作ることになるので、ある意味教材の模範解答に近いものができるだろう。
それと照らし合わせて自分の問題点を知ることができるので、教材を買わずに効率よく復習することができる。本当に羨ましい限りだ。

つまり、何人か異なる分野の専門家がお互いに協力して作り上げるほうが、一般的に良いものができる。(当たり前か)。同じ作業場に実際集まって協力して作り上げるのが効率の良い方法だ。
ネットで同様なやり方を実現できないものか?

もし、アマチュアの100人のWEBサイト作成者が協力して1つのWEBサイトを作成できたら
今ある有名なこのサイトやあのサイトが1時間でできるかもしれない!
とまではまだまだいかないだろうけど、お互いの知識を共有してそれを繰り返していくことでそれを可能にするのではないかと思う。

10個のWEBサイトを自分ひとりで作成できるのもそれなりに評価されることではあるけれど
やはり、多くの人が使う有名なサイトの作成者の1人として携わったことがあると言えるほうが
多くの人に認められるし、自信にもなる。

結局言いたいのは、望むなら、今日始めたアマチュアから、プロまでスキルの幅が広くでも
一つのプロジェクトをそれぞれのスキルにあった作業に分業し誰でも参加できるシステムがあるようなソーシャル的に開発できるサービスが出来てほしい。(自分ではまだまだ作れないし)
もっというならお互いが共同作業できる各種ツールが備わっているといい。プログラミング作業をリアルタイムで共同作業するのはまだまだ難しいのかなあ。

2012年7月23日月曜日

グーグル急上昇ワード関連のツイートをまとめて表示させてみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
今話題のワードといえばグーグルトレンド、急上昇のランキングのワード
それに関してリアルタイムでのツイートをまとめてみれたらいんじゃないかということで
作ってみました。

グーグル急上昇ワード関連ツイートまとめ
















非常に手抜きをしております。
グーグルの急上昇ワードをとってきてそれぞれのキーワードに対して
グーグルのガジェットを表示しているだけという


グーグルの急上昇のAPI関連は以下を参考にさせてもらいました。

XMLが自分としては扱いやすいのでモバイル?のバージョンのほうを取得しています。
そしてそれらのキーワードをツイートのガジェットに適用してたくさん表示させているだけです。

ツイートガジェットはここでいろいろ作ることができます。

なぜ作ろうと思ったかわからない、誰得なのかもわからない
とりあえず作ればいいと思う(所要時間 3時間程度)
いろいろ迷走しています

Whitespace in query component. Use %20 in place of spaces.

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
HTM5コードチェックのメモ

URLのクエリのスペースは%20で置き換える
&は&で置き換えるなどなど

phpの場合URLを表示させる前に
htmlentities($url) もしくは htmlspecialchars($url) しておく

2012年7月14日土曜日

1000円以下のクーポン情報まとめサイトを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
各クーポン情報を集めて1000円以下という括りでまとめてみました。

1000円クーポンお得情報http://webcafe.x0.com/coupon1000/














今回はクーポンサイトのAPIを叩いてみました。

グルーポン API
http://www.groupon.jp/about-api

ポンパレ API

くまぽん API

シェアリー API

データを取得する流れはどのAPIについても
①チケット情報一覧 or エリア情報 から チケットコードを取得
②取得したチケットコードから クーポン情報を取得する
という手順で情報を取得できるようです。

データを更新してできるだけ新しい情報を表示させたいのですが
毎回リクエストしているとAPIのリクエスト制限や、サーバー負荷が問題となるので
特に、くまぽん、シェアリーは1件のリクエストでチケット情報が1件しか取得できないみたいなので
チケット情報一覧を1回読み込んでやって、DBにチケット一覧を保存
cronでチケット一覧から未更新のチケットを例えば20個程度を1時間ごとに実行してやって
クーポン情報を更新しています。
また同時に、クーポン期限の切れたデータは削除させています。

細かいところではRSSをつけたり、Twitterガジェットを付けたり、bootstrapのスライダーを使ってみたりしています。

クーポンサイトのデザインやレイアウト項目などを見比べると
まるで同じ人が作ったように似通っていました。
業界の作り方の基本とかあるんですかねえ。

2012年7月2日月曜日

オークションサイトをまとめて検索するサイトを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
各オークションサイトををまとめて検索して安いものが見れたらいいなあと思って作ってみました。

オークションまとめ検索
















ちょっと検索性能がしょぼいのでぴったりのものが見つからないかもしれないのが
改善したいのもあるのですが、とりあえず公開してみました。
おいおい、改善するかもしれません。

今回は各オークションサイトのAPIを使ってみました。
有名そうな3つのサイトを対象にしました。
各種APIの商品検索を使ってデータを取得して、データをまとめて表示させてみました。

Yahooオークションの検索API
http://developer.yahoo.co.jp/webapi/auctions/auction/v2/search.html

楽天オークションの検索API
http://webservice.rakuten.co.jp/api/auctionitemsearch/

ビッダースのAPI

Yahooはすんなりデータ取得できる。
楽天はxmlに名前空間が付いていてxmlローダーと相性が悪いらしく
取得したレスポンスの各項目の名称をいじるとなんとかなるみたいです。
以下を参考にさせていただきました。

ビッダースのAPIはzipでダウンロードして解凍して中にいろいろサンプルがあるので
それを参考にしました。
どのapiも取得方法はだいたい同じで以下のようにkeywordとして言葉を付け加えてsortなどを指定するだけで簡単ですね。キーワード部分はエンコードしてやる必要があるみたいですが。
http://xml.bidders.co.jp/bep/xml?keyword=1%89%7E&sort=price,A

2012年6月16日土曜日

URLを短縮して代わりに使えるサイトを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
とりあえず作ってみた。

URL短縮しまsu。
http://webcafe.x0.com/su/














長いURLが気持ち悪いときに短縮して使えるかもしれない。
一応、好きな文字列を決めて使えるようにもしてみました。

●サイト作りに関して
機能的には、ルーティングで語尾の文字列から元のURLにリダイレクトしているだけです。

今回はテストを少しだけやってみました。
CodeigniterにはCI_unitというテストライブラリがあるらしいので
それを少し試してみました。

使いにあたり以下を参考させてもらいました。

phpunitをCI用に整理したような感じですかね。
テスト用のDBからデータを読み込んでコントローラメソッドを実行させて結果を検証するみたいなこともやりやすくなってる。phpunitだけでもいけそうな感じだけどやっぱりMVCと分けて綺麗にテストしたいですよね。

自身はテストをほとんど書かないので、正直なところめんどくさいです。
規模自体は小さいし、複数人でやるわけでもないし、長期間の開発をしているわけでもないし。
とはいっても、やはり最近のテスト駆動、振舞駆動開発的なものにも触れておきたいということで
試してみました。

PHPunitのマニュアルは非常に参考になります。
使い方だけでなく、テストの必要性、重要性などが書かれています。
そこにはテストを何もかも全てやる必要はないとも書かれています。
確かに、すべての可能性を網羅してテストするのはそれだけ大変ですし
その分の効果が得られないとやる価値は低いといえそうです。
でもまあ、重要な部分はできるだけ書くようにしてやり過ぎない程度に書いていこうかな。
できないよりはできるほうがいいと思うので。

2012年6月13日水曜日

ジェネレーションギャップ的な話

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

技術の発展、特にネットが当たり前になってからというもの、全体の情報の共有、交換が活発になりいろんな分野のなにかが激しく進歩してきているのではないか?
ネタで情弱やらなんやら使う人が多いが、まさに情報に強いものが勝つという。
それは昔も一部そうではあったが、めまぐるしく情報が新しくなる今の時代こそふさわしいのだと思う。

各分野の頭脳が結集して会議とまでは言わないが、ネット自体が人類のニューロン的ななんかのような役割となって多くの分野で新しいなにか、アイデアを生み出すものになっているのだと思う。

で、例えば今のある会社や機関などの組織ぽいもの、とくに大きな組織での頭脳部分を考えてみよう。それらの主導権を握る多くは50~60歳の定年まじかの社長や取締役達といったところか。
高齢化社会の先進国ではこういった世代が全体のかじとりをしている。
(当然実際に動いているのは末端の人間であるのだろうが)
はたして、こういった人達は今の時代の流れについていけているのだろうか?

高齢化社会が進むことで組織内でのジェネレーションギャップが一層大きくなり
多くの組織で今の時代とは比較にならないほど化石的な判断、かじとりをしてしまっているのではないか?そしてそれが組織の進歩を遅くし、他と対抗した場合に衰退せざるを得ない状況に陥ってしまう。

経済のなにも知らない自分ですが10年後はどの組織が成功し、どの組織が衰退しているのだろうとふと考えてしまった。そしてこの国も多くの組織が存在して全体を動かしている、チャンチャン。

2012年6月9日土曜日

さくらレンタルサーバーでCodeigniterでCronを試す

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
さくらレンタルサーバーでCodeigniterでCronを試してみました。

以下メモです。



CodeigniterでOpauthライブラリを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
Opauthライブラリというphpで複数アカウントを一括で管理して認証するタイプのものが
最近できたみたいなので試してみた。

Opauth
http://opauth.org/#quickstart

各種フレームワークでの設定例の示されていてやりやすかった。
試したのはtwitterとfacebookとgoogleの3つ
ストラテジーを追加することで他の認証も追加していけるみたいだ
Railsにもともとこういうのがあったけど、便利ですね。

やったときのメモはここ

Opauth ライブラリを試したメモ

Amazonの日本とUSの価格を比較したサイトを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
はてぶのどこかの記事を見かけてAPIの勉強がてらつくってみました。

・Amazon輸入品価格比較
http://webcafe.x0.com/amazonimport/














日本のAmazonの輸入品のCD、DVD,ブルーレイ、洋書、ゲーム等の値段とUSのAmazonの値段を比較してみました。 中には海外で買うほうが安いものが見つかるかもしれません。


●今回やったこと
AmazonAPIを使ってデータを収集してみました。
APIの使い方や説明のドキュメントはここ。AmazonAPI開発ガイド
丁寧にたくさん載せてくれているので読むのに時間がかかり
オペレーターやレスポンスも多様なのでその辺の理解が大変でした。
あと、パラメータも手順にそって暗号化しないと駄目みたいで
その辺は先人の方のやり方を真似ながらこなしてみました。
参考 http://d.hatena.ne.jp/p4life/20090510/1241954889

APIを使って、searchコマンドであるジャンルの日本の商品最大10個のデータを取得して
lookupコマンドでUSと同じ商品コードのものをとってきて比較しています。
その際レスポンスを2、3種類指定してやることで目的のデータをリクエストするような感じで。

次にこのデータを定期的い更新させるのにcronを使ってみました。
Botというんでしょうかこういうの初めてで結構便利ですねえ。
twitterのBotも同じ感じでいけそうですね。
さくらだとコントローラパネルから、直接phpファイルを指定するだけで動いてくれました。
ただ、実際やってみるとデータ取得からDB保存まで10秒近くかかっていたため
少しでもサーバーの負荷を減らそうと、間隔をあけて少しずつデータを取得更新させるようにしました。

codeigniterに関してデータベースの読み書きやページネート、検索、並び替え、
いくつかの機能を実装してみてそれなりに慣れてきたかな。
次はまだ考えてないですが、またAPI関係やってみようかな。

2012年5月31日木曜日

2012年5月30日水曜日

いろんな生放送サイトのライブ視聴者ランキング作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
WEB上でライブ放送ができるサイトが増えてきましたね。
Ustream、Justin、にこ生など昔からある規模の大きいサイトはよく知られていますが
最近はいろんなところでライブ放送ができるサービスが増えてきてます。
ということで作ってみました。

ネットキャストランキング
http://webcafe.x0.com/netcast/












後発のサービスは個人で作っておられる方もいて他とは違った雰囲気があります。
Ustream、Justin、にこ生以外にも自分にあった楽しめるライブを探してみてはいかがでしょうか。



●ここからWEB作成に関して
今回、少しずつ勉強してきたPHPフレームワーク、Codeigniterを使って作成しました。
といって、DB関連は使っていないので、MVCではなくVCだけしか使えてません。
それでもルーティングをしてくれるのは楽ですね。
必要な機能もよく使われるPHPのライブラリのファイルをコピーすればそのまま使えるのも
PHP系フレームワークのいいところですね。まだまだ使っていない機能があるのでそこらへんもやっていきたい。

サイトの主な機能を作るにあたって
データ収集のため各サービスのAPIを使ってオブジェクトに直して使ったり
APIがないところはhtmlをパースしてデータを取得したりしてみました。
API自体使うのは初めてなんですが、ドキュメントやらもある程度そろっていて
結構簡単に扱えるものなんですね。

使ったパーサー
・XML
Simplexmlライブラリ
http://php.net/manual/ja/simplexml.examples-basic.php
libraryにコピペして読み込むだけで簡単に使える。

・Json
json_decode($json);
元からあるメソッド

・Html
simplehtmldom
http://simplehtmldom.sourceforge.net/
これもlibraryにコピペして読み込むだけ。

以下のようなAPI集みたいなサイトもあっていろいろ調べてやってみたいですね。
http://wafl.net/


データの取得更新について毎回データ収集処理をして最新の情報を取得して重い処理をしたりするのか悩んだんですが、とりあえずはリアルタイム性は必要ないと思い一定時間過ぎてサイトを回覧したときにデータの収集と更新をするようにしました。
この点でCodeigniterはキャッシュ機能で更新時間を簡単に設定できるので
キャッシュを使って処理を軽くする+データ更新が両方同時にできたのは楽でした。

次はCodeigniterのDB関連を学びつつそれを使ったサイトを作ってみたい。

さくらでCodeigniterトップページの表示が拒否される

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
さくらレンタルサーバーでCodeigniterを配置したときに
hostname/mysite  という普通のトップページを表示したいときに
なぜかサーバーから拒否された。

htaccses関連だと思って、前にファイルのインデックス表示をなくすために
ファイルマネージャーから簡単設定で権限を追加したときに
wwwのところに以下のhtaccsesが作成されていた


DirectoryIndex .ht
AuthUserFile /home/webcafe/www/.htpasswd
AuthType Basic
AuthName "Web access"
Satisfy all
Order deny,allow

サクラの場合ここが悪いようだ。フォルダ直接にアクセスしていると思われてるのかな?
以下のように一番上だけ変えてみた
DirectoryIndex index.php .ht

で hostname/mysite   にアクセスすると拒否されなくなった。
htaccessは自信ないけどたぶんこれでいけてるんだろう。

2012年5月27日日曜日

PHP系かRaillsを学んでいくかまだ迷っている中

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
こういう記事を見つけたんですが
http://toyoshi.hatenablog.com/entry/2012/03/09/143753

本当にRailsのあるあるですね。
特に自分はRailsからWEBサイト作成を始めたのですべてつまずいている感じがあります。
Railsの方向性は本当に独自の路線をたどっている感じで、作るだけなら簡単ですが
ちゃんとしたものを道に沿って作ってやらないといけないと強いられたら本当にたくさん覚えないといけない。とくにプログラミング以外の部分。

Rubyはコードが少なくて見やすいしPHPの{ }がごちゃごちゃすることもなくて
Railsのルーティングやバリデーションもシンプルで、scaffoldも使いやすくて
Gemから簡単インストールでいろんなライブラリも使えて・・・・などなど。
環境さえ整えればメリットしかないんじゃないかというくらい。
でもそれが初心者には敷居が高すぎると思うんですよね。

今はCodeigniterというPHPのフレームワークの勉強中ですが
Railsだと1行で書けるのにーとか、Railsだとこの機能ついてるのにーとか
それらがコード量にでてくるので、生産性はRailsなんでしょうねえ。

例えばDBから読み込んで一覧を表示する場合

・Codeigniter
public function index(){
$data= array();
$query = $this->db->get('article');
if($query){
  $data['records']=$query->result();
}
$this->load->view('article/index',$data);
}

・Rails
def index
@articles = Article.all
end

(あとはRailsさんが勝手にやってくれる)

この差は大きいですよねえ。
実際codeigniterでもRailsぽくモデルをいじってやれば

public function index(){
 $data['record'] = $this->aritcle->all;
$this->load->view('article/index',$data);
}

この辺までいけるとは思うのですが、やっぱりごちゃごちゃしてますよね。
モデルの数が多いほど差がでてくるのは明白でしょうね。
逆に少なければほとんど差はなくなる。

自分が作りたいのはどっちなんだろう。
やっぱまだ小さいスケールのほうなんだと思う。
PHPは修行とおもってコードをたくさん書いてつまずいてたくさん実装して
それから、Railsに戻って環境構築をがっちりしてまた挑戦したいな。

2012年5月26日土曜日

無料にすることで利益を得るFreeの本を読んでみた感想

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
半年以上前に買って、ちびちび読んでこの前やっと読み終えました。
内容的にはネットで今主流の料金体系である基本無料的なビジネスが
有料よりも儲かるというような話の例をいくつも載っていたが
最後のほうはマンネリな感じではった。

ネットのコンテンツのコストは限りなく0になっていくということと
その中でどう付加価値をつけてユーザをひきつけるコンテンツに見せるかということ
などなど、確かにそうであるしそれが難しいし、とそれなりに納得のできる本ではあった。

読み終えてふと思った。
本屋にいって表紙にFREEって書いてあったからレジを素通りしようとしたら
引き止められちゃったよ!FREEって書いてるのに有料なんだってよ。
中身読んだら無料にすることで儲けることができた実例がたくさん紹介されてたよ!
これはほんとお金払ってまで買う価値のある本だったよ。
え、でもその本は有料なんだよね?あれなんかおかしくない?

本当に魅力なのはFREEという言葉の響きでした
っていうアメリカンジョーク的なことが頭に浮かんだ

2012年5月21日月曜日

CodeigniterでCakeライクなlayout

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
といってもCakePHPはやったことないので
自分としてはRailsライクになるのですが、以下のライブラリを使うとできるみたいです。
仕組みを考えれば自分でできそうですが、あったらそのまま使いたいですよね。

layout library
http://codeigniter.com/wiki/layout_library

上を使って、さらに入力フォームと編集フォームをformにまとめて
Railsぽい?感じにしてみました。

layout libraryを試してみたメモ

Codeigniterでさくらレンタルサーバーでのリダイレクト

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

ローカルではリダイレクトがうまくいくのに
さくらレンタルサーバーではうまくいかないことがあったのでメモ。

redirectメソッドがうまくいかないことがありました。
redirect('article/index');→リダイレクトされない

原因として
①リダイレクトの前に何か出力するものがあると駄目らしい。

wellcome_controller
public function hello(){
echo "hello";
redirect('welcome/hoge');
}

public function hoge(){
echo "hoge";
}

にして、 helloにアクセス

エラー 
A PHP Error was encountered
Severity: Warning
Message: Cannot modify header information - headers already sent by (output started at /home/webcafe/www/redirecttest/application/controllers/welcome.php:29)
Filename: helpers/url_helper.php
Line Number: 546


②独自ライブラリをautoloadするときにタグを正しく閉じないと駄目らしい
ライブラリの最後にタグを閉じるところ
}
?>(この辺に空白があった?)

これを削除して以下のようにした。(見た目は変わりませんが)
}
?>

最後に限り?>はなくてもいいみたいですが、空白があると駄目みたいです。
このときはエラーがほとんどでず、redirectもされないのではまりました。

さくらレンタルサーバーにgitをインストールする

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
Vimというもので直接サーバーのコードを書き換えるという高度なことはできないので
gitを使ってローカルからpushしてサーバーのファイルを更新するようにしました。

こういう環境構築系はほんと苦労します。
慣れてるひとはささっとできてしまうんでしょうが
自分は勉強も含めて半日以上かかりました。
次回からはすんなりいきたいので出来るだけメモをとりました。
もしやる方は参考にしてもらえればと思います。

さくらレンタルサーバーにgitをインストール

2012年5月19日土曜日

さくらレンタルサーバーでCodeigniterを試す

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
CodeigniterはMVCタイプのPHPフレームワークで
他のフレームワークと比べて速いらしい
その変わりに機能は最小限といった感じ。
必要に応じてライブラリを落としてきたり、自分で実装する必要があるようだ。
MVCといってもコントローラーだけでDB読み込み、ページの表示もできるので
自分の好みにあった使い方もできる。Railsの規約とは反れる感じだ。

Codeigniterユーザーガイド(日本語)

マニュアルも日本語でわかりやすい。
ライブラリの説明を読むことでそれなりの機能は実装できそうだ。
一通り読んで、さくらレンタルサーバーでHelloを表示させるまでやってみた。

Codeigniter version 2.1.0
(system部分だけ2.1.0を使い、言語のsystem/languageは2.0.3の日本語を使っている。

準備
・phpがローカルで使えるようになってる状態
・PHPが編集できるエディタもしくはIDE。
(自分はNetbeans)

●まずはローカルでのHello
①とりあえずダウンロードしたフォルダを名前だけ変えてそのまま配置
・localhost/(アプリケーション名) にアクセスするとwelcomeページが表示される




②CIのコアライブラリの分離
ライブラリを使いまわして容量を節約する
systemファイルを外に出して名前をとりあえずCIにかえてみる

index.php
$system_path = 'system';
$system_path = '../CI';

で他のプロジェクトと使いまわせる
 user_guideやtxt関係のファイルはとりあえず削除


・CIのフォルダに直接アクセルできちゃったりするのかな?
直接 localhost/CIにアクセスしてみる
アクセス権限でアクセスできないというメッセージが表示される
Access forbidden!

③helloテスト
 よくやる”hello”を表示させる。
 コントローラーにhello.phpを作成する。クラス名は大文字

class Hello extends CI_Controller {

    function index() {
      echo "hello";
    }

}

 以下にアクセスとhelloが表示される
 http://localhost/cafeole/index.php/hello


④URLのindex.phpを表示させない
かっこ悪いので表示させないようにする

参考 http://codeigniter.jp/user_guide_ja/general/urls.html
・config/config.php
index_pageを空白にする
$config['index_page'] = '';

・.htaccessファイルの設定
公式のままだとなぜかうまくいかなかった。
ルートに.htaccessを作成し以下のようにしてみる

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ index.php/$1 [L]

でhttp://localhost/アプリケーション名/helloにアクセスすると
helloが表示された。


●ここからさくらのレンタルサーバーでHello
プランはスタンダード

①フォルダが見え見えなのでインデックス表示をなくす 

サクラのコントローラパネル→ファイルマネージャー
上のメニューの表示アドレス→アクセス設定→indexファイル
でアクセスの拒否をチェックする

ルートにアクセスすると以下のメッセージ
アクセスする権限がない。これでOK.

Forbidden
You don't have permission to access / on this server.

②ファイルアップロード
→ローカルのままコピペするだけ、特に変更なし
CIフォルダとアプリ用のフォルダは分離されている状態でOK.

③アクセスして確認
アプリのルートにアクセスすると、先ほどのwelcome画面が表示されうまくいってるように思ったが
/アプリケーション/helloにアクセスしても No input file specified(ファイルが指定されていない)
/アプリケーション/index.php/hello はちゃんと表示される

ここを参考 http://codeigniter.jp/user_guide_ja/installation/troubleshooting.html

.htaccessファイルを修正
なんかよくわかんないけどRewriteRuleのindex.phpの後ろに?をつけてみる

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond $1 !^(index\.php|images|robots\.txt) 
RewriteRule ^(.*)$ index.php?/$1 [L]

/アプリケーション/helloでhelloが表示された。

他の記事を参考にさせてもらってさくらの場合は
少し設定をいじらないといけないみたいなことが書かれていたので
これから実装していくと何かエラーが起こるかもしれない。
get送信のときになんちゃらかんちゃらとか。

とりあえずここまで
次はCRUDの機能を実装して慣れていきたい。

以下は hello画面、ちゃんと表示されていますね

2012年5月15日火曜日

RailsからPHPの何かへ

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
自分はWEBサイトの作成をRailsから始めました。
素人の自分でもルールさえわかってくれば簡単に動的サイトが作れてしまう
魔法のようなフレームワークだと思います。
また、Rubyという言語もコードがすっきりしていてコード量が少なく
こうしたいんだけどーってなんとなく書いたら通じたりして融通の利いてくれる
使いやすい言語だと思います。

ただ不満な点があって、環境の構築部分と「フレームワークの感じ」でしょうか。
Windowsと相性が悪く、なにかを新しく実装しようとするとめんどくさいことが多いです。
また、運営しようとするとVPSがほぼ必須なのでその辺の知識が必要になる。
Macやlinux系に慣れているひとであれば問題ないのでしょうが
自分にはちょっとまだ早いかなーという印象です。

フレームワークの感じと書いたのは自分でも説明しにくいのですがふわふわした感じなんですよね。
自分で十分に理解しないままでも、これやってーって命令したらできてしまうというか。
逆に予約されている命令以外のことはことごとく断られるみたいな。
(この辺は自分のスキルの問題もあるでしょうが)

自分にはちょっとRailsは早過ぎたのかもしれない。
まだまだやれていないこと、やれるはずなことがたくさんあり、残ったままになっている状態。
それらを消化していくには引っぱたいて背中を押したら強引でも動いてくれるようなものに
試乗してみようと考えました。

結果、よく使われているPHPでWEBサイト的なものを作っていこうと思います。
レンタルサーバーでも手軽に扱えて、Winでも使いやすい。
小回りが利くので、その分を、デザイン、使いやすさ、コンテンツに力を入れて
いいものを沢山作れるようにしていきたい。(切実)

PHPは前にCURD機能やそこらの基本を使ったサイトは作ったことがあるのですが
フレームワークを使わなかったのでかなり大変でした。
いま選択しようとしているのはCodeigniterというMVCタイプのフレームワークです。

Codeigniterユーザーガイド(日本語)
http://codeigniter.jp/user_guide_ja/index.html

ユーザーガイドに一通りの機能のやり方が日本語で書かれています。
CakePHPも考えたのですが、ほぼRailsぽい感じがしたので逆に避けました。

PHPで納得できたら、Railsに戻って本格的なものをやってきたいという思いです。

ほんとはUnityとかで3Dネットワークゲーム作りたかったけど
そんな余裕ないなあ

2012年5月11日金曜日

英単語を覚えるのに使えそうなweblio英和辞典

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
英文ををすらすら読めるようになって海外の読み物を理解できるようにしたい。
そのためには暗記している単語の量は大事だと思うのです。

英和辞典・和英辞典 - Weblio辞書http://ejje.weblio.jp/




このサイトはよく辞書として使っていたのですが単語テスト機能がついているんですね。
やってみたらかなり便利です、今後使っていきたい。

テストの種類として
①4択の診断テスト、英検 大学入試 TOEFL、TOIEC(得点別)など
②単語帳に登録して復習
1.勉強中の単語を4択テスト
2.フラッシュカードで復習(これは単語帳をパラパラめくって暗記する感じ)
3.スペルの書き取り

自分のやり方としては
①の4択診断テストを繰り返し、間違った単語を単語帳に登録
②フラッシュカードで何周もテストを繰り返しチェックしていって覚えたとおもったら消していく

①の4択診断テストを繰り返すと、テスト終了後に間違った単語を単語帳に登録できるので便利です。(1つの単語帳に200個まで貯めることができます。)

フラッシュカードは、ショートカットーキーで発音確認や次の単語の送りもできるので
さくさく暗記作業を進めることができます。

●このやり方で200個の単語を自分なりに覚えたとおもったら削除していき
すべて完了するまでやってみました。


ざっくりです
1回目で 200個→約150個
2回目で 約120個
3回目で 約100個
・・・
・・・
・・・(何回繰り返したか覚えていません)
やっと20個まで着ました。(ここまで 2時間程度)
この辺までくると脳の方もかなりお疲れのようで全然消せません。
また、残った単語は覚えるのが苦手なタイプのものが多いようです。
結局、20個→0個まで行うのに+30分程度かかりました。

最後らへんはテストを繰り返してもパッと意味が浮かばなかったです。
1回目で50個消せたのに、20個消すのに何回繰り返したことか・・・。
自分の脳の仕組みはどうなっているのやら。


そういえば脳に記憶するためには繰り返して何回もやる必要があるとどっかの記事に書いてました。1回読むだけだとその80%は忘れるとかなんとか。

忘却曲線で調べたらいろいろでてくると思います。
以下参考の記事 効率の良い勉強法・暗記法~脳の仕組みと忘却曲線
http://www.wiquitous.com/blog/education/how-to-study001


あとここにで英語習得するまでの勉強時間について書かれていました。
参考記事さん 英語の習得には何時間かかるの?
http://photo-collage.jp/makoto/archives/2005/05/post_218.html

日本語と英語は相性が悪く、一番覚えにくい組み合わせらしい。
優秀な大学生で80-92週(約2年でしょうか)


ちなみに自分のTOEICの単語診断テストの結果では600点くらいでした。
うーん、遠すぎる・・・・。

2012年4月18日水曜日

Rails リッチエディターのTinyMCEを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
リッチエディターのTinyMCEが使えるgemを試してみた

TinyMCE公式はここ
http://www.tinymce.com/index.php

gem
https://github.com/spohlenz/tinymce-rails


gemをインストールしてちょっとごにょごにょするだけで簡単に使えた



日本語にも対応できる。
フォント、色、レイアウトや、リンク、画像、動画の貼り付けなど
機能もカスタムで選んで好きなものを選べるようだ

2012年4月15日日曜日

Rails tree構造を作るancestryを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
カテゴリをtree構造で扱うためにancestryのgemを試してみた。

gemは以下
https://github.com/stefankroes/ancestry

act_as_treeと同じような感じ?らしい
act_as_listと組み合わせて使うと並び替えもできるようになる

公式のwikiにact_as_listとの組み合わせの使い方が載っている

試したメモは以下のページにまとめてみました。
並び替え可能なtree構造を作るancestry

2012年4月7日土曜日

DropBoxを使ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
良く聞くストレージサービスのひとつDropBoxを使ってみた。

DropBox
https://www.dropbox.com/


ネット上のハードディスクみたいなもんですね。
専用ツールをインストールするとDropBox用のフォルダが作られて
そこにファイルを置くだけでアップロードして自動で同期してくれるので
普通のフォルダと同じ感覚で使える。

手順は簡単でした。
アカウントを取得して、専用ツールをインストールするだけ。
windowsだけでなくlinuxも対応し、iOS、Andoroidといったスマートフォンにも対応しているため
どこからでも自分のデータにアクセスできます。

無料で2GBのスペースが使えます。
使い方はローカルフォルダと変わらないので
単純に2GBの容量が増えるという感覚でいいと思います。


紹介で使用開始することで
紹介された側と紹介した側両方が500MB増える特典があります。

ということでPR。
以下のリンクから使い始めることでお互い500MB増えてお得です。
http://db.tt/PbCRlZpL

2012年3月24日土曜日

CentOSをインストールしてみて使ってみた感想

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
RailsのgemでV8なんとかとかその辺のインストール時にWindowsではなかなかうまくいってくれないのでlinuxのOSを使ってみることにした。

linux系といってもいろいろあるみたいですが、VPSを今度使ってみたいので
VPSで使われているOSとして一つCentOSを選んでインストールしてみました。

しかしwindowsがどうしても必要なときもあると思うので
デュアルブートと言う形でどちらも起動できるようにインストールし直しました。
(仮想マシンに載せる方法が最近では多いみたいです。しかし自分のPCの性能だときついと感じたのでデュアルブートにしてみました)


OS関係がほぼわからない初心者であるのですが
今の時代グーグル先生に聞けばなんとかなるのです。

デュアルブートに関してはこちらを参考
http://www.linuxmania.jp/dualboot1_c5.html

CentOSについてはこちらを参考
http://www.kkaneko.com/rinkou/linux/centosinstall.html

以下の部分を少し変更しました。あとは大体おんなじ。

・OSはwinXP,CentOS6.2
・順番はXPを先に、パーテーションの半分をXP領域として使用してセットアップ。 
*パーテーションを設定しなおすと、データもすべて綺麗になっちゃうのでバックアップしておくこと。


centOSインストール時に
・パーテーション設定のタイプを 空き領域を使用するを選択。
・インストールアプリの種類を Software DevelopmentWorkstation

時間はざっくり
CenOS用のDVD作成 1時間
XPのセットアップ 1時間
CentOSのセットアップ 0.5時間

あといろいろ調べながらやって 合計大体5時間くらいかかったかもしれません。
でも、エラーなどは詰まったところはほとんどなかったのでそれほど難しい作業でありませんでした。これも先人の方々の記事のおかげ。

デスクトップのスクリーンショットを撮ってみました。


新鮮でかっこよく感じますねえ。
デフォルトでいろいろなアプリがインストールされて
だいたいのことはできるようになっています。
ブラウザはデフォルトでFirefox、自分はChromeになれているのでダウンロードして切り替えました。

CentOSを使ってみた感想ですが
●良いところ
・無料
・railsを使う場合にwin特有のエラーに悩まされずに済む。。generateも早くなった。
・ウイルス感染などの心配がほぼない。
どういう理屈かしらないけどそうらしい、調べてみたらこちらの記事が参考になりました。http://www.tepa.jp/technical_abc/linux_anti_virus-01.do

・起動、終了が早くなった。
(xp比較、これは一度HDDをリカバリして綺麗になっている影響もあるのかな)
・新鮮な気分を味わえる、なんか見た目がかっこよく感じる

●悪いところ
・アプリ系は対応していないものが多い。ゲーム系はほぼ全滅か
・winのoffeceが使えない。word,excelなど、openoffice的なものがあるがもっさりしている。
・winのときのファイルが開けない場合がある、解凍ソフトも何か挙動が違うみたいでうまくいかないときがある
・CUIで操作する必要もでてくる。インストールや起動などなど。
(CUIになれている人は特に問題ないですね)

ネットサーフィン+サイト作成などする上では不自由なく使える感じ。
ゲームやアプリを楽しみたい人はwin環境が必要。

新鮮な感じを味わえるのが個人的には一番メリットかな。
いや本当に。OSを初めて起動できたときのテンションは上がり方は保証します。
OS切り替え作業をする前はバックアップを忘れずに。

2012年3月16日金曜日

サイト登録ができるサイトを調べてみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
作ったサイトは多くの人に見てもらいたい。
サイト登録サイトにリンクとして張ってもらえればいくらかその確率があがる。
(とは思うけど真意は不明)

「サイト登録」でぐぐって調べてみました。


サイト登録宣伝AUL
http://beam.opal.ne.jp/search/ 
審査あり。違法系は不可。リンク貼り付け。  
現在の総登録数:39236 サイト 

サイトの新規登録106
審査あり。商用サイトは、必要情報の明記。違法系は不可。
 現在の登録数  46316 

サイト登録 無料 - Paseon
即時反映、リンク貼り付け。
 登録数 995 

サイトの新規登録サイトIIZUKA-NET
審査あり。商用サイトは、必要情報の明記。違法系は不可。
登録数 415 

登録無料!サイト登録宣伝のSiteAdd
リンク貼り付け。


ぐぐった検索結果ではおもったほどサイト登録サイトがでてこなかったのが以外でした。
審査ありが多いですね。自分的には気軽に登録できるほうがいいのですが、質にこだわっているといことでしょうか。リンク用のバナー貼り付けはしょうがないところかな。

2012年3月12日月曜日

ライブチャットサイトを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ソーシャルアカウントがあればすぐにライブチャット、WEBカメラ映像配信とリアルタイムチャットのページが持てるサイトを作ってみた。

Cafeライブチャット














Ustreamやニコニコ生放送、Justinといったユーザーが多くメジャーなライブ配信サイトがありますがこのサイトは気軽に使えて小規模の人数の ちょっとしたグループの人々のためのコミュニケーションの場をという感じで作りました。

まだまだ基本的な機能だけですが、「グループ」というキーワードで追加機能を実装してきいたいと思っています。もう少しチャット機能を充実させていきたい。


今回、リアルタイムチャットとを作るという目的でいろいろ調べていったのですが
Flash Media ServerのRTMFPを使うとWEBカメラの配信も比較的簡単にできるということで実装してみました。

①RTMFP
ライブ配信とチャットの機能はこれを使って実装しました。
RTMFPを使うとP2Pでのネットワークのグループが自動的に形成され通信することができます。

こちらを参考 公式

リアルタイムのネットワーク通信自体ほぼ初めてに近かった為、これ以外にもたくさんの記事を参考にさせていただきました。RTMFPに関してはまたどっかでメモとして残しておきたいと思います。

当初RED5のRTMPを使うことを考えたのですがサーバーに処理が集中するので結構な性能のマシンでないときつそう?と思っていたところにRTMFPであればP2Pでリレーすることで処理を分散させ、専用のサーバーもいらないということでうってつけでした。どっかの説明による何万ものネットワークを形成して通信できる(らしい、試したのかは知りませんが)。

RTMFPは興味深いですね。映像配信やチャット以外にちょっとしたネットゲーム的なものにも使えそうです。今後もうちょっと勉強して使ってみたいです。追加アプリとして実装していくのもいいかもしれません。

以上、ショッピングサイト的なものを作ってみたい。

2012年2月27日月曜日

ニコニコ動画の世界とクリエイター達の話

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
Youtubeとならんで人気の動画投稿サイトのニコニコ動画。
昔からちょくちょく見ていたのですが、動画の中にはプロレベルなんじゃないか?
と思うほどクオリティーの高い作品もあります。

有名な作品であり、現時点で合計の視聴者数で2位の【東方】Bad Apple!! PV【影絵】
(1位は震災被災者への応援メッセージの動画なので実質1位というとこでしょうか)
私も昔から知っていました。影絵での動きの表現、なめらかさ、シーンの繋ぎ方などなど。
素人目にもすばらしい作品であることがわかります。

ーー
ーー

そしてここから最近知った話で、この作品には元ネタがありました。
絵コンテでこういうPVを作ってほしいという動画からこの影絵ができたそうです。
その元ネタがこちら

ーー
ーー

まず最初に見たときはこれはひどいと笑いました。
この絵コンテから影絵のPVができたのが信じられません。
影絵の動画再整数の10分の1なので知らない人も多いのではないかと思います。

次に、動画には登録タグがついていて、視聴者が好きにタグを登録することができます。
そのタグにはしばしば視聴者の感想が書かれていることもあります。
この動画のタグには、以下のようなものがついています。

ニコニコムービーメーカー うp主は幸せ者 東方 鬼発注の人 原点にして底辺 字コンテ 全ての元凶の元凶 どうしてああなった これはヒドイ 墓石or名簿 【編集】


「字コンテ」「どうしてああなった」「これはヒドイ」と言いたくなります。
最終的にこの人には「鬼発注の人」というニックネームが付けられています。
表現もユニークです、確かに・・・。

なぜ発注なのか?
どうやら、この 絵 コンテの人は「Bad Apple!! feat. nomico」という歌が気に入って
ただUP主がPVを見たいという理由だけで誰か作ってくれーと
無茶振りのような絵コンテの動画を投げたとこから来ているようです。
しかし、この絵コンテがなければあの影絵のPVはできなかったわけで
PVの企画には長けているんだなと思わせます。

そしてニコニコ動画には百科事典機能として、タグに関するWikiみたいな感じで
詳細ページを作ってタグに関する説明を投稿できる機能あります。
「鬼発注の人」は他にどんな絵コンテを作ったのか気になりますよね?
そして、百科事典で調べると2作品目もあるようで・・・・・。

で、結局何を感じて何を言いたかったのか

ニコニコ動画はクリエイターの集まる場であり、作品を生み出す場であり
視聴者が多くの作品を見ることができる場であり、そういう世界を作り出している。

ここでは、視聴者の知りたい情報を導くような機能がたくさん使われていて
少しでも長くサイトに滞在さようとします。それがクリエイターにとっては好都合で
自分の作品を見てもらう機会を増やしてくれます。そしてクリエイターが集まる場になり
さらに多くの作品が生まれ、視聴者がさらに多くなりと、いい感じのスパイラルになっています。

影絵の例で役割的なものを貼ってみると

歌、曲:「Bad Apple!! feat. nomico」

絵コンテの人:PV企画

影絵の人:PV作成

ニコニコ動画:公開、広告、宣伝

こう見るとクリエイターが連携して作品が作りあげているのがわかります。

私はWEBサイトを作成していきたい側なのでやはりニコニコ動画というサイトの機能に目がいきます。一部のユーザーの著作権の侵害を誘発しているとも言われていますが、情報の発信を共有して何かものを生み出すというシステムは非常に興味深いと感じました。
「情報の発信」、「データ共有」、「人の連携」といったキーワード。
これらで何かサイトを作って、いろんな機能の実装しつつ勉強していきたいですね。

2012年2月20日月曜日

単語4択テスト学習サイトを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
学生をすぎると暗記するということをおそろかにしがち
暗記力というものは使わないと落ちていくのではないだろうか
ぐぐればなんでもわかるネットですが、覚えておくと作業効率良いですよね
と思いつつ作ってみました。

単語4択テスト学習http://tangotest-yontaku.heroku.com/














サイトの説明は以下

登録した単語リストを共有。単語4択テストで学習できるサイトです。

このサイトの4択テストの特徴は以下です。
回答モードは2種類。単語→意味。意味→単語
問題抽出では「間違えたもの」「まだやってないもの」など間違ったものは集中的にテスト
テスト履歴の管理、各リストの達成度もわかる
他の誰かが登録したリストで学習


今回挑戦した内容について
①flashとのデータ連携
flashの練習がてらテストのアプリ部分とデータの連携してみました。
html5が使えるようになったとはいえ、使いやすさや資料の多さから
ブラウザでアニメーションをするのはまだまだflashがよさそうですね。
特にFMSなどでデータをリモートで共有するのが簡単にできるということで
リアルタイムチャットやライブストリームなどができるのが魅力的です。

②Boostrapの使用
以下公式

CSSのテンプレートライブラリの一つ。いい感じのレイアウトやフォーム、ボタンなどが
タグのclassをちょちょいといじるだけで表示できる。
railsだとgemでそれぽいものがあったのですが、windowsだとインストールがうまくいかない感じでした。なので、ライブラリを直接コピペして使ってました。
自分の力ではデザインはほんとアレなので非常に助かりますね。


③各種アカウントの対応
いまさらながらomni_outhを使ってtwitterやfacebookなどの
アカウントを使ってログインして使用できる機能をつけてみました。

④権限機能
Cancanというgemを使って簡単に権限付与ができるのでやってみました。
多少複雑な条件の権限も指定できるようで、一般とログインユーザーを区別して
createできる場合はリンクを表示させたり、updateできない場合は表示を消したり
createやupdateのアクション実行も制限できるので便利です。

⑤CSVファイルの扱い
ダウンロードとアップロードの両方を実装してみました。
csvはruby1.9だとそのままto_csvで使えるみたいですね。

今回の目的はflashをある程度使えるようにすることでした。
リアルタイムチャットをやろうとしてflashが扱いやすいことがわかり
しかし、flash未経験という壁があったので、とりあえずできたのでOKかな。

次こそはリアルタイムチャットぽいものを。

2012年2月6日月曜日

rails OmniAuthを使った認証について

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
久しぶりにOmniAuthを使って認証機能を実装しようとしたら
エラーがいくつかでて少し方法が変わっていたのでメモ。
Rails3.1.3 ruby1.9.2 OS:WIN

認証はtwitter,facebook,google,mixi,openid,yahooの6つ試してみました。


基本は以下のURLの流れとは変わらなかったけど違っていた部分だけをメモ。
http://ja.asciicasts.com/episodes/241-simple-omniauth

●gemファイル
gem "omniauth",'~> 1.0.0.rc2'
gem 'omniauth-twitter'
gem 'omniauth-facebook'
gem 'omniauth-openid'


●omniauth.rbの作成部分

config/initializer/omniauth.rbを作成し以下を記述

require 'omniauth-openid'
require 'openid/store/filesystem'
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :twitter, 'CONSUMER_KEY', 'CONSUMER_SECRET'
  provider :facebook, "App ID","App Secret", {:client_options => {:ssl => {:verify => false}}}

   # generic openid
   provider :open_id, :store => OpenID::Store::Filesystem.new('/tmp')
   provider :open_id, :name => 'google', :identifier => 'https://www.google.com/accounts/o8/id'
   provider :open_id, :name => 'yahoo', :identifier => 'yahoo.co.jp'
   provider :open_id, :name => 'mixi', :identifier => 'mixi.jp'
end


●ログインリンク部分
    <!--login auth -->

    <div id="user_nav">
      <% if current_user %>
        Welcome, <%= current_user.name %>!    <%= link_to "Sign Out", signout_path %>
        <%= link_to "Mypage", :controller=>'articles',:action=>'mypage' %>
      <% else %>
        <%= link_to "Sign in with Twitter", "/auth/twitter" %>
        <%= link_to "Sign in with Facebook", "/auth/facebook" %>
        <%= link_to "Sign in with Google", "/auth/open_id?openid_url=https://www.google.com/accounts/o8/id" %>
        <%= link_to "Sign in with Yahoo", "/auth/open_id?openid_url=yahoo.co.jp" %>    
         <%= link_to "Sign in with Mixi", "/auth/open_id?openid_url=mixi.jp" %>
        <%= link_to "Sign in with OpenID", "/auth/open_id" %>
      <% end %>
    </div>


以上で、大体のログインがうまくいった。
ただ、OpenSSLあたりがうまくいかずfacebookはコールバックでエラーと
mixlでサーバーログにエラーがでてる。

omniauth.rbの作成部分が怪しい感じでぐぐってみて以下いろいろ試したが
うまくいってくれない。

OpenID.fetcher.ca_file = "/etc/ssl/certs/ca-certificates.crt"
 provider :facebook, "App ID","App Secret", {:client_options => {:ssl => {:ca_path =>"/etc/ssl/certs"}}}
 provider :facebook, "App ID","App Secret", {:client_options => {:ssl => {:ca_file =>"/etc/ssl/certs/cacerts.pem"}}}

とりあえず、environment.rbに以下を記述

require 'openssl'
OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE

facebookはエラーはなくなったが、しっくりこない。あまりよろしくないのかもしれない。

2012年1月19日木曜日

24時間だけ有効なメッセージ伝言板サイトを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
24時間だけ有効なメッセージ伝言板サイトを作ってみました。

URL:http://twentyfour-message.heroku.com/
タイトル:24時間有効メッセージ















サイトの説明そのままですが

////////
24時間だけメッセージが公開され、設定された時間を過ぎると
メッセージは削除されるようになっています。
また、メッセージに対してコメントをすることもできます。
24時間だけ伝言したいこと。ささいなこと。ふと思ったこと。
誰にも読まれないかもしれないけど、なぜか投稿してみたいこと。
そんな伝言板あってもいいじゃない?
////////

今回作るにあたって、3つのことを試してみました。

①スマホ対応
②jqueryのローテーションスライド
③Canvasのアニメーション

スマートフォン関係のマークアップに関する本があったのであさって読みながら
iphone風のレイアウトを拝借しました。1ページのスクロール量を減らす為に
jqueryのスライドを使いページの遷移もしてみました。

こちらがスマホ対応してみたURL
http://twentyfour-message.heroku.com/24message-moblile

ウインドウの幅を小さくみるとスマホぽくなってると思います
スマホはもってないので実機での確認はしていませんがうまくいってることを願う
スマホって案外使える領域が小さいんですねえ
かといって、縦にずらーっと長くしたら使いずらくなるし。

あと、RailsにおいてPC用とスマホ用のレイアウトをルーティングするのに苦労しました。
1つのコントローラーを使ってPCかスマホか判別してレイアウトを使いわけるというという方法をとったのですが、Rails特有のルーティングがなかなか思ったとおりにいってくれなかったです。

見た目強化ということで、PCのトップページには記事のローテーションスライドを入れてみました。
以下のスライドを参考に使わせてもらいました。
http://www.skuare.net/2011/06/javascriptdivjquery_slider2.html

とりあえずはコピペでもいいから、多くのjqueryのUIを使っていきたいですね。

最後に、 Canvas で星型のアニメーションをつけてみました。
メッセージがまだ投稿されてない状態のみ表示させるようにしています。
以下、ほぼ同じアニメーションのサンプルです。



Javascriptは魅力的ですねえ。突っ込んでやっていきたいな。
次はアプリ的なものに挑戦していこうと思います。
まずはリアルタイムチャットかなあ。

2012年1月11日水曜日

英語が勉強できるサイト イングリッシュセントラルについて

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
毎日少しずつですが英語が少しでも読めるように話せるようにと
勉強しているのですが、いつのまにかブックマークの英語フォルダにはいっていた
このサイトを訪れて使ってみました。

イングリッシュセントラル
http://ja.englishcentral.com/

















これはすごい・・・・。
動画を再生すると上のような専用ツールが出てきて、これがまた高性能。
動画+英文+日本語訳+マウスクリックで単語の説明がすぐでてきて発音練習もできて・・・・
勉強履歴みたいなのも残してくれるみたいで継続してやっていけそうな気がしてくる。
単語テスト的なものもあって習得度も出してくれる。
しかも無料である程度できる!
(当然有料のプレミアムもあって、月額980円でいろいろ追加機能が使えるようだ)

技術の進歩ってすごいですね。こんなのあったんですね。全然知りませんでした。
通信学習もここまでくると義務教育の英語の授業よりも身につくんじゃないだろうか
とも思わせる

ちょっと脱線しますが、私の頃の学生時代の教育形式は
先生が1クラス30人くらいを担当して1対多という形で
指導要領的なものに沿ってマニュアル通りに教えていく。
わからないところがあれば、手をあげて~、みたいな感じでしたが。
で、先生にも知識や教え方に差があって、合う合わないっていうのもあったり。

もし、今後技術が進歩して個々に合う最適な習得方法を提供できる
教育のサポートツール的なものが開発され、今よりも有効だと判断されれば
今までの教育形式は変わっていくのかもしれませんね。

私はもう学生を卒業して幾分経つのですが
こういったWEBで無料で技術や語学の習得をサポートしてくれるサービスを
今の学生さんが使えることがすごくうらやましいです。

ネットの世界ではゆとり教育やら今の若い子は~みたいな言い方があったりします。
確かに世の中はどんどん便利になってきて、楽をできるものが多くなってきています。
でも、私が思うところは、こういうサポートツールの恩恵をうけれる若い世代の人のほうが
持っている情報量が多く、現代の社会に合った感性や知識を持ち合わせているのだと思います。

私の脳細胞はおそらく死んでいくのみだと思うので
そういう部分は認めて使えるツールを使って効率よくスキルを習得していけたらなと思います。

2012年1月8日日曜日

言葉を考えて遊ぶThinkwordというサイトを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
思いいつきで作り始めて、久しぶりのRailsを復習しつつなんとかサイトという形にできました。
サイトの説明をそのまま拝借しますが


『問題の答えを 言葉を考えてさらに考えて(Think Word) 遊ぶ』
わからなければ、ヒントを元に考えて、それでも駄目ならさらに次のヒントを。
できるだけ考えて答えとなる言葉を当てていく。』

と書いてますが、シンプルに言うと
なぞなぞ的な問題を投稿して投稿されたものを回答するという感じです。

サイト名  Think Word 言葉を考えて遊ぶ
サイトURL http://think-word.heroku.com/













今年は、Webサイトの数にこだわってとにかく作っていくということを目標としました。
いきなり大規模のサイトや、斬新なアイデアの便利なWebアプリや
アニメーションばりばりのデザインなどはまだまだできないので
とりあえず作り続けて少しずつでも近づけていけばと思っています。

今回、久しぶりにRailsで作り、思い出しつつひとつのWebサイトを
完成することを目標とした為、難しいことには挑戦していません。

希望としてはjqueryのアニメーションや、HTML5を使った表現を取り入れたかったのですが
思ったより他の部分で時間がかかり次の機会とすることにしました。
この辺は次からはレイアウト、汎用の機能は使いまわして
空いた時間をJquery、HTML5などに手がつけれたらと思います。

最後に、年明けて1週間経ちますが遅いあけおめとさせていただきます。
今年は良い年へとできますように。