YouTube の動画をブログに貼り付ける - YouTubeHtml

このエントリーをはてなブックマークに追加 Pocket

GW 最後のプロダクトは inspired by @feelingplace さんで YouTubeHtml です。

YouTubeの動画をブログに貼りつけるためのブックマークレット、YouTube2HTMLをバージョンアップ!出力をiframeタグとobjectタグの2種類から選択可能になりました!さらに…。 | Feelingplace
YouTubeの動画をブログに貼りつけるためにはそれなりの手間が掛かります。共有をクリックして、その他モゴモゴしてクリックを繰り返してようやくコードを取得できるようになります。iPhoneからだとデスクトップ用のページに移管しないと取得すらできません。それらを簡単に済ませようとしたのが今回のブックマークレット、YouTube2HTMLです。

YouTube2HTML との違いは、

  1. YouTube を表示してない状態で動画を貼り付ける HTML を取得する
  2. 対象の動画は特定のアカウント(自分のアカウントを想定)がアップロードした動画のみ
  3. 出力される HTML は object タグのみ(iframe タグはなし)

です。

対象の動画は共有設定が「公開(誰でも検索、表示可能 - 推奨)」となっていなければならない点にご注意ください。 限定公開などになっていると API での検索にヒットしないからです。

フロントエンドは 2 種類用意しました。

フロントエンドの導入

設定が必要な項目は YouTube のアカウント名です。

各フロントエンドの設定方法は以下の通りです。

Windows/Mac/iPhone 汎用ブックマークレット

ブックマークレット内の userID という名前の変数に YouTube のユーザID を設定してください。

YouTubeHtmlBMUserID

上記の画像では私のアカウント名が設定されています。

MarsEdit 用サービスメニュー

Automator で workflow ファイルを開き、userID という変数に YouTube のユーザID を設定してください。

YouTubeHtmlAutomator

上記の画像では私のアカウント名が設定されています。

実行例

実行時の流れは PicasaHtml とほぼ同じです。

Windows/Mac/iPhone 汎用ブックマークレット

ブックマークレットを起動すると、取得する動画の最大件数を入力する画面が表示されます。

YouTubeHtmlBM1 1

次に動画の横幅を入力します。

YouTubeHtmlBM2 1

結果はプレビューつきのポップアップ画面です。 ×ボタンを押すと結果画面が閉じます。

YouTubeHtmlBM3

MarsEdit 用サービスメニュー

MarsEdit の場合も流れは同様です。

YouTubeHtmlME1YouTubeHtmlME2YouTubeHtmlME3

YouTubeHtml で貼りつけた動画

あとがき

文章や画像よりも動画の方が適している場合もあると思います。

iPhone や Mac で動画を撮影するのは簡単ですよね。 YouTube にアップロードするのも簡単です。 YouTubeHtml でブログに貼り付けるのも簡単になるハズですので、ぜひお試しください。

自分でアップロードしていない動画を貼り付ける場合は @feelingplace さんの YouTube2HTML をご利用いただければと思います。

AppHtml for MarsEdit

このエントリーをはてなブックマークに追加 Pocket

昨日は以下のエントリに泣きました。春友さん、ありがとうございます。

ブログ書いた / 最強ブログエディタ MarsEdit 上でブックマークレットを起動すると便利すぎてヤバい | なまら春友流 http://htn.to/zXXGCQ2011-05-04 22:49 via Hatena

そして今朝、以下のツイートを見て、AppHtml for MarsEdit を作りましたので公開します。

汎用版との違いは結果が MarsEdit のエディタに挿入される点です。

これは導入する!これならAppHtmlはMarsEditだけで完結できる!>>最強ブログエディタ MarsEdit 上でブックマークレットを起動すると便利すぎてヤバい | なまら春友流 http://j.mp/jbGoBF@spring_friends2011-05-05 06:50 via Reeder

AppHtml for MarsEdit はこちらからダウンロード可能です。

導入方法は春友さんの記事がとてもわかりやすいです。

最強ブログエディタ MarsEdit 上でブックマークレットを起動すると便利すぎてヤバい | なまら春友流
設定方法は @toshiya240 さんの上記記事を読めば設定できる。共通した大まかな流れを以下に述べる。3つ全てに共通している設定方法の流れ

丁寧な説明。ありがとうございます。

必要に応じて aff 変数に LinkShare のサイトID を設定してください。 テンプレ内の書式 No. の初期値を変更したい場合は fmt 変数の値を変更してください。

AppHtmlforMarsEdit本エントリとは関係ありませんが、春友さんも仰っているように FavPaste はエラーになることが多いですね。Twitter がもっと安定してくれるとよいのですが…

最新情報はこちら: Happy-Go-Lucky: MarsEdit

PhotoHtml for MarsEdit

このエントリーをはてなブックマークに追加 Pocket

春友(spring_friends)さんからリクエストがありましたので、PhotoHtml for MarsEdit を作りました。

@toshiya240 ちなみにPhotoHtmlのMarsEdit版構想ってあるのですか…?2011-05-04 14:24 via Echofon

こちらからダウンロードしてください。

設定

上記のリンクから ZIP アーカイブをダウンロードして展開してください。

PhotoHtml for MarsEdit.workflow を Automator で開いて、api 変数にご自身の APIキーを、nid 変数に NSID を設定してください。

PhotoHtmlForMarsEdit

PhotoHtml for MarsEdit.workflow を保存して、~/Library/Services に移動させてください。

カスタマイズ

オリジナルの PhotoHtml と同じです。

Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記
それ以外の設定項目は以下の通り。fmt (html format)出力テンプレートのパターン(標準で2パターン準備)を指定します。1だと「Flickr2Html」の書式、2だと画像のみ(サイズは幅192)の書式、3だと画像のみ(サイズ指定なし)の書式になります。1〜3共に、Flickr側の画質はMidium500です。

テスト

PictShare で Flickr に写真をアップロードしてテストしてみました。

PictShare - multiple photos uploader 1.4.5App
iPhone、iPod touch および iPad 互換 iOS 4.0 以降が必要
カテゴリ: ソーシャルネットワーキング 価格: ¥230
更新: 2011/04/18

2012-11-23 リンク切れになってしまったので削除しました。

ツイートをいい感じに Evernote に保存する方法

このエントリーをはてなブックマークに追加 Pocket

FavPaste に対して以下のようなコメントをいただきました。

これは定期的に実行して、Evernoteに保存したくなる。 http://fb.me/M3Ts1b0n2011-04-27 11:06 via Facebook

なるほど。この形式で Evernote に保存したら見やすくていいですね。

ということで Yahoo! Pipes と FeedBurner の組み合わせで作ってみました。

  • 一日分のツイートとメンションを Evernote に保存(Max 100件)
  • 画像のリンクがある場合はサムネイルを表示
  • ツイートに位置情報がある場合は地図を表示

という仕様です。

例: TwitterHtml

画像のサムネイル表示の例: TwitterHtml2

画像のサムネイル表示は以下のサービスに対応しています。

  • Twitpic
  • yFrog
  • Instagram

ご要望があればサービスの追加を検討しますのでご連絡ください。

それでは、セットアップについてご説明します。

セットアップ

  1. 自分のツイートとメンションの RSS を取得する。
  2. Yahoo! Pipes を経由した RSS を取得する。
  3. FeedBurner で Evernote へのメール投稿を設定する。

自分のツイートとメンションの RSS を取得する。

Twitter の検索ページで自分のツイートとメンションを検索します。

Twitter SearchVimperator

検索結果のページの右上にある「Feed for this query」というリンクの URL をコピーします。

From toshiya240 OR to toshiya240  Twitter Search  Vimperator

Yahoo! Pipes を経由した RSS を取得する。

こちらの Pipe のページを開いて、「url」欄に先ほど取得した RSS の URL を貼り付けます。

Pipes TwitterHtml  Vimperator

[Run Pipe] ボタンをクリックして、結果が表示されたら「Get as RSS」のリンクの URL をコピーします。 Twitter からのツイートの取得がエラーになる場合がありますが、とりあえずそのまま進めてください。

Pipes TwitterHtml  Vimperator 2

FeedBurner で Evernote へのメール投稿を設定する。

FeedBurner に Yahoo! Pipes の RSS を登録します。 FeedBurner

[次へ] ボタンをクリックしてください。

FeedBurner2

さらに [次へ] ボタンをクリックしてください。

FeedBurner3

[フィード管理画面へ進む] をクリックしてください。

FeedBurner4

[集客支援]-[フィード・メールマガジン] を選択して、[有効にする] ボタンをクリックしてください。

FeedBurner5

[Preview Subscription Link...] をクリックしてください。

FeedBurner6

Evernote のメールアドレスと画面に表示されている文字列を入力して [Complete Subscription Request] ボタンをクリックしてください。

FeedBurnner7

メール購読のリクエスト完了画面が表示されます。 入力したメールアドレス宛に認証用リンクが送信されるので、Evernote を開いてください。

FeedBurner8

Evernote で受信した認証用リンクをクリックしてください。

FeedBurner9

メール購読手続きは完了です。 FeedBurner のフィード管理ページに戻って、メール配信オプションを設定してください。

FeedBurner10

配信時間はお好みでどうぞ。[保存] ボタンをクリックしてください。

以上でセットアップは完了です。

あとがき

FavPaste もそうなのですが、Twitter からのツイートの取得がエラーになることがしばしばあるのが課題です。

が、これは仕方ないと思っております。

Bloggerでスマートフォンに最適化するならモバイルテンプレートがいい感じ

このエントリーをはてなブックマークに追加 Pocket
こんなツイートをいただきました。

この記事を紹介してあげたい http://bit.ly/jTdyfZ RT @toshiya240: [Happy-Go-Lucky] WordPress ユーザ以外もツイートを貼りつけようゼ - FavPaste http://bit.ly/jTdyfZ2011-04-28 00:52 via TweetList Pro

どれどれ。

Bloggerユーザがモバイルテンプレートを使うべき3つの理由 | Knk_n, aN unsKilled everNoter
Bloggerユーザはスマートフォン用に最適化されたページづくりにいくつか方法があります。今回モバイルテンプレートを導入してさらに過去に導入したBloggerTouchやMobStacと比べてモバイルテンプレートがどのように優れているのか紹介します。

なるほど。これはイイですね。

モバイルテンプレートを適用してみた

こちらにアクセスして、モバイルテンプレートを有効にしてみました。 1000000050.png

うん。読みやすいですね。 ドメイン名も変わっていません。

Blogger Touch は辞めてモバイルテンプレートにしますわ(^^)

Knk_nさん、ありがとうございました。

あとがき

せっかく iPad2 を入手したので、BlogPress というアプリで書いてみました。

思ったよりいけますね。

もちろん、hiro45jp さんの ShareHtml や拙作の FavPaste などのブックマークレットが無ければ iPad といえどもなかなか書く気にならないと思います。

あと、TextExpander も必携ですね。

BlogPress 2.2.2(¥350)

iPhone、iPod touch および iPad 互換 iOS 3.1 以降が必要

BlogPress 2.2.2
カテゴリ: ソーシャルネットワーキング
価格: ¥350 App
更新: 2011/03/04


iPhoneiPhone

TextExpander 1.1.8(¥600)

iPhone、iPod touch および iPad 互換 iOS 3.1 以降が必要

TextExpander 1.1.8
カテゴリ: 仕事効率化
価格: ¥600 App
更新: 2010/11/11


iPhoneiPhone