Tag Archives: WordPress

WordPressで作ったブログのiPhone対応

0
Filed under iPhone, WordPress
Tagged as ,

iPhone 3GS、ゲットしました

発売日当日、ちょっと仕事で忙しかった日なのですが、隙間の時間にSoftBankショップへ行き、予約していたiPhoneゲットしました!
でも帰ってもあまり時間がないので、ほんの少しずつあれこれ試している状態です。
とりあえずSafariを起動したり、メールアドレスを変えたり。
そうそう、メールアドレス、初期設定ではランダムなパスワードみたいなメールアドレスが設定されているのですが、コレ、店でやってくれたら良かったのに、と思います。
あと、Eメール(i)とか設定がよく分からない人も多いのでは?ってか、俺は分かったけど、仕事でPC周りのセッティングとかしない人は、分からないよね?どうやって設定方法を知るんだろう。SMSとかMMSも名前だけ先走ってて、違いとか分からないと思うんだけど、そういうところは微妙。
そんなことを思いながら、家の無線LANの接続設定とかは終えました。
そんなこんなで、今までケータイのフルブラウザとかほとんど使ったことなかったのですが、さすがにiPhoneではパケット代を気にしなくていい感じなので、ガシガシ使っていこうと思います。

このblog on iPhone

で、このblogを見たら、まぁ、それなりに見れるデザインなのですが、ちょっと見づらい。
20090627-wordpress-iphone-1
ケータイサイト用に作り直したい、というか、iPhone用に作り直したい。
でもPHPとかまだ慣れていないし、CSSいじるのもちょっと面倒。と面倒くさがりな自分は楽をするために調べてみます。すると、WordPressをiPhoneやiPod touchから見たとき用に最適化してくれるプラグインを発見しました!
それが「WPtouch」

WPtouchをインストール

早速、WPtouchをインストールしてみることにしました。
インストール手順は簡単で、WordPressのダッシュボードの「プラグインのインストール」から”wptouch”を検索します。
多分、検索結果のトップに”WPtouch iPhone Theme”というのが表示されるので、”インストール”リンクをクリックします。
install WPtouch
前にも書きましたが、ちょっと神がかっているblogシステムであるWordPressにおいて、iPhone対応はたったこれだけで完了!
早速iPhoneからアクセスしてみます。
wordpress with WPtouch from iphone
素晴らしいですね!
まず、最近の投稿についてのタイトルが表示され、それをクリックすると該当エントリへジャンプする。
完璧な使用感!WordPressを使っているiPhoneユーザなら是非インストールしておきたいところですね。
2009年8月15日追記:最近のバージョンアップで改行されなくなっていて、みづらかったので、ちょっとこのプラグインは外しました。

スクリーンショット

ちょっとスクリーンショット関係のメモを追加しておきます。

iPhoneでスクリーンショットを撮るには、スリープキー(本体に向かって右上の横長ボタン)を押しながらホームボタン(本体下部の□ボタン)を押すと、カメラロールに保存されるようです。
カメラロールにある写真データをWindowsから見るには、iPhoneをPCに繋いだ状態で、マイコンピュータ以下を見ると、ドライブの一つとして追加されており、その中を見ると、直接アクセスできます。

Shadowboxプラグインを入れてみた

0
Filed under WordPress
Tagged as ,

画像を大きく見せることが出来るプラグインを、と思い、ちょっと調べてみて、Shadowbox JSプラグインを入れてみることにしました。

Shadowbox JS プラグイン

Shadowbox JSのWordPressプラグイン公式情報は以下のリンク先にあります。

WordPressのプラグインシステムは神

WordPressではプラグインをWordPressの設定画面から探して、インストールすることが出来ます。さらにはプラグインのバージョンアップを自動的に検知して、ユーザがそれをワンクリックでアップデートできる仕組みまであって、これがかなり便利。

自分みたいなWeb2.0世代をフォローできていないロートルの場合、何となく、こういうもののプラグインって、「サイトから落として~、ちょっと設定ファイルを書き直して~、FTPして~、パーミッション設定して~」という頭があるのだけど、もうそういう時代じゃないんですよね。

WordPressとか使ってるとそういうのをしみじみと実感できます。

では、インストールしてみましょう。

インストールしたいWordPressのダッシュボードの「プラグイン」の「新規追加」で「shadowbox」を検索してみます。

すると一覧が出てくるので、その右側にある「インストール」ボタンをクリックします。

wordpress-shadowbox-001
そのまま「いますぐインストール」ボタンを押すと、なんとこれでインストールが完了するのです!

wordpress-shadowbox-002
インストール完了後、「有効化にする」というリンク文字が表示されるので、そのリンク文字を押すと、すぐ有効化されます。

ブラウザから離れることなく、また自分のWordPressの設定画面から離れることなくプラグインのインストールが完了してしまいました。

Shadowbox用に画像をアップしてみる

さて、プラグインのインストールが完了したところで、早速画像をアップしてみましょう。

実はここでちょっとハマったのですが、Shadowbox用の画像は、その画像へのリンクが必要となります。imgタグだけではダメで、imgタグを aタグでくくり、その aタグに rel=”shadowbox” という属性が与えられている必要があります。

プラグインを入れたことで「aタグに rel=”shadowbox”」というところは自動的にやってくれるのですが、画像を挿入したとき、その画像へのリンクを張るように設定する必要があるのです。ここだけ注意すれば、簡単にShadowboxを使い始めることが出来ました。

作る側として考える

WordPressとか使い始めると、ユーザー側からの使い勝手として最低限ここまでは持ってこないといけないのかなー、と思ってしまいます。

当たり前ですが、普通のblogユーザーにFTPを強要するのはやっぱりおかしいし、設定ファイルをテキストエディタで直接書き換えるとかやっぱり前時代的な感じ。

何かしらユーザーエクスペリエンスを作る側の人は、最先端のモノを触り、そのときの最低限のユーザーエクスペリエンスを体験しておく必要があり、それを怠ると、「なぜ今のシステムでユーザーから不満が出るのか?」とユーザーの気持ちできなくなります。

この勉強は一生必要ですね。

WordPressにiG:Syntax Hiliterを入れてみた

1
Filed under WordPress
Tagged as

コードのハイライト

コードを書くことが多いプログラマとかのブログではコードをハイライトさせるプラグインは必須です。ということで、WordPressではどのようなプラグインがあるのか調べてみたら、このページ(「jmblog.jp – ソースコードをカラー表示するWordPressのプラグイン」)で”iG:Syntax Hiliter”が紹介されていたので、インストールしてみることにします。

インストール

上記ページ内にあるダウンロードリンク先をクリックしてダウンロードします。ちょっとわかりにくいのですが、以下のリンク先からダウンロードできると思います。

ダウンロードしたファイルを展開し出来たディレクトリの中の、ig_syntax hiliter plugin の中身を、wp-content/plugins ディレクトリにアップロードします。wp-content/plugins/syntax_hilite.php, wp-content/plugins/ig_syntax_hilite/ という感じになります。

これでWordPress設定画面のプラグインページを見てみると“iG:Syntax Hiliter”が追加されていますので、「使用する」ようにします。
以上でインストールは完了です。

試してみる

早速試してみます。
「ビジュアル」「HTML」モードのどちらのエディタでも大丈夫なので、次のように入力してみます。
wordpress-igsyntaxhiliter-jshelloworld
結果は以下のようになります。
(2010/03/14ー別のシンタックスハイライトプラグインを入れて、iG:Syntax Hiliterをオフにしました。なので、以下の文章はHTMLがそのまま表示されています。)
[js]
// Comment here
function HelloWorld() {
alert(‘Hello World!’);
}
[/js]
どうでしょうか。なかなかいけてる感じですね。
ただ、「ビジュアル」エディタでは行頭の空白が無くなるようなので、ソースコード部分はアップロード前に「HTML」エディタで調整した方がよいかもしれません。
ActionScriptは “as”です。
[as]
// 関数.
public function get mapBitmapdata() :BitmapData
{
return mMapBitmapData;
}
[/as]

Rubyも試してみます。”ruby”タグで区切ります。(ちなみに以下のコードは以前Snipplrに投稿したものです。)

[ruby]
# 任意の底 a を持つ x の対数を計算.
def logA( x, a )
return (Math.log(x)/Math.log(a))
end
p logA( 2, 2 ) # => 1.0
p logA( 4, 2 ) # => 2.0
[/ruby]

問題点

ただ、普通の文章中で大括弧[]を使うとそれが認識されてしまうようになるので、これを一時的にoffにする方法はどのようにしたらいいのだろう。
ちょっと探し中。

追記:2009/05/28

どうやら、C#は未対応の様子。残念。

WordPressにAddClipsをつけてみた

0
Filed under WordPress
Tagged as , ,

ブックマークボタン

ブックマークとか簡単に登録してもらうために、ボタンをつけようと思い立ちました。
ちょっと調べてみたところ最近では、各種ソーシャルブックマークサービスなどに簡単に登録できるように、いろいろなサービスをまとめるサービスがあるようです。
今回は、AddClipsというのをつけてみることにしました。
webpage-addclips

AddClips登録

このページで上から順に入力したら最後にWordPress用にHTMLタグが表示されます。
次にこのタグをWordPressのテンプレートに入れるのですが、その場所がちょっと悩みどころ。
デザインとの兼ね合いもあり、つまり、個人の好みの問題にもなってきますが、何となく本文を邪魔しない程度、且つ、分かりやすい位置、ということで右上に置くことにしました。
現在のデザインでは、右上にコメントボタンがあるので、その近くを探してみます。
WordPressの外観編集のページを開き、テンプレートの中から「メインインデックスのテンプレート(index.php)」というのを見つけます。この中に以下のようなコードの位置があるので、そこに挿入してみました。

<?php if ( comments_open() ) : ?>
<div class="entry-comments">
<?php comments_popup_link(__('0', 'sandbox'), __('1', 'sandbox'), __('%', 'sandbox')) ?>
</div>
<?php endif; ?>
<!-- ここにAddClipsのコードを挿入 -->
<div class="clear"><!-- --></div>

これで「ファイルを更新」ボタンを押して、再度ページをロードしてみると、無事、ブックマークボタンが追加されていることが分かります。
試しにクリックしてみると、ちゃんとエントリの内容に合ったタイトルとURLで登録されるようです。

調整

色を変えられるようなので、このブログのテーマにあった色に変えておきます。

AddClipsBcolor='#242323';
AddClipsNcolor='#808080';
AddClipsTcolor='#FFFFFF';

AddClips、便利なサービスですね!