お知らせでもお伝えしましたが、画像のモーダルウィンドウにFancyboxを導入しました。Fancyboxの導入方法については、てがろぐの公式マニュアルに「Fancyboxを使って画像を拡大したい場合」というものがあるのですが、最新のバージョンだと設置方法がやや異なるので覚え書きとしてさらっと書いておこうと思います。

基本的な使い方
skin-cover.htmlのhead要素内にCSSを、</body>直前にJavaScriptを挿入します。
/*FancyboxのCSS*/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.css">/*FancyboxのJavaScript*/
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.1/dist/fancybox/fancybox.umd.js"></script>
<script>
    Fancybox.bind("[data-fancybox]", {
       /*オプションはここに書きます*/
    });
</script>JavaScriptは3行目以降も書かないとFancyboxが起動しません。また、てがろぐ管理画面の[設定]→[システム設定]→【画像拡大スクリプトの選択】でスクリプトファイルを指定する場合は下記のように書くといいでしょう。
/*設定でスクリプトファイルを指定する場合*/
[[JS:LIGHTBOX]]
<script>
    Fancybox.bind("[data-fancybox]", {
       /*オプションはここに書きます*/
    });
</script>次にてがろぐ管理画面の[設定]→[ページの表示]→【投稿本文の表示／画像】で画像のように設定します。「画像リンクにLightbox系用の属性を付加」にはdata-fancybox="gallery"を、「代替文字がある場合にキャプションを作る」にはdata-captionを指定します。

これで設定は終了です。後はいつも通りてがろぐで画像をアップすればOKです。上記の【投稿本文の表示／画像】の画像だけではギャラリー化されないので、適当に画像をアップしました。どう表示されるかご確認ください。
サムネイルのカスタマイズ
上記画像で確認するとわかる通り、Fancyboxでは拡大画像の下にギャラリー化した画像のサムネイルが表示されます。このサムネイルのカスタマイズについて紹介します。

まず、サムネイルの表示スタイルの変更ができます。デフォルトでは"modern"というAppleのフォトアプリ風のスタイルになってます。私はあんまり好みじゃないので"classic"を指定してます。/*サムネイルのスタイルをclassicに変更する*/
<script>
    Fancybox.bind("[data-fancybox]", {
      Carousel: {
         Thumbs: {
            type: "classic",
         },
        },
    });
</script>その他に"scrollable"というスタイルがあります。これはサムネイルを画面右横に縦方向へ並べるスタイルです。いずれも公式サイトのExamplesで挙動を確認できます。

また、サムネイルは非表示にもできます。方法は2つ。/*サムネイルを非表示にする*/
<script>
    Fancybox.bind("[data-fancybox]", {
      Carousel: {
        Thumbs: {
          showOnStart: false,
        },
      },
    });
</script>/*サムネイルを完全に非表示にする*/
<script>
    Fancybox.bind("[data-fancybox]", {
      Carousel: {
        Thumbs: {
          Thumbs: false,
        },
      },
    });
</script>Fancyboxは上部に表示されるボタンでサムネイルの表示非表示を切り替えられるのですが、後者の方法だとサムネイル切り替えボタンが表示されません。任意であってもサムネイルを表示させたくない場合は後者の方法を利用すればいいと思います。

他にも表示されるボタンを指定＆ボタンの位置を変更したり背景を白くしたり右クリック禁止＆ウォーターマークを画像に重ねる(ただし、右クリック禁止は拡大画像のみに適用)など、できることは結構あります。気になる方は公式サイトでご確認ください。

豆知識
Fancyboxのキャプションですが、HTMLを利用できます。ただし、エスケープが必要です。<a class="imagelink " href="./images/simple.jpg" data-fancybox="gallery" data-caption="2行にすることができます。&lt;br&gt;こんなふうに書きます。">
    <img class="embeddedimage " width="1400" height="1050" loading="lazy" src="./images/simple.jpg" alt="2行にすることができます。&lt;br&gt;こんなふうに書きます。">
</a>まああまり利用することはないと思いますが…。

#てがろぐ #カスタマイズ

気がつけばもう今年も半分を過ぎようとしてますが、皆さんいかがお過ごしでしょうか？なんか今年は昨年の夏より暑くなるそうです。毎年言われてるような気がするよ。

ところでついにBlueskyが招待制を廃止しましたね。そのちょっと前に登録したのですが、フィードを作成できるのが目新しい。X(旧Twitter)のリストと違って検索結果も取得できるようになってるのが特徴。ただ、日本語で検索すると精度がイマイチなんですよね。これさえなんとかなればもっとユーザーが増えそうです。

そのBlueskyを利用するにあたってサードパーティクライアントのTOKIMEKI、ぞーぺん、ソラタマを試しました。TOKIMEKIはAndroidアプリとブラウザ版、両方利用しましたが、その他はAndroidアプリです。
上記の画像はメディアありの投稿を抽出したものですが、ご覧のとおりTOKIMEKIでは画像のみを並べて表示することができます。画像のある投稿だけを表示するときは本文はさほど重要でないしむしろ邪魔なので、これは大変ありがたい機能。さらにタイムライン上に翻訳済のポストを表示できます。これが非常に便利。
さらにカスタムリンク(文字にリンクを貼る機能)が利用可能。TOKIMEKIのブラウザ版はDM利用も可能なので、公式アプリの機能はほぼ使える感じです。

そんなTOKIMEKIですが既読位置を記憶できないので、タイムラインの流れが早いユーザーだと不便かも。それと何故かリンクカードの画像が非表示になってしまう。残りのクライアントは表示されるので、何故なのか不明。
ソラタマは以前配信されてたTwitterクライアント、ツイタマとほぼ使い勝手が同じ。ぞーぺんも同じくついぱねに準じているので、使ったことのある人には馴染みやすいかも。ただ、どちらもTOKIMEKIと違って広告が表示されます。ソラタマはそこまで気にならないのですが、ぞーぺんは投稿時にも広告が表示されるのが煩わしいかも。月300円の定期購入で広告非表示にはできるので、気に入ったのなら課金したほうがいいと思います。なお、ソラタマは今のところ広告非表示にはできません。

表示のカスタマイズについてはぞーぺんが一番細かくできるかも。TOKIMEKIは細かい調整はできませんがテーマがいくつかあるので見た目の問題だけならカスタマイズが簡単です。ソラタマはカラーの調整は細かくできてもそれ以外はぞーぺんより劣るかなという感じ。表示と言えば投稿元アプリ(via〜)についてはソラタマだけ表示されません。他のクライアントからソラタマからの投稿を見ても非表示。まだβ版なので、このあたりはそのうち修正されるかもしれません。

なお、この3つのうちぞーぺんだけはMastodon、Misskeyも利用可能です。というより元々Mastodon用のクライアントだったのがBlueskyも利用可能になったので、他のクライアントとはそのあたりが異なります。他のSNSも利用してるけどそれぞれのアプリをインストールすると容量圧迫するなあというならぞーぺん一択になります。

そしてそれぞれのクライアントを触った結果、TOKIMEKIをメインにしつつソラタマを使うことで落ち着きそうです。公式アプリはアプリパスワードを発行するときぐらいしか使わなくなりそう。元々SNSはタイッツーメインなので、Blueskyはちょこちょこ覗きながら細く長く利用することになりそうです。

#スマホ #アプリ