AmebloにGoogle+1ボタンを設置してみたよ

Google+1 が発表されましたね。

Google+1は、Google版のユーザー評価機能です。（Facebookにおける「いいね！」ボタンのようなもの）

ただ、現時点では英語版の検索にしか影響を与えないこと、ソーシャル系が弱いGoogleなので、このままうまく拡大路線に乗るか不安要素が大きいのですがね。

そんなことを気にしつつ、Google+1ボタンをアメブロにも貼り付けてみました。

アメブロにGoogle+1ボタンを設置する

設置方法は、「Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ」など過去に何度か紹介したjQueryによる設置方法に追加するだけです。

以下のソースをフリープラグインに書くだけで設置可能です。

フリープラグインの文字数制限に引っかかる場合は、「AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ」も参考にしてみてください。

<script>
$(document).ready(function(){

    $.getScript("http://apis.google.com/js/plusone.js",function(){
        {lang: 'ja'}
    });
    $.getScript("http://platform.twitter.com/widgets.js");

    var page_url = location.href;
    if (page_url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
        var entries = $(".newentrytitle a");
        var classname = ".updatetime";
        var flg = 0;
    } else {
        var entries = $(".foot a:contains('記事URL')");
        var classname = "div.entry .theme";
        var flg = 1;
    }
    for (i = 0; i < entries.length; i++) {
        var url = entries[i];
        if (flg == 0) {
            title = entries.eq(i).text();
        } else {
            title = $("div.entry h3.title").eq(i).text();
        }
// はてなブックマークボタン用
        var hatena_btn = '<a href="http://b.hatena.ne.jp/entry/' + url + '" class="hatena-bookmark-button" data-hatena-bookmark-title="' + title + '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><sc' + 'ript type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></sc' + 'ript>';
// Twitter投稿ボタン用
        var twitter_btn = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="YourTwitterAccount" data-text="' + title + ' | Your Blog Title" data-url="' + url + '">Tweet</a>';
// Google+1ボタン用
        var gplus_btn = '<div class="g-plusone" size="medium" data-size="medium" data-count="true" href=' + url + '></div>';

        $(classname).eq(i).append('&nbsp;&nbsp;&nbsp;' + hatena_btn + '&nbsp;' + twitter_btn + gplus_btn);
    }
});
</script>

はてなブックマークボタンと、Twitterへ投稿ボタンもあわせて設置するようになっているため、不要であれば該当箇所を削除してください。

Google+1ボタンを設置するための工夫

Google+1ボタンを設置するためのソースはウェブサイト上から取得もできるのですが、そのままのソースを貼り付けてもうまく動作しませんでした。

お決まりのようにFireFoxだとうまく動くのですが、IEでは動作しません。

元々貼り付けるソースコードがHTML5用になっているためなのか、jQueryからロードしているためそのタイミングの問題なのか不明ですが、悩んでたら下記のエントリを見つけました。

Google +1 ボタンを設置してみました + Tips を少し＠ WebOS Goodies

ってことで、元々のHTMLタグをdivタグに変更。

サイズが反映されないということなので（実際にそうでしたが）、size属性を追加しました。

var gplus_btn = '<div class="g-plusone" size="medium" data-size="medium" data-count="true" href=' + url + '></div>';

JavaScriptの呼び出しは、jQueryの$.getScriptを利用し、ロードが終わったら呼び出される属性をセットしておきます。

$.getScript("http://apis.google.com/js/plusone.js",function(){
    {lang: 'ja'}
});

jQueryで呼び出しているため（アメブロだとこの方法でしか設置する方法はないかと思うのですが）、ページが呼び出し終わってからボタンが追加されるので、だいぶ遅れて表示されます。

Google CodeにホストしていたJavaScriptをBitbucketに移行する

Google+1ボタンがIEだと折り返して表示されることへの対処（暫定版）

Google+を使ってみて感じた疑問

アメブロで「続きを読む」を実装する方法

アメブロでSyntaxHighlighterを使ってみる

Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ

AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ

Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ

Amebaで任意の位置に自動でタグを挿入するブログパーツ書いたよ

[jQuery] 外部JavaScriptファイル読込みに関する考察

規模の大きなプロジェクト運営で気をつけたいこと

やっと担当していたプロジェクトが終了し一段落したのですが、久しぶりに大規模なプロジェクトに関わってその中で感じた気をつけたいことや学んだことをまとめてみたいと思います。

エンジニアとしてではなくプロジェクトマネージャとして携わったので、プロジェクト遂行や運営よりの話が中心となっています。

一日の遅れぐらいいいかという感覚で陥るワナ

プロジェクトの規模が大きくなると、スタート時にはそれから行われる膨大なタスクにめまいがしたりもするのですが、比較的期間が長いということもあり、時間の使い方が大雑把になりがちになったりします。

火を噴くプロジェクトのよくありがちなパターンとして、帳尻をあとで合わせようとして無理がたたるというものはありますが、やはり最初から全力投球していると体が持たないこともあったり、そもそもプロジェクトの最初は要件やら体制やらがあまり安定しない時期だったりもしますので、比較的スローにスタートを切るというパターンが多いのではないでしょうか。

この辺を後で帳尻を合わせられるとか、まだ曖昧な部分が多いから今本格的に始めるのはスケジュールの手戻りになったり品質に影響が、ということで一日一日を遅らせていくということがあります。

しかし、その一日の遅れがプロジェクト全体で大きく影響を与えてきたりもします。

自分にとって一日の遅れぐらいいいや、という感覚は他人から見てもそうであって、その間に挟む関係者が多くなればなるほど、自分が遅らせた一日というのが数週間の遅れをもたらしたりもします。

特に物を買ったり、人を手配するといった決裁承認であったり、設計作業をしてそれをプログラマに理解してもらうというような作業は多くの人が絡んだりもするため、その一日の遅れが思わぬ遅れを引きを起すということになったりもします。

自分にとって都合をあわせる一日の遅れは、他人にとってもまた同じ感覚で遅れていくということを覚えておいた方がよいかもしれません。

スタートまでに予想以上にかかる時間

同じく時間感覚的なものですが、プロジェクト内で何かをスタートするまでには自分が予想していたものよりも多くの時間がかかることがあります。

プロジェクトの開始までに必要な資料を作ったり関係者にネゴをとったり、開発を始めるまでに開発環境を整備したり、新米エンジニアが参画する場合はその教育にも多くの時間がとられます。

この資料が、この物がそろえばすぐにタスクが開始されるというわけでもなく、承認が必要だったりセットアップが必要だったりと、その前準備をうまく行っていないと、スケジュール上の開始期限がきてもそこから準備を始めるというようなことになったりして、思わぬ工数を取られる結果となるわけです。

しかし、あまりその準備期間というのはスケジュール表に反映されてなかったりもします。

あたかも、その開始期限から求めている100%のパフォーマンスでタスクが進行していくかのように思っていると、大きな落とし穴となるかもしれません。

最初から全ての環境がそろっていたり、参画するメンバーが全てベテランなメンバーということはほとんど無いでしょう。

それぞれのタスクをうまくスタートを切れるように、体制やタスク管理をコントロールしておく必要があります。

リソースを均一化しておくことが大事

多くの人が関わってくるプロジェクトではそれぞれに与えられる役割も細分化されてきます。

しかし、タスクには前後関係があり、そのタスクを担当する人たちもまた仕事に順序が生まれてきます。

そこで、担当者が時間をもてあますことが無いように仕事をうまく分配し、リソースを均一化するようにタスク管理したり、役割を分配することも大事になってきます。

設計工程が終わらないと開発が始められないというように、上流工程を担当するエンジニアの数が少なくなっていれば設計中にプログラマは時間をもてあますことになったりもしますし、テスト工程ではシステムが完成しないと開始できないため、テスターは成果物を待つ時間が長くなるでしょう。

役割を複数に分けたり、タスクを並行して動かすことでそのタスクのボトルネックを取り払う工夫が必要になってきますし、体制面でもそういった事態を避けるためにバランスの取れた配置が必要になってきます。

ウォーターフォール型で進めるプロジェクトは圧倒的に上流工程がボトルネックになりますから、その品質によって下流工程の出来が変わってきます。

下流工程の問題は、上流工程ですでに問題が内在していることが多く、そこに多くの時間が割けなかったり体制面で上流工程のタスク量が多くなってパンクしているというような状態は避けなくてはなりません。

せっかく与えられたリソースですから役割の階層構造にも注目し、その中でうまくやりくり出来るための戦略を考慮しておく必要があります。

話すことに時間を割く

異なる立場の人が多く参画するプロジェクトでは、それぞれの思惑が発生します。

顧客を始め、開発チームを取り仕切るメンバーや保守・運用に携わるメンバーもいたりします。

そしてそれぞれの立場に沿った意見を押し通そうとしますので、多くのすれ違いが生じることがあります。

それを無視して自分の意見だけを押し通してプロジェクトを進めようとすると、メンバー間の亀裂が生まれたりその方面で問題が勃発して想定外の対応に迫られることにもなったりします。

これを解決するためには、それぞれの担当者と話すことに多くの時間を割かなくてはなりません。

メールだけでは細部のニュアンスが汲み取れなかったり、情報量が圧倒的に不足したりもします。

定例会議の場や、個別に担当者を呼び寄せて双方が納得するまで話し合いをしておく必要があるでしょう。

これは非常に面倒で気を使う作業にはなりますが、プロジェクトを円滑に進めるためには一番大事なことかもしれません。

そして、プロマネの立場としてはどこかのレイヤの意見に偏るということなく、それぞれの意見を集約した上で納得してもらえる答え（もしくは引き下がってもらえるための納得できる材料）を用意しなくてはなりません。

タスクの進捗や課題だけに気を取られて、会議の話題がそれだけに集中するのではなく、それぞれの立場の意見というものをしっかり集約して問題解決を図る必要が出てきます。

燃えつきを防止する

若干今の自分がそんな感じではあったりするのですが、規模が大きくなればなるほどこの兆候は顕著にでてきたりします。

開放感からか、しばらく仕事が手に付かなかったり緊張感をもてなくなったりもします。

まぁ、プロジェクトも無事に終わったんだからしばらくはいいんじゃないの、って意見もあるかもしれませんがプロジェクト自体は完了してからがスタートという意味もあったりするわけで、そのような状態だとその後運用フェーズで支障をきたす可能性もあります。

あまりにプロジェクト期間中の仕事がきつかった場合、その落差が激しくなるためこのような状態のメンバーが多く出てくるかもしれません。

やはり、納期が厳しいとは言えある一定の余裕を持ってプロジェクトは着地を迎えたいものです。

その余裕が運用開始後にスムーズな運営に繋がるでしょうし、メンバーの能力やモチベーションへ大きく左右してきます。

プロジェクトを完了させるということだけに注目せず、その後の長い運用フェーズにも目を向けてプロジェクトを遂行していく必要があると感じます。

便利屋がいた方がプロジェクトは捗る

クラウド時代で高められる情シスの価値

システム運用後のトラブルはリスクを誇張させる

初めからやっておけばよかったとあとで思うシステム構築に関する10のこと

サービス構築の実行コストは構築側より提案側のほうが上回ってるんじゃないかって話

「イエス」から始める

形骸化しやすい運用プロセスとその設計

内製化することの幻想と現実

システム屋が非システム屋と話すときに留意すること

平成22年春季プロジェクトマネージャ試験に合格しました

JavaScriptからPHPの関数呼び出し

javascriptからphpの関数呼び出し＠楽天みんなで解決！Ｑ＆Ａ

こういうのを見つけて、PHP側で処理をまとめてそれを呼び出すのってよくあったりしますが、PHP関数自体を直接呼び出すのってニーズってあんのかな？とか思いつつもちょっと面白そうだったので書いてみることに。

JavaScriptからPHPの関数と引数を渡す

まずは、クライアント側のJavaScript。

直接書くと色々面倒なのでjQueryでAjax使ってます。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script>
$(document).ready(function(){
    $("#btn").click(function() {
        var method = $(":input").serializeArray();
        $.ajax({
            dataType: "json",
            data: method,
            url: "http://www.example.com/do.php",
            success: function(data) {
                $.each(data, function(i,item){
                    $("#result").append(item);
                });
            }
         });
    });
});
</script>
</head>
<body>
関数名<input type="text" name="method" size="30" /><br />
引数　 <input type="text" name="args" size="30" />
<input type="button" value="送信" id="btn" />
<br />
<b>結果</b><span id="result"></span>
</body>
</html>

jQueryのソースはGoogleにホストとしているものを呼び出しています。

関数名と引数名はあえて分けてますが、一緒にしてコードそのものを書いてしまってもよいかもしれません。

serializeArray()によって、テキストボックスに入力された値をJSON形式に変換し、$.ajaxによってdo.phpにそのデータを渡しています。

do.phpから渡された結果は、結果欄に表示するという仕様です。

受け渡し際のクエリは下記のような感じで飛んでいきます。

JavaScriptから渡された値を元にPHPで関数を実行する

次は、PHP側の処理。

受け取ったリクエストを元に関数と引数を結合してevalで実行するような仕様です。

<?php

if (!empty($_GET['method'])) {
    $method = $_GET['method'];
    $args   = empty($_GET['args']) ? "" : $_GET['args'];

    $const = "\$val = $method($args);";

    $flg = @eval($const);
} else {
    $flg = FALSE;
}

if ($flg === FALSE) {
    echo "syntax error";
} else {
    echo json_encode($val);
}

実行結果は、jQuery側で処理しやすいようにJSON形式に変換して戻してます。

後述しますが、関数の仕様によっては上記の仕様でうまく結果が返らない場合もあります。