b's mono-log

 1 |  2 |  3 |  4 | all

2017/10/31 (Tue.)

個別エントリーに SNS シェアボタンを追加しました

一週間ほど前からテスト運用していましたが、本 blog の個別エントリーに SNS シェアボタンを追加してみました。

OpenGraphLike

個人的には、blog の URL シェアくらい PC ならたいした手間じゃないし、スマホだってインテントで任意の SNS アプリに送れるので、別に blog にわざわざボタンつけなくてもいいでしょと思っていました。が、少し前にタイムライン上で「SNS シェアボタンがないサイトは使いづらい」という意見を(この blog に対してではなく)見かけて、今や PC で Web を読んでる人の方が少ないくらいだし、インテントの仕組みを理解して使ってる人がどれくらいいるのか...と考え直しました。決して大手とは言えない blog ですが、シェアしようという奇特な読者様向けにボタンをつけることにしました。

採用したのはこの種のボタン大手である Zenback ではなく「OpenGraphLike」。無料でも広告が入らないのがありがたい。
導入に際しては、以下のサイトを参考にさせていただきました。

Movable Typeにソーシャルボタンを追加するプラグイン:らっぱ王子

追加したボタンははてなブックマーク、Twitter、Facebook、Google+ の 4 種。Evernote はつけようか迷いましたが、私はもう OneNote に移行してしまったので。もし要望が多いようなら考えます。
OpenGraphLike のプラグイン設定は以下のようにしました。

Google +1 設定/ボタンのサイズ: Standard (24px)
Google +1 設定/Plus 数を表示: Yes
Tweet Button 設定/ボタンのサイズ: 横長 (数を表示)
Facebook Like 設定/ボタンのサイズ: 横長ボタン
Facebook Like 設定/幅(px): 100
Hatena Bookmark 設定/ボタンのサイズ: 横長 (数を表示)
本文よりも目立つようなボタンは本末転倒だしバイラルメディア的でイメージも悪いので、あくまで控えめに。スマホだと押しづらいかもしれませんが。 設置場所は本文前につけている blog もよく見かけますが、「ちゃんと読んだ後にリアクションしてほしい」という理由で、エントリー本文の最後に。

少し悩んだのは Facebook Like のボタンサイズで、このボタンは「いいね!」数の桁が増えるとボタン自体の横幅が可変するため、右隣に設置したボタンと干渉するリスクがあるし、かといってあまり幅広に取りすぎると「いいね!」が一桁しかない場合は妙な余白ができてしまいます。ボタンの横幅 100px は、桁が少なくてもそれほど違和感なく逆に三桁くらいまでなら収まる、ちょうどいい塩梅になったのではないでしょうか。

長年あまり手を加えずにやってきたこの blog ですが、Twitter 連携もしたしようやくイマドキの Web サイトらしく(?)なってきました。本当は SSL 対応とか AMP(Accelerated Mobile Pages)対応とかもやったほうが SEO 的にもいいんでしょうが、そういうのはまた追い追い考えようと思います。

投稿者 B : 23:26 | Blog & Network | Movable Type | コメント (0) | トラックバック

2017/09/19 (Tue.)

Twitter Cards を設定してタイムラインにプレビューを表示

先日この blog の更新情報を Twitter に自動ポストするプラグインを設定したところですが、それだけではエントリータイトルと URL だけの投稿になってなんだか寂しい。Web や Twitter 公式アプリで他の人の blog 更新ポストを見ていると、記事のプレビュー(Twitter Card というらしい)がついていることが少なくありません。調べてみたところ、Facebook だとシステム側でプレビューを自動付与してくれるらしいですが、Twitter のほうは blog テンプレートに自分でメタタグを記載しなくてはならないことが分かりました。

というわけで、あちこち参考にしながら Twitter Cards の設定をしてみました。参考にさせていただいたのは以下のサイト。

【2017年版】Twitterカードとは?使い方と設定方法まとめ
Twitterカードの設定 | 極悪サカモンのブログ

その結果、↓のような感じでプレビュー表示させられるようになりました。

Twitter Cards

ポイントは「エントリーの最初に登場する画像を記事のサムネイルとして使う」ことと「画像なしエントリーの場合は blog の favicon や Twitter のプロフ画像と同じアイコンをサムネイルにする」こと。エントリー・アーカイブのテンプレートに以下のタグを記載しました。

<mt:setvarblock name="og_image"><mt:entrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"></mtsetvarblock>
<mt:if name="og_image" like="\.jpe?g|\.gif|\.png"><mt:else><mt:setvarblock name="og_image"><mt:blogurl>アイコンファイル名</mtsetvarblock></mt:if>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@ユーザー名">
<meta property="og:url" content="<mt:entrypermalink>">
<meta property="og:title" content="<mt:entrytitle>">
<meta property="og:description" content="<mt:entrybody remove_html='1' trim_to='200'>">
<meta property="og:image" content="<mt:getvar name='og_image'>">

「エントリーの最初に登場する画像を記事のサムネイルとして使う」は上記サイトに書かれていたサンプルコードで実現できましたが、画像なしエントリーに関しては Movable Type の <mt:if> テンプレートタグを使って、変数 og_image 内に画像ファイルの拡張子が見つからなければアイコンファイルを使う、という処理を入れました。

MT のテンプレートタグとか久しぶりにいじったけど、何とか意図通り動かすことができてホッとしています。
Twitter Cards は今のところ Summary Card に設定していて、本当は写真中心のエントリーの場合は with Large Image のカードのほうを使いたいんですが、MT の投稿画面から任意にカード種別を選べるようにするのには MT 側をいじる必要があって面倒なんですよね。また時間があったら調べてみようと思います。

投稿者 B : 23:00 | Blog & Network | Movable Type | コメント (0) | トラックバック

2017/09/02 (Sat.)

MT の更新情報を Twitter に自動ポスト

この blog の更新情報を Twitter のほうにも自動ポストしていくことにしました。

Google Reader がサービスを終了して 4 年、さらには livedoor Reader(とそれを受け継いだ Live Dwango Reader)も先月末でサービスを終了し、更新情報を RSS でチェックする文化が廃れようとしています。まあ、それ以前に一部ニュースサイト系の RSS もアフィリエイトだらけでほぼ使い物にならなくなっていて、これはもう終わりかなあ、と感じていたところでもあります。トラックバックも滅びつつありますし、blog の根幹をなしていた仕組みが終わっていって、blog というもの自体が「CMS を使って自動的に体裁を整えた Web サイト」になってしまった感。

そこで RSS の代替にはなりませんが、自分自身の Twitter タイムラインに更新情報を自動ポストしていくことで、常連さん向けの利便性を向上させようかと。
この blog はもともと諸般の事情によりあまり露出せず内輪向けのコミュニケーション用に開設したつもりでしたが、当初の事情も変わって以前ほど気を遣う必要がなくなったので(笑)情報の出し方等も少し変えていこうと思っています。

というわけで、自動ポスト用に下記の Movable Type プラグインを導入してみました。

Movable Type用PostTweetプラグイン v1.1.7.1 (エムロジック放課後プロジェクト)

導入は特に難しいこともなく、公式ドキュメントを読みながらすんなり設定できました。唯一ハマったのは Twitter との連携認証でうまく認証を通すことができず、調べてみたらブラウザで一度 Twitter からログアウトた上で認証処理をしなくてはならない、とのこと。それ以外は大きな問題なく導入できました。
このプラグインさえ入れておけば記事をタイマー投稿しても自動ポストしてくれるのでラクですね。もっと早く導入してもよかったかなー。

投稿者 B : 19:00 | Blog & Network | Movable Type | コメント (0) | トラックバック

2017/04/08 (Sat.)

MT 個別エントリーに関連コンテンツ表示機能を追加

この blog の個別エントリーページの末尾に関連コンテンツ表示機能を追加しました。

関連コンテンツ機能について - AdSense ヘルプ

AdSense 関連コンテンツ機能

常連さんであれば普段からトップページあるいは RSS 経由で読んでいただいていると思いますが、現代の Web のトレンドに漏れずこの blog の訪問者も過半数が検索か SNS からの流入です。でもこういう趣味の方向性がハッキリしたところに来てくれるからには、関連する他エントリーも読んで共感してもらえたほうが嬉しい。そんなわけで、blog 内の回遊を増やす目的で関連コンテンツ表示機能をつけてみました。
ツールはいろいろあれど、他にもいろいろ使っている Google にまとめておいたほうが管理がラクだというだけの理由で AdSense の関連コンテンツ機能を使用しました。これ自体はその名の通り広告のためのツールで、関連コンテンツリストの中に外部サイトへのリンクを混ぜて収益化する機能もあるんですが、よそのサイトでそうやって外部サイトに飛ばされてイラッとした経験が何度かあるし、この blog はあまり広告収入にガツガツしないことを趣旨としてもいるので、内部リンクのみの設定にしました。最終的にトータル PV が増えて他の AdSense バナー表示回数が増えれば、こういう使い方でも Google 的にはいいですよね、と勝手に解釈しておくことにします(笑。

関連コンテンツの一覧は完全に Google の自動抽出によるもので、どの程度の正確さで表示されるかはちょっと不安だったんですが、ざっくり 7~8 割は関連性の高いコンテンツが表示されているかな、という印象。記事のカテゴリにもよるようで、カメラ系や飲食系はかなりヒット率が高いけど家電やガンプラ系はそうでもない、とかなかなか興味深い結果になっています。関連するエントリーの数にもよるんでしょうかね。

ともあれ、一見さんも常連さんも過去エントリーも含めいろいろ読んで楽しんでいただけると幸いです。

投稿者 B : 22:31 | Blog & Network | Movable Type | コメント (0) | トラックバック

2016/11/02 (Wed.)

コメントとトラックバックの不具合修正

この blog のコメント/トラックバック機能に不具合があったとの指摘をいただき、修正しました。

どうやら 5 月に Movable Type のバージョンアップをした際に、それまでやっていたスパム避けでコメント/トラックバック CGI のファイル名をリネームしているのを設定し忘れていたようで、コメント/トラックバック投稿時にエラーが発生していました。5 ヶ月近くも気がつかず放置していたという(´д`)。その間コメント/トラックバックしようとしてくださった方、すみませんでした。

問題は既に修正済みのため現在は正常に動作しています。ただコメント入力時に表示する確認画面とスパム対策プラグイン(keystrokes.pl)の相性がよろしくなかったため、コメントは確認なしで直接投稿される動作に変更してしまいました。

今後 MT をアップデートする際はこの辺の作業と動作確認もちゃんとやらないとダメですね。気をつけます。

投稿者 B : 22:30 | Blog & Network | Movable Type | コメント (0) | トラックバック

2016/05/26 (Thu.)

MT6.2.4 の問題、一部解決

先日、CMS を MT6.2.4 にアップグレードしたものの、なんかイマイチだった...と書きましたが、少しだけ状況が変わりました。

Movable Type 6.2.4

アップロード済み画像のエントリーへの貼り付け画面が、昨日はラジオボタンだったのに今日はチェックボックスになっている!?

その後設定やプラグインを特にいじった記憶はないので、理由は全く不明。考えられるとしたらブラウザのキャッシュが悪さをしていたのか、くらいですが、それも考えにくいような気がします。
ともあれ、一括アップロードした画像をまとめてエントリーに貼り付けられるようになったのは事実で、これは間違いなく作業効率が高まります。

Movable Type 6.2.4

サムネイル関連の設定も画像一つ一つに指定して、一括貼り付け可能。
ただアップロードされるファイルの並び順がめちゃくちゃなのは相変わらずなので、完全に思い通りとはいきませんが、この一括貼り付けができるかどうかで手間が全然違うので、これは助かります。

アップロードと貼り付けは別画面だから、一括アップロード機能だけ使いやすいプラグインに置き換えれば、だいぶ理想の環境に近づけそう。少し試行錯誤してみますかね。

投稿者 B : 22:24 | Blog & Network | Movable Type | コメント (0) | トラックバック

2016/05/24 (Tue.)

Movable Type 6.2.4

Movable Type を 6.2.4 にアップグレードしました。

Movable Type 6.2 リリースノート : Movable Type 6 ドキュメント

Movable Type 6.2.4

今まで使っていた 6.1.2 からの大きな変更点は、標準で複数画像の一括アップロードに対応したこと。
従来のバージョンでは画像ファイルのアップロードは 1 枚ずつしかできず、私のように画像を多用する blog は作るなってことか!と憤慨しながらサードパーティ製プラグインを追加していたのですが、blog ブームも完全に下火な今になってようやく標準対応してくれました。まあ今までのプラグイン対応でもあまり困っていなかったんですが、より使いやすくなることを期待してアップデート。

そうすると、アイテムのアップロード画面が今までとは違い、複数ファイルとドラッグ&ドロップによるアップロードに対応していました。

Movable Type 6.2.4

また、デフォルトのアップロード先フォルダのユーザー設定にもちゃんと対応していて、設定画面からデフォルト値が設定できるようになっていました。今まではテンプレートを直接いじる必要があって面倒だったんですよね。
私のようにアーカイブディレクトリ以下の「img/YYYY/MM」に自動設定したい場合は、設定画面内のアップロード先をカスタム値「%a/img/%y/%m」と入力することで実現できました。

Movable Type 6.2.4

しかしこの画像アップロード機能もイマイチ求めるレベルに達していません。
アップロード自体は複数ファイル一括でできるのに、実際のエントリーへの画像貼り付けは今までどおり一枚ずつ。やっぱり Six Apart はテキストのみの blog を書かせたいとしか思えませんね。
また、一括アップロードした画像ファイルの並び順がアルファベット順にならない問題があり、一枚ずつ貼り付けるのに「自分がどれを貼り付け済みか」をイチイチ確認しなければならないという不便さ。

さらにはデフォルト設定だとアップロード時に自動圧縮する設定になっているようで、その圧縮ノイズがけっこうひどい。mt-config.cgi に環境変数「ImageQualityJpeg 100」を指定して非圧縮アップロードするようにしたら、何とか解決しましたが。
いずれにしても、複数アップロード機能に関してはサードパーティ製プラグインのほうがよっぽどマトモですね。

Movable Type 6.2.4

アップロードした画像の簡易編集機能も追加されました。といっても回転・反転とトリミング程度なので、あらかじめ編集してからアップロードする私には不要な機能です。
メタ情報(Exif)削除機能は地味に助かりますが、これ一枚ずつじゃなくて一括設定したいのに、一括機能はナシっぽい。やっぱりどれもこれも中途半端な実装ですね...。

うーん、今まで使っていた MultiFileUploader に戻すかなあ。でもこれ自体アップデートが止まって久しいプラグインだし、MT 標準で同等(劣化版だけど)機能が入ってしまった以上、いずれ使えなくなる可能性が高いんだよなあ...。

投稿者 B : 23:24 | Blog & Network | Movable Type | コメント (0) | トラックバック

2015/07/10 (Fri.)

Movable Type 6.1.2

重い重い重い、とても重い腰を上げて Movable Type のバージョンアップを実行しました。

Movable Type 6.1.2 の提供を開始。Data API をさらに強化 | Movable Type ニュース

Movable Type 6.12

最後にアップグレードしたのは 3 年と 3 ヶ月前。MT5.12 なんてサポートが切れて久しいので、前々からやらなきゃなあ...と思いつつなかなか実行に移せていませんでした。まあ旧バージョンでも実用上困ることもないんですが、脆弱性をいつまでも放置しておくのも問題だし。
MT のアップグレード自体数年おきにしかやらないので、毎度手順を調べるところから始まるわけです(汗。とりあえず備忘録的にやったことを列挙しておくと、

  • MT 本体のバージョンアップ
  • MT インストールディレクトリ内の tools/run-periodic-tasks のパーミッション変更(忘れがち。これをしないと予約投稿できない)
  • keystrokes.pl プラグイン内の MT バージョン表記書き換え(これがないとスパム対策を施したコメントフォームにエラーが出る)
  • MultiFileUploader の最新版への更新(旧版だと動かず)
  • 同じく MultiFileUploader の upload_option.tmpl をいじってアップロード先のデフォルトディレクトリ設定変更
こんなところかな。思ったよりもあっさり移行が済んでしまって拍子抜けでした。もっとあちこちいじる必要があったような気もするけど、何か問題が発生したらそのときに見直せばいいか(ぉ

この blog 自体のデザインテンプレートには一切手を入れていないので、読者の皆さんから見たときの違いはサイドバーに表示されるバージョン表記くらいのものですが、管理画面上もルック&フィールは MT5.x からさほど大きくは変わっておらず、MT のロゴと配色、あとボタン類のデザインがちょっと変わった程度。心なしか、同じサーバ上で動かしていても旧バージョンより少しレスポンスが良くなっているような気はします。それから、管理画面にスマートフォン用のビューが用意され、スマホやタブレットからでも更新しやすくなったのもありがたい。
そのほか細かいところでいうと、エントリー作成中のプレビューボタンの挙動が、以前は同窓遷移だったのが今バージョンではプレビュー画面を別窓で表示してくれるので、プレビューを見ながら原稿を修正できるのが、今までよりちょっとだけ便利になったところ。ただリアルタイム反映はしてくれないので、修正するたびにプレビューボタンを押す必要はありますが。

まだすべての動作確認をしきれていないので、もし怪しいところがあればコメント欄か Twitter 経由でご報告いただけると助かります。

投稿者 B : 23:12 | Blog & Network | Movable Type | コメント (0) | トラックバック

2014/09/03 (Wed.)

MT コメントフォームの不具合修正とスパム対策

本 blog のコメントフォームに不具合があったようで、たぶん 2 ヶ月くらいコメントが入力できない状態になっていました。

原因はおそらく先日施したアーカイブページのレイアウト変更。テンプレートをいじったときに、何か重要なタグを脱落させてしまったのか、投稿ボタンを押しても投稿が受け付けられない症状が出ていました。レイアウト変更が完了したのは先月ですが、なんだかんだで 2 ヶ月くらい、暇を見つけていじっていたので、その間コメントが入力できなくなっていた可能性が高いです。
現在は修正してコメントが入力できるようになっていますが、該当期間中にコメント入力しようとされていた方、申し訳ありませんでした。また、指摘してくださった taka_z さん、ありがとうございました。

で、この不具合を修正した瞬間から、コメントスパムの嵐に見舞われました(;´Д`)ヾ。
ほぼ 1 分おきくらいにコメントスパムが飛んでくる有様で、大半はスパムフィルタで弾かれてはいたものの、それなりの割合ですり抜けてくるものもありました。以前適用した mt-comments.cgi ファイルのリネームの効果も限定的だったようで。
いくつか対策を検討してみたところ、以下の「Keystroke」プラグインを導入してみました。

keystrokes.pl による Movable Type 5.04 のコメント・スパム対策 (カナダからのブログ)

結果、コメントスパム自体がピタリとなくなりました。やった!
このプラグインはコメント欄への入力のキーストロークを監視するもので、外部プログラムから直接コメント CGI を叩いてくるスパムに効果があるものですが、やはりロボット型スパムだったようです。

ついでにトラックバックスパム対策も強化。下記のエントリーを参考に、.htaccess で怪しい User-Agent を弾いてやりました。

Movable Typeのトラックバックスパム対策 - ItsMemo::IT

これまでも MT 自体のスパムフィルタがスパム TB を遮断してくれていましたが、そもそも CGI にアクセスさせないことでサーバ負担は軽減されます。
こちらも今のところトラックバックスパムは止んでいるようです。

まあ、スパム対策はいたちごっこなので、いつかこれも効かなくなってしまう可能性はありますが、とりあえず一安心。
このついでに、そろそろ重い腰を上げて MT6 にバージョンアップするかな...。

投稿者 B : 21:00 | Blog & Network | Movable Type | コメント (0) | トラックバック

2014/08/20 (Wed.)

MT アーカイブページのレイアウト変更とインクルード

ちょっと久しぶりに Movable Type のテンプレートをいじりました。

b's mono-log

とはいっても一見違いが分からないかもしれませんが...。

従来は、トップページのみ 2 カラム構成、それ以外のアーカイブページは 1 カラム構成だったページレイアウトを、全て 2 カラムに変更してみました。サーチエンジンや外部リンクから流入してきたときに、ナビゲーション用のカラムがあったほうが閲覧後のサイト回遊がしやすいので、以前からいじりたいとは思っていたんですよね。時間がないのと面倒なのとで先延ばしにしてきていたのを、ようやく重い腰を上げてみました。
ただ、右カラムはカレンダーや月別アーカイブへのリンクなど、エントリー投稿ごとに更新される部分は全ページ再構築が必要になるので外し、日々の投稿時に余計な負荷をかけないようにしています。本当は、動的に呼び出せるようにするのがいいんでしょうが、そこまでするほどの blog でもないかと(手抜き

ついでだったので、ヘッダ部分とアーカイブページ用の右カラムはモジュール化して <MTInclude> タグを使ってインクルードする方式に変更。今までテンプレートにベタ打ちしていたんですが、インクルードにしたほうがメンテナンスが一括でできるし、再構築も若干ながら高速化できるはず、というわけで。
デザインテンプレート自体、この blog の開設時から大きな手を入れずに増改築を繰り返してきているので、一度リファクタリングしてやりたい気もしつつ、もうコーディングのスキルも落ちて久しいので放置(´д`)。

まあ、今使っている Movable Type もだいぶバージョンが古くなってしまったので、次は MT6 へのバージョンアップのほうが先決ですかね...。

投稿者 B : 22:30 | Blog & Network | Movable Type | コメント (0) | トラックバック

 1 |  2 |  3 |  4 | all