ごめんなさい

ボチボチと仕事はやっていますが、ここ２年、どうもスキルアップに繋がらないですね～。
でもやってみたいことは一杯ありますよ

ネタはそこそこ溜まっているので、小出しにして行きましょう

Twitterでのつぶやきをブログに表示したい。それも一般のブログパーツを使わないで。そんな意味不明の思いから設定してみました。本音はブログパーツ大好きなんです。可愛いものや素晴らしい技術のもあるし、カスタマイズ出来るのも多い。でもね、自分の勉強のためですよ

☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆

まず、ぐぐってとても参考になったサイト
　PHP & JavaScript Room　Twitter関連のjQueryプラグイン
ここの「jQuery＋Twitter APIの簡単な例」
で、素晴らしいソースを発見しました。

順を追って説明してみます。
１．Twitter APIの扱い方
タイムラインを読み込むのは、たったこれだけです。

http://twitter.com/status/user_timeline/TwitterのID.json?count=表示件数&callback=?

callback=?は、他のサーバ（Twitterサーバ）を見に行く時のおまじないなので、ちゃんと設定しましょう。

直接CatProgramのTwitterデータ（JSON形式）を見てみましょう。→ここ
よく見ると、
　　”screen_name”:”Cat_Program”,
　　”verified”:false,
　　”location”:”Tokyo Japan”,・・・
こんな感じでデータが並んでいます。
もしTwitterのID（Cat_Program）を取り出したかったら、項目名は”screen_name”になるわけ。

今回のつぶやき表示に使う項目
・text　　つぶやきの内容
・created_at　投稿日時

viaはOAuth（認証）を通さないと取得できないので、無視しとこう。

２．jQueryの実際
PHP & JavaScript Roomさんのを手直ししてみました。

<script type="text/javascript">
$(function(){
 var tweeturl="http://twitter.com/status/user_timeline/TwitterーID.json?count=5&callback=?";
 $.getJSON(tweeturl, function(data){
  $.each(data, function(i, item){
   // URL,@,#がある場合はリンク設置
   var text = item.text
      .replace(/(https?:\/\/[-a-z0-9._~:\/?#@!$&\'()*+,;=%]+)/ig,'<a href="$1">$1</a>')
      .replace(/@+([_A-Za-z0-9-]+)/ig, '<a href="http://twitter.com/$1">@$1</a>')
      .replace(/#+([_A-Za-z0-9-]+)/ig, '<a href="http://search.twitter.com/search?q=$1">#$1</a>');

  // 日時編集
  var created_at =  item.created_at.split(" ");
  var post_date  = created_at[1] + " " + created_at[2] + ", "+ created_at[5] + " " + created_at[3];
  var date = new Date(post_date);
  date.setHours(date.getHours() + 9); // UTC→ JST (+9時間)
  var month  = date.getMonth() + 1; //月
  var day  = date.getDate();//日
  var hour = date.getHours(); //時
  var min = (date.getMinutes()<10)? "0"+date.getMinutes():date.getMinutes();//分　
  $("<li></li>")
      .addClass(i%2 ? "even" : "odd")
      .html(txt+'<p>'+month+"月"+ day + "日 "+hour+":"+min+'</p>')
      .appendTo("#tweet");
   });
  });
});
</script>

CSSは自分で好きなように。

<style type="text/css">
#tweet {
 margin:0; padding:0;
 list-style:none;
 border:1px solid #888;
 font-size:11px;
 width:15em;
}
#tweet li {
 margin:0; padding:.5em;
 list-style:none;
 background-color:#fff;
}
#tweet li.odd {
 background-color:#ddd;
}
#tweet li a {
 color:#0099cc;
}
</style>

あとは、HTML本体を。

<div>
  <ul id="tweet"></ul>
</div>

上の三つのソースを一つにくっつけて、WordPressウィジェットのテキストに記述してみましょう。
完成品は、このブロックのすぐ右隣にある「つぶやいています」ですよ。気づいてました？
表示されていない場合は見事にアクセス回数制限に引っかかった時なので、どうかお許しくださいです（おいおい

☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆

久しぶりにブログを更新しました。半年以上空いちゃった。投稿の仕方も忘れてしまったじゃないか！
「いいのか？これでいいのか？」と投稿のプレビューやりすぎて、Twitter APIのアクセス回数制限に引っかかったのだった（終）
そう、Twitter APIにはアクセス制限があるのだ。

そーんな時のこと考えて、jQueryのgetJSONにエラー処理を追加しようと思ったが・・・

純粋にそういう仕様がない！

ま、ここは過疎ブログなので、全く必要ないと素直に思ったのだった。
いや、jQuery1.5に薄く期待している（リリースされたが、仕様をまだ見ていない）

はてなのブックマークで上位に上がっていたので、とりあえず飛んでみました。Twitterで新機能の提供があったのですね。これは試してみなければ！

ということで、早速設置してみました(笑)　この記事の右上の部分です。
日本語で「ツイートする」。うーん、むしろ英語の方が格好イイかも知れないけど。

詳しくは、Twitterサイト内のツイートボタンのところを参照してください。
深く考えず、デフォルトの設定でも充分ですよ。

ちなみに今まではTwibAPIを使っていましたが、時間帯によっては？表示されないという状況。
なので、意図的にTweet数のカウンタを外していました。

今回はTwitterそのものが提供しているということで、安定性はあるかなーと期待しています。
何より設置方法が簡単。スクリプトを埋め込むだけという、ブログパーツ的な扱いも嬉しいです。

WordPressでは、page.phpなどの個別記事を表示しているphpソースに、ツイートボタンのページで表示されるスクリプトを直接貼り付けてください。それだけ（笑）

☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆

自前のフローティングウインドウ、それも最低限の機能しかない（笑）極めてシンプルなものを作ってみたので、次回に紹介したいと思います。

jQueryライブラリそのものは仕方ないとしても、他の人の作ったライブラリをなるべく使いたくないのですよ（特に仕事上では）
それに、そういったライブラリには、実際使わない機能が結構含まれていたりするので、jsファイルのロード時間の削減といった面を考えてみても、やっぱり自前になってしまうんですよね・・・それも極めてシンプル仕様ｗ

現在は、jQueryでエディタ（ちと特殊な文書作成エディタです）を仕事で作ってるんですが、脳がとても痛い毎日です。　

linoは、ブラウザ上に付箋を貼っちゃいます。プライベートはもちろん、全体公開やグループ公開もできるので、面白い使い方ができそう。

まずは、Cat Programの公開ボードで試してみてください。

こんな風に、公開用のボードはサイトに埋め込むこともできます。

使い方として、例えば・・・ブログのコメントを募ってみたり（ｦｨｦｨ
TOPページに貼って、「管理人からのお知らせ」的な使い方もできますよね。
・「コメント」だったら、ゲストさんの貼り付け可
・「お知らせ」だったら、ゲストさんの貼り付け不可
といった設定もできるので、用途に応じて使い分けができそうです。

☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆

とは言っても、まずは自分のTodoリストとして使うのが多いかなと。
とりあえず何でもいいから貼ってみましたよ。

ボード上にある「今日やること」の枠内に付箋をドラッグ＆ドロップすることで、ナニゲにプレッシャーを感じさせる仕様。

これはいいかも知れない・・・

ちょっと上級？な使い方としては、Googleカレンダーと連携をすること。
日付が付いた付箋を貼ると、Googleカレンダーのその日付にちゃんと表示されますよ。

まずは、linoで会員登録をしましょう（無料）。
すると「マイページ」が貰える（笑）ので、その右上の【設定】をクリックします。　

左側のメニューにある【カレンダー・RSS】をクリックします。

自分のGoogleカレンダーは、予め開いておいてくださいね。

【Googleカレンダーで購読】をクリックします。

linoの付箋を、GoogleカレンダーがRSS購読する、ってことになるわけですね。



Googleカレンダーの方でこう訊かれるので、
【はい】
と元気にお返事。


　


Googleカレンダーに友だちのカレンダーとして追加されました。
カレンダーの日付の下に、付箋の内容が出ています。
日付の無い付箋は、Googleカレンダー上には反映されないようですね。

まー欲を言えば、付箋に時間まで書き込みできたらいいのににゃぁ・・・
今後のバージョンアップに期待しましょう。

そんな「lino」は、こちらから。

☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆

今日は七夕だった！
曇り空なので、お星さまはきっと見えない・・・けど、願い事だけはちゃんとするのだ。
　もっとプログラミングが上手になりますように・・・

デフォルトでプロフィールが表示されるWordPressテーマならいいのですが、どこを探してもそれらしい枠すら見当たらないテーマもあります。そうなると、カスタマイズしなくちゃ！ですね。

WordPressのダッシュボードに、[ユーザー]→[あなたのプロフィール]で開く画面があります。

　
そこで自己紹介文を登録できるのですが、これをそのまま生かせないものか・・・。
　

☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆ ☆ﾟ･*:.｡. .｡.:*･☆･*:.｡. .｡.:*･゜☆

生かせます。そのためには、PHPで書かれたテーマを弄ります。
カスタマイズする前には、必ずバックアップしておきましょう。

ページのどこに追加するか？を考える

サイドバーだったらsidebar.php、ヘッダーだったらheader.php、TOPページの中心(笑)だったら、index.phpとかhome.phpとかそれなりのphpソースを見つけ出します。
とりあえず今回は、最も分かり易いサイドバー（sidebar.php）の一番上に入れてみます。

たったこの一行で自己紹介表示

[外観]→[テーマ編集]→右側でsidebar.phpを選んだあと、上の方に魔法の文字を入れてみます。　

<?php the_author_meta('description'); ?>

保存してTOPページを表示してみましょう。

うおぁ・・・文章はちゃんと出てるが、これじゃ見栄えが

CSSで見た目を整える

ここからはご参考程度に。
CSSをカスタマイズすれば、好きなフォーマットにカスタマイズできますので、ぜひチャレンジしてください。

とりあえずオーソドックスなパターンを。出来上がりはこんな感じです。
画像サイズは、57px×57px（中途半端ですみません）　
　

　
[外観]→[テーマ編集]→右側で、style.cssとかcustom.cssなど、なるべくどのページからも呼ばれそうな？cssを見つけます。
そこに一例として・・・

.sideProfile {
	border: #999999 1px solid;
	font-size: 11px;
	padding: 10px 10px 10px 80px;
	background:url("http://画像ファイルのURL")  no-repeat left;
	background-position:10px 10px;
}

と新たなクラス（IDでも可）を作ります。
顔画像は、background指定にしちゃってます。
　
そして、先ほどのsidebar.phpに追加した部分を、こんな風に書き換えます。

<div class="sideProfile">
  <?php the_author_meta('description'); ?>
</div>

これでひとまず出来上がり！

その他ニックネームやら何やらの表示

<div class="sideProfile">
  <b><i><?php the_author_meta('nickname'); ?></i></b><br>
  <?php the_author_meta('description'); ?>
</div>

the_author_meta(‘nickname’)を追加すると、ニックネームが表示されます。

the_author_meta(‘nickname’)の引数を色々変えると、ユーザーの様々な情報を表示できますよ。
参考ページ：WordPress Codex「テンプレートタグ/the author meta」

　　　　　　　　　　　　　　　　　まだまだだろ…