米が好き

Twitterでリンクを貼られた場合、その数を表示させてくれるWEBサービスです。
今では設置しているブログも多くなっています。

以前にも記事を書いたんですが、今まではJavaScriptで表示させていました。
しかしJavaScriptで書くと、ブログの表示速度が遅くなる事に今更ながら気付きました。

直接JavaScriptを書く場合だと、1記事1記事Topsyの数を読み込むようでブログが完全に表示されるまで時間が掛かります。
それをプラグインに変えたら、ブログを一旦全部読み込んでからTopsyを読んでいるようです。
サイドが表示されなくてイライラしていたのが、これでちょっとは緩和されました。

後の問題として、プラグインだと <div class=”entry”>～～～</div>の中に勝手に入ってしまうんですが、それ以外の場所にも以下のコードで表示させる事が出来るようです。

大きい画像の場合。

<?php topsy_retweet_big(); ?>

今現在私が置いている場所は<div class=”entry”>の外なので、これでちょっとは自分好みになりました。

タイトルにWordPressと付けていますが、勿論普通のHTMLサイトでも使えます。
検索すると結構な数がヒットするかと思います。

まず目を付けたのがこのサイト。
Twitterが公式に公開している（？）JavaScriptを使っての表示方法。

次に目を付けたのがこのサイト。


どちらも一長一短。
公式の方は時間や曜日表記が公式サイトと同じ。
2つ目の方は時間・曜日はカスタマイズ出来るのに対し、リンクが貼られない。
うーむ。　と迷った後、「じゃ、2つ合体させればよくね？」って事で合体させました。

JavaScriptのコードは最後に書いていますが、今回もダウンロードした方が早いと思います。

ダウンロードはこちらから。　（右クリックで保存してください）

ダウンロードした『twitter.js』を好きな所に放り込んで、フッターにJavaScriptを書き込みます。
以下はWordPressのテンプレート内のjsフォルダ内に置いた例。

  <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/twitter.js"></script>
  <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/kuu_san.json?callback=twitterCallback2&count=3"></script>
</body>
</html>

赤字の所に自分のアカウント名と表示させる数を入力します。
後は実際にTwitterのTLを表示させたい箇所に以下のコードを書くだけです。

<ul id="twitter"></ul>

後はCSSで表示形式を整えるだけです。

#twitter {
  margin-bottom: 5px;
}

#twitter li {
}

#twitter li .name {
  border-bottom: 1px dotted #ccc;
}

#twitter li .time {
  text-align: right;
}

上記の例だと、以下のような表示になります。


最後にJavaScriptの全文。
表示方法など変えたい場合は、JavaScriptをいじるだけで簡単に変更出来ます。

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><div class="name">'+status+'</div><div class="time"><a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></div></li>');
  }
  document.getElementById('twitter').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);
  var dt = new Date();
  dt.setTime(dt.getTime() - (delta*1000));
  yy = dt.getYear();
  mm = dt.getMonth() + 1;
  dd = dt.getDate();
  dy = dt.getDay();
  hh = dt.getHours();
  mi = dt.getMinutes();
  ss = dt.getSeconds();
  if (yy < 2000) { yy += 1900; }
  if (mm < 10) { mm = "0" + mm; }
  if (dd < 10) { dd = "0" + dd; }
  dy = new Array("日","月","火","水","木","金","土")[dy];
  if (hh < 10) { hh = "0" + hh; }
  if (mi < 10) { mi = "0" + mi; }
  if (ss < 10) { ss = "0" + ss; }

  return yy+"/"+mm+"/"+dd+"("+dy+") "+hh+":"+mi+":"+ss;
}

私は秒表示は要らなかったので、赤字のコードは省いています。
もし表示させたい場合は、上記のように書けばOKです。

プラグインも入れすぎると重くなる（？）し、ややこしくなるし、使わずに出来る事は使わない方が良いのかも。

WordPress 3.0 日本語版が6/23にリリースされ、アップデートした方は色々触っている事だと思います。

以前書いた、記事投稿時に画像を挿入する際フラッシュ形式ではなくポップアップにして連続投稿する方法ですが、3.0になって前回の方法では使えなくなってしまいました。
私は画像が1・2枚ならフラッシュ形式、それ以上ならポップアップ形式かFTPに直上げの方法を取っており、私だけではなくこのポップアップ形式を使っている人が少なからずいるので、再度調べてみました。

今回変更箇所多すぎ。

なので、私の変更したファイルを画像込みでZIPにしてアップしてます。
『media-button-image_f.gif』、『media-button-image_p.gif』、『media.php』が中に入っています。
2つの画像は『wp-admin/images/』の中に。
media.php は『wp-admin/includes/』の中に放り込めば一先ず使えます。

投稿画面がこんな感じになります。


左がフラッシュ形式、右がポップアップ形式です。


ダウンロードはこちらから。

「いや、俺は自分で変更する！」
ってな方は、以下に変更箇所を全て書いておりますので頑張ってください。

余計な説明は入れていません。
私も深くは分かっておらず、「こうしたから出来た」ってなだけです。＾＾；

ファイルは言わずもがな、『media.php』の変更後は UTF-8 で保存してください。
続きを読む

過去記事、
【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法
【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2
ですが、WordPress 3.0 の『wp-admin/includes/media.php』を見ると少々ややこしく・・・と言うか前よりは簡単になっているんでしょうが、以前のやり方では上手くいきません。

しかし、無事解決方法を解読。
その方法とは！

・・・明日書きまーす。ｗ

HTMLの知識だけで誰でも簡単にiPhoneのランチャーが作成出来るようです。

上記サイトの説明だけでは分かり難かったので補足。
サイト内に貼られているダウンロード先から『ilauncher.html』をダウンロードする。
何も考えずに、そのファイルをサーバーにアップロードする。

※WordPressを使用している人は、テーマ内にファイルをアップするのではなく必ず一番上の階層にファイルをアップする。
×　wp-contents/themes/テーマ/ilauncher.html
○　ilauncher.html

サーバーにアップしたら、SafariでURLを打ち込む。
このサイトだったら、『http://kome-suki.net/ilauncher.html』になります。
すると、以下の画面が立ち上がります。（URLは自動で変わります）


アプリ名でリスト化されており、タップするとiPhoneに入れているアプリが起動します。
インストールされていないアプリは、Safariで新しいページが開き『ページが開けません』で終わります。
『ilauncher.html』の中身を見ると、JavaScriptを使ってアプリのスキームと呼ばれるコードでアプリを起動させているようです。
スキームが無いアプリは無理でしょうけど、以下のサイト等で色々公開されています。


探せばまだまだあるかもしれません。
これの良い所は、HTMLとCSSを自分好みにいじれる点にあります。
例えばこんな事も出来ちゃう訳です。（画像は合成です）


さすがにメールとかのカウント数字は無理でしょうけど。
アプリの画像を自分で作る。
アプリのスキームを調べる。
HTMLとCSSをいじくりまわる。
面白そうですけど、面倒なんでやりません。ｗ

Safariでのページをホーム画面に置いておけば、なお便利なランチャーになりそうですね。

昨日書いた記事の続きです。

前回は『フラッシュ形式』と『ポップアップ形式』のボタンを2つ設置する方法で行いましたが、画像が同じだと分かりづらいと思うので表示させる画像を分けてみました。
ソースを見ると一目瞭然ですが、画像ファイルは『wp-admin/images/media-button-image.gif』です。
これを新しく2つ作成し、画像リンクを変えるだけで簡単に表示を変えれます。

元の画像は 14×12 ですので、それに合わせて自作するも良しです。
私は只単に文字を乗せただけで作ってみました。

	フラッシュ	ポップアップ
アイコン
ファイル名	media-button-image_f.gif	media-button-image_p.gif

これをアップロードし、また『wp-admin/includes/media.php』の書き換えを行います。

media.php　366行目～　（2.9の場合）

<a href="{$image_upload_iframe_src}&TB_iframe=true" id="add_image" class="thickbox" title='$image_title (Flash)' onclick="return false;"><img src='images/media-button-image_f.gif' alt='$image_title (Flash)' /></a>
<a href="javascript:w=window.open('{$image_upload_iframe_src}&flash=0','','scrollbars=yes,Width=650,Height=720,top=0,left=0');w.focus();" id="add_image" title='$image_title (Popup)' onclick="return true;"><img src='images/media-button-image_p.gif' alt='$image_title (Popup)' /></a>

結果的に、このような表示になります。


ついでに title と alt も変えてみました。
赤の太字で追加したコード（&flash=0）がありますが、これはポップアップ表示した際『Flashアップローダー』ではなく『ブラウザアップローダー』に最初から指定するコードです。
私はFirefoxを使っていて『dragdropupload』のアドオンを入れる事によって、テキストボックスにドラッグ＆ドロップ出来るので多少の時間短縮にはなります。

『動画』『音声』『メディア』は使った事無いので無視してますと書きましたが、この方法で行えば同じような事が出来ると思います。（多分ｗ）

以前から各所で声があり、ちょっと調べてやってみました。

その声とは・・・
「WordPressの投稿画面で画像を挿入する時、一々フラッシュが立ち上がり1枚挿入したら消えてしまう。
連続で挿入する時もの凄く面倒だから、ずっと表示していて欲しい」　との事。

機会があったらやってみようと思ってましたのでやってみました。
いやー、4・5時間かかっちゃったよ。ｗ

結果的に何をしたかと言うと、
・画像挿入画面をポップアップで出す。
・1枚挿入しても、そのまま表示させる。
以上2点だけです。
それだけの為に何時間も・・・。
その何時間もかかった結晶（？）は以下より。

基本的に、画像を挿入する場合以下のような画面になります。
画像を1枚挿入する度に、この画面が消えてしまう。


別ウィンドウで出しても、結局タブなりウィンドウなりを切り替えなきゃいけないので面倒。
なもんでポップアップ表示にしてみました。

結果から言うとこんな感じになります。


画像を挿入しても、ポップアップは残ったまま。
あらステキ。ｗ
やり方は分かってみれば超簡単。
1つのファイルの2箇所を変えるだけです。

では、『wp-admin/includes/media.php』を開きます。
まずはポップアップで表示する方法。

media.php　366行目　（2.9の場合）

<a href="{$image_upload_iframe_src}&TB_iframe=true" id="add_image" class="thickbox" title='$image_title' onclick="return false;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

以上のコードが、フラッシュで表示させるコードになっています。
これを残しても良いし書き換えても良しです。
以下のコードは“残す”パターンで、2種類のボタンが並ぶようにしてます。

media.php　366行目～

<a href="{$image_upload_iframe_src}&TB_iframe=true" id="add_image" class="thickbox" title='$image_title' onclick="return false;"><img src='images/media-button-image.gif' alt='$image_title' /></a>
<a href="javascript:w=window.open('{$image_upload_iframe_src}','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

赤字が追加した文です。
1つずつ説明しますと、
『scrollbars=yes』スクロールを表示するようにしています。
これが no だと、下の方が見えなくなってしまいます。
『Width=650,Height=700』ポップアップ表示した時の横幅（Width）と高さ（Height）です。
横幅は600で横スクロールが出たので、コレぐらいが丁度良いかも。
高さは好みの高さ指定をどうぞ。（ピクセル単位です）
『top=0,left=0』デスクトップにポップアップを表示した時の場所を指定しています。
上（top）、下（bottom）、右（right）、左（left）で指定出来ます。（これもピクセル単位です）

ポップアップ表示した時に、表示するページ指定も出来ます。
タブで『コンピューターから』『URLから』『ギャラリー』『メディアライブラリ』と4つに分かれており、最初は『コンピューターから』になっています。
最初から別のタブで表示させたい場合は、以下のようになります。

『コンピューターから』は変更なし。

<a href="javascript:w=window.open('{$image_upload_iframe_src}','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

『URLから』

<a href="javascript:w=window.open('{$image_upload_iframe_src}&tab=type_url','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

『ギャラリー』

<a href="javascript:w=window.open('{$image_upload_iframe_src}&tab=gallery','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

『メディアライブラリ』

<a href="javascript:w=window.open('{$image_upload_iframe_src}&tab=library','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

後は1番苦労した、ポップアップを閉じない方法。

media.php　169行目～

<?php
  exit;
}

これを

<?php
  #exit;
}

コメントアウトなり削除なりをすれば良いだけです。
こ、こ、これだけに数時間も・・・・・・。orz


当然の事ながらWordPressのバージョンアップがあった場合、毎回書き換えなければいけません。
まぁ、たったコレだけの事なのでプラグインに頼る程でもないですね。

『動画』『音声』『メディア』は使った事無いので無視してます。
では、よきWordPress生活をっ！


追記
表示アイコンを変えたい場合などは、『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2』に書きましたので、合わせてどうぞ。

まだまだInternet Explorer 6を使っている人は沢山います。
せっかく最新のIE8が出てるんだから、バージョンアップしましょうよ！（建前）

IE6より全然速いんですよ！（建前）

IE6だと、WEBサイトのレイアウトが崩れたりして綺麗に見れないんですよ！（半分本音）

いちいちIE6の表示チェックが鬱陶しいんですよ！（超本音）

そんな頑なまでにIE6にこだわる（？）人向けに開発されたJavaScript。
僅かなコードを入力するだけでサイトの左下に『クマー』が出て、IE8へのバージョンアップを促してくれます。
私も入れよっかなぁ。
ニコニコ動画のRSS、やっぱIE6だと崩れてるみたいだし。

左下のクマをクリックすると…。


しかしMSのIE8じゃなく、何故かフェンリル版。

最近めっきり使用頻度が少なくなってきたと思われる、イメージマップ（クリッカブルマップ）。

イメージマップとは
簡単に言うと、1枚の画像の中に複数のリンクを貼る場合に使用したりします。
例えば、右サムネの赤枠にそれぞれ違ったリンク先を指定したい時など。

で、それぞれのリンクでマウスを乗せた時、マウスオーバーで画像を差し替える方法をご紹介します。
CSSではなく、jQueryを使用します。
続きを読む

リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。
Opera、Safari、Google Chromeはデフォルトで出ません。
これが出るのは、IE、Sleipnir、Firefox、Lunascape（WebKit時以外）です。

デザイン的にも、これを出させない為にCSSを使ってみましょう。

話しはそれますが、画像の枠線を消すのは簡単ですよね。
CSSに以下のコードを付けるだけです。

CSS

img {
  border: none;
}

これをどっかに書いておくだけで、サイト内の画像の枠線が全て消えます。

で、問題のリンク破線を消す方法です。
通常、以下の様に破線が出ます。（HOMEをクリックした時）


この破線を消すのは、CSSに以下のコードを書きます。

CSS

a:focus {
  outline: none;
}

はっはっはー、超簡単だぜー！
・・・と思ったのも束の間、このコードFirefoxには効いてもIEには全く効かないコード。
ちなみにSleipnirやLunascape（WebKit以外）にも効きません。
なん・・・だと・・・？

少々手間ですが、全てのブラウザで破線を消そうと思ったら、1つ1つのリンクに以下のJavaScriptのコードを足せば消せます。

HTML

<a href="URL" onFocus="if(this.blur)this.blur()">リンク</a>

一々全てのコードに貼る手間を考えると、どっちでも良いやーってな気持ちになります。
でもまぁ、ヘッダー部のメニューとかだけにするなら便利かな。