kishin 貴真

Instagram
20230314

/DESIGNOTHERS

klibのマニュアルを作り直す

自分用のJavascriptライブラリとして蓄積してきた《klib》のマニュアルが、250種類を超える関数に成長するとともに扱いにくくなってきた。元々、自分用なのであまり深く考えずに適当に決めた仕様でHTML 1ファイルのマニュアルとしてまとめていたのだが、こうも内容が厚くなるとさすがに扱いにくいので、重い腰を上げて作り直すことにした。

これまでは、Macのローカル上でしか閲覧しない想定だったのでPC用のコーディングのみで構築していたのだが、新版ではレスポンシブで構築してスマホにも対応させたので、新しい関数を追加する際にマニュアルページ上で動作確認をするにも都合が良くなった。

klib:Javascriptライブラリ

いくつかの関数を紹介してみようと思う。

例えば、$strJYear()は年号で日付を表示するのに便利がいい。引数として8桁の日付数列と日付表示に関するオプション指定をするだけで簡単に年号での日付表示を得られる。

function strJYearSample() {$id('input_20230314_a2').value=$strJYear($id('input_20230314_a1').value,'YJMD(WJ');}

例えば、$parallaxNodeBg()をページのonscrollイベントに設定して使うと、下のサンプルのように背景に設定した画像に視差を与えて動かすことができる。

 
function parallaxNodeBgSample() {$parallaxNodeBg('sample20230314b','BT',0);}

文字列にちょっとした動きを与えるような関数もあり、$aniTextRiseInit()では、指定したNodeに入っている文字列を一文字ずつ動かすような動作を与えることができる。

klib
Javascript Library
function aniTextRiseSampleInit() {$aniTextRiseInit('sample20230314c',25,1);}function aniTextRiseSample() {$aniTextRise('sample20230314c');}

klibは、Nodeの扱いを容易にしたり、文字列や数値、配列や連想配列をスピーディーに扱えるようにする関数が多いが、ちょっとしたアニメーションを与えるものや、UIの構築を効率化するものなどもあるので、興味があれば見てみてもらうとよい。現時点では252ページ構成のマニュアルになっているので全てを把握するのは時間もかかるし難しいだろうが、まずは興味のあるカテゴリーを開いてみて使ってみたい関数を探してみるのもよいだろう。

.jsファイルのHTMLへの読み込み方法や関数の実行の仕方、戻り値の受け取り方や変数の扱い方など、Javascriptの基本的な使い方が分かっている人向けのライブラリなので誰にでも有用という訳ではないかもしれないが、そうしたことをある程度分かっている人であれば、コーディングをより効率的に進めるために効果を発揮するJavascriptライブラリであることは、自分のコーディング作業で実証済である。

klibは、誰でも使えるようにそっと置いておくので興味を持った人には使ってみてもらいたい。

Instagram