[Sentryアップデート]バージョン1.1.0を公開しました!ブログカード&メニューのナビゲーション追加など

Sentryのバージョン1.1.0を公開しました!

今回のアップデートでは、「ブログカードの追加」「横スクロール系UIへのナビゲーションの追加」「画像のキャプションの追加」を行いました!

アップデートの概要

ブログカードの追加

要望のあった”ブログカード”機能を追加しました。
今回はいろいろ暫定なところもあり、ショートコードのみで提供しています。

[link]というショートコードを使い、urlを指定することで、ブログカードが自動的に生成されます。
例えば
[link url="https://ultimate-ez.com/2013/02/20/1593/"]
と入力すると、


↑こんな感じに表示されます。

ブログカードの注意点:URLによってはカードが生成されない

いろいろと試行錯誤の末、実装したこのブログカード機能。実はいろいろと注意点があります。

まず、大きいのがSSLページの仕様により、カードが生成できないことがあるという点。。。
サーバの設定の問題でうまくカードが作れないことがあるんです。
取りに行く先のサーバの問題の場合もありますし、wordpressをインストールしている環境自体に問題がある場合もあるようです。

このあたり、自前でカード用の情報を取得するAPIを作ったほうがいいかな?と思ったりもしましたが、それだとSentryのユーザーが増えたときに無料で機能を提供できるかわからないのでそれは良くないなと思ったり。。。
実際使ってみてあまりに使えなかったらいろいろ対応を考えますので、教えてください!!

ブログカードの注意点:初回アクセス時は表示が重くなることがある。

あとは、ブログカードの初回生成時にアクセスが重くなるという点。
ショートコードに設定したURLを元に、画像やタイトルなどの情報を取りに行くため、ちょっとページ表示が重くなります。
初回以降は、カードのための情報はデータベースに保存して使うのでそんなに遅くはなりませんが、初回だけはどうしても遅くなってしまいます。
(とはいえ、記事の初回アクセスはサイトの管理人さん自身でプレビューなどチェックすると思うので、遅くなるのはその時だけ。読者さんへの影響はそこまで大きくないとは思います。)

また、画像やタイトルなど、リンク先が変更した場合も情報が更新できるように、一定期間ごとに情報を再取得するような仕様になっています。
この場合も、再取得の初回だけはどうしてもページ表示が遅くなってしまうのでご注意ください。
(特にリンク先のサイトがめちゃくちゃ遅いサイトだったりすると、当然情報の取得にも時間がかかるので、その分ページ表示も遅くなります。)

上記の仕様はご理解した上でお使いください!

横スクロール系UIへのナビゲーションの追加

普段使いのPCがデスクトップもラップトップもMacなのでまったく気づいてなかったんですが…Sentryで採用している横スクロール系のUI(トップページのスライダー、ヘッダーのメニュー)って、WindowsPCだとスクロールする方法がありませんでした…。

というわけで、WindowsのPCでもちゃんとスライダーを動かしたり、メニューのアイテムが多くてもちゃんとアクセスできるように、ナビゲーションを追加しました。

スマホなどのタッチデバイスでは表示されませんが、PCであればWindowsに限らずMacでも表示される仕様です。
ただ、従来同様、Macであればタッチパッドやマジックマウスでのスワイプ操作で横スクロールすることもできます!

スライダー用のナビゲーション

トップページのスライダー。コンテンツのスクロール状態に応じて、左右にナビゲーションを追加

メニュー用のナビゲーション

メニューが画面幅をはみ出す場合は、メニューにもナビゲーションを追加

画像のキャプションの追加

WordPressで「メディアを追加」から画像を追加する際、キャプションを入れると正しく表示されていなかった不具合を対応しました。

もちろん、中央・右・左の配置にも対応していて、それぞれ以下のように表示されます。

配置:中央の場合

ここにキャプションが入ります。

配置:左の場合

ここにキャプションが入ります。

配置:右の場合

ここにキャプションが入ります。

配置:なしの場合

ここにキャプションが入ります。

という感じで、画像&キャプションが配置されます。
※スマホで見ると画像の配置はほぼ一緒でキャプションの表示位置が変わっているだけになるかもしれません。

アップデートの手順

ver 0.1.1以降をお使いの方は、Wordpressの管理画面から記事のアップデートが利用できます。

まだ上記のアップデートが適用できていない方は、以下のページを参考にアップデートしてください!