[Javascript] ページ内の画像をプレビューできる便利ライブラリに機能追加したよ。

もはや、WEBツールのライブラリは手作りした方が早いことに気がついた、ユゲタです。 自分が欲しいな〜と思った機能を、手の空いたタイミングで、ライブラリを作っておくと、WEBシステムを作る仕事の際に、非常に便利に使えて、効率が極めて良好です。 実際に自分でライブラリを作って、本番環境でそれを使うことで、使いにくいと感じた事や、足りていない機能なども、体感でき、オウンドバージョンアップさせることができます。 ギアの再発明とこうした行為を嫌う人もいるようですが、非常にプログラミングの学習になるという点と、他のOSSをREADMEを読み解いて、ブラックボックス感が否めない状態で使うよりは、動作を担保する腹が決まっているようであれば、効率アップを高速に行うことができる非常にいい手段だと改めて感じました。 以前に作って、とある案件で使っていた「picview」という、ページ内の画像を拡大表示させるライブラリを必要にかられて機能追加をしたので、その説明をしておきたいと思います。

本日のIT謎掛け

「自分で作るライブラリ」と、かけまして・・・ 「失敗してあっけらかんとしている人」と、ときます。 そのココロは・・・ 公開（後悔）したほうが、いいかもね。

PicViewライブラリの紹介

以前の紹介記事 [JSライブラリ] ページ内の画像をプレビュー表示するのに便利な関数「PicView」 javascriptライブラリで有名な「LightBox」というのが、これを軽量化させて、自分で使いやすいように構築したライブラリです。 何が使いやすいかというと、既存のこうしたライブラリでは、htmlソースコードの画像タグ部分に、relやら、data属性を埋め込んで、その画像が、ライブラリ挙動を実行することができるようになるんですが、 ページが読み込まれたタイミングで、js関数のインスタンス実行する時に付与するoption設定だけで、ページ内のタグを既存のまま変更せずに利用できるようにしたライブラリになります。 簡単に言うと、タグを記述して、好きなタイミング（ページonloadなど）でスタートさせるだけで、簡単に設置できるというメリット。 もちろん、動的に画像が追加や削除されるページなどでも、対象のタグに対しての設定処理を個別に行うことも可能だし、 LightBoxのようなタグに記述をして、対象エレメントに設定することもできるようにしているので、いわゆる他ツールでの仕様も取り込んでいます。 う〜ん、改めて説明していると、便利に作っているな〜と自画自賛。

今回の機能追加の内容

WEBページで表示されている画像をクリックしたら、大きく手前に表示してくれる機能ですが、今回は、写真をアップロードするとあるWEBサービスで、アップロードした画像を削除したい場合に、ポップアップされているこの機能で行いたいという要望がでてきたので、そういう仕様に対応できるように機能追加してみました。 名付けて「add-elements」機能として、画像を拡大表示している時に、任意のelementと、そのelementに対してのイベントを追加できるようにしました。 これにより、「削除ボタン」や、「何かしらのアクションボタン」「付与したい画像」などを同時に表示できて、アクション対応させることができるようになります。 システムページなどでの利用がよりできるようになり、仕事での利用範囲も広がりそうです。

Githubでcloneしてね

もし、このライブラリを使いたい人という奇特な人がいるようでしたら、Githubにアップしているので、そちらでcloneしてお使いください。 https://github.com/yugeta/picview え？ライセンス？ そんなもん、MITに決まっとるやないか！