特殊タグを使用したデザインの紹介 作：SunGenuin(佐藤)
前回ご紹介した有志開発のジェネレータ〜『z/Generator』が運営を終了しアクセスできなくなってしまったため、新しいジェネレーターをエンジニアの友人に協力して貰い開発しました。
業務の合間に開発を進めてもらっていたので、全てのタグをフルカバー！ は流石にお願いできませんでしたが、必要な機能は実装していただけと思います。
協力してくれた友人に心から感謝します。
今回はこのジェネレーター『TxH-G(Text × Hameln Generatorの略)』の概要とともに、何ができるかをお紹介していこうと思います。
ジェネレーターにはこちらからアクセスしてください。
紹介の順番は以下の通りです。
1：ジェネレーターとは何か
２：どうしてジェネレーターが存在するのか
3：ジェネレーターの使い方と使用例
１：ジェネレーターとは何か
ジェネレーターとは。
検索するとさまざまな業界の「ジェネレーター」がヒットすると思いますが、この場合は「ある要素の組み合わせを自動的に生成するツール」と捉えていただければ大丈夫です。
今回で言うと、「ハーメルンに対応する装飾やデザインを表示する特殊タグを自動的に生成するツール」ということになります。
２：どうしてジェネレーターが存在するのか
ジェネレーター無くしては執筆できず。
……というようなことは決してありません。
ジェネレーターがなくともハーメルンでの創作活動には基本的に影響はなく、運営が提供してくれるエディターツールで十分思う通りに執筆可能だと思います。
個人運営でありながら企業提供のサービスにも勝る強力な執筆環境も、ハーメルンが多くの創作者に支持される理由の一つではないでしょうか。
もはや外部の執筆環境を使うまでもなくサイト内で完結する、という創作者も大勢いるかもしれません。
使えば使うほど惚れ込み、気づけばあれほど難解だと思っていた特殊タグも思うままに操れるようになった方もいるのではないでしょうか。
するとちょっと思うはずです。
毎回パターン化されたこの特殊タグ、コピペするのも良いけどもっと管理しやすく、もっと視覚的に楽に操作できたら執筆スピードも上がるのに、と。
また、ハーメルンを触り始めた時、一部の創作者もちょっと思ったはずです。
他の作者がよく使用しているあの特殊タグ、1から自分で作るのは大変そうだしそもそも作れるか不安だから、少ない操作で使えたら便利なのに、と。
ここで登場するのがジェネレーターです。
よく使用されているタグをボタン形式で配置することでキーボード操作を減らし、リアルタイムでプレビューするためどのような見た目になっているかを把握しやすく、コピーボタンを押せばハーメルンに対応する特殊タグとして取得可能。
すでに成形されている特殊タグのテンプレートの、テキスト部分だけを変更するから、今、自分がどこを編集しているかもできるだけ把握しやすくなります。
つまりジェネレーターは、今回で言えばハーメルンのエディターと競合するエディターツールではなく、補強するためのサポートツールなのです。
別になくったって困りはしないけど、あったら便利、それくらいの気軽さでお考えください。
3：ジェネレーターの使い方と使用例
使用方法に関しては、前回ご紹介した「Z/Generator」と類似している点はざいますが、改めてご紹介します。
特殊タグの自動生成ツールとしての機能は大きく分けて2つ。
Simple と Editです。
以下で少し掘り下げてみます。
Simple では比較的簡単な特殊タグを生成可能です。
たとえばマシュマロ風の画面や、X(旧Twitter時代のデザインに寄せている)風の画面、大百科事典風の画面などがメインです。
いずれも慣れてくるとコピペで余裕で作業できる、という方もいるとは思いますが、その一つ一つをコピペしていく作業中、どこを作業しているのかちょっとわからなくなった、という経験は1度はあったのではないでしょうか。
良いデザインを表現すると自然と特殊タグが増えていく都合上、避けられない事でもあります。
Simpleではエディター欄に表示するタグを非常に簡略化させることで、特殊タグをワンクリックで配置、操作できるようになっているほか、リアルタイムプレビューでどのような表現になっているかを確認可能です。
Edit では、現時点で匿名掲示板の特殊タグを生成可能です。
掲示板形式といえば、言わずと知れたハーメルン特殊タグの代表格です。
様々な名スレを生み出してきた、ハーメルンを代表するこの特殊タグ。
ハーメルン標準のエディット機能でも十二分に操作可能ですが、初期はレス内容が空の特殊タグを一括生成し、それを一つずつ目視で確認しながら埋めて行く、という状態のため大変な苦労があります。
今回のジェネレーターでは、さながらチャット画面や実際の匿名掲示板のように入力フォームと送信ボタンを設置し、1レスごとに操作できるようになっています。この方法自体は旧ジェネレーターと類似しているかもしれません。
また、名前欄やIDも表示非表示の選択、デフォルトのIDや名前の設定/セレクトボックスでの選択を可能にして、固定キャラクターのIDや名前のコピペを行う手間を減らしました。
背景色も設定可能なので、お好みのカラーコードを入力するか、カラーパレットから選択してみてください。
最後にコピーボタンを押せば、ハーメルンに対応した特殊タグの生成完了です。
あとはハーメルンの小説投稿ページに貼り付ければ作業が完了します。
それでは早速、以下にSimpleで生成できる特殊タグを置いてみます。
生成できるもの
1・マシュマロ風
2・X風
ここにユーザー名 test_user |
ここに投稿内容です
| こ | り | ♡ | ふ | め |
3：大百科風
| ニコニコ大百科 | け
|
| い88 |
| お114514 |
| い いいね！ |
| お ナニニ優しく応援 |
| す 記事編集 |
■ 項目１
ここに内容
4・競馬サイトの掲示板風
TEST
？ ミュート、報告の使い方 ∨
テスト さん test_user | と フォローする |
Editで生成したものはこちら
生成したもの
1: ななしの競馬民 ID:eN99AKHGsD
Editで生成したレス内容です。
2: ななしの競馬民 ID:q7XBX7TAk@
レス番号も操作可能なので
55: ななしの競馬民 ID:+COJ+cJaPT
このように飛ばすこともできます
SimpleとEditのプレビュー画面、入力画面のサイズや表示方法も設定できるので、PC、スマホどちらでも利用できるようになっています。
データ同期は現時点で実装されていないので、長時間の編集には向いていません。
通常の執筆のちょっとしたサポート程度の利用を前提としていることは、あらかじめご了承いただければと思います。
最後までお読みただきありがとうございました！
今回紹介したデザインの構造で気になることや、ジェネレーターに追加して欲しい機能があれば感想欄にご記入ください。
即答はお約束できませんが、なるべくお答えできるよう精進します。
ありがとうございました。