2020年 8月 の投稿一覧

[Linux] yumで一度利用したパッケージをキャッシュする

小ネタです。
AnsibleのPlaybookを作成していたのですが、何度もyumで同じパッケージのインストールを繰り返していると、処理に時間はかかるしネットワーク利用量(利用料)もバカになりません。

そこで一度でも利用したパッケージはローカルにキャッシュするよう設定します。
続きを読む

「バロン」の肘パッドがラピュタのように崩壊したので交換した話

自宅では10年ほど前に購入したオカムラのオフィスチェア「バロン」を愛用しています。腰痛持ちなので椅子は良いものを使いたいと思い清水の舞台から飛び降りる覚悟で購入を決意し、メジャーどころのオフィスチェアを試座しまくったら最終的にバロンにたどり着きました。やはり日本人には日本メーカーのイスが相性良いのでしょうか?

※画像はメーカーサイトより

ここ10年はほぼノーメンテ、たまに掃除をするくらいでなんの故障や不具合の一つも無かったのですが、つい2ヶ月前ほど前から何の前触れもなく肘パッドに亀裂が入ってきました。最初はひとまずビニールテープで補修してごまかしたのですが、時間が立つほどに崩壊が進んでいくわけです。

最終的に下の素材が見えるレベルになりました。ラピュタのラストシーンを彷彿とさせる崩壊っぷりにさすがにまずいと思い一念発起。交換を決意したというわけです。

誰ですか、滅びの呪文を唱えたのは。先生怒らないから手をあげなさいヽ(`Д´)ノプンプン
続きを読む

[WordPress] 記事の更新日を表示する

小ネタです。
Wordpressで使っているテーマが記事の「公開日」だけしか表示してくれないので、「更新日」も表示するよう修正しました。

結論から言うと以下のようなコードをテーマに埋め込むだけです。

<span title="公開日">
  公開日:<time itemprop="datePublished" datetime="<?php the_time('c');?>"><?php the_time('Y-m-d');?></time>
</span>
<?php if( get_the_time('Ymd') !== get_the_modified_date('Ymd')){ ?>
  <span title="更新日">
    更新日:<time itemprop="dateModified" datetime="<?php the_modified_date('c');?>"><?php the_modified_date('Y-m-d'); ?></time>
  </span>
<?php } ?>

続きを読む

[HTML5] WebWorkerで並列処理を行う – 共有ワーカー編

前回はWebWorkerの中でも最もシンプルに並列処理を扱うことができる「専用ワーカー (Dedicated Worker)」について取り上げました。今回はiframeや他のウィンドウ(タブ)などから起動中のWorkerを利用することのできる「共有ワーカー(Shared Worker)」について取り上げます。

ページが違えど処理は共通と言った場合に利用すれば、クライアントのリソースの消費を抑えることが可能です。
続きを読む

[HTML5] WebWorkerで並列処理を行う – 専用ワーカー編

JavaScriptは非同期処理だから、複数同時に処理してるんでしょ?……と思っていた時期がありましたw JavaScriptの非同期処理とは時間のかかる処理の待ち時間で他のことをやってしまおうという物で、雑に言うなら実行する順番をコントロールする仕組みのことです。つまり並列処理とは異なる物。

本来の意味での並列処理を実装するための機能はWebWorkerで実装することができます。シンプルな仕様にまとめられているため簡単にJavaScriptでも並列処理を実現できます。WebWorkerにはいくつか種類があるのですが、今回は「専用ワーカー(Dedicated Workers)」について取り上げます。
続きを読む

[JavaScript] Bowser 2.xでOSやブラウザを判定する

Webブラウザの状況が目まぐるしく変わっている昨今、常にすべてのブラウザへ対応出来るとは限りませんよね。というか現実的に出来ませんw そこで対応しているブラウザかどうかをチェックするわけですが、この手の判定は陳腐化してしまう恐れがあるため、事情が無い限りはメンテナンスされているライブラリを使うべきです。

つい最近もiPadが「iOS」から「iPadOS」に変更になったと同時にSafariのUAが劇的に変化して痛い目をみましたw

今回はこの手の判定用のライブラリとしてはメジャーな「Bowser」の使い方をメモしておきます。ちなみにBowserって「スーパーマリオ」の「クッパ」のことなんですね。Bowserでググると意図せずクッパとの戦いになって困ってましたw


※このページの内容はいずれも執筆時点の物です。ドキュメントに無い情報はv2.10.0のソースコードを参考にしています。
続きを読む

[HTML5] IndexedDBに画像ファイルを保存する – Dexie.js

IndexedDBは様々なデータ型に対応しておりblobも例外ではありません。つまり画像ファイルなどバイナリ形式の保存が可能というわけです。IndexedDBへ格納しておけば例えオフライン状態であっても好きなときに取り出して利用することができます。

単純にサーバ上にあるファイルをキャッシュしておくだけの用途であれば最近はWebWorkerCache APIを組み合わせた方が一般的ではありますが、これはデータに対してURLが存在することが前提です。例えばCanvasなどに描画した内容を保存しておきたいといった場合には今回の方法が重宝するかもしれません。
続きを読む

[HTML5] IndexedDBでデータの保存や読み込みを行う – Dexie.js編

JavaScriptがブラウザ内にデータを保存する場合、ちょっとした物であればWebStorageが簡単に使えて便利なのですが、この子は5〜10Mbyte程度の容量しかありません。また純粋なKVSであるがためにそれ以上のことはもちろんできません。

そんな時に利用するのがIndexedDB。WebStorageと比べ非常に大容量で、RDBで言うインデックスやテーブルなど様々な機能が搭載されています。今回はIndexedDBのお話……をしようかと思ったのですが、直接IndexedDBを触るコードは書いていて正直ダルいので、便利ライブラリを通して触ることにしますw
続きを読む

[HTML5] WebStorageにデータの保存や読み込みを行う

ブラウザの内部にデータを保存する方法として、これまではCookieが使われてきましたがこれは主にサーバとのやり取りで利用する物。そこでJavaScriptから手軽に扱えるデータの保存領域としてHTML5ではWebStorageが登場しました。

今回はこのWebStorageの基本的な利用方法についてまとめます。
続きを読む