This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

2011年2月27日日曜日

FacebookのOGPまわりの仕様変更を発見した

Open Graph protocol - Facebook開発者
http://developers.facebook.com/docs/opengraph/

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か
http://d.hatena.ne.jp/amachang/20110117/1295233078

Like Button : Facebook開発者向けドキュメントの日本語訳とTips
http://facebook-docs.oklahome.net/archives/51894138.html

上記3つのURLに書かれているOGPタグのFacebookにおける挙動がいつのまにか変わっていた。

1つめのURLリンク先に書かれている本家の説明では、

The og:title links to og:url and the og:site_name is rendered pointing to your site's domain automatically.
直訳↓
og:title リンク、og:url と og:site_name は、自動的にあなたのサイトのドメインを示しながら、表されます。 
と書かれている。

しかし、実際に以下のように設定しても、


<meta property="og:title" content="CodeIgniterでブログやろうぜ">
<meta property="og:type" content="blog">
<meta property="og:description" content="Fk_2000がCodeIgniterでブログやろうぜをテーマに記事を書いている日記的なブログです。">
<meta property="og:url" content="http://fk2000.toypark.jp/main/blog">
<meta property="og:image" content="http://www.hatena.ne.jp/users/fk/fk_2000/profile.gif">
<meta property="og:site_name" content="CodeIgniter blog">
<meta property="og:email" content="fk2000@kurimon.com"> 




1行目に「og:title」、2行目に「og:url」ではなく実際のURL、3行目に「og:site_name」ではなく、「og:description」が表示されるようになっている。

この先もFacebook側の仕様変更により、ウォール投稿などの挙動が変わる可能性があるので注意したいところである。








2011年2月22日火曜日

PHPのCMSパッケージ「Seezoo」



PHPのCMSパッケージ「Seezoo」がとっても簡単だったのでご紹介。

http://seezoo.org/


どれくらい簡単かと言うと、
①データベースを作成(MySQL)
②ダウンロードしてサーバにアップロード(展開してからでもアップしてから展開でも可)
③インストールはアップロードしたWeb画面で。(フォルダやファイルの権限チェックと、PHP、MySQLの設定。)




できあがり。

早い人なら10分~15分でできるのではないでしょうか。

使いながらカスタマイズできるのも便利ですね。


http://fk2000.toypark.in/seezoo/

デフォルトでガジェットスペースと、リモコン(?)がついててわくわくします。

さっそくいじってみます。

2011年2月18日金曜日

CodeIgniterのviewsにhtml5を採用する方法 その1






html5のテンプレートをかんたんに取得できるInitializrを利用します。

http://initializr.com/


◆Initializrとは

HTML5サイトの土台を作ってくれる「Initializr」。
1からHTMLを作っていくのもいいですが、Initializrを使えばウィザード形式で進めると基本的なファイルをzipでダウンロード可能です。
基本HTMLを含むか、jQueryを含むか?の設定や、サーバ設定も含んだ形でパッケージ化が可能
via:http://phpspot.org/blog/archives/2011/02/html5initializr.html

◆手順

1.ダウンロード

initializr.comにアクセスする

「HTML & CSS」で「Initializr sample page」をクリックする

「Javascript」で「I want jQuery minified!」をクリックする

「Compatibility」で「Modernizr!」をクリックする

「Sever Configuration」で「No, thanks」をクリックする

「Download!」をクリックする

jverrecchia-initializr-1.0.zipファイルがダウンロードされます

この手順では展開してからアップロードを行います。


2.セットアップ

jverrecchia-initializr-1.0.zipを展開すると、cssフォルダ、jsフォルダと、ファビコン、index.html、TODO.txtが格納されています。

TODO.txtを開くと、修正すべき箇所が記載されています。

作成するページが英語ではない場合、htmlタグのlang属性を「en」から使用する言語に変更してください。

→日本語なので「ja」に修正

<!--[if lt IE 7 ]> <html lang="ja" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="ja" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="ja" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="ja" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]-->



title, meta description, meta authorに適切なデータを記載してください。

→お好みで設定

<meta name="description" content="blog,php,mysql,CodeIgniter,html5">
<meta name="author" content="fk2000">



ファビコンを変更してください。

→toypark.inのファビコンを使用するのでそのまま
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

※同梱のファビコンファイルは削除



index.htmlから、script.jsでのjQueryテストおよび、「TODO.txt」へのリンクを削除してください。

→<script src="js/script.js"></script>の行を行ごと削除

→「TODO.txt」へのリンクを含む<p>タグはインフォメーションとして利用できるのでタグ内だけを削除
<p class="info"></p>


サーバーで404の設定をしているならば、404.htmlを用意してください。

→toypark.inの404.htmlを使用するので特に用意しない


3.サーバへの配置

サーバに配置する前に、viewsに格納したindexファイルから、cssフォルダ、jsフォルダを参照するためには、
CodeIgniterのカスタマイズが必要になります。

CodeIgniterのviewから CSS/画像/Java Script を分離する
http://d.hatena.ne.jp/hidde/20081118/1226977364


CodeIgniterのインストールディレクトリ(systemフォルダがある場所)にcssフォルダとjsフォルダ(中にlibsフォルダ)を作成する

作成したフォルダにそれぞれ、style.css、dd_belatedpng.js、jquery-1.4.4.min.js、modernizr-1.6.min.jsを格納する

※jsフォルダのscript.jsはjQueryがロードされるか確認するためのテスト用のため不要です。


system/application/config/autoload.phpを編集する


$autoload['helper'] = array();
   ↓
$autoload['helper'] = array('url', 'file');

※$config['base_url'] の内容を base_url() で呼び出せるようになる


cssファイルを指定する場合、下記のように記述できる

<link href="<?=base_url();?>css/default.css" type="text/css" rel="stylesheet" />

※画像やJava Scriptも同様に参照できるようになります


そして、index.htmlをindex.phpとして、system/application/viewsに格納する

カスタマイズのつづきは次回で。。

2011年2月17日木曜日

toypark.inでCodeIgniterを利用する

◆ toypark.inとは


比較的かんたんで、500MBの容量、CGI、PHP、MySQLが使用できる無料サーバスペースを見つけました。

「トイパーク」とはインターネット上のスペースを提供するサービスです。
ご登録されるとお客様がお作りになったホームページを公開するためのスペースを提供いたします。

◆ CodeIgniterとは


こちらもかんたんに利用でき、DBなしでもPHPのMVC開発ができることでPHPerの中ではブームとなっています。

CodeIgniter はどんな人に向いていますか?CodeIgniterは、こんな人にぴったりです:
  • 省スペースのフレームワークが欲しい人。
  • 圧倒的なパフォーマンスを求める人。
  • PHPのバージョンや環境設定の違う一般的なホスティング(レンタルサーバ)で幅広く動作するものが欲しい人。
  • ほとんど設定がいらないフレームワークを希望する人。
  • コマンドラインを使う必要がないフレームワークを好む人。
  • 決められたコーディングルールに厳格に従う必要がないフレームワークが欲しい人。
  • PEARのような大規模な一枚岩のライブラリには興味がない人。
  • テンプレート言語を習得しなければならないのが嫌な人(必要な場合だけにオプションでテンプレートパーサが利用できるようなものは除く)。
  • 複雑なものを避け、シンプルな解決策を好む人。
  • わかりやすく詳細なドキュメントが欲しい人。



◆ 準備

1.toypark.inでアカウントを作成する。

2.ci-ja-all-in-one-1.7.3-1.zipをダウンロード
 ※ダウンロードはこちらから

3.ci-ja-all-in-one-1.7.3-1.zip展開

4.ci-ja-all-in-one-1.7.3-1フォルダに格納されている「user_guide」」と「user_guide_ja」を削除する

ci-ja-all-in-one-1.7.3-1フォルダをciにリネームして、圧縮する

5.圧縮されたci.zipをtoypark.inにアップロード(アップロードしてから展開でも、自動展開でも可。)

6.正しく展開されたことを確認して、ciフォルダの中身を全てroot(/)に移動する
(base_urlにciディレクトリを含める場合は移動を省略してもかまいません)

7.system/application/config/config.phpのbase_urlを変更する

例)
//$config['base_url'] = "http://example.com/";
$config['base_url'] = "http://www.toypark.in/";

※保存する際に文字コード注意!(utf-8、CRLFで保存する)



◆ 取り急ぎ完成


base_urlへアクセスすると、「CodeIgniterへようこそ!」画面が表示される



次エントリーでは、CodeIgniterのテンプレートhtmlにhtml5を採用したり、MySQLとの連携を予定しています。



http://www.toypark.in/

http://codeigniter.com/

http://fk2000.toypark.in/sample/welcome/

2011年2月3日木曜日

5秒でわかる性格診断アプリを作った


Facebookアプリとして、5秒でわかる性格診断アプリというのを作成した。


5秒でわかる性格診断アプリ


このアプリの苦労した点は、9つの画像をクリックして判定させようとしたり、5秒で画像を見れなくする機能を考えたりしたこと。だけど結局実装せずにシンプルなアプリとした。


あまりアプリ側で創意工夫しようとしても、元ネタ(※1)が利用者に考えてもらう形の診断内容ではあるので、プログラム側がガチャガチャしてしまうと陳腐になってしまうおそれがあると感じた。


ただ、5秒のさじ加減をユーザにゆだねるのは少しユーザフレンドリーじゃないのではと思った。


これで診断系アプリは3つそろったので、方向性を変えたいと思う。


(※1)元ネタはこちら→5秒でわかる世界で最も正確な性格テストは、意外と当たっている


ちなみにアプリはこちらでも紹介いただきた→5秒でわかる世界で最も正確な性格テストは、意外と当たっている がFacebookアプリにて登場!




HNのファンページにURLを設定した




2000年にYahooで作り始めたHNのファンページにURLを設定しました。

これにより、リアル活動とネット活動の接続ポイントができた気がします。

http://www.facebook.com/fk20000

0が一個少ないURLはFacebookの個人ページにジャンプするので、よろしくです。
http://www.facebook.com/fk2000

これで友達数が5000を超えても、スムーズに誘導ができるw

2011年2月1日火曜日

あにまる占いをつくった


Facebookアプリとして、あにまる占いアプリというのを作成した。


あにまる占い

このアプリケーションはプロフィールに登録された生年月日を元にどうぶつを判定するので、生年月日をデータベースに登録するかで悩んだ。やっぱり非公開の人もいるわけで、データベースは通常管理者しか見ないけど、保持すると責任が発生するわけで。。

診断ボタンを押すたびに、どうぶつ判定のロジックを通せばデータベース側にはその結果を保持するだけでいいように組んだので、この点は万全であろう。

前回よりも進化させたいと思ったのが、どうぶつ判定の正確さと、デザイン。
テンプレートのコピペでしかないけど、全作の右脳左脳に比べれば見違えたでしょう。
判定の正確さはすでに枯れ切った動物占いの焼き直しなので、崩れる心配はなし。
ただ、いろいろ調べると占いって奥が深いんだなぁって思った。

このペースで週に1個はアプリを出していきたい。

ちょっと今回は前回のようにファンページの25いいねがもらえない気配。。

あにまる占いファンページ

やっぱりものめずらしさだけではスタートアップは支えても、リピーターを呼び込む仕組みが無いと維持はできないんだな。

来週は少し趣向をこらそう。