not good but great

プログラミング、アート、映画・本の感想について書きます。

Googleカレンダー追加ボタンの作り方

f:id:naoyashiga:20130708013222p:plain

リクナビからGoogle Calendar™に登録」を作ったときにGoogleカレンダーのボタンを設置した。それの作り方を書く。

Github
https://github.com/naoyashiga/Google_Calendar_From_Rikunavi

URLパラメーターの定義

パラメーター 内容
action TEMPLATEで固定
text 予定のタイトル
details 予定の詳細
location 予定の場所
dates 予定の日付
sprop わかりませんw

タイトル

ページタイトルをそのまま活用する。短縮のために「株式会社」を「㈱」に変更した。

text = $("title").text().split("リクナビ2015")[0].replace("株式会社","㈱")+"【エントリー締切】";

予定の詳細

リクナビに載っているタグを詳細に加えることにした。タグは画像である。
(ex)「交通費」「理系歓迎」
それらの語句を取得するために、画像のaltタグから文字列を引っ張ってくる。

//概要
var desc;
//インターンシップの実施件数
var len = $(".cpy_intbox_main02").length;

for(var i = 0;i < len;i++){
    //途中省略
    desc = $(".cpy_intbox_main02 .rnhn_h3").eq(i).text();
    //途中省略

    //タグを説明文に追加
    $(".cpy_intbox_main02 tbody").eq(i).find("img").each(function(){
        desc += "【" + $(this).attr("alt") + "】";
    });

    desc += "\n";

    //カウンターを初期化
    cnt = 0;
    $(".cpy_intbox_main02 tbody").eq(i).find("td").each(function(){
        cnt++;
        //開始日、実施日数だけ追加
        if(cnt > 3){
            desc += $(this).text() + "\n";
        }
    });

出力結果 (ex)サイバーエージェント

TechnologyCAMP【理系歓迎】【報酬】【交通費】
・開始日(場所):8/5、8/21、9/4(東京)、8/19(大阪)
・実施日数:1週間程度
//上記のコードには載っていないが、後にwindow.locationをdescに追加している
 http://job.rikunabi.com/2015/company/internship/r925010098/

予定の日付

日付の指定は以下のようにする。

//2013年7月7日18:00~2013年7月10日9:00~
dates =20130707T180000Z/20130710T090000Z

今回は終日開催という指定にしたかった。調べると、開始日の翌日を指定すればいいことがわかった。細かい時間設定はする必要は無く、日付のみでOK。

//2013年7月7日終日開催
dates=20130707/20130708

日付の取得、計算のコードは省略する。今回は閏年の計算がめんどくさいのでやっていない。ニシムクサムライの計算だけやった。詳しくはgitへ。

URLの生成

encodeURIComponentを使い、URI形式にエンコードする。

url = 'http://www.google.com/calendar/event?' +
    'action='   + action +
    '&text='    + encodeURIComponent(text)   +
    '&details=' + encodeURIComponent(desc) + ' ' + window.location +
    '&location='+ encodeURIComponent(loc)    +
    '&dates='   + dates +
    '&trp=true' +
    '&sprop=website:' + window.location +
    '&sprop=name:rikunavi';

画像リンクの生成

画像はGoogleが公開してるものを使うことにした。urlをimgタグのsrcにセットする。

//Googleカレンダー追加ボタンを設置
    $(".cpy_intbox_main02 .rnhn_td").eq(i).append(
        $("<a>").attr({href:url,target:"_blank"}).append(
            $("<img>").attr("src","http://www.google.com/calendar/images/ext/gc_button2_ja.gif")
        )
    );

一番苦労したのは、欲しい情報をページを解析して、jqueryを駆使したことだった。