モブログ導入とカスタマイズ

sbとSereneBachでモブログ(携帯からの記事の投稿)をしてみよう。
携帯からの投稿はmoblog.uva.ne.jpにお世話になります。
登録画面に沿った詳細な導入手順やちょっとしたカスタマイズを紹介。

▼導入手順

1: sbにログインしてユーザー管理からモブログ用ユーザーを作成。
ここで設定したユーザー名とパスワードを次で使います。


2: moblog.uva.ne.jpCreate new accountをクリック。

Create account for moglogging!
moblog.uva.ne.jp setting

email: メールアドレス(普段使っているものでOK)


Your Movable Type Setting
moblog url: blogのURL 例) http://www.webcitron.com/blog/
username: モブログ用ユーザー名 例) mobile
password: モブログ用ユーザーのパスワード 例) mb_pass


記入し終わったらnextをクリック。


3: xmlrpc urlをadmin.cgiのURLに書き換える。
Configure moblog setting:
Weblog setting
We cannot detect your xmlrpc API.
Please enter your xmlrpc url and others.
moblog.uva.ne.jp setting
email:
2で設定したメルアドが表示される
Your Movable Type Setting
username:
2で設定したユーザー名が表示される 例) mobile
password: 2で設定したパスワードが表示される 例) mb_pass
weblog xmlrpc url: admin.cgiのURLを記入
ex) http://www.webcitron.com/blog/admin.cgi

書き終わったらnextをクリック。
もしここでYour account and/or XMLRPC API is not available. Please check at the previous page.と出てしまったら、admin.cgiのURLやIDとパスワードが間違っている可能性があるので、確認して書き直しましょう。


4: 詳細設定をします。

Configure moblog setting:
Moblog setting


Email setting
email:
投稿用メールアドレスを選びます。
上:アカウント名とドメイン名入りの長いメルアド
下:ランダム風な数値を使った短いメルアド

使用する方のメルアドのラジオボタンにチェックを入れます。


Movable Type Setting
weblog: ブログの名前が表示されます
category: 記事が表示されるカテゴリーの設定


image archive-path: 投稿画像の収納ディレクトリ名
sbのデフォルトなら「img」です。
仮にmb_photoというフォルダにまとめたい場合は、img内にmb_photoフォルダを作っておき「img/mb_photo」とする。
image site-path: 画像のアップ先ディレクトリのパス
sbのデフォルトなら「/img」です。
前述の例の場合だと「/img/mb_photo/」となります。


template: エントリに出力されるHTML カスタマイズはこちら
image template: ↑の内、imgタグだけはここで別に設定


Publish: 自動公開か下書き保存か。しかしsbではどちらを選んでも下書きになりsb側で設定する必要があるのでスルー。
sbでの設定方法SereneBachでの設定方法
Public?: 投稿画像をmoblog.uva.ne.jpでも見ることができるように表示するかどうか。嫌な人はNoにしておきましょう。

これでsaveを押せば終わりです。
選んだメールアドレスに携帯から写真とテキストを送るだけで投稿されるようになったハズ!(多分ネ)


▼設定を変更したいんだけど…
Loginからログインして設定の変更が…sbでは出来ません(笑)
もしテンプレートやメルアドなど設定を1箇所でも変更したいなら、一度deleteからアカウント登録を削除して新規登録する必要がありますのでご注意。
何度削除して登録しても、投稿に使用するメルアドは変わらないのでその点はご安心を(ランダム値ではないようで、短い方のメルアドでも大丈夫です)


▼sbで投稿を自動で公開したい場合
libフォルダ内のsbxml.plをテキストエディタで開き、119行目と232行目にある

my $eid = &sbxml_edit_entry('',$cont,$flag);
という部分を
my $eid = &sbxml_edit_entry('',$cont,1);
という風に書き換え、FTPで上書きアップロードします。

参考リンク:capu*days | MOBLOG自動公開の設定方法


▼SereneBachで投稿を自動で公開したい場合
init.cgiに下の1行を追記してFTPで上書きアップロードします。

XmlrpcForcedPublish 1

▼Serene Bachでカテゴリ設定が上手くいかない場合
モブログ用ユーザーの標準カテゴリを、モブログ用カテゴリに設定することで対応できます。
1. モブログ用ユーザーでSerene Bachにログイン
2. 編集設定>標準カテゴリで、モブログ用のカテゴリを設定


moblog.uva.ne.jpのモブログ用テンプレート
HTMLの出力を変更できるようになっています。
デフォルトではこうなっています。

▼template
<div class=\"caption\">%(caption)s</div>\n<div class=\"photo\">%(imagecontent)s</div>
▼image template
<img src=\"%(imageurl)s\" />
※ \ は半角の¥マークです

さて、これをカスタマイズ。
私は写真を左にして、右側にテキストを回り込ませることにしました。
floatを使うのでclearを入れますが、xhtmlではclearはCSSで指定することを推奨されているのでstyleにて指定。alt属性も付け足しておきます。
また、モブログからの写真専用のclass名が与えられるように変更。
▼template
%(imagecontent)s%(caption)s<br style=\"clear:left;\" />
▼image template
<img src=\"%(imageurl)s\" class=\"pict_mb\" alt=\"mobile photo\" />
※ \ は半角の¥マークです

CSSにはモブログ画像専用のスタイルを作成。
img.pict_mb {
padding: 25px 9px 9px; /* 画像から外枠までの余白 */
float: left;
clear: left;
background: #fff url(背景画像のURL) no-repeat;
}

私は固定サイズで使用するため、ジャストサイズの背景画像を作成してそれにあわせたpadding値にしています。
borderも画像に一緒に描いたので指定してませんw
参考リンク:de-sign.log | moblog.uva.ne.jpのカスタマイズ


moblog.uva.ne.jpさん有難うございました。
Related Archive