jQuery.tooltipの「出力エリアをずれてしまう」の原因と解決

基盤ユニットのイです。
結構軽い記事になりますが、よろしくお願いします。 ( _ _ )

概要

皆さんは、tooltipをよく利用していますか？
tooltipとは、マウスを当該イメージ画面や特定の対象に持っておけば、当該対象に関する詳細説明が表示される機能でございます。

const IMG_MESSAGE = 'はじめまして！イと申します。';
$('.ldh-img').tooltip({
    position: { my: "left+15 center", at: "right center" },
    content: IMG_MESSAGE,
    track: false
});

通常、🔗jQuery.tooltip、もしくは🔗Bootstrapで、機能を導入しています。
しかし、その後、テストや運用から以下のような「出力エリアをずれてしまう」の結果のため、困るかもしれません。

const TEST_CASE = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$('.ldh-img').tooltip({
    position: { my: "left+15 center", at: "right center" },
    content: TEST_CASE,
    track: false
});

ということで、こいう結果の原因と解決方法を話しさせて頂きます。

原因

まず、いくつかのケースの結果をご覧して、どのケースで出力エリアをずれてしまうのか、確認しましょう。

const TEST_CASE_1 = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
const TEST_CASE_2 = '12345678901234567890123456789012345678901234567890';
const TEST_CASE_3 = 'ひらがなカタカナひらがなカタカナひらがなカタカナひらがなカタカナ';
const TEST_CASE_4 = '漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字漢字';
const TEST_CASE_5 = '한글한글한글한글한글한글한글한글한글한글한글한글한글한글한글한글한글한글';
const TEST_CASE_6 = '@#()*$(*%()!#&%)(&!#*()&*)(!#&*(&!#(*&*()!$&*(!#&%*(!#&*!#$';
const TEST_CASE_7 = '!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!';
const TEST_CASE_8 = '12345678901234567890123456789012345678 9012345 67890';
const TEST_CASE_9 = '12345678901234567890123456789012345678한901234567890';

$('.ldh-img').tooltip({
    position: { my: "left+15 center", at: "right center" },
    content: TEST_CASE_9,
    track: false
});

ケース①、連続英字

ケース②、連続数字

ケース③、連続ひらがな・カタカナ

ケース④、連続漢字

ケース⑤、連続ハングル

ケース⑥、連続特殊文字

ケース⑦、連続ビックリ文字

ケース⑧、スペース含め連続数字

ケース⑨、ハングル含め連続数字

テストケースが多かった感じがありますが、テストの結果をご覧すると、原因をすぐ理解しましたと思っております。
原因は、🌟スペース以外の1バイト文字がスペースなしで連続に並んでいると、それを一つの単語と判断してエリアを過ぎてしまう
という原因でした。

解決

解決できる方法としては、いろいろあると思いますが、自分が解決した方法を説明させていただきたいと思っています。

それは、CSSのword-breakで改行処理する方法でございます。
word-breakとは、単語意味の通り、単語を切るというものです。
基本的に、次の行に変わるときは、単語単位で変わることになっています。
word-breakは、エリアの範囲を過ぎたら改行するCSS設定でございます。

.ui-tooltip {
    word-break:break-all;
}

まとめ

jqueryから提供されている便利なオブジェクトがいろいろありますが、利用ケースによって予想以外の結果を出している場合があります。
その原因が起こる可能性が少ないだと無視するとまずいと思っております。
しっかり、利用する機能は色々なケースを確認しましょう！
以上です。

Darumaotoshi: 論理削除ではない復旧可能な削除

基盤ユニットの小山です( @k1LoW )。

会社の技術ブログは敷居が高いので、チームの非公式技術ブログをはじめることになりました。

よろしくおねがいします。

今回は、CakePHP3での削除プラグインDarumaotoshiの紹介をします。

論理削除と設計

データベース設計におけるいわゆる論理削除については、論理削除 Casual Talksというイベントがあるほど様々な議論があります。

皆さんが言われていることについては大きく頷くばかりで、「設計しっかり」というのが大前提です。

削除してしまったものを簡単に復旧したい（かもしれない）機能

ここからスコープの小さい話をします。

単純に削除機能があるアプリケーションを作ったとき、「削除データを記録しておきたい」「削除してしまったものを簡単に復旧したい（かもしれない）」という要求があった場合、論理削除はひとつの選択肢となると思います。

多くのフレームワークで論理削除プラグインが作られていますし、CakePHPでも、UseMuffin/Trash やfusic/Reincarnationなど、いくつか存在します。

ただ、「削除データを記録しておきたい」「削除してしまったものを簡単に復旧したい（かもしれない）」という要求のためだけだと、 SELECTするときに常にWHERE句が追加で必要になるので、論理削除はあまり良い手段とは言えません。

実際はWHERE句の追加も論理削除プラグインがコード上隠蔽するのですが、それでも、いざフレームワークのORマッパーから外れてSQLを書くときにツラいです。

ただ、論理削除プラグイン以外の削除プラグインというのが、なかなかないというのも現状です。 （なぜなんですかね？）

というわけで、削除レコードをアーカイブ用のテーブルに退避させる方法をとったCakePHP3用の削除プラグインを作ってみました。

Darumaotoshi

github.com

Darumaotoshiは削除時に削除レコードを自動でアーカイブ化するプラグインです。

具体的には、アーカイブ用テーブル trash を作っておいて、CakePHPのbeforeDeleteイベント発火時に、 trash テーブルに削除レコードをアーカイブさせる形で削除レコードの情報を保持します。

<?php
// in the initialize() method
$this->addBehavior('Darumaotoshi.Darumaotoshi');

というふうにビヘイビアを有効にしてもらえれば、deleteメソッド発行時に自動でアーカイブ化も実行されます。

元のテーブルからはレコードは削除されているので、SELECTのWHERE句に影響もありません。

また、復旧するためのメソッドとして restore() を提供しているので、それを利用して削除したレコードを元に戻すことも可能です。

現在は trash テーブルに、シリアライズ化（JSON化）した削除レコードを雑にアーカイブ化するだけですが、同じスキーマの削除レコードテーブルへのアーカイブ化にも対応しようと思っています。

まとめ

CakePHP3用の削除プラグインDarumaotoshiを紹介しました。

データベース設計はしっかりしていきたいと思いました。

ちなみになぜ Darumaotoshi なのかというと、削除レコードを退避する様がだるま落としのイメージと似ていたからです。