プログラミング」カテゴリーアーカイブ

Twitter/Facebook共有時のカード表示を整えてみた


TwitterやFacebookを見ていると、引用されているWebページの内容がカード状に表示されることがあります。例えばTwitterならばこんな感じ。

この表示は、WordPressにインストールしているJetpackが「Jetpack Open Graph Tags」と呼ばれる<meta>タグをページに挿入することで実現されています。今までも記事本体に画像があるときはその画像がカードに表示されていたのですが、記事に画像がない時は白い画像が表示されてしまい、今一つ見栄えが良くありませんでした。

そこで、以下記事を参考にしてJetpackの動作をカスタマイズしてみました。

How to add a default fallback image if no image can be found in a post

具体的には、function.phpに以下内容を追加しました。bari-ikutsu_icon_ogp.pngは、200x200pxのロゴアイコン画像です。

function custom_jetpack_default_image() {
	return get_template_directory_uri().'/images/bari-ikutsu_icon_ogp.png';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

この追加により、画像のない記事をFacebookやTwitterで共有した時に、冒頭で紹介したようなロゴアイコン画像を表示できます。

この記事自体は冒頭に画像があるため、その画像が表示されるように思いますが、さてどうでしょうか。

Bootstrap 5正式版リリース


人気のCSSフレームワークBootstrapがメジャーバージョンアップして「Bootstrap 5」となりました。Bootstrap 5を紹介している公式ブログ記事はこちら。日本語記事だとPublickeyがわかりやすくまとめています。

当ブログではスマホ用テーマで長らくBootstrapを使っており、最近になってBootstrap 3から4に更新したばかりでした。というわけで、さっそくスマホ用テーマをBootstrap 5に更新してみました。自分の範囲では、コメント入力用のcollapseが動かなくなりましたが、「data-toggle」を「data-bs-toggle」に直したら動くようになりました。前回Bootstrap 3から4に更新した時よりも手間は少ないかも。

ほかにも見えない不具合はあるかもしれませんが、ひとまず様子を見ていきます。スマホ用テーマで経験を積んで、実戦でも使えるようにしておかねば。

【記事掲載報告・CodeZine】XojoとSpreadJS


最近あまりブログ自体を更新できていないので、雑に報告させていただきます。

統合開発環境「Xojo(ゾージョー)」で本格デスクトップDBアプリを作成 (CodeZine)

VBライク開発環境「Xojo(ゾージョー)」のデータベース機能利用例です。

xojo

Angularと高機能JavaScriptライブラリで作るスプレッドシートアプリ (CodeZine)

Webページにスプレッドシートを表示できるJavaScriptライブラリ「Spread.Sheets」の紹介です。

spreadsheets

WordPressの記事投稿をMastodonに反映するプラグインをちょっと修正してプルリクエストしてみた


Mastodonが話題になり始めたころ、こんなことを書きました。

WordPressの記事投稿をMastodonに反映してみる  (今日の気分はバリいくつ?)

この記事で紹介した「Mastodon For WordPress」を利用すると、難しいことを考えずにWordPressの投稿をMastodonに反映できます。非常にありがたく使わせていただいていますが、一度書いた記事を修正するたびに何度も反映されてしまうのが、ちょっと使いづらいと感じていました。

そこで、フォークしてちょこっと直してみました。

https://github.com/edo-bari-ikutsu/mastodon-for-wp

ポイントは2点。

  1. 記事が公開されるタイミングだけでトゥート投稿を行うようにしました。公開後の再編集では通知されません。
  2. 前回記事で話題としたトゥート文言の変更(記事タイトルを含める)を改めて反映しました。

上記の修正は本家リポジトリにプルリクエスト中ですが、とりあえず「20170916_for_bari_ikutsu」というブランチにすべての修正を反映したものを置いておきます(本家に受け入れられたら予告なく削除させていただきます)。

【読書】LINE BOTを作ろう


LINE BOTを作ろう! Messaging APIを使ったチャットボットの基礎と利用例 (Amazon.co.jp)

以前LINE BOT APIがプレビュー版の時にちょっと試していましたが、正式版になってからずっとやっていなかったので、これはよい機会と購入。LINE BOTそのものもさることながら、Herokuの入門書としてもなかなか。本ではPHPでしたが、自分はNode.jsで試しています。