目次
はじめに
こんにちは、クラウド事業部の丸山です。
今回は、既存のWebアプリケーションの操作性に不満を感じている方に向けて、その改善方法をご紹介します。
既存のWeb UIを改善する方法として、Tampermonkeyというブラウザ拡張機能を利用して簡単なスクリプトを作成する手法をご提案します。
Tampermonkeyを利用すれば、Web UIを自分好みにカスタマイズできるため、使い方をマスターすれば非常に有用です。
今回は基礎編として、ハンズオン形式で簡単なスクリプトを作成してみましょう。
この記事では、Chromeを利用して、知識ゼロから動作させるまでの手順を解説します。
どんなひとに読んで欲しい
- 既存のシステムで、自ら手を入れることはできないが使い勝手を良くしたいIT管理者や開発者
- JavaScriptを少し学んでみたい方
関連記事
support.google.com www.tampermonkey.net
Tampermonkeyとは
Tampermonkeyは、ユーザーがカスタムJavaScriptコードを使用してウェブページの動作を変更できるブラウザ拡張機能です。
Chrome、Firefox、Safari、Edgeなどの主要なブラウザで利用できます。
この拡張機能を使うことで、ウェブページに新たな機能を追加したり、既存の機能を変更したりすることができます。
前提
- Google Chromeを利用
- サンプル用に作成したWebページでの実施
手順
具体的には以下の流れで進めていきます。
- 操作対象となるhtmlタグの特定
- 操作対象のhtmlタグに対するJavaScriptコードの作成
- 作成したコードのTampermonkeyスクリプト化
操作対象となるhtmlタグ情報を特定
ここでは、サンプル用に準備をしたWebフォームを利用し、idを特定することを目的として、Chromeの開発者ツール(F12)を利用します。
開発者ツール起動後、上部のマウスカーソルマークをクリックして、対象の要素の上にマウスカーソルを移動し選択すると、
コードの対象箇所をハイライトして表示されるとともに、ブラウザ上の要素の詳細なプロパティが表示されます。
ここで表示される「input#searchInput」とはinputタグフォームのidがserchInputであることを表しています。
実際のコード表記としては以下の部分になります。
<input id="searchInput" type="text" name="search" placeholder="検索..." control-id="ControlID-1">
これで対象のinputフォームがsearchInputという名前のidを持っていることが確認できました。 *1
操作対象となるタグをJavaScriptで操作してみる
Chrome開発者ツールのコンソールタブからJavaScriptを実行することができます。
Webページ上での事前の動作確認などについては、コンソールを利用することで確認することができます。
[操作例]inputフォームの入力値を変える
コンソールから以下を実行するとinputフォームの内容にtestを入力できます。
document.getElementById('searchInput').value="test";
JavaScriptでは.区切りで対象の階層を指定するイメージとなります。
ここではWebコンテンツ(document)にあるid(searchInput)の値(value)に対してtestを入力しています。
Document - Web API | MDN
Document.getElementById() - Web API | MDN
[実践例]クリックした要素を消してみる
次は視覚的にわかりやすいものとして、クリックした要素を非表示にしてみます。
以下をコンソールで実行したのちに、ページの要素をクリックする対象の要素を非表示にすることができます。
document.addEventListener('click', function(event) {
event.target.style.display = 'none';
});
例としてGoogleのトップページでロゴをクリックした結果が以下です。
ブラウザ上のクリックイベントを受け取り、クリックされた要素に対して、
CSSの書き換えを行う形でdisplay = 'none'として要素を非表示にしています。
ここまでは基本的な操作になりますが、あとは応用として、色々な組み合わせを利用することで、
好な形でWeb UIを書き換えることが可能になります。
Tampermonkeyスクリプトにする
ここまでのコードをTampermonkeyのスクリプトにします。
Tampermonkeyは対象のページを開いている際に、そのページでのみ有効になるスクリプトを作成できるため、
都度実行の手間がいらないスクリプトを簡単に作成することができます。
Tampermonkeyスクリプトの作成
Google拡張機能からTampermonkeyを起動し、ダッシュボード>新規作成用の+ボタンを押下すると、
以下の様なコードのテンプレートが作成されます。
最低限の作成方法としては、// Your code here...の箇所に先ほど作成したコードを貼り付ければ良いです。
ヘッダーの内容についてはテスト時点ではそのままでも問題がありませんが、
// @matchについては、このスクリプトを反映するサイトを正規表現で記入する必要があります。
特定のサイトでのみ利用したい場合などはこちらを記載することで、他ページへの影響がなく利用できるため設定することをお勧めします。
クリックした要素を非表示にするTampermonkeyスクリプト
ここまでの内容を踏まえたて、実際に作成したスクリプトが以下になります。
サンプルに作成したWebページのソースコード
おわりに
今回は簡単な機能を実際に触りながら作成しましたがいかがでしたでしょうか。
難しそうに思える題材とはなりますが、思った以上に簡単にWeb UIの書き換えが利用できることがわかります。
UI/UXを考慮されていない古いアプリなどを利用している場合や、業務上で開発されたものなど、
現在でも使い勝手が悪いものは存在しますので、自分の手元で改善してみるのも面白いと思います。
次回は応用編としてもう少し実用的な例をご紹介しようと思います。
*1:idとはその要素が持つ特定の情報です。
