普通のサラリーマンのiPhone日記 Rotating Header Image

iPadでblogの下書きをする – bookmarklet活用

私の場合、blogはHTMLを使って直接書いてます。というのもWordPressのビジュアルリッチエディターは勝手にHTMLを整形し、レイアウト崩れを起こしちゃったりするんで、(プレビューしながら書けるのは理想ですが)ぶっちゃけ蛇足なんですよね…。

で、HTMLの記載は、FirefoxのMakelinkアドオンや辞書登録を活用し、できるだけHTMLの入力負荷を下げる方向でblog記事を作ってます。そんなこんなで、ここ最近はずっとMac環境でしかblog更新は難しい状況だったのです…。

しかし!

iPadを使って最終形とはいかぬまでもblog記事の下書きができたなら、楽になるんじゃないか!?ということで、Mac環境依存から脱却すべく、課題を解消してみました。

以下、私が使ってるHTMLタグ(全体の95%くらい)です。

  • Link作成(タイトルにLinkを貼る)
  • Link作成(はてブ付)(タイトルにLinkを貼り、はてブ数も表示)
  • 「Title – URL」書式のテキスト作成(Twitter投稿等に利用)
  • H4タグ(色をブルーにしたH4タグ)
  • H2タグ(色をブルーにしたH4タグ)
  • UL/LIタグ(箇条書き。私のblogの場合は使うケース多し)
  • スクリーンショットサイズ(width=”192″にいつもしてる)
  • PREタグ(たまーに使う程度だけど)
  • STRONGタグ(文字をボールドにする時に利用)
  • 青ボールド(STRONGタグの色指定。青バージョン)
  • 赤ボールド(STRONGタグの色指定。赤バージョン)

たったこんなもんです。他のbloggerに比べると少な目かな…。

前置きが長すぎました。

今日ご紹介するTipsは、iPadのSafariがブックマークバーを常時表示できること、SimpleText.wsの使い勝手が素晴らしいこと、この二つの好条件を前提とし、Macと同様に下書きができる環境をiPad環境(更にiPhone環境)に作ることを目的としています。

ちなみにSimpleText.wsは、ブラウザを使ったエディタでiPhoneだとWriteRoom等のメモアプリと同期もしてるシンプルで使い勝手の良いWebサービスです。

完成すると以下のようになります。

特定のページを見ていて、そのLinkをはてブ数付で紹介したい場合、bookmarkletから「Link作成(はてブ付)」を選択します。そうすると以下のようなポップアップが出ます。

ポップアップの中に記載されたHTMLの全文をコピー。

別タブに待避してるSimpleText.wsのエディタにペースト。たったこれだけ。もうiPadでHTMLを書く必要はありません。コピペで事が足りてしまうのです。ぱちぱち。

bookmarkletの作成

bookmarkletは、javascriptの固まりなんでサンプルを見れば大体分かるんですが、やっかいなのは「%ほにゃらら」のURLエンコードの部分と、改行が無いこと。他のbookmarkletを流用しにくいのは、これが最大の理由なんですよね…。

で、上記のサイトを使うと自分でブックマークを作るのが楽になるんです。

例えば「Link作成」のソース。location.hrefは、表示してるURL。document.titleは表示してるタイトル。これらをHTMLタグに埋め込み、ポップアップを表示させます。

出来上がったら「make」ボタンを押す。その後「New Bookmarklet」のリンク先をブックマークに登録します。ブックマーク自体は、PC上のブックマークで良いです。

ブックマークのiPadへの同期

Firefoxで作ったbookmarkletは、Xmarksを使ってMacのSafariにも同期され、それが巡り巡ってiPhoneやiPadのブックマークにも同期されます。

Xmarksについての説明は割愛しますが、この仕組み。複数PCや複数ガジェット使う方々にとっては既にデファクトなツールなんじゃないかな…。

iPadのSafari設定

iPad側の設定ですが、Settings.appのSafariの設定で「ブックマークバーは常に表示」というところを「オン」にしておく必要があります。

自分好みのHTMLテンプレートをbookmarkletに登録しておけば(iPadに限らず)どこの環境でも、blogに必要なHTMLが作れますんでお試しあれ〜。

以上で説明は終わりですが、私が作った(個人用途で申し訳ありませんが)リンクを列挙しときます。このリンクはそのまんまbookmarkletとして使えます。

Link作成
Link作成(はてブ付)
Title – URL
H4タグ
H2タグ
UL/LIタグ
スクショサイズ
PREタグ
STRONGタグ
青ボールド
赤ボールド

はっ(゚Д゚ )

そうだ、言い忘れた。今回のTipsは、iPhoneでも使えるんです。

iPhoneのSafariで巡回してて気になったらbookmarklet起動。内容をコピーして、blog下書きのアプリ(上の例だとSimpleText.wsと同期してるWriteRoom)へペースト。

こういった使い方も便利かもしれません(´∀`)

blog投稿における残る不満はスクリーンショットをWebブラウザからアップロードできない点のみ。専用アプリを使えばできるんですけど、ファイル名が気にくわないんで、仕方無くアップロードはMac環境で行ってます。どうしてもって時は、Macをリモートで操ってアップロードすればいいんですけど面倒なんでそこだけはMac依存です…。

iPhoneとかiPadのポリシーの問題なんで仕方無いのかなー…orz

-

タグ: Blog, Bookmarklet, iPad, iPhone, Safari, SimpleText.ws, WordPress, WriteRoom, Xmarks

Similar Posts:

13 Comments

  1. [...] iPhoneに関する、はてなブックマーク新着情報です。 iPadでblogの下書きをする – bookmarklet活用 | 普通のサラリーマンのiPhone日記 [...]

  2. [...] iPadでblogの下書きをする – bookmarklet活用 | 普通のサラリーマンの … – Google アラート – iphone より [...]

  3. [...] Twitter / naganaga: 印刷会社がなんで潰れないか。紙卸から一度オーナー家族 … と19件… 3 | 月曜日 6月 7 2010 1:50 AM | コメント (0) Twitter / naganaga: 印刷会社がなんで潰れないか。紙卸から一度オーナー家族 …デート中はiPhoneを触っちゃだめ? | 非モテタイムズiPadのSafariに不足しているものを補う – ザリガニが見ていた…。Togetter – まとめ「iPhoneアプリ「電波チェッカー」がUDIDを送信していることへの問い合わせまとめ」アドレスグループスタジオ: iPhoneの連絡先にグループを作成して連絡先管理を簡単便利に!1474浮気するなら携帯はiPhoneにしとけ 色々と捗るぞ | ライフハックちゃんねる弐式次世代iPhoneに期待すること:アルファルファモザイクiPadでblogの下書きをする ? bookmarklet活用 | 普通のサラリーマンのiPhone日記Life is beautiful: iPad活用術:iPadでパワポのプレゼンをする方法Mirai Clock: オタク情報サイトdannychoo.comのマスコットキャラクターの時計アプリ!1470テロメアの帽子: 電子絵本第二弾!ゲノムの不思議を描いた絵本。英語つき!1469ついに「本当に使える」バス路線アプリを見つけた!地図上に停留所が立ち並ぶ! : akiyan.comニールセンが米国モバイルユーザー調査を発表 – iPhone vs Android:in the looop:ITmedia オルタナティブ・ブログ[Safari] フリックバスケットボール: Flashより滑らか?なjavascriptゲーム。1468世界中の有料無料アプリをディレクトリ化・アイコンを一覧表する無料iPhoneアプリ・apps Mosaic – かちびと.net【話し方】「たった1分間で相手を引きつける話し方13のテクニック」アラン・ガーナー:マインドマップ的読書感想文電子文庫パブリ: 多彩なラインナップが嬉しい、電子書籍サイトのiPhone用ビューワー。無料。1467[iPad] Osfoora HD, for Twitter: iPadでツイッターアプリならばこれ!!わたし、Osfooraに心中宣言!1466記者、学生に最適iPadアプリ=ノートと録音が同期するAudioNote【湯川】:TechWave -ライブドアブログ‘iPhone vs Android’ report finds Apple has three times Google’s market share — Engadget [...]

  4. [...] Posted iPadでblogの下書きをする – bookmarklet活用 | 普通のサラリーマンの <b>…</b>. [...]

  5. Raul より:

    いつも楽しく拝見しております。hiro45jpさんがWordPressに移行された記事を拝見し、私もはてなダイアリーから念願の移行を行いましたが、まだまだWordPressの記述やビジュアルリッチエディアタの挙動に四苦八苦している状況の中、今回の記事は大変参考になりました。iPhone/iPadアプリWordpPressも日本語入力環境ではおかしな挙動ですし、bookmarkletを活用し、iPadのSafariにてブログの下書きができそうです。

  6. hiro45jp より:

    Raulさん、コメントありがとうございます。
    ちょとでも参考になったならば嬉しいです(^^)
    iPadの活用方法をまだ模索してるんですが、
    これからどんどん可能性を探っていきたいと
    思っています。今後とも宜しくです!!

  7. ipon3g より:

    はじめまして、ipon3gと申します。
    Hiro45jpさんがはてなで書いていらした頃からちょくちょく参考にさせていただいています。
    いろいろと試してみているのですが、はてなが楽なので結局、はてなから他に移る事が出来ませんorz
    最近ははてなもiPhoneの表示に対応したので、まあ、いいかとも思っているのですが、こちらを見てるといろいろと試してみたくなってしまいます。
    これからも、更新楽しみにしています。

  8. hiro45jp より:

    ipon3gさん、コメントありがとうございます。
    はてな時代から!!重ねてありがとうですm(_ _)m
    はてな記法は、ホント良いですよねー。
    iPhone表示も速くて軽いですし、申し分ないです。
    ただ、WordPressは面白いですよー。
    blogを書くベースという枠を超えて、プラグインは
    iPhoneアプリを探すくらい面白いんです。
    色々なことがblogの中で実現していく。
    一度、この世界を体験しちゃうと、はてなに戻れなくて…。
    でも、WordPressじゃなかったら間違いなく、
    はてなに戻ってたと思います(^^)
    今後とも宜しくお願いします。

  9. [...] 参考記事&関連記事 ・和室からチラ裏日記 8/24版 twilogやってて良かった? | 和室からiPhone?Macな日記 ・Blackbird Pie :個別ツイートをブログに貼り付け|なにごとも経験です!ツイッターでつながる ・ほら出た!Blackbird bookmarklet|なにごとも経験です!ツイッターでつながる ・Blackbird Pieより簡単にツイートをエンベッドするブックマークレット登場 ・iPadでblogの下書きをする ? bookmarklet活用 | 普通のサラリーマンのiPhone日記 [...]

  10. [...] ASCII.jp:iPhone 3Gで使える! ブックマークレット大辞典 iPhone.dat ブックマークレットを使いこなすスレ iPhone/iPod touch でブックマークレットを活用する – soundscape out iPadでblogの下書きをする – bookmarklet活用 | 普通のサラリーマンのiPhone日記 [...]

  11. hirokirinsan より:

    [...] で、またもやこのサイトを参考にTextexpanderへ登録した。これだけであれだけのブログが書けるなら充分だな。 iPadでblogの下書きをする – bookmarklet活用 | 普通のサラリーマンのiPhone日記 [...]

コメントをどうぞ

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>