Toro_Unit

投稿者: Toro_Unit

  • WordCamp Tokyo 2011 に行って来ました。

    ブログを書くまでがWordCampということで、このままだといつまでもWordCampが終わらないので、ブログ書きます。

    まず、品川シーサイドに着くまでは良かったのですが、駅をでてから20分近く駅前をさまよいます。そんな中、半ば絶望の中Twitterを見ていたら

    @HissyNC
    Takuro Hishikawa     楽天～ #WCTokyohttp://t.co/quKgd9nf
    Nov 27 via Twitter for iPhoneFavoriteRetweetReply

    というTweetを発見し、何とか無事に到着。2コマ目のセッションからなんとか参加できました。

    2コマ目 WordPress プラグインを作って世界と交流しようぜ！はプラグイン作者に片足を突っ込んだばかりの自分には、ためになる話でした。
    とりあえず公式ディレクトリにあげたほうが、メンテナンスも楽だし、フォーラムとかでツッコミが入っていいよ。的なことがメインテーマだった気がします。みんなが怖がる英語も、ユーザーにはネイティブは少ないから、案外大丈夫とのこと。

    3コマはたけさんのセッション。
    別にword pressのプラグインとかでゴリゴリカスタマイズするような話ではなく、アイデアや発想で、こんなふうにもあんなふうにも使えるんだという話。
    とっけんの裏側はちょっとした衝撃。自分もまだ、WordPress＝ブログとしてしか使えてないなぁ。

    4コマ目 WordPress の現在とこれから
    2.7から始めた僕としては0.71とかホントになんじゃこりゃ。
    自分のブログを書くツールの開発が、こんなプロジェクトになるってのはある種のアメリカンドリームみたいですね。

    5コマ目 本当にあった WordPress テーマにまつわる怖い話
    いや、Google八分は怖い。((((；゜Д゜)))
    プラグインとかテーマを信用しすぎるなっていうこと。WordPressにもいくつかセキュリティ関係のプラグイン有るけれど、普通のセキュリティソフトと一緒で、必ずしも100％ではない。

    6コマ目 実践！オリジナルテーマで作る、スマホサイト＆マルチスクリーンサイト – たにぐち　まこと

    モバイルファーストって実は初耳でした。確かに。思うことは結構ありました。
    しかしモバイルの現場は相変わらず厳しいですね。やっぱりモバイルは画面いっぱいで見せるのか基本だから画面のサイズとかだけても考慮すべきことはたくさんあります。
    とりあえずieは消えろ。と切に願う今日この頃です。

    7コマ目 クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考
    MVCの考え方をテーマにも導入しようという話。
    MVCって概念は知っているけど、実際にどうすればいいかよくわからない自分にとっては有り難い話。
    WordPressのテーマを例に話をしていたけれど、他の開発でも活用できる話です。

    8コマ目 WordCamp Tokyo 2011 公式サイトが出来るまで
    CSS一枚で良くぞ・・・・・。苦労が忍ばれます。

    最後はライトニングトーク
    WordPressと棒ブログサービスの違いを合コンにたとえてみたり、勢いでWordPressの良さを叫んでいたり、笑わせて頂きました。

    まぁその後は懇親会です。

    相変わらず、人見知り全開でしたが、主にTwitter等で絡みがある人数人とお話させて頂く事ができました。いや、お酒がないとしんどいですね。もう少しアクティブになれると良いですね。勉強会とかもっと参加とかもしたいです。

    まあそんなこんなで色々楽しい一日でした。
    改めてスタッフの皆さんありがとうございました。

  • 自分用ブックマークサイトを作ろう。

    WEBデザインの参考になるようなサイトを集めたサイトが最近たくさんありますよね。
    僕もよくお世話になっています。
    どのサイトも個性があったりで面白かったり。

    などetc…

    でも、それとは別に、自分のためのブックマークサイトを持ったほうがいいと思います。昔はよくあれもこれもはてなブックマークに入れていたのですが、探し出すのに一苦労だったわけです。だいたい、記事の内容ではてブしたサイトはキーワードで検索できるんですけど、ビジュアルが素敵なサイトとかは、全然探せないのです。

    というわけで、自分で作ってしまおうと思ったわけです。とりあえず作ったものはこちら:http://bm.torounit.com/
    というわけで、WordPressでブックマークサイト自作のチュートリアルです。

    自作するメリット

    • タグ・カテゴリなどが自分仕様にできる。
    • Press This(ブックマークレット)が使えて便利！
    • 自分の勉強になるかもしれない。
    • コードが書けて楽しい。
    • 自分も有名なWEBデザイナーになった気分。

    まぁ、とりあえず、Press Thisが使えるってのは便利だと思います。見てるページをそのままクリックだけで登録できるのはなかなか便利です。

    作り方

    とりあえず、Press Thisをすると、
    [html]
    <a href="http://hoge.com">ほげほげ</a>
    [/html]
    のような形で、ページのURLとタイトルが本文中に挿入されます。
    なので、それを正規表現で取り出して、カスタムフィールドに保存します。

    [php]
    function save_post_url($post_id){
    $postData = get_post($post_id);
    preg_match(‘/<a .*href=[\’"]+([^\’" ]+).*?>(.*)<\/a>/’,$postData->post_content,$match);

    save_post_meta($post_id,"site_url",$match[1]);
    save_post_meta($post_id,"site_title",$match[2]);
    }

    function save_post_meta($post_id,$data_key,$save_data){
    if ( "" == get_post_meta( $post_id, $data_key)) {
    add_post_meta( $post_id, $data_key, $save_data, true ) ;
    } else if ( $save_data != get_post_meta( $post_id, $data_key )) {
    update_post_meta( $post_id, $data_key, $save_data ) ;
    } else if ( "" == $save_data ) {
    delete_post_meta( $post_id,$data_key) ;
    }
    }
    add_action("save_post","save_post_url");
    [/php]

    これで、カスタムフィールドのsite_url,site_titleにそれぞれ、URLとページのタイトルが保存されました。

    次に出力部分です。サイトのスクリーンショットですが、WordPress.comのAPIでスクリーンショットがとれる奴があるので、有り難く使わせて頂きます。

    [php]
    $url = post_custom("site_url");
    if( $url ){
    echo "<img src=’http://s.wordpress.com/mshots/v1/".urlencode(clean_url($url))."?w=300&h=250′ alt=” />";
    }
    [/php]

    で、サイトのスクリーンショットが取得できます。これをループ内で実行すれば良い訳です。

    これで、デザインとかHTMLをちゃんと書いてあげれば、完成です。
    デフォルトテーマに書き込んでも良いと思います。でも、『俺も有名なあの人達みたいに・・・』的な気分を味わいたいならちゃんとテーマを作った方がいいです。

    あと、検索フォームを設置するなら、タグやカテゴリーで検索できると使い勝手が良いので、Search Everything
    を導入しておくと良いと思います。

    これでみんなもあの人達みたいに・・・！って訳にはそう簡単にいかないわけですが、少なくとも自分の気になるサイトをアーカイブしていけるので、自分の情報の整理くらいには活用してもらえるのではないでしょうか？

    もし作ってみた人いたら、絡んでくれると嬉しいです。

  • Custom Post Type Permalinks 0.4.5をリリースしました。

    Custom Post Type Permalinks 0.4.5をリリースしました。
    WordPress3.3に対応しました。
    アーカイブ周りのバグを修正しました。

    近々公式ディレクトリに登録予定です。

    最新情報はCustom Post Type Permalinksをご覧下さい。

  • Custom Post Type Permalinks 0.3をリリースしました。

    先日リリースした、カスタム投稿タイプのパーマリンクを個別に設定するプラグイン、Custom Post Type Permalinksをアップデートしました。

    2011-11-14追記：最新版はこちらCustom Post Type Permalinks

    スラッグに対応させました。

    custom-post-type-permalinks.0.3

    また、現在、WordPress3.3beta2にて、カスタム投稿のアーカイブ“/post_type/”がページが見つかりませんになってしまいます。WordPress3.2では問題なく動作してます。

    またぼちぼちアップデートしていきます。

  • カスタム投稿タイプのパーマリンクを個別に設定するプラグイン

    カスタム投稿タイプのパーマリンクをそれぞれ設定するプラグインを作りました。
    2011-11-14追記：最新版はこちらCustom Post Type Permalinks

    Custom Post Type Permalinks 0.2.5

    2011/11/02.アーカイブのURL追加にバグがあったので修正。

    機能

    • 各投稿タイプのパーマリンクを設定
    • 各投稿タイプごとのアーカイブのURL(“exsample.org/posttype/”),日付によるアーカイブのURL(“exsample.org/posttype/2011/11/02”的な)を追加
    • wp_get_archives()のパラメータに“post_type=投稿タイプ”の追加
    • カスタム分類のパーマリンクを“/投稿タイプ/カスタム分類名/カスタム分類”に変更

    があります。

    パーマリンクの変更は、サイドバーの設定に、『カスタム投稿タイプのパーマリンク』というのが追加されるので、そこから設定します。

    一応、Custom Post Type UIでも、プラグインやfunctions.phpでカスタム投稿タイプを追加しても、動作しています。

    多言語対応等は今後またそのうち対応します。。。。。

    現在カスタムスラッグには対応していません。すみません。。。

    バグもまだあるかもしれませんが、もしあったら@Toro_Unitまでお知らせいただけるとありがたいです。

  • デザインする意味ってなんだろう。ノンデザイナーが考えてみた。

    僕の本業は、HTML、CSS、JavaScriptと言ったフロントエンドのコーディング・プログラミング、そしてCMSカスタマイズ、たまにバックエンドとかやったりと、自らデザインという部分に関わることってのはそこまで多くもないのですが、そんな立場から『WEBデザイン』というものについて考えていることをつらつらと。

    デザインとはなんだろう？

    デザインとは
    goo辞書(http://dictionary.goo.ne.jp/leaf/jn2/151326/m0u/デザイン/)によると、

    1. 建築・工業製品・服飾・商業美術などの分野で、実用面などを考慮して造形作品を意匠すること。「都市を―する」「制服を―する」「インテリア―」
    2. 図案や模様を考案すること。また、そのもの。「家具に―を施す」「商標を―する」
    3. 目的をもって具体的に立案・設計すること。「快適な生活を―する」

    英辞郎によると(http://eow.alc.co.jp/design/)設計だとか、計画だとか、図柄等といった意味らしいです。

    僕はプログラムとか書いたりとかが好きな人間で、センスのあるデザインだとか、グラフィックを描いたりだとかは出来ない人間です。ただ、WEBアートではなく、WEBデザインという以上、やはり、“人が使う”ということが、大前提になっているのは間違いないと思います。

    では、WEBサイトをユーザーは何のために使っているのか？ということですが、基本的にはユーザーは情報を得ることを目的にWEBサイトをしているんだと思います。

    つまり、WEBデザインの目的は、ユーザーのために、情報を最適化することなんじゃないかなぁと考えるわけです。

    情報の最適化のために

    情報の最適化のためなら、ちゃんと文字が読み取れるようなサイトでもいいんじゃないか？CSSとか別に要らないんじゃないの？とか思うこともあるかと思うんですが、それはちょっと違うのかなと思います。

    情報の最適化とはどういうことかというと、要は、伝えたいことがちゃんと伝わる状態のことです。
    ただ、コレが結構大変なことだと思います。

    人と面と向かって話すときと、資料だけで伝えるのは明らかに後者の方が伝わりにくいものだと思います。
    ただ、WEBサイトを見ているユーザーに面と向かって話すわけにはいきませんし。

    それに、言語というのはそこまで完璧なものじゃないと思うのです。
    『百聞は一見に如かず』ということがあるように、世の中、言語で100%説明がつくものって以外に少ないと思います。

    僕は現在長野県の松本市ってところに住んでいるのですが、「いいところだよー」だとか、「山に囲まれているよ」だとか「空が綺麗だよ」だとかは友達には言いますが、それで伝えるのはやっぱり難しいので、写真を見せたりだとかします。旅行に行ったときとかも写真を見せたりするのもそういうことですよね。

    そういった言語化しづらいイメージみたいなものを伝えるために、空とか山の写真を使ったり、そういう色を選んだりすることも情報の最適化の上ではとても必要なことだと思います。

    つまりデザインをする意味って何でしょう

    なんかだらだらと書いてしまいましたが、グラフィックやタイポグラフィは、文字そのものが持つ情報だけでは、不完全な情報を伝えるためのもの。ユーザーが画面の向こうに居る、コンテンツの作り手（クライアントとか）の顔とか表情とか想いとか言い方みたいなものを伝えるためにそれは存在するのだと思います。

    それらや文字による情報を上手に活用することで情報の最適化を達成するのが、デザインの意味ではないかと思います。

    そんな訳で、デザインというものも大事なんだと、思う今日この頃です。こういう目線ってやっぱり、直接デザインにかかわらない人でも必要だとは思うし、僕みたいなHTML・CSSコーダー上がりのフロントエンドな人はjQueryだとか、HTML5だとかで、そういうデザイン的な素養を問われる場面も増えている様な気もしますしね。

  • WordPressで投稿の画像を取得

    WordPressで投稿の画像だけを表示することはアーカイブページやトップページでよくあると思います。

    たとえばこんな感じ

    なので、それ用の関数をつくりました。
    投稿サムネイルがある場合はそれを、ない場合は記事のギャラリーに入っている一番最初の画像を表示しています。

    [php]
    function print_post_image($size = ‘thumbnail’){
    if ( has_post_thumbnail() ) {
    the_post_thumbnail($size);
    } else {
    $attachments = get_children(array(
    ‘post_parent’ => get_the_ID(),
    ‘post_type’ => ‘attachment’,
    ‘post_mime_type’ => ‘image’,
    ‘order’ => ‘DESC’
    ));

    if(!empty($attachments)){

    $img = array_shift($attachments);
    echo wp_get_attachment_image($img->ID ,$size);
    }
    }
    }
    [/php]

    the_excerpt等と一緒に使うと結構楽しいかもしれません。

  • サイトをリニューアルしました。

    リニューアルしました。まだ変更とか有るとは思いますが、随時変更していこうと思います。
    ついでにWordPressをマルチサイトにしました。

    新しいToro-Unitをよろしくお願いします。

  • WordPressでサブページのナビゲーション

    企業サイト等を作るとき、サブページにナビゲーションに用意することって結構あると思います。サイドバーあたりに。

    たとえば
    [html]
    <nav class="sideNav">
    <h2><a href="#">会社情報</a></h2>
    <ul>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">事業内容</a></li>
    <li><a href="#">社長挨拶</a></li>
    </ul>
    </nav>
    [/html]
    みたいな感じの。

    それのWordPressでの実装です。
    [php]
    <nav class="sideNav">
    <?php
    if(is_page()){
    $rootId = array_pop(get_post_ancestors( $id ));
    if(!$rootId){
    $rootId = $id;
    }
    ?>
    <h2><a href="<?php get_permalink($rootId);?>"><?php echo get_the_title($rootId);?></a></h2>
    <ul>
    <?php wp_list_pages("title_li=&child_of=$rootId" );?>
    </ul>

    <?php
    }else {
    ?>
    <h2><a href="/news">ニュース</a></h2>
    <ul>
    <?php wp_get_archives();?>
    </ul>

    <?php
    }
    ?>
    </nav>
    [/php]

    get_post_ancestors( $id )親ページのリストが配列で出るのですが、最後の要素が一番上の階層のページなので、それをarray_popで持って来ます。
    wp_list_pagesで取得したIDの子孫のページだけ吐き出すようにしています。

  • 猫つい。を作りました。

    猫つい。http://neko.torounit.com/
    Twitterに載っている猫の写真をひたすら集めて愛でるためのサイトです。まだアルファ版です。

    Nekostagramってありますよね。自分は猫がほんとに大好きで、結構ボケーッとしながらこのサイトを眺めていることが有るのですが、一つ大きな問題がありまして。
    それは、

    「Instagramに投稿できない」

    ということです。なにせ自分はiPhoneユーザーでは無いので、Instagramが使えないんですよね。Android対応はいつになることやら。picplzもいまいちよくわからなかったので、とりあえず、TwitterのSearch APIを使って、写真を集めようと思った次第です。

    #neko #猫 #cat 等のハッシュタグが付いているつぶやきを検索して、そこから写真を探しています。

    現時点で、

    に対応しています。Twitter公式のpic.twitter.comには現在対応していません。。。

    バグだらけだとは思いますので、
    とりあえず、アルファ版リリースということで。FireFox,Chorome,Operaの最新版には対応しております。

    ロゴもそのうちちゃんと作ります。IE8までは近日中に対応します。
    そのうちケータイ版とかスマートフォン版も作るかもしれません。

    僕の癒しに皆さんご協力ください。

  • WordPressで親ページの判定をするスクリプト

    WordPressでis_page()風味に使える、スクリプトを書きました。
    is_page()に加えて、そのページの親、更にその親要素に出現すればtureを返します。

    [php]
    function is_current_page($page = "") {
    if(is_page($page)){
    return true;
    }

    global $id;
    $parent = $id;

    do {
    $parent = get_post($parent)->post_parent;

    if(get_post($parent)->post_name == $page||get_post($parent)->ID == $page||get_post($parent)->post_title == $page){
    return true;
    }
    }
    while($parent > 0);

    return false;

    }
    [/php]

    子ページとかをよく使う情報量の多いサイトなんかはでは便利だと思います。

  • PEARのCache_Liteを使ってみた

    軽量キャッシュライブラリのCache_Liteの使い方です。

    [php]

    //ライブラリの読み込み
    include_once(‘Cache/Lite.php’);

    //設定
    define("CACHE_DIR","./tmp/");
    define("CACHE_TIME",300);//5分

    //キャッシュのID
    $id = ‘hoge’;
    $options = array(
    ‘cacheDir’ => CACHE_DIR,
    ‘lifeTime’ => CACHE_TIME
    );

    //インスタンス化
    $Cache_Lite = new Cache_Lite($options);

    if ($data = $Cache_Lite->get($id)) {
    //キャッシュが有効なときの処理
    //$dataに取得すべきデータが格納されている。

    } else {
    //キャッシュが無効、存在しないとき
    $url = "http://search.twitter.com/search.json?q=" . urlencode("ぬこ") . "&rpp=100&lang=ja";
    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $search = curl_exec($ch);
    curl_close($ch);

    $Cache_Lite->save($search,$id);//キャッシュを保存
    }
    }
    [/php]

    キャッシュを手動で消すには、キャッシュの保存されているディレクトリ、（この場合./tmp/）の中身を消すだけで大丈夫です。
    TwitterAPIとか回数制限も多いので、使いどころはたくさんあると思います。