フロントのみの処理で文字列の変換ツールを作りましたので、その使い方のガイドと記録のために記事を書きました！
単純な文字列の変換作業に飽き飽きしている方は、このツールで効率化できるかもしれません。
ツールでできること
URLにはいろいろ情報が入っているので、うまく要素を拾ってくれば単純な変換ができるのに、、、と思っている場合、このツールはかなり有効です。
例えば以下のURLをご覧ください。
https://www.google.com/search?q=hoge
みなさまご存じGoogle先生の検索ページのURLをめちゃくちゃ簡略化したものです。
クエリに検索文字列がいます、なのでこれを活用して「hogeと検索」と表示してこのurlリンクになっているようなマークダウン形式に変換したいとします。
目標にするのは以下のような文字列です。
[hogeと検索](https://www.google.com/search?q=hoge)
このような文字列の変更を、都度都度行うのって地味にめんどくさいですよね。
本ツールでは、検索文字列が変わってもURLの構造が同じである限り、hogeだろうがfugaだろうが[〇〇と検索](https://www.google.com/search?q=〇〇)と変換できます。
また、目標とする形式は自由に設定が可能です。
できることの中心的な機能は以上です。
後述しますがこの変換をサポートするための機能として、履歴機能とブックマークレット用スクリプト作成機能が付随しています。
ホームのページの使い方
ホームのページは以下のようなものです。
「分割記号」と「フォーマット」の二つを設定することで、このツールは使えます。
下の設定を例に話を進めていきます。
分割記号 ： =
フォーマット： [${2}で検索](${url})
入力 ： https://www.google.com/search?q=hoge
↓
出力 ： [hogeと検索](https://www.google.com/search?q=hoge)
変換の設定
URLからどの情報を取りたいのかをまず考えます。
https://www.google.com/search?q=hogeの中から、hogeの部分をとりましょう。
hogeの部分を取り出すために、=でURLを分割します。split('=')みたいなイメージです。
https://www.google.com/search?qとhogeに分かれます。これで情報を取り出す準備ができました。
次に、変換後の文字列を決めます。
[hogeと検索](https://www.google.com/search?q=hoge)と出力することにしましょう。マークダウンのリンクの形式ですね。
この文字列に使われているURLの情報は2種類です。
検索文字のhogeと、url自体です。
hogeを埋め込む場所には、先ほど分割したものの何番目か、というのを設定します。今回だと2番目ですね。
この情報埋め込みは、${}という記号で囲んで行います。なので、[${2}で検索]とフォーマットを設定すれば、[hogeで検索]と出力されます。
また、URLについては${url}という変数を用意しています。
なので、(${url})と設定すれば、(https://www.google.com/search?q=hoge)と出力されます。
ということで、分割記号に=、フォーマットに[${2}で検索](${url})を設定することで、簡単に変換が行える設定の完了です。
プレビュー機能
以上のように設定を説明しましたが、実際にやってみないとわかりにくいですよね。
なので、下のほうにプレビュー機能をつけています。
変換したいなと思っているURLを「入力」のフィールドに入れておくと、設定した形式を反映して、変換後が下に表示されます。設定を変更すると自動で反映されます。
最初にここにURLを入力しておいて、思い通りの文字列になるように設定を作っていくのがおすすめです。
変換後の出力文字列は、出力のコピーボタンを押すとコピーできます。
ですが、このツールは繰り返し同じ変換をする場合に効果を発揮するものです。
設定を完了したら、「移動」ボタンを押して、変換フォームページに移動します。
変換フォームページ
変換フォームページは以下のようなものです。
基本的には、URLの欄に変換したいURLをペーストすると、変換された文字列がクリップボードにコピーされます。
一応、URLの欄に変換したいURLを手入力して「変換&コピー」ボタンを押してもできます。
ペーストで自動実行したくない場合や、変換と同時にクリアされたくない場合は、上の設定のチェックを外してください。
また、変換の履歴機能があります。コピーボタンで再度クリップボードにコピーされます。
ただし、ページ再読み込みで消えます、要望があればローカルストレージへの保存をつけるかもしれません。
フォームの設定は表示されているとおりです。設定はこのページのURLのクエリにあるので、ブックマークしておけばいつでも使えますし、他の人に共有もできます。
google同様「/」でフィールドにフォーカスします。
以上がこのコンバーターの核心的な機能の説明です。
ブックマークレット機能
というわけで当ツールの説明の機能はこのようになっていますが、ブックマーレット用の機能も用意しています。
ブックマークレットとは簡単にいえば「ブックマークボタンを押すとなんらかの機能を実行することができる機能」です。
詳しくは、説明してくださっている記事のリンクを参考にしてください。
https://qiita.com/aqril_1132/items/b5f9040ccb8cbc705d04
このブックマークレットで登録するjavascriptを生成する機能が、当ツールにはついています。
ホームでもフォームのページでも、JS生成&コピーという箇所があります。
変換設定をしてからここをクリックすると、クリップボードに同様の変換が行えるjavascriptがコピーされますので是非ご活用ください。
なお、ブックマークレットだと、変換するURLのページからtitleとdomainの属性を取得できるようにしています。
それぞれ、${title}と${domain}とフォーマットに記載してください。
本ツールの優位性
似たものがあるのかちゃんと調べきれてないかもしれませんが、以下の点を意識して作りました。
エンジニアよりの話になっています。
- ユーザーに知識がなくても自分の定義でツールを使える
ブックマークレットについて調べていて思ったこととして、ブックマークレット機能はjavascriptを書ける人が自分で作るか、同じ要望のある人が作ったものをコピーするしかないのが現状なのかなというのがありました。
なので、このツールでは目標とする変換形式さえ分かっていれば、jsなどを知らなくてもカスタマイズして使える、というところを意識しています。
- フロントのみで完結して変換に関するデータが送られない
本ツールは変換処理についてすべてフロントで行っています。
つまり、どんなURLが入力されたかについてはなにも伝わりません。
一応利用状況観測のためgoogleアナリティクスは設定していますが、それはページへのアクセス情報だけです。
企業のポリシー次第だとは思いますが、セキュリティへの懸念を押さえられるよう意識しました。
一応説明しておくと、履歴機能はフロントの状態管理だけで行っています。
それゆえに再読み込みすると消えてしまいますが。(使ってくれた人から要望があればローカルストレージに保存する機能も検討します)
また、Next.jsのみで作ることでVercelを使えて、ランニングコストがかかっていないのが自分としては大きいです笑。
- ツールページで変換機能の定義をURLに依存させることで、作成したツールを他人も同じように使うことができる
上述の通り、作ったものをどこかに保存するようなことはしませんでした。
だれがいつどうアクセスしても同じフォームとして使えるよう、(履歴以外)状態のないツールを志向しました。
登録要らずで作ったものを共有できます。
経緯や感想など
githubのプルリクとかissueとかのURLを書き換える単純作業が嫌だというところから作ったツールでした。
URLって、その名の通り情報がどこにあるかというのを指し示しているものなので、いっぱい情報を含んでいるはずなわけですよね。
それ自体を活用して文字列作れてしかるべきだな、という気持ちがありました。
また、変換のためにフォーマットを解釈する機能を作るときに正規表現と格闘しており、他の正規表現ツールで確認していましたが、やっぱりフロントで動くツールは入力が即時反映される方が嬉しいですね。
なので、プレビュー機能や変換自体も、わざわざボタンを押すなどせず即時反映になるように作っています。
以上、作ってほしいツール類はいつでも募集しているので、できるかはともかくQiitaコメントやサイトの問い合わせからぜひお声がけください。
アプリはこちらから