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

Flickr画像をタグや件数で一括取得する – PhotoHtml

はじめに…

常々感じていたこと。

もっとblogエントリーを効率的にしたいなーと。ボトルネックだったのが画像の処理でした。画像のHTMLタグ作るのがホント面倒なんです(;^ω^)これまでのやり方は、以下の通り。WordPressに移行して以来、ずーっとこのやり方でblogを書いてました。

  • 画像名に連番を付けてサーバーにアップロード
  • リンクのHTMLタグをひとつだけ作成
  • アップした画像の数だけHTMLタグをコピー&ペースト
  • HTMLタグ内の画像名の連番をずらして全画像のHTMLタグが完成

正直、ルーチンワーク。うんざりでした。この一連の作業を楽にする為に、やっと一大決心をしました。画像を全てFlickrに置こう。もう連番とはおさらばだ。Flickrに画像をおけば、借りているレンタルサーバーの負荷も減るし、一石二鳥だ。

一方、一抹の不安があるとすれば「yahoo.com」が怪しいこと。

でも「flickr.com」でドメインが取られているし、もしどこかが買収したとしても「flickr.com」自体が無くなることは無いだろう。もし画像のリンクが変わってもWordPressにはリダイレクトのPluginもあるから、何とかなるんじゃないか…。

そんなこんなで、新作のbookmarkletは、Flickrを対象に作ることにしました。
参考にしたのは@feelingplaceさんの「Flickr2Html」というBookmarklet。

このbookmarkletの使い勝手を損なうこと無く、更にblogエントリーに特化した拡張をしてみよう!ってことで @feelingplaceさんに了承を得て、カスタマイズすることにしました。名前は迷ったんですがAppHtmlと似せて「FlickrHtml」に…(;^ω^)

※@feelingplaceさん、紛らわしくてごめんなさい…。

(1/16 追記)
やっぱり紛らわしいので「PhotoHtml」にしました…(;^ω^)

「PhotoHtml」とは何じゃ?

ブラウザおよびiPhone上で使えます。Flickrサイトで使えば「Flickr2Html」と同じ動きをします。一方、他サイトで使えば「タグ」もしくは「件数」を指定してFlickrから根こそぎ画像を取ってきてくれます。画像は例のごとくお好みの書式で出力してくれます。

主な機能は以下の通り。「Flickr2Html」に加えた部分はAdd!の部分です。

  • Flickrサイトからの画像抽出
  • タグ指定と件数指定によるFlickr画像の一括抽出(Flickrサイト以外) Add!
  • 出力テンプレート(標準2パターン)の指定 Add!
  • 出力テンプレートの定義ファイルの指定 Add!
  • 結果を別ウィンドウ表示(HTMLタグ+プレビュー)するモードの指定 Add!
  • 結果を確認しながら途中終了するモードの指定 Add!

「AppHtml2」と同じようにYahoo! Pipesの中でやっていたことの全てをBookmarkletの中で指定できるようにしました。使われる方は、Yahoo! Pipesの知識を必要とすることなく、Bookmarkletをいじるだけで自分好みのBookmarkletに仕上がります。

PC上でのデモ

最初のデモは「Flickr2Html」と同じ動きです。

110116-0001

Flickrサイト上でBookarkletを起動します。

110116-0002

結果が別ウィンドウ(HTMLタグ+プレビュー)に表示されます。今回は「Flickr2Html」の書式と同じ「fmt=1」で表示してます。

※表示されない場合、ブラウザのポップアップブロックを無効にして下さい。

110116-0003

別ウィンドウはうざい。ポップアップで今まで通り表示させたい。そんな方はもうひとつの出力形式が選べます。但し、ポップアップ形式だと、作成されるHTMLに「空行」が入らないのであしからず…。仕様上、仕方無しです。

※出力形式の変更は、Bookmarklet無いの「out=1」を「2」に変えるとできます。

次にFlickrサイト外でBookmarkletを起動した際の動きを説明します。

110116-0004

例えば私のサイト上でBookmarkletを起動します。

110116-0005

Flickr画像群にタグを付けている場合、タグ指定できます。空でも構いません。

110116-0006

一括取得するFlickr画像のMax件数を入れます。タグと組み合わせた場合、ここで指定した件数よりも少なく取得されることもあります。AND条件なので。ちなみにMax件数のデフォルトは20件にしています。この20件もBookmakelet内で変更できます。

※動きとしては直近画像を指定した数だけ取得し、逆ソートしてHTMLを作ってます。

110116-0007

取得できました。上記は、余計なコメントを省き、画像のみでスクショ説明ようにサイズ変更した「fmt=2」の書式で表示してます。

iPhone上でのデモ(Textforce等)

iPhone上でも同じように動きます。Flickrサイトを見ていれば一撃でHTMLを生成し、Flickrサイト外であれば「タグ」と「件数」を聞いてきます。

今回もTextforeを例にデモしてみます。

Textforce – Dropbox text editing 1.5App
iPhone、iPod touch および iPad 互換 iOS 4.0 以降が必要
カテゴリ: 仕事効率化 価格: ¥230
更新: 2011/01/15

最初のデモは「Flickr2Html」と同じ動きです。

カメラロール-688カメラロール-689

Flickrサイト上でBookmarkletを起動します。

カメラロール-690カメラロール-691

Textforceが勝手に起動してHTMLが作成されます。

次にFlickrサイト外でBookmarkletを起動した際の動きを説明します。

カメラロール-692カメラロール-693

「タグ」と「件数」を聞いてきます。

カメラロール-694カメラロール-695

一括してHTMLが作成されてTextforceに流し込まれます。ちなみにさっきと画像が違うのは、どんどんFlickrに追加してるから…。気になさらずに(;^ω^)

Bookmakrlet本体

Bookmarkletの本体は以下の通り。

PC用(結果の別ウィンドウ表示モード)

PC用(結果のポップアップ表示モード)

iPhone用(Textforce版)ATOK連携しない

iPhone用(Textforce版)ATOK連携する

そのまんま登録用はドラッグ&ドロップでお気に入りに追加して下さい。iPhone登録用はリンクをブックマークしてから中身を編集。アドレスの「javascript:〜」よりも前(つまり「http://iphone-diary.com/?」まで)を削除して下さい。

※1/16にバージョンupしたTextforce 1.5では「aft=」の部分を「quick_look」にすると連携後、即プレビューが見れるようになりました。お試しあれ♪

Bookmarkletのカスタマイズ項目

Bookmarkletの中身ですが、タグ指定や件数指定で一括取得したい場合には「APIキー」と「NSID」が必要になります。一方「Flickr2Html」の用途でのみ使う場合には「APIキー」と「NSID」は必要無いのです。「APIキー」と「NSID」は以下をご参考。

APIキーは上記サイトに従って取得してみて下さい。「Key」の部分が必要です。尚、APIキーは規約上、公開NGの為、Bookmarklet本体は「API_KEY」になってます。

NSIDは上記サイトの入力欄にユーザーID(hiro45jp等)を入れて「Get my Flickr ID」を押す。すると結果が返ってきます。「Your Flickr NSID is」以降の部分がNSIDです。Bookmarklet本体の「NSID」を置き換えます。

それ以外の設定項目は以下の通り。

fmt (html format)
出力テンプレートのパターン(標準で2パターン準備)を指定します。1だと「Flickr2Html」の書式、2だと画像のみ(サイズは幅192)の書式、3だと画像のみ(サイズ指定なし)の書式になります。1〜3共に、Flickr側の画質はMidium500です。

out (output mode)
結果の見せ方。1だと別ウィンドウにHTMLとプレビューを表示します。2だとポップアップ表示です。2にするとHTMLタグ間に「空行」が入らないので注意です。

max (max number of photos)
取得する画像数のデフォルト表示。「20」にしてますが、実は入力時に「500」まで入力できます。たくさんにしちゃうとパフォーマンス的に辛いので20なのです…。

tag (photo tag)
タグ指定のデフォは「空」にしてますがいつも決まったデフォルトのタグがある方は指定して下さい。ちなみにタグは空白入れるとOR条件で複数指定になります。

tmp (template file)
「fmt」で指定される出力テンプレートを格納してあるファイル名のフルパスです。DropboxのPublicフォルダにファイルを置くのが楽ちん。私はそうしてます。

dmt (delimiter)
出力テンプレートのファイル内のパターンとパターンを区切る為の文字です。

出力テンプレートファイルの設定

出力テンプレートは、AppHtml2と同じ仕組みで外出しにしてファイルから読み込むようにしています。DropboxのPublicフォルダにデフォルトのテンプレートは入れています。カスタマイズされる方は、ご自身のテンプレートファイルを指定して下さい。

ちなみに今の標準のテンプレート「FlickrTemplate.html」は上記の通り。リンク先を右クリックして保存し、直接HTMLを編集、バターンを追加していくことでご自身の出力テンプレートが作れます。使える予約語はHTML内をご確認下さい。

テンプレートの記載ルールはAppHtml2と一緒です。

最後に…

断言します!

PCやiPhoneを問わず、今よりも劇的にblogエントリーがしやすくなります!

「AppHtml2」でアプリ紹介HTMLを作った後、「PhotoHtml」でFlickrに溜めたスクショを一括で取得する。そうやって文章以外のblogの構成を作ってから、最後に文章を埋めていく。逆に文章だけ作って、後から順番に隙間にPhotoHtmlの結果のHTMLタグを埋めても良い。いずれにしても面倒なルーチンワークとはおさらばです!

尚、スクショ画像をFlickrに一括タグ付け、一括アップロードするiPhoneアプリが、最近は何個か出てきてるので、これから色々と物色していこうと思ってます。

FlickStackr 1.6.2(¥230)

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

FlickStackr 1.6.2
カテゴリ: 写真
価格: ¥230 App
更新: 2010/12/21

imagesimages

今、使ってるのは「FlickStackr」。一括タグ付けできるのってこれくらいかな…。

@donpyさん、@ttachiさんが、がっつりレビューされてます。

PictShare – multiple photos uploader 1.0.2(¥230)

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

PictShare – multiple photos uploader 1.0.2
カテゴリ: ソーシャルネットワーキング
価格: ¥230 App
更新: 2011/01/08

imagesimages

「PictShare」が一括タグ付けできたら嬉しいんだけどなぁ(;^ω^)

@goryugoさん、@ひとぅさんも強烈にオススメされてます。

ちなみに今回のBlogエントリーから全てをFlickr画像にしてますヽ(´ー`)ノ やっとHTMLタグの面倒から解放されます。もし良かったら使ってやって下さい m(_ _)m

(追記)
実は本Bookmarkletは「AppHtml3」として公開する予定でしたが、Appじゃないんで、AppHtml3と呼ぶことは止めました…。なので「AppHtml3」構想は遠い先です。

(追記の追記)
Flickrにアップロードした直後だとBookmarkletで拾ってくれないみたい。恐らくFlickr APIのキャッシュっぽいが…。仕方無いんで、そんな時はしばしお待ちを…。

-

タグ: Bookmarklet, Flickr, FlickStackr, hiroスタイル, HTML, PictShare, Textforce, Yahoo!Pipes

Similar Posts:

34 Comments

  1. [...] に関する、はてなブックマーク新着情報です。 Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 [...]

  2. [...] Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 [...]

  3. [...] Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 1月 16th, 2011 @ 08:22 am › tyudon ↓ Leave a comment Flickr画像をタグや件数で一括取得する – Ph [...]

  4. [...] Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiP… [...]

  5. [...] ◆ 普通のサラリーマンのiPhone日記 Flickr画像をタグや件数で一括取得する – PhotoHtml [...]

  6. [...] 1週間ぶりのお弁当です! 子供って居るとうるさいと思いますが、居ないと淋しすぎますね。余りにも家が静かで何もせずにボーッとしてしまいました。   そうそう、話は変わりますがヒロさんが凄いブックマークレットをまた作ってくださいましたね! Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiP… [...]

  7. [...] ブログに画像貼るのまでスーパーラクになった Flickr画像をタグや件数で一括取得する – PhotoHtml via: 普通のサラリーマンのiPhone日記 [...]

  8. [...] せて活用する作業であり、活用可能な状態のログを言う。 p.25 2010年のライフログの定義 その場で解決したいほんの小さな事を一つ一つ解決できる ライフログで何が出来るか、について [...]

  9. [...] や件数で一括取得する ? PhotoHtml | 普通のサラリーマンのiPhone日記 – http://iphone-diary.com/?p=9143 [...]

  10. [...] な。 Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 [...]

  11. [...] lickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 http://iphone-diary.com/?p=9143 Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiP [...]

  12. [...] – 派生まとめ [url href="http://iphone-diary.com/?p=7810"temporary/url Flickr画像をタグや件数で一括取得する – PhotoHtml [url href="http://iphone-diary.com/?p=9143"temporary/url [...]

  13. [...] この画像掲載は@hiro45jpさんのブックマークレットというJavaScriptによる自動Web操作によって画像貼り付けHTMLを生成したものです。素晴らしい。iPhone、iPadのような携帯機器から簡単に生成できるようになりました。 Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiP… [...]

  14. [...] Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 [...]

  15. [...] Flickr画像をタグや件数で一括取得する – PhotoHtml はじめに…常々感じていたこと。もっとblogエントリーを効率的にしたいなーと。ボトルネックだったのが画像の処理でした。画像のHTMLタグ作るのがホント面倒なんです(;^ω^)これまでのやり方は、以下の… いまさらながら、ひろさん(@hiro45jp)エライ! [...]

  16. [...] Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 ひろさんエライ! [...]

  17. [...] エントリーで紹介したSSも「PicShare」を使って写真をアップロードし、 @hiro45jp さん提供の「PhotoHmtl」というブックマークレットで一括で画像htmlを自動生成させて貼り付けて作成しました。 [...]

  18. [...] で、しょうがないのでアプリの紹介でもしてみます。 今回は@hiro45jpさんのPhotHTMLを使って書いてみます。 Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiP… [...]

  19. [...] Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 [...]

  20. [...] ishiimakoto published Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記. [...]

  21. [...] by sadoru on 3月.10, 2011, under Mac, PC, Web こちらで激しく便利だと言われている画像挿入するブックマークレットをお試し。 Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiP… [...]

  22. [...] 設定は@hiro45jpさんのサイトをご覧くださいませ。 Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiP… [...]

  23. [...] Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 [...]

  24. [...] Flickr画像をタグや件数で一括取得する ? PhotoHtml | 普通のサラリーマンのiPho… [...]

  25. [...] ちなみにこの複数画像取得の機能は、hiro45jpさんのPhotoHtmlを参考にされたそうですが、 PhotoHtmlは、@feelingplaceさんのFlickr2HTMLを参考にして作成されたとの事で、 連携してどんどん進化して [...]

  26. [...] 普通のサラリーマンのiPhone日記さんの記事に 書いてるbookmarkletを起動させます。 [...]

  27. [...] » Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 [...]

  28. [...] » Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 [...]

  29. [...] 「大解剖!」とは大きく出ましたね。僕。 そんな大層なもんじゃあ無いかもしれませんが、僕がどうやってブログを書いてるか晒そうと思います。 自分がどういう風に記事を投稿しているのか振り返りながら書いていきますんで、もしかしたらたいした発見ないかも。 とりあえずスタート! 全体の流れ 僕の記事投稿までの流れは、大きく分けて2つあります。 1.突発書き その日見たニュースや記事、その日落としたアプリやWordPressのプラグインの「これは!」って所を引っ張ってきて、主観的なお話を乗っけて記事にします。 着想から投稿までが激速。これが日常的にうまーくできたらなぁ、と思いつつ中々むずかしい。 2.計画書き 思いついた事をとりあえず「ブログ」っていうリストにいれといて「書こうかなー」となったら新規投稿を開き、書くのに必要な要素をつらつらあげていきます。 だいたいそれらが揃ったら、やっとまとめ始めます。時間がかかります。 要素をあげるとかそれっぽく書いてますけど、画像を集めるとか、動画を撮影するとかそんなんです。 ま、1も2も書きながらやってるので「勢い」が有るか無いかくらいの差だと思うんですけどね。 細かいとこ アイデアが出てから書き始めたとこで共通する、細かい作業を順を追って挙げていきます。 1.アイキャッチ画像を手に入れる  記事の最初の画像です。 2.とりあえず書き始める  とにかく書き始めます。画像も書きながら入れてきます。 3.見出しの順番を変える  こっちのが先のほうがいいかなー、とか。でもだいたい最初のまんま。 4.文章をなおす  変なとこなおします。 これだけです。なんかこう、書いてみるとすげー単純ですね。 もっと複雑なことやってるかと思ってたら、そうでもなかったです。 なんか頭の中のをそのまま書いていってる感覚でしょうか。あまり難しいことは考えていないようです。 では次からは、具体的にどういったツールやサービスを使っているかってのを紹介いたします。 アイキャッチ画像を手に入れる こちらのサイトを使わせていただいてます。 写真素材 足成【フリーフォト、無料写真素材サイト】「写真素材足成」は、全国のアマチュアカメラマンが撮影した写真を、写真素材として無料で提供しています。 サイコーすぎます。 僕のブログ記事の一発目の画像はここから引っ張ってきてる率95%です。 こちらのサイトで検索して、Dropboxに保存します。 とりあえず書き始める 「これがいい!」「すげぇ!」を並べていきます。だいたいそんな感じ。 アプリやWordPressのプラグインなんかの紹介をするときは、途中で「これ画像あったほうがいいかな?」ってなってからスクショを撮ります。 書きながらです。なんか効率悪い気もしますが。 1.PhotoSync んで、iPhoneのスクショは「PictShare」を使ってMacに送っていたんですが、最近はすっかり「PhotoSync」です。 PhotoSync カテゴリ: 写真価格: ¥230 これ速いです。このアプリについては、 iPhoneからちょー簡単に画像転送出来る「PhotoSync」がアップデートしてますますちょー簡単に画像転送出来るようになった | goryugoこいつが先日アップデートして「QuickTransfer」という機能が追加され、ますますちょー便利になりました。 こちらや、 PhotoSync iPhoneとかiPadの写真転送がとんでもなく快適で早く行えるようになるアプリ | goryugoiPhoneとかiPadのスクショを手間無くパソコンに送りたい。iPhoneから直接iPadに写真を送りたい。そういう悩みが一発で解決。 こちらをご覧いただくと良さが分かります。 2.Skitch Macに飛んだ画像は色々と編集してやるわけですが、その時に使うアプリがこれです。 Skitch カテゴリ: 仕事効率化価格: ¥2,900 なんか値上がりしてる気がしますが、公式サイトで無料版も配布してます。 Skitch – Fast screen capture, image editing and sharing!Yourimage swiss army knife.Screen capture, crop, resize, sketch… then share with people… Fast. これでちょちょっと編集します。スクリーンショットも撮れるので便利です。 詳しい使い方はここを見たら分かるかもしれません。 Macでスクリーンショットをちょースピーディーかつキレイに編集できるSkitchが便利すぎて泣いた。 | 和洋風◎実際使ってみたらホントに便利すぎて泣けたのでご紹介します。 3.Flickr Uploader そしたらFlickrに画像をあげます。 使ってるアプリはこれ。 Flickr: Tools to upload and shareTheFlickr desktop uploadr sits on your desktop for heftier uploading needs or offline photo management. Drag and drop single photos or videos, or select a whole folder. Even reorder how photos will be displayed in your photostream. ここで落とせる「Flickr Uploadr」です。 使い方はこちら。 わかばマークのMacの備忘録 : Flickr Uploadr画像共有サイトFlickr に画像をアップする純正アップローダー「Flickr Uploadr」の紹介です。 4.PhotoHtml んで、「PhotoHtml」っていうブックマークレットを使って記事に貼り付けます。 これがめっちゃ素晴らしい。これなかったら執筆スピード2倍です。 詳しくは作者様のページをどうぞ。 Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiP…ブラウザおよびiPhone上で使えます。Flickrサイトで使えば「Flickr2Html」と同じ動きをします。一方、他サイトで使えば「タグ」もしくは「件数」を指定してFlickrから根こそぎ画像を取ってきてくれます。画像は例のごとくお好みの書式で出力してくれます。 4.AppStoreHelper 「執筆スピードを上げる」といえば「AppStoreHelper」を紹介しないわけにはいきません。 【30倍速い】iPhone/Macブロガー専用htmlジェネレータAppStoreHelperテスト版 | ひとりぶろぐAppStoreHelperは、AppleのAppStore 、Mac App Store(以下App Store)で扱うアプリケーションをブログなどで紹介しまくる人のために作られたアプリケーションです。 上に張ってあるAppStoreへのリンクなんかはこれで作ってます。 スピード上がります。 5.AddQuicktag 以前当ブログで紹介したWordPressプラグインです。 WordPressプラグイン「AddQuicktag」でブログ執筆が加速した! | NANOKAMO BLOGもともとWordPressの投稿管理画面には上の方にタグのショートカットがあるんですが、ここに好きなものを追加出来ちゃうってのがこのプラグインなのです。 僕みたいな見出しや引用のタグをいちいち打つのが面倒なものぐさな人にはもってこいのプラグインです。 6.YouTubeの貼りつけ WordPressはアドレスを貼り付けるだけで動画を埋め込めます。 ただサイズの調整等が必要なので、設定をいじったりしてやります。 Embeds – WordPress Codex 日本語版投稿が表示される際、URLの位置に自動的にYouTube 動画が埋め込まれます。 やっぱ公式ページが分かりやすいっすねー。 こんな感じで色々貼り付けながら書いてます。 えー、文章に関しては何も考えてません。 できるだけ僕が話かけてるような感じで書こうかなーとは、ぼんやり意識してますけどね。そんくらいです。 見出しの順番を変える 上みたいな見出しを付けてるんですが、この順番をいじってやります。 こっちが先のほうが分かりやすいかなーとか色々考えます。 ちなみにオレンジ色です。僕のブログのイメージカラーですね。 ポイントポイントにオレンジ色を入れてやってます。どんな効果があるかは不明! なんとなく統一感を出したくて意識してます。 文章をなおす 推敲っていうんでしょうか。 ただ僕がなおしたところで僕以上の文章にはならないっていうか、まぁ、あんまり考えても意味ないので明らかにおかしい誤字とか脱字とかのチェックですね。 これやっても取り逃がしてる場合があるので、なんとも言えないんですけどね。 記事を投稿 こんな感じで出来上がった記事をインターネッツの大海原へポストしております。 割とシンプルなんじゃないかなぁ、と思いますがどうでしょう。 やっぱ時間を上手く使いたいんで、スピード重視になってますね。 つーわけでこれからも色々工夫してみようと思います。   気に入っていただけたらRSSリーダーの登録をお願いします。 Twitterもフォローしてくれたら嬉しいです。   関連記事iPhoneでストリートビューってこんな簡単に見れたのか! [...]

  30. [...] Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiPhone日記 [...]

  31. [...] PhotoHtml(Flickr画像を一括でHTMLタグとして出力する) [...]

  32. [...] 「大解剖!」とは大きく出ましたね。僕。 そんな大層なもんじゃあ無いかもしれませんが、僕がどうやってブログを書いてるか晒そうと思います。 自分がどういう風に記事を投稿しているのか振り返りながら書いていきますんで、もしかしたらたいした発見ないかも。 とりあえずスタート! 全体の流れ 僕の記事投稿までの流れは、大きく分けて2つあります。 1.突発書き その日見たニュースや記事、その日落としたアプリやWordPressのプラグインの「これは!」って所を引っ張ってきて、主観的なお話を乗っけて記事にします。 着想から投稿までが激速。これが日常的にうまーくできたらなぁ、と思いつつ中々むずかしい。 2.計画書き 思いついた事をとりあえず「ブログ」っていうリストにいれといて「書こうかなー」となったら新規投稿を開き、書くのに必要な要素をつらつらあげていきます。 だいたいそれらが揃ったら、やっとまとめ始めます。時間がかかります。 要素をあげるとかそれっぽく書いてますけど、画像を集めるとか、動画を撮影するとかそんなんです。 ま、1も2も書きながらやってるので「勢い」が有るか無いかくらいの差だと思うんですけどね。 細かいとこ アイデアが出てから書き始めたとこで共通する、細かい作業を順を追って挙げていきます。 1.アイキャッチ画像を手に入れる  記事の最初の画像です。 2.とりあえず書き始める  とにかく書き始めます。画像も書きながら入れてきます。 3.見出しの順番を変える  こっちのが先のほうがいいかなー、とか。でもだいたい最初のまんま。 4.文章をなおす  変なとこなおします。 これだけです。なんかこう、書いてみるとすげー単純ですね。 もっと複雑なことやってるかと思ってたら、そうでもなかったです。 なんか頭の中のをそのまま書いていってる感覚でしょうか。あまり難しいことは考えていないようです。 では次からは、具体的にどういったツールやサービスを使っているかってのを紹介いたします。 アイキャッチ画像を手に入れる こちらのサイトを使わせていただいてます。 写真素材 足成【フリーフォト、無料写真素材サイト】「写真素材足成」は、全国のアマチュアカメラマンが撮影した写真を、写真素材として無料で提供しています。 サイコーすぎます。 僕のブログ記事の一発目の画像はここから引っ張ってきてる率95%です。 こちらのサイトで検索して、Dropboxに保存します。 とりあえず書き始める 「これがいい!」「すげぇ!」を並べていきます。だいたいそんな感じ。 アプリやWordPressのプラグインなんかの紹介をするときは、途中で「これ画像あったほうがいいかな?」ってなってからスクショを撮ります。 書きながらです。なんか効率悪い気もしますが。 1.PhotoSync んで、iPhoneのスクショは「PictShare」を使ってMacに送っていたんですが、最近はすっかり「PhotoSync」です。 PhotoSync カテゴリ: 写真価格: ¥230 これ速いです。このアプリについては、 iPhoneからちょー簡単に画像転送出来る「PhotoSync」がアップデートしてますますちょー簡単に画像転送出来るようになった | goryugoこいつが先日アップデートして「QuickTransfer」という機能が追加され、ますますちょー便利になりました。 こちらや、 PhotoSync iPhoneとかiPadの写真転送がとんでもなく快適で早く行えるようになるアプリ | goryugoiPhoneとかiPadのスクショを手間無くパソコンに送りたい。iPhoneから直接iPadに写真を送りたい。そういう悩みが一発で解決。 こちらをご覧いただくと良さが分かります。 2.Skitch Macに飛んだ画像は色々と編集してやるわけですが、その時に使うアプリがこれです。 Skitch カテゴリ: 仕事効率化価格: ¥2,900 なんか値上がりしてる気がしますが、公式サイトで無料版も配布してます。 Skitch – Fast screen capture, image editing and sharing!Yourimage swiss army knife.Screen capture, crop, resize, sketch… then share with people… Fast. これでちょちょっと編集します。スクリーンショットも撮れるので便利です。 詳しい使い方はここを見たら分かるかもしれません。 Macでスクリーンショットをちょースピーディーかつキレイに編集できるSkitchが便利すぎて泣いた。 | 和洋風◎実際使ってみたらホントに便利すぎて泣けたのでご紹介します。 3.Flickr Uploader そしたらFlickrに画像をあげます。 使ってるアプリはこれ。 Flickr: Tools to upload and shareTheFlickr desktop uploadr sits on your desktop for heftier uploading needs or offline photo management. Drag and drop single photos or videos, or select a whole folder. Even reorder how photos will be displayed in your photostream. ここで落とせる「Flickr Uploadr」です。 使い方はこちら。 わかばマークのMacの備忘録 : Flickr Uploadr画像共有サイトFlickr に画像をアップする純正アップローダー「Flickr Uploadr」の紹介です。 4.PhotoHtml んで、「PhotoHtml」っていうブックマークレットを使って記事に貼り付けます。 これがめっちゃ素晴らしい。これなかったら執筆スピード2倍です。 詳しくは作者様のページをどうぞ。 Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンのiP…ブラウザおよびiPhone上で使えます。Flickrサイトで使えば「Flickr2Html」と同じ動きをします。一方、他サイトで使えば「タグ」もしくは「件数」を指定してFlickrから根こそぎ画像を取ってきてくれます。画像は例のごとくお好みの書式で出力してくれます。 4.AppStoreHelper 「執筆スピードを上げる」といえば「AppStoreHelper」を紹介しないわけにはいきません。 【30倍速い】iPhone/Macブロガー専用htmlジェネレータAppStoreHelperテスト版 | ひとりぶろぐAppStoreHelperは、AppleのAppStore 、Mac App Store(以下App Store)で扱うアプリケーションをブログなどで紹介しまくる人のために作られたアプリケーションです。 上に張ってあるAppStoreへのリンクなんかはこれで作ってます。 スピード上がります。 5.AddQuicktag 以前当ブログで紹介したWordPressプラグインです。 WordPressプラグイン「AddQuicktag」でブログ執筆が加速した! | NANOKAMO BLOGもともとWordPressの投稿管理画面には上の方にタグのショートカットがあるんですが、ここに好きなものを追加出来ちゃうってのがこのプラグインなのです。 僕みたいな見出しや引用のタグをいちいち打つのが面倒なものぐさな人にはもってこいのプラグインです。 6.YouTubeの貼りつけ WordPressはアドレスを貼り付けるだけで動画を埋め込めます。 ただサイズの調整等が必要なので、設定をいじったりしてやります。 Embeds – WordPress Codex 日本語版投稿が表示される際、URLの位置に自動的にYouTube 動画が埋め込まれます。 やっぱ公式ページが分かりやすいっすねー。 こんな感じで色々貼り付けながら書いてます。 えー、文章に関しては何も考えてません。 できるだけ僕が話かけてるような感じで書こうかなーとは、ぼんやり意識してますけどね。そんくらいです。 見出しの順番を変える 上みたいな見出しを付けてるんですが、この順番をいじってやります。 こっちが先のほうが分かりやすいかなーとか色々考えます。 ちなみにオレンジ色です。僕のブログのイメージカラーですね。 ポイントポイントにオレンジ色を入れてやってます。どんな効果があるかは不明! なんとなく統一感を出したくて意識してます。 文章をなおす 推敲っていうんでしょうか。 ただ僕がなおしたところで僕以上の文章にはならないっていうか、まぁ、あんまり考えても意味ないので明らかにおかしい誤字とか脱字とかのチェックですね。 これやっても取り逃がしてる場合があるので、なんとも言えないんですけどね。 記事を投稿 こんな感じで出来上がった記事をインターネッツの大海原へポストしております。 割とシンプルなんじゃないかなぁ、と思いますがどうでしょう。 やっぱ時間を上手く使いたいんで、スピード重視になってますね。 つーわけでこれからも色々工夫してみようと思います。   気に入っていただけたらRSSリーダーの登録をお願いします。 Twitterもフォローしてくれたら嬉しいです。    Categories: Blog, NANOKAMO BLOG Tags: App, Plugin, Tips, WordPress [...]

  33. [...] Flickr画像をタグや件数で一括取得する – PhotoHtml はじめに…常々感じていたこと。もっとblogエントリーを効率的にしたいなーと。ボトルネックだったのが画像の処理でした。画像のHTMLタグ作るのがホント面倒なんです(;^ω^)これまでのやり方は、以下の… いまさらながら、ひろさん(@hiro45jp)エライ! [...]

  34. [...] らないブックマークレットです。 Flickr画像をタグや件数で一括取得する – PhotoHtml | 普通のサラリーマンの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>