SPONSORED LINK

先日公開したばかりのiPhoneからツイッターのツイートをブログに貼り付けられるようにするブックマークレット、Tweet2HTML。

公開して間もないにもかかわらず、たくさんのブログで取り上げていただきました。

• Tweet2HTMLのテスト – @hebyumetan
• これは便利！Tweet2Html | シコウトレイン
• 何やらTweetをBlogに簡単に貼り付けられるということなのでTweet2HTMLを試してみた | 病院で働くおとうさん〜iPhoneもよろしく｜imuzio’s Blog
• 206：iPhoneでブログ書くために必要な武器追加装備拡充！の巻〜その２〜 – 煩悩の赴くままに
• iPhoneからツイッターのつぶやきをブログに貼り付けられるようにする 「Tweet2HTML」｜Twitter spot – Twitterをもっと楽しく面白く便利に！

ですが、いくつか問題点があったので改修しました。

どんな問題点があった？

まずは、先程も紹介させていただいた@hebyumetanさんのブログのエントリー、Tweet2HTMLのテスト – @hebyumetanを見ていただければわかるんですが、はてなダイアリーだと公式サイトで出力されるJavaScriptがそのまま表示されてしまいます。

もう1点は公式サイトでの出力だと表示が味気ない。やっぱりBlackBird bookmarkletタイプのほうが雰囲気が伝わるというところ。

という訳で…

問題の2点を改修しました。

その結果、

1. Twitter公式サイト版でJavaScript出力のon・offを選べるようにした。（はてなダイアリーだとJavaScript出力は不要のようです。）
2. BlackBird bookmarklet形式での出力が可能になった。

以上2点が変更点になります。

イメージがつきにくいかと思いますが、出力形式が3通りから選べるようになったということです。

Tweet2HTML-出力形式の選択 Photo by feelingplace

新しいTweet2HTMLのブックマークレットメーカーはこちらになります。

Tweet2HTMLメーカー

ぜひご利用くださいませ(^^)

関連がありそうなエントリー:

1. iPhoneからツイッターのツイートをブログに貼り付けられるようにするブックマークレット。
2. Twitterでエゴサーチするのも、たまにはいいと思う。
3. iPhoneだけでblogを更新するための環境作り。
4. YouTubeをブログに貼りつけるためのブックマークレット！YouTube2HTMLをリニューアルしました！
5. @feelingplace作のBookmarkletを使う上での気をつけておいたほうがいい3つのポイント。

SPONSORED LINK

2012/01/22追記

検索エンジンなどでこのページにたどり着いたみなさまへ。

ブックマークレットの最新版はブックマークレット | Feelingplaceに置いてあります。

大変お手数ですが、上記のリンク先をご覧いただきますようお願いいたしますm(_ _)m

以上、追記終わり。

やっぱりiPhoneからブログを書くのが大好きな@feelingplaceです。

以前、ネタフルさんで紹介されていたBlackbird bookmarkletというのをご存じでしょうか。

[N] 「BlackBird bookmarklet」ツイッターのツイートをブログに貼り付けられるようにするブック

これはその名の通り、ツイッターのツイートをブログに貼りつけられるようにするブックマークレットなんですね。

ただ、残念なことが1つ。そうです。iPhoneでは使えないんです。

BlackBird bookmarkletをiPhoneで使うとどうなる！？

まずはiPhoneのSafariでツイートを表示してみましょう。

垢BAN王子、@norirowさんがまたダメージを受けていますね(^_^;

このツイートのURL、mobile.twitter.comになっているのがわかると思います。

01 ツイートURLがmobile Photo by feelingplace

ここで、BlackBird bookmarkletを起動します。すると…

02 BlackBird bookmarklet起動 Photo by feelingplace

なんと！！twitter.comで起動してくれ！と怒られてしまいます(T-T)

03 ブックマークレットに怒られる Photo by feelingplace

これでは、iPhoneでツイートのHTMLタグを取得することはできません。

そこで、思い出したのがこの記事。

Twitterの引用ツールの決定版！Blackbird Pieのかわりに、公式で強力な引用ツールが実装されていた件 | 想造ノート

公式サイトのツイートの詳細画面ではEmbed this Tweetをクリックすると、

公式サイト　ツイートの詳細 Photo by feelingplace

このようにHTMLが取得できるんですが、iPhoneにはまだEmbed this Tweetは表示されていないんですよね。

Embed this Tweet Photo by feelingplace

そこで公式サイトの情報（Embedded Tweets | Twitter Developers）が載っていたんで辿っていくと、何とかブックマークレット化できそうな気がしたので、とりあえず作ってみました。

名前はTweet2HTMLとでもしておきましょう。

Tweet2HTMLでできること。

では、Tweet2HTMLでできることをスクショで見ていきましょう。

もう1度、垢BAN王子がダメージを受けているツイートに戻ります。

01 ツイートURLがmobile Photo by feelingplace

ここで今回紹介するブックマークレット、Tweet2HTMLを起動すると…

04 今回紹介するブックマークレットを起動 Photo by feelingplace

プロンプトにツイートのHTMLタグが表示されます。

あとはコピーしてお好きなエディタで加工するだけ。

05 HTMLタグを取得 Photo by feelingplace

ちなみに今回取得するHTMLタグは先程紹介した公式サイトのHTMLに準拠しています。

で、毎度おなじみのTextforceへ貼り付けてプレビューしてみると…

06 Textforceに貼付 Photo by feelingplace

こんな感じになります。これはJavaScriptが無効になっている状態になります。ブログを書く側としては、ツイートがBlackBird bookmarkletで取ってくるHTMLよりも内容がわかりやすいのでいいですよね。

07 プレビュー Photo by feelingplace

これをブログに貼り付けると以下のようになります。

@saita_ryouhei @feelingplace ぐはっ。・゜・(ノД`)・゜・。

— ノリロウ (@norirow) January 14, 2012

こんな感じでHTMLタグをiPhoneでも取得することができます。ただ、これってあまり現実的な方法ではないですよね。だって、Twitterは普段アプリで見ているから。

そこで、もう1つの方法。

これはアプリでできるできないがあるかも知れませんが、ボクが普段使っているTweetlogixでの例をご覧ください。

まずはアプリでツイートの詳細画面まで行きます。

08 ツイートを表示 Photo by feelingplace

Tweetlogixの場合、ここでツイートを長押しするとメニューが表示されるので、Copy Linkをタップ。

09 ツイートのURLをコピー Photo by feelingplace

先程のブックマークレットをどこでもいいので起動してください。すると、ツイートのURLを入力するよう求められますので、

10 Twitterサイト以外で起動するとURLの入力を求めます Photo by feelingplace

さっきコピーしたツイートのURLを貼り付けてOKをタップしてください。すると…

11 プロンプトにツイートのURLを入力 Photo by feelingplace

同じようにちゃんとHTMLタグを取得することができました(^^)

12 HTMLタグを取得 Photo by feelingplace

このようにTweet2HTMLでは、

1. ツイートのURLが表示されていればそのツイートのHTMLタグを取得
2. ツイートのURLが表示されていなければツイートのURLを入力することでそのツイートのHTMLタグを取得

することができます。

もちろん、これはiPhoneだけでなく、デスクトップからでも利用することが可能です。

Tweet2HTMLのブックマークレットメーカーはこちら。

Tweet2HTMLのブックマークレットメーカーはこちらになります。

Tweet2HTMLメーカー

設定項目を確認しておきましょう。

Tweet2HTMLメーカー Photo by feelingplace

1. ブックマークレット名：お好きな名前を入力してください。
2. 出力方法：6種類の中から選択してください。
3. 書式テンプレート：変更するとHTMLタグの取得ができませんのでご注意ください。

設定を終えたらBookmarkletを生成するボタンをポチッとします。下にスクロールすると、

Tweet2HTML完成 Photo by feelingplace

上の画像のようにブックマークレットのリンクができているので、お好きなところへ登録するだけです。

これでiPhoneからもツイートをブログに貼り付けることができる！！

WordPressではTwitter ブラックバード・パイプラグインがありましたけど、これならプラグインの必要もありません。

現時点では公式サイトのようにAlignmentの設定はできませんが、またそれはおいおいできればいいなと思います。

使ってみて気になる点があれば@feelingplaceまで教えていただければ幸いです。

それでは、よりよいモブログライフを！！

関連がありそうなエントリー:

1. iPhoneからブックマークレットを起動した時のテスト。
2. ブックマークレットのまとめページをまとめ直しました。
3. iPhoneからツイッターのツイートをブログに貼り付けられるようにするブックマークレット、Tweet2HTMLをバージョンアップしました。
4. YouTube2HTMLとFlickr2HTMLから、するぷろ for iPhoneにデータを流し込めるようにしました。
5. ブックマークレットのまとめページを作りました。

SPONSORED LINK

ずいぶん増えてきたなぁ…。

ウチでの初めてのApple製品は初代iPod nanoでした。発売して間もない頃に買った覚えがあるので2005年の秋ってことになります。

それ以降少しずつ増えていき、現在はこんな感じに(^_^;

我が家のApple製品 Photo by feelingplace

せっかくなんで我が家のApple製品の変遷を振り返ってみることにします。

第1段階（2007年末くらい）。

MacBookProを買ったのが2007年の2月。

プリンタを無線化したいと考えて、まずはAirMacExtremeを購入。もともとあったCanon MP600とUSBでつなぎ無線化に成功。図には入れてませんが、iPod Touchも無線でつなぐようにしてあります。

連携図1 Photo by feelingplace

年賀状の編集はリビングのMacBookProでじっくり行い、プリントは別の部屋に置いてあるMP600でできるようになりました。

第2段階（2008年末くらい）。

今の家に引っ越ししたのが2008年8月。その際にTV（TOSHIBA REGZA 42ZV500）と5.1chホームシアターシステム（BOSE LifeStyle18）を購入。

せっかくiTunesにたくさん入っている楽曲を5.1chで聴けないのはもったいないと考え、（当時はAirPlayはなかったので）AirTunesが使えるAirMacExpressを購入。

AirMacExpressとBOSE LifeStyle18とは今の日本のオンラインアップルストアでは売っていないAirPort Express Stereo Connection Kit with Monster Cables – Apple Store (U.S.)でつないで、TVとBOSEは光デジタルケーブルでつないでいます。

連携図2 Photo by feelingplace

2008年7月11日、iPhone3Gが日本で発売された当日に購入していたボクは、iTunesのライブラリを全てiPhoneに放り込んでいたので、MacBookProを立ち上げなくても5.1chで聴けるようになりました。

第3段階（2011年11月末）。

AppleTVの第2世代を購入。もちろんAirPlay目当てですが、それ以外にもFlickrやYouTubeにアップしたフォルテの画像や動画をTVで観たいというのもありました。

連携図3 Photo by feelingplace

その後iPad2を購入し現在に至ります。

終わりに。

簡単に振り返ってみましたが、まぁ何とも贅沢な環境です。

最近はちょっとしたブラウズやネットショッピングはiPad2で済ませていますし、ブログを書くのもiPhone4SやiPad2で書けるからMacBookProを立ち上げる機会がめっきり減りました。

MacBookProを立ち上げるのは週に1度iPhoneを同期したりバックアップを取るため、あとは年賀状作成とか今回の載せたような画像を作る時くらいでしょうか。

気になることとしてはバックアップ環境が弱いこと。Firewire接続の外付HDD（500GB）があるんですが、それも大容量&無線化してしまいたいのが本音ではあります。

それさえできれば、MacBookProをリプレイスする時にはMacBookAirにしてしまうような気がしています。

関連がありそうなエントリー:

1. 再インストールしました。
2. iWork’09のトライアル版からシリアル番号を購入してアクティベーションする方法。
3. MacBookProの画面が真っ暗に!?
4. AirTunesで快適音楽生活♪
5. Adobe CS5へのバージョンアップを巡るボク（@feelingplace）と奥さん（@calove0825）との攻防

SPONSORED LINK

せっかく買ったんだからね！

アレ　コレ　ソレ　キャンペーンを利用してiPad2がやってきた我が家ですが、もちろん1台しかないので家族での活用方法は未だ模索中。

しかし！せっかく手に入れたiPadを放っておくのはもったいない！

ということで、iPadでブログを書く環境を簡単に整えてみました。

でこの記事のキッカケは@flavour47さんのこの一言。

@feelingplace おー！さすがふぃーぷれさん！これは記事にして欲しいかも？w

2011年11月2日 12:11 PM via Tweetbot for iPhoneReplyRetweetFavorite

@flavour47

Yuichi 4S

こんなことでも何かヒントになるなら書かせていただきます！

iPadでブログを書く環境作り。

iPadでブログを書くことについては@goryugoさんもiPadのみで「普通に快適な」ブログ更新が出来る環境を整える（β） | goryugoという記事を書いておられますが、ボクが作っている環境もほぼ同じです。

iPadの画面はこんな感じ。

IMG_0013 Photo by feelingplace

ブログ書きにはTextforceとTextExpander、WordPressへのアップロードにはするぷろ for iPhone（@isloopさん、ゴメンなさい！！）、公開時間の調整にWordPress。画像の編集にPhotogene for iPad、FlickrへのアップロードにPictShareを使ってます。

Textforce – Dropbox text editing 2.4.2（￥350）
カテゴリ: 仕事効率化, ビジネス
販売元: yyutaka – Yutaka Yagiura（サイズ: 2.1 MB）

TextExpander 1.2.2（￥450）
カテゴリ: 仕事効率化
販売元: SmileOnMyMac, LLC – SmileOnMyMac, LLC（サイズ: 2.3 MB）

するぷろ for iPhone 1.2（￥350）
カテゴリ: ソーシャルネットワーキング, 仕事効率化
販売元: Gachatech – isshin（サイズ: 1.4 MB）

WordPress 2.9（無料）
カテゴリ: ソーシャルネットワーキング, 仕事効率化
販売元: Automattic – Automattic, Inc.（サイズ: 4.4 MB）

Photogene for iPad 3.2（￥250）
カテゴリ: 写真／ビデオ, ユーティリティ
販売元: Omer Shoor – Omer Shoor（サイズ: 8.6 MB）

PictShare – multiple photos/movies uploader 2.6（￥250）
カテゴリ: ソーシャルネットワーキング, 写真／ビデオ
販売元: itok – 啓 Ito（サイズ: 3.7 MB）

これプラス、Safariがあればもう十分です。

では、何を工夫したのか？それはいかに素早くiPhoneと同じ環境を作るかです。

iPhoneと同じ環境を素早く作るためにできること。

iPadにiPhoneと同じ環境を素早く作るためには下準備が必要です。

下準備と言っても簡単なことです。設定が面倒なアプリの設定を保存しておくことだけですから。

ボクの例を具体的に挙げると…

• するぷろ for iPhone用：WordPressのxmlrpcとCSSのURL
• Safariのブックマークレット用：カエレバ・ヨメレバのブラウザ移行用データ

この2つをDropboxに放り込んでおくだけです。

Textforceからみるとこんな感じ。

IMG_0267 Photo by feelingplace

xmlrpcとかCSSのURLはタイポしたくない。またカエレバ・ヨメレバのデータはとても覚えておけるものではないので、それぞれテキストファイルで保存しておきます。

あとはTextforceで全文コピーして設定したいアプリに貼りつけてしまえばおしまいです。

TextforceとTextExpanderの設定。

こちらはもっと簡単です。

Textforceはもともと保存場所がDropboxですし、TextExpanderもDropboxを通してのsyncが可能になっています。

以下のリンクからDropboxのアカウントが作れます。もしまだお持ちでない方はこの機会にぜひどうぞ。

Dropbox – 生活をシンプルに

まず、MacのTextExpanderからDropboxとリンクします。

Menubar Photo by feelingplace

設定のsyncタブで、Dropboxにチェックします。

Menubar Photo by feelingplace

TextExpanderのデータを常にDropboxに置きますと聞かれるので、Link to Dropboxをクリック。

Dropbox Photo by feelingplace

すると、Dropboxの中に勝手にTextExpanderのフォルダが作られています。この中にTextExpanderのデータが保存されるようになります。

次はiPadのTextExpanderでの作業。

IMG_0018 Photo by feelingplace

同じように設定から。syncの項目にUse Dropboxのチェックがあるので迷わずチェック。

IMG_0016 Photo by feelingplace

すると、Dropboxのアカウント・パスワードの入力が求められます。

IMG_0019 Photo by feelingplace

ここが1番のポイント。Link to DropboxとReplace Dropbox Dataと選択肢が出てきますが、ここで選ぶのはLink to Dropboxが正解。

IMG_0020 Photo by feelingplace

無事リンクが済み、左上の項目にHTML Tagsというグループが1つ増えたのがわかります。

今回のまとめ。

今回はアプリの設定はDropboxに放り込んでおくと何かと便利ですよってことでした。

実際、iPadで書く環境を作るのに掛かった時間はアプリのダウンロードを除けば10分弱でしたからね。

これでボクは、Mac・iPhone・iPadでブログを書く環境が整った訳です。

あとは更新頻度を上げるだけだな(^_^;

Posted from SLPRO Blog Editor for iPhone on iPad.

関連がありそうなエントリー:

1. 大辞林とウィズダム英和・和英辞典をセールで購入！この2つってTextforceと連携してたのね。
2. 2011/04/10から2011/04/16のRSSチェック。
3. Textforceがアップデート！さぁ、TextExpanderを使おう！
4. にほんブログ村の登録カテゴリを一戸建 旭化成ホームズに変更しました。
5. ホーム画面だけで完結させる！ボクがiPhoneでブログを書くための12のアプリ。

SPONSORED LINK

お待たせいたしました(o_ _)o

YouTubeをブログに貼りつけるためのブックマークレット、YouTube2HTMLのリニューアルがようやくできましたので、ここに公開いたします！

YouTube2HTMLとはなんぞやという方ももちろんお見えだと思いますので、簡単におさらいしていきたいと思います。

初代YouTube2HTMLの公開が2010年12月。

YouTube（チャンネル以外）からブログに貼りつけるHTMLを生成するBookmarklet。 | Feelingplace
初代YouTube2HTML

こいつも初代Flickr2HTMLと同じようにYahoo!Pipesを利用してデータを取得し出力していました。

その後、出力する形式を2種類（iframeとobject）にしたり、出力サイズを指定できるように改善してきました。

今回はYahoo!Pipesのv2エンジンへの移行におけるFlickr2HTMLとYouTube2HTMLの現状と今後について。 | Feelingplaceという問題もあって、そのままでも一応は動いていたYouTube2HTMLの脱Yahoo!Pipes化を行いました。

YouTube2HTMLでできること。

基本的には変わっていませんが、念のためYouTube2HTMLでできることを確認していきましょう。

• YouTubeの動画を貼りつける埋め込みコードを取得。（リクエストによる埋め込み無効にされているものは除く。）
• 埋め込みコードは新しい埋め込みコード（iframe）と以前の埋め込みコード（object）の2種類から選択。
• 脱Yahoo!Pipes&爆速化。（@hiro45jpさんのおかげです。）
• 動画のサイズ設定はブックマークレット作成時に設定することに変更。（ブログに貼りつける度にサイズ変える人もそんなにいないだろうという判断もあり。）
• ブックマークレットメーカー対応！（@matubizさん、ありがとう！）

という訳で、Flickr2HTMLに続いてPhotoHtmlの力を借りて爆速化とブックマークレットメーカー対応を果たしました。

ブックマークレットメーカーはこちら。

YouTube2HTMLのブックマークレットメーカーはこちらになります。

Youtube2HTMLメーカー

設定項目を1つずつ確認していきましょう。

Youtube2HTMLメーカー Photo by feelingplace

1. ブックマークレット名
• ブックマークレットの名前です。覚えやすいように置き換えてください。
2. 動画の幅
• 出力する動画の幅を入力します。高さは自動で計算されます。
3. 出力方法
• 6種類の中から選択します。Textforceの出力が2種類あるのはこだわりです。
4. 書式テンプレート
• カスタマイズも可能です。パラメータ設定などちょっとでも間違えると動かないのでご注意を…。

設定を終えたらBookmarkletを生成するボタンをポチッとします。

下にスクロールすると…

Youtube2HTMLメーカー Photo by feelingplace

上の画像のようにブックマークレットのリンクができているので、お好きなところへ登録するだけです。

YouTube2HTMLの使い方。

使い方と言ってもいたってシンプルです。

ブログに貼りつけたいなぁと思う動画のページでYouTube2HTMLを起動するだけ。

リクエストによる埋め込み無効がされていなければ、

http://www.youtube.com Photo by feelingplace

こんな感じで動画のサイズがちゃんと入って出力されます。

リクエストによる埋め込み無効になっている動画でも結果は表示されますが、動画の幅・高さは取得できません。もちろんそのコードを埋め込んでもブログなどで表示することはできませんのでご注意ください。

ちなみに上の画像で取得したのがこちらの動画。（Object版）

そしてこちらがiframe版。

うーん、やっぱりフォルテかわいいなぁ。

作っていて感じたこと。

Flickr2HTMLを作った後だったんで、結構簡単にできちゃうかなぁと思っていたんですが、とんでもない間違いでした。

いろいろ調べた結果、ボクが使おうとしていたoEmbedだとJSONPは使えないことがわかり、最終的にはEmbedly | Embed any URL through one powerful APIを利用してJSONPで取得するようにしました。

まー、しかしホント、毎度毎度思うんですが、分からないことだらけでも調べていくと何とかなるもんですね。

@N1kuch1さんからiframeとObjectの違いを詳しくってリクエストが来てたんですが、それはまた次回ってことで(^_^;

関連がありそうなエントリー:

1. ブックマークレットのまとめページをまとめ直しました。
2. iPhoneからブックマークレットを起動した時のテスト。
3. YouTube2HTMLとFlickr2HTMLから、するぷろ for iPhoneにデータを流し込めるようにしました。
4. YouTubeを貼りつけるためのタグを生成するブックマークレット、YouTube2HTMLを修正しました。
5. YouTubeの動画を貼りつけるためのタグを生成するBookmarklet、YouTube2HTMLを全面的に修正しました。