サムネイル on qwerty.work

投稿記事内の最初の画像をアクセスランキングに表示-MovableType

Thu, 01 May 2014 09:28:29 +0900

投稿記事内の画像を使って、アクセスランキングにサムネイル画像を表示するためにムーバブルタイプでアクセスランク順に人気記事リストを表示する方法とその他のサンプルのソースをかき集めてどうにかできたのでメモ。

MTに画像を登録していればもっと簡単にできるようなのですが、僕はムーバブルタイプで画像を使うとき、IMGタグを直接書いています。どうもMTのアイテムとして画像を登録するやり方が苦手なんです。画像の遅延表示やLightboxとか使うのに、あとでソースを修正することが多く、最初から手打ち登録するほうが気分的に安心なんです。こんな手間をかけなくてもプラグインとかありそうですが…。

<MTIf tag="BlogEntryCount"><br /><MTEntries sort_by="accessed_count" sort_order="descend" limit="5"><br />  <mt:EntriesHeader><br />    <div class="widget-recent-entries widget-archives widget"><br />      <h3 class="widget-header">アクセスランキング</h3><br />      <div class="widget-content"><br />        <ul id="access-lanking"><br />          </mt:EntriesHeader><br />          <$mt:setvar name="rank" value="1" op="++"$><br />            <MTSetVarBlock name="GetImageURL">
              <MTEntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace='/^[^\.\/h].*/g','none'>
            </MTSetVarBlock><br />              <li><br />                <MTIf name="GetImageURL" like="none"><br />                    <a href="<$MTEntryPermalink$>"><img src="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png" width="60" height="60" alt="<$MTEntryTitle$>" /></a><br />                <MTElse><br />                    <a href="<$MTEntryPermalink$>"><img src="<$MTGetVar name="GetImageURL"$>" width="60" height="60" alt="<$MTEntryTitle$>" /></a><br />                </MTIf><br />                <a href="<$MTEntryPermalink$>"><p class="entry-title"><$MTEntryTitle trim_to="43+..."$></p></a><br />              </li><br />            <mt:EntriesFooter><br />        </ul><br />      </div><br />    </div><br />  </mt:EntriesFooter><br /></MTEntries><br /></MTIf>

（ランキング表示にAccess Counterというプラグインを使っていることが前提のソースです。）

まず、正規表現を使ってEntryBody（記事内）のソースからIMGタグのsrcにある画像パスを抜き出してGetImageURLという変数に代入します。もし、画像がなかったらnoneという文字を代入します。

<MTSetVarBlock name="GetImageURL">
   <MTEntryBody regex_replace="/<[^i].*?>|<i[^m]*?>|<iframe.*?>|<input.*?>|<ins.*?>|<isindex.*?>|\s/g","" regex_replace='/(.*?src=")(.*?)(".*)/g','$2' regex_replace='/^[^\.\/h].*/g','none'>
</MTSetVarBlock><br />

アクセスランキング表示の際、画像がなければ代替画像を表示して、あれば GetImageURLに入っている画像パスを使って表示します。

<MTIf name="GetImageURL" like="none"><br />  <a href="<$MTEntryPermalink$>"><img src="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png" width="60" height="60" alt="<$MTEntryTitle$>" /></a>
<MTElse><br />  <a href="<$MTEntryPermalink$>"><img src="<$MTGetVar name="GetImageURL"$>" width="60" height="60" alt="<$MTEntryTitle$>" /></a><br /></MTIf>

この方法にMTの画像アイテムがあればそれを優先するようなことも加えたいのですが、とりあえず今回はここまで。

参考ページ

http://akamiru.com/2014/02/mt-accesse-counter.html http://akamiru.com/2014/02/mt-accesse-counter.html

URLだけでサイトのスクリーショット（サムネイル）を表示できるAPIまとめ

Sat, 14 Sep 2013 23:33:22 +0900

サイトのサムネイルに『Mozshot』を使っていましたが、使用者が多いせいか最近は画像が重たくてページの表示が最近遅いです。でも、こういったサービスは便利なので、他にないか探してみました。

wordpress.comのAPI

エンコードしたURLを指定します。「w」パラメータで画像の幅を自由に指定できWordpressのプラグインではないので、Wordpressを使用していないサイトでも使えます。

https://s.wordpress.com/mshots/v1/https%3A%2F%2Fja.wordpress.com?w=250

【サンプル】wordpress.com のスクリーンショットを幅250pxで取得してみました。

WordPressのプラグインは以下があり、ショートコードでサムネイル表示できるので便利です。

HeartRails Capture を使う

有名どころ。影や枠線をつけたり、角丸にしたり。サイズも指定できます。

HeartRails Capture | サムネイル画像／PDF ファイル作成サービス

http://capture.heartrails.com/300×225?http://capture.heartrails.com/

【サンプル】HeartRails Capture のスクリーンショットを300x225pxで取得してみました。

SimpleAPI ウェブサイトサムネイル作成API

128×128のサムネイル画像を取得できます。

SimpleAPI – ウェブサイト・サムネイル化ツール

http://img.simpleapi.net/small/http://img.simpleapi.net/

【サンプル】SimpleAPI トップページのサムネイルを取得してみました。

MozShot

64×64 / 128×128 / 256×256 などの大きさが選べます。

Mozshot

https://image.thum.io/get/width/300/crop/200/http://mozshot.nemui.org/

【サンプル】MozShotのスクリーンショットを256×256で取得してみました。

ウェッジ：ウェブサイトのスクリーンショットを自動生成

200×150の大きさで取得されるようです。

ウェブサイトのスクリーンショットを自動生成 – デザインスタジオウェブログ – WEB関連 – ウェッジ

http://www.j-wedg.co.jp/img/?url=http://www.j-wedg.co.jp/

【サンプル】

thumbalizr

海外のサービス。サイズやクオリティなど細かく指定でき、API Keyを登録すれば指定できるパラメータが増えます。「powered by thumbalizr.com」という表示が付きます。

有料プランにすれば書き出す形式を指定したり、ウォーターマークをつけたりできるようです。

thumbalizr – thumb your webpages

https://api.thumbalizr.com/?url=https://www.thumbalizr.com/&width=250

【サンプル】

その他

Thumboo!

Thumboo! Free Website Thumbnails and PHP Script to Generate Web Screenshots

海外のサービス。サイトにアクセスしてスクリーンショットを撮りたいURLを入力し、生成されたPHPコードをコピー＆ペーストすれば自分のブログなどでサムネイル画像を表示できます。API Keyを登録すればウェブサービスなどに組み込んで動的にも使えるようになるみたいです。

はてなスクリーンショット

はてなダイアリーなど、はてなのサービス内でのみ使用できます。

livedoor Screenshot

livedoor Wikiなど、ライブドアのサービス内でのみ使用できます。

Facebookで「いいね！」「シェア」されたときのサムネイル画像を指定する方法

Fri, 16 Mar 2012 01:20:02 +0900

自分のブログをシェアしたり、されたときにあまり表示されて欲しくない画像がサムネイルで表示されたりすることがありますが、その画像を意図的に指定する方法があるようです。

OGP （Open Graph Protocol）といわれるものを、～に追加することでできるようで、以下の一行を加えるだけでできます。

<meta property="og:image" content="http://指定したい画像のパス" />

今回、指定した画像はこれ↓

でも、上記だけでは内部的に情報不足で、Facebookにおいては下記６つが必須なようです。

og:title
og:type
og:image
og:url
og:site_name
fb:admins or fb:app_id

<meta property="og:title" content="その記事のタイトル" />
<meta property="og:type" content="blog" />
<meta property="og:image" content="http://指定したい画像のパス" />
<meta property="og:url" content="http://シェアするURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="fb:admins" content="1234567890"/>

最後のfb:adminsの設定でfacebookのユーザID

以下のサイトでは、シェアした際にFacebookが取得する情報をあらかじめ確認をすることや、足らない情報などを表示することができます。

OGP （Open Graph Protocol）については以下のサイトが参考になります。

Windows XP/VistaのエクスプローラでデジカメのRAWファイルをサムネイルで表示する。

Mon, 12 Oct 2009 16:25:02 +0900

WindowのエクスプローラでデジカメのRAWファイルの中身を簡単にサムネイルで見たい。
アプリケーションを起動させず、簡単に写真の整理をしたい。

なんて思う事が多々あります。

ファイルの中身を見るだけなのに、

Photoshopなどの画像編集のアプリケーションや、

PicasaやLightroomなどの写真を整理するアプリケーションを起動していました。

しかし、こんなことをしなくてもコーデックをインストールすれば、Windowsエクスプローラ上でサムネイル表示できるんですね。

なぜこれに気が付かなかったのか…。

ちなみにNikon D200を使用してるので、RAWファイルの拡張子はNEFです。

Windows XPの場合は以下をマイクロソフトのホームページがらダウンロード。

ニコンに限らず、キャノン・コダック・オリンパス・富士フィルムのRAWにも対応しているようです。

https://www.microsoft.com/ja-jp/download/details.aspx?id=26829 https://www.microsoft.com/ja-jp/download/details.aspx?id=26829

Windows　Vistaの場合は以下のニコンのホームページからコーデックをダウンロード

XPでも使えるようです。

http://www.nikonimglib.com/nefcodec/index.html.ja http://www.nikonimglib.com/nefcodec/index.html.ja

その他参考

https://forest.watch.impress.co.jp/article/2005/06/16/msrawimage.html https://forest.watch.impress.co.jp/article/2005/06/16/msrawimage.html

https://dc.watch.impress.co.jp/cda/other/2005/06/16/1756.html https://dc.watch.impress.co.jp/cda/other/2005/06/16/1756.html

2009/10/26追記

http://www.forest.impress.co.jp/docs/review/20091023_324033.html http://www.forest.impress.co.jp/docs/review/20091023_324033.html

MozshotとCSSでサムネイル画像の横に文字列を回り込みさせる方法

Sat, 04 Jul 2009 22:31:24 +0900

サムネイルの周りに文字を回り込ませたい

指定したURLのサムネイルを簡単に表示できる「Mozshot」とCSSを組み合わせて、サイトのサムネイル画像の周りに文字を回り込ませて配置する方法をメモ。リンク集のページなどに便利です。

ソース例

<style type="text/css">
  .imgLeft { float : left ; } /*画像の回り込みの設定*/
  .clrLeft { clear : both ; } /*文字の回り込みの解除*/
</style>
<div class="clrLeft">
  <p class="imgLeft">
    <img src="https://image.thum.io/get/width/300/crop/200/http://qwerty.work" alt="QWERTY.WORK" />
    QWERTY.WORK
  </p>
</div>

表示例

↓↓上記でこうなる↓↓

/画像の回り込みの設定/ .imgLeft { float : left ; } /文字の回り込みの解除/ .clrLeft { clear : both ; }

QWERTY.WORK

MozshotはBlinkyに変わっていた

2022/3/22現在、久々にMozshotの公式サイトにアクセスしてみると、Blinkyという後継サービスに変わっていました。

https://blinky.nemui.org/ https://blinky.nemui.org/

使用方法はほぼ同じです。

https://blinky.nemui.org/usage https://blinky.nemui.org/usage