Wordpress+iPhone

Wordpress+iPhone

2009.09.07

category Wordpress, iPhone

iPhone上でWordpressを上手く扱うのになかなか便利なものがあったのでメモ

1.Wordpress用iPhoneアプリ
WordpressオフィシャルのWP更新用のアプリがあったので入れてみました、
http://iphone.wordpress.org/

下準備は管理画面からXML-RPCを使用するチェックを入れておくぐらいです、あとはカテゴリ付き投稿やら管理など一通りの事が出来ました。

画像のアップロードだけが上手くいかなくてちょっと困りましたが、coreserverのいつものあれ(phpのセーフモード関係)だろうと言うことで必要なファイル(おそらくxmlrpc.php)をcgiモードに。これできちんと画像のアップも出来るように。
参考:XREA・CORESERVERのセーフモード対策 at WordPress | Divenavi and Okinawa34

—–

2.iPhone用スキン出力用のプラグイン
WPtouch: Mobile Plugin + Theme for WordPress ↔ BraveNewCode Inc.

img_0113

WPtouchというiPhone/iPod Touch用プラグインをインストール。
インストールしただけでiPhoneアクセスが自動的にこういうスキンになります、これが非常に使いやすくて果たしてブログごとにスキンを作るという行為が必要あるのかと思ってしまうぐらいの出来。

ただ当然ですがCMS利用した非ブログサイトにインストールすると普通のブログと同じようにエントリーが並ぶだけになってしまいます。

とりあえずこの2つでだいぶ扱いやすくなりましたがそもそものフリック入力に慣れていないという問題で結局iPhoneからPOSTするかは微妙なところ

w91本日発売の月刊「web creators」7月号、「Movable Type 4.xデザインカスタマイズを極める(後編)」にてMT4.25のモーションブログとGoogleAjaxSearchを組み合わせた動画クリップブログの構築について執筆しました。

本誌購入者の方は実際のMTテンプレートデータをダウンロードできるようになっています

Web creators (ウェブクリエイターズ) 2009年 07月号 [雑誌]

MTだと<MTArchiveNext>で翌月のアーカイブへのリンクが出力できるんですがWordpressで見あたらなかったので他の方法で何とか実装する方法。

<?php
$thisYM = get_the_time(’Y')*12 + get_the_time(’m');
$prevY = floor(($thisYM-1)/12);
$prevM = ($thisYM-1)%12;
$nextY = floor( ($thisYM+1)/12 );
$nextM = ($thisYM+1)%12;

echo get_month_link($prevY,$prevM);
echo get_month_link($nextY,$nextM);
?>

長いですがこれで何とか翌月・前月ページへのリンクが出力されるので、あとはifとis_month()で月別アーカイブの場合に出力すれば大丈夫のはず。ただし翌月の投稿が0の場合はNotFoundになってしまうので若干使いづらいです。

最初strtotimeを使った3行ぐらいのスマートなコードで記事書いたんですが、よく見たら「今日を基準に翌月」にしかならなくて10分後ぐらいに焦って消したものの既にGoogleにクロールされてしまったので無理矢理考えました、何か他に良い方法無いでしょうかね

(wp_calendar()の不要部分を削除とかの方がマシかな…)

注:酷い内容が含まれています。

<style type="text/css">
    #fontchecker{
        font-family:"メイリオ",sans-serif !important;
        float:left !important;
        font-size:10px !important;
        letter-spacing:0 !important;
        padding:0 !important;
        margin:0 !important;
        border:none;
    }
</style>
<p onclick="alert(this.clientWidth)" id="fontchecker">あああああああああ</p><div>dummy</div>

fontcheckerというIDの要素の幅がメイリオで表示される場合とMS Pゴシッ クの場合でサイズが変わるので、要素のwidthを次第で訪問者のブラウザ表示がメイリオになってるかどうか判別、異なるCSSを読み込み。という流れでメイリオの時だけline-heightとか調整できんじゃない?というかなり無茶苦茶な案。

で試作品。
http://blog.graphiso.com/ismeiryo.html

XPでしかチェックしていないのだけど、Firefox3、IE7、Opera9、Chrome、Safariで(予想外にも)キチンと動きました。こんな問題おこるのはWinのXPかVistaぐらいだからチェックもそこまで大変でもない気もしますが、まあとんでもスクリプトの類ですどうでしょうか…

ちなみに今のところ酷評の嵐です。

fesTvローンチ

2009.03.10

category Portfolio, information

e99fb3e6a5bde38395e382a7e382b9e587bae6bc94e88085e381aee58b95e794bbe38292e381bee381a8e38281e381a6e38381e382a7e38383e382afefbc81-festv_1236夏フェス出演者の動画をチェックするためのサイトfesTVオープンしました。

http://www.graphiso.com/?48

thumbnail_200901

毎日コミュニケーションズ / Web Designing 2009年1月号の特集:WebデザイナーのためのMovable Type事例&テクニック集で「MT+WebサービスAPI」に関する記事を執筆しました。
Google Maps APIとMTを使ってマイマップを作る、という内容です。

記事中で紹介した「つなしまインフォ」の地図ページはこちら

普段MTサイト構築の時はまずXAMPPを使ってローカルサーバーで作業してます。

ローカルでMTの構築を一通り終えて本サーバーでの作業に切り替え!たいんですがどうしても本サーバー反映後も修正箇所が出てくるのが常、ブラウザのタブを切り替えながらローカルを更新しつつ本サーバーに反映、と言うことを繰り返しているとそのうちどのタブがローカルだっけ・・・と混乱して間違って先祖返り、見たいな事がちょくちょくと。

ステータスバーはMovableType管理画面だらけ、Xamppにはそれようのfaviconが用意されているのにMTが上書きしてしまってアドレスバーを見ないとどれが本サーバーだかわからない!
ということでローカル側のfaviconを上書きしてます。

  1. faviconを作る
    http://www.favicon.jp/favicon_auto_create/
    これはこういうツールで適当に。
    ローカルのMTって良く解るようにXAMPPとMT半分にしました、かっこわるいですが(これみたいだ・・・)
  2. faviconを上書き
    mt-static\images の中にfavicon.icoという名前で普通に入ってるので単に上書き。
  3. キャッシュ削除
    web developerなんかのキャッシュ無効が便利。
  4. リロード
    faviconoverwrite
    これでミスが減ると助かります

なおMTのバージョンアップするとまた戻ると思うので適当な場所に残しとくとよいです。
以上超小ネタ

MT構築の時はまずテキストエディタでHTMLのコーディングを済ませてから必要な部分にMTタグを反映していって、最後にテンプレート編集画面に貼り付けているのですが、どこにMTタグがあるのか確認するときに正規表現での検索を使うと全部ハイライトさせる、ということが出来るのでちょっと便利。

使い方

  • 検索ウインドウを開く(Ctrl+F)
  • 正規表現を使用するにチェック
  • 大文字と小文字を区別する、のチェックは外す
  • 検索する文字列に下の暗号みたいなやつをコピー
    <\$?\/?mt:?\w+\s?[^>]+>

これでMTタグっぽいのが全てハイライトされます(はず)
MTタグの書き方は<MTEntryBody>、<$MTEntryBody$>、<mt:entrybody>どれでも閉じタグ含めて対応してます。
(ただし今後mtから始まるHTMLタグが出てきたら反応しちゃうけど)

正規表現なのでperlやらjavascriptやらでも使えるはず。小ネタでした

注:MT4↑専用。
検索結果テンプレートの中の

<MTEntryBody>もしくは<MTEntryExcerpt>

のあたりを

<MTSetVarBlock name=”searchword”><$MTSearchString$></MTSetVarBlock>
<MTSetVarBlock name=”replaceTo”><strong><$MTSearchString$></strong></MTSetVarBlock>
<MTEntryBody words=”200″ remove_html=”1″ replace=”$searchword”,”$replaceTo”>

  • これで検索ワードが<strong>で囲まれるのであとは好きにCSSで装飾。
  • MTEntryBodyのremove_htmlは有効にしておかないとタグがおかしくなると思う。
  • 本文じゃなくてMTEntryExcerpt出力でもいいのだけど、40文字程度じゃ検索語句が出てくる前に終わっちゃうだろうから<MTEntryBody words=”200″>とかにした方がそれっぽい。

プラグインもありました…(未検証)

MTのテンプレートを弄ってるといつの間にかサインアウトされていて再度サインインといのが結構ストレスになってたので(特にMTを開いているタブが多いと全部サインインしなおしもしくはリロード)どうにかしてみようと色々試行錯誤してダメだった結果、たまたまインストールしたてのGraseMonkeyを思い出す、よし適当に作るか。

// ==UserScript==
// @name           mtAutoSignIn
// @namespace      http://www.graphiso.com/
// @include        http://graphiso.localhost/mt/* ←利用したいMTのパスに変更
// ==/UserScript==
(function() {

if(document.title==”サインイン | Movable Type Pro”){
document.getElementsByTagName(’form’)[0].submit();
}

})();
//@includeはブログのURLに変更。

これは酷い・・・
何 してるかというとページタイトルが「サインイン | Movable Type Pro」だったらそのページのformをサブミットします、っていうことをしている。パスワードとIDはFirefoxのオートコンプリートで勝手にはい るのでとりあえずこれで問題は出てない

ただしMTインストール直後でID・パス保存してない場合は延々とサイ ンインエラーがでます爆笑です。セキュリティ的にも問題だけどローカルで構築専用だからとりあえずこれで良いかな…そのうちもう少しまともにしたいですが。