月別アーカイブ: 2022年4月

3行メッセージ

個人情報付きお祝いメッセージ

先日、『誕生日のお祝い』において、送られる側と送る側のアドレスを受取人が入力する方法で個人情報を保護してメッセージの送受信を行う方法を掲載しました。

この方法はセキュリティが高度に保護されますが、受信者側に煩わしい負担を強いていました。

今回の方法は、セキュリティを保ちながら受け取り側の負担を軽減する改良方法についてまとめています。

キーフレームを用いたCSS虹色アニメーションを使って横スクロールしています。虹色グラデーションはファンタジー冒険に胸をときめかせてくれるでしょう。

改良方法

この改良版は、誕生日のお祝いとして親が子供に、あるいは縁者が入学や卒業祝いにメッセージを送る時を想定しています。その方法をひとことで言えば、これらの贈答機能を有したホームページやブログが公開されていて、そのページアドレス(URL)にパラメータとして宛名、本文、送信者アドレスを付属させて送信するやり方です。



上の図に示したように、記事に柔軟性を持たせるためにURLアドレスに追加する形でパラメータを付属する方法があります。’?’マークの後に複数のパラメータを指定することができます。パラメータ名のname1, name2, par1, par2などに次いで’=’により区切りパラメータ値を指定しますが今回はパラメータ全体をひとつとして利用しています。

🌷おかあさんの手伝い感謝しています🍈
ほがらかで親孝行なさくらちゃんへ
やさしい母と家族のために頑張っている父より
©2021 TacM,V0.01
line3messageアドレスに表示用メッセージを付加して呼び出すとオリジナルな文言を出力することができます。


利用例

当該URLアドレスについで’?’に続けて3行のメッセージを指定します。メッセージは引用符(’や”)で囲む必要はありません。行末は’-‘です。最初は半角文字が扱いやすいので次のように指定してください。

URLアドレス?abc-123456-xyzと入力した場合、次のように表示されるでしょう。



1行左に宛名:abc、2行目に中央寄せでメッセージ:123456、3行目に右寄せで送信者アドレス:xyzが表示されます。1行目と3行目には26文字、2行目に21文字程度表示することができます。3行目の表示文字数が多くなると左下のクレジットは無表示になります。

さくらちゃん(仮名)に北海道に住む祖父母から誕生日のお祝いメッセージを送るには以下のような指定になるでしょう。入力はすべてテキストであり、ブラウザが処理できる絵文字を指定することができます。



背景はアニメーション機能により、左から右へスクロールします。ブラウザchrome, edge, operaでは問題ありませんがfirefoxではスクロールせず期待した動作にはなりませんでした。

さいごに

お祝いのメールに宛名には「山田太郎」などの仮名より実名の方が受信者は感銘を受けます。その理由でここでは実名を表示する方法について語っています。

しかしながらブログやホームページ閲覧に共有パソコン・タブレットを用いたとき、閲覧アドレスなどが一定期間保存されることがあり、個人情報が漏洩する恐れが生じます。このことについて気配りすることが大切です。

おまけ

公開情報においてセキュリティを保持するために、パスワードの設定が考えられます。今回もその方法を考えましたがパスワードが漏れたりする恐れがあります。最終的に採用した《すべてを受け取り側が指定する》方法は情報漏洩について自己責任となります。

CSS虹色アニメーションとURLアドレスにパラメーターを付加する利用例について参考になればありがたいです。

端午の節句を祝う

元気な鯉

日本人にとって鯉という魚には特別な思いが込められています。俎板の鯉、鯉の滝登りなどを含む故事やことわざが多く存在します。

時の流れは留まることを知りません。もうすぐこどもの日、端午の節句が巡ってきます。翔君という仮名で毎年、お祝いの作品を掲載しています。今年も屋根より高いから始まる『こいのぼり』の唱歌とお祝いメッセージを連動して表示しています。ネット上を調べたらこの歌の歌詞は著作権付きですが、曲の著作権は消滅しているようです。



歌詞も載せたかったのですが遠慮して、鯉にちなんだ勢いのある演奏をMP3形式のAudio媒体に変換してBGMとして流しています。

お祝いメッセージはInkScapeを使ってサインの筆記体風に61文字の縁取り文字を作成し、それをLazyLinePainterにて遅延データを作成しています。作り方の概略は《手書き風アニメーション「愛」を込めて》を参照してください。

これまでは、LazyLinePainterが出力したhtmlソースコードにテキストエディタを使って手を加え、遅延秒数等を修正していましたが61文字はさすがに神経を集中して編集するのは体によくないです。コードは規則正しく出力されるのでじっくり解析を加えれば、動的に変更することは可能とわかり、setAttribute関数を用いて設定しました。

一度、完成させ手の内に入れてしまえば、ディレー時間を一律に変更するなどの無駄な作業を省くことができます。例として以下のような設定が考えられます。

function initialize(){					//ロード後に実行
  for(var i=0; i<61; ++i){
    var pn=document.getElementById("path"+(185+i*2));	//idとしてのpath名を作る
    delayTime=i * DELAY;				//ディレータイム
    pn.setAttribute('data-llp-duration', DELAY);	//data-llp-duration
    pn.setAttribute('data-llp-delay', delayTime);	//data-llp-delay
  }
}


ブログを閲覧するツールである多くのブラウザにおいて、ページを読み込んだあと自動的に音楽を鳴らすことは不許可になっているので閲覧者がボタンをクリックするなどの手順が必要です。今回は音楽の再生ボタンのクリックにメッセージの表示や画像の描画が開始するように設定しています。

動くお祝いメッセージ

再生ボタンをクリックすれば、音楽の鳴動、メッセージ表示、画像描画が開始します。それでは健やかな成長を祈ってこどもの日のお祝いを贈りましょう。

誕生日のお祝い

誕生祝いのカスタマイズ

誕生祝いに、贈り人や贈られる人の名前を指定できるようなページを作成しました。SNSにより個人名を指定するのは一般的ではありません。よって、郵便で言えば宛名と発信者はブログの読み手が入力する方式にしました。

本文のみ共用という具合になります。下図は利用方法のpng画像説明図ですが、発信者と宛名は次に示すそれぞれの入力欄に指定してクリックします。ひな型のままでよければ決定欄をクリックするだけです。実際の操作は次項動作例にて行います。

決定欄をクリックするとハッピーバースディーの音楽が鳴り誕生日のお祝いメッセージが表示されます。

動作例

以下には動作コードが埋め込まれています。上で述べた方法により、世界に2つとないプレゼントを贈ってはいかがでしょう。

さくらちゃん
たんじょうび
おめでとう
優しい見守り人
©TacM,2022 Ver0.02

考察

今回は個人情報を保護するために、受信者が自分の情報を入力する方式を採用しました。セキュリティは完璧に近いですが、受信者に対して煩わしい作業を強いることになります。

受信者の負担が和らぐ方法が考えられますがセキュリティが極端に低くなりそうです。次回までにもっと効果的な方式が見つかればうれしい限りです。

値上げの季節

新年度を迎えて

新年度がスタートしました。世界情勢が緊迫して物価がじりじり上がっています。新しい門出を憂いなく祝ってあげたいところですが少し整理してみます。

サービス低下も値上げの一種

新潟市のページから

大きな組織ではサービスを落としても自分への跳ね返りは小さいですが、そうでないものにとっては直接、自分に響いてきます。

床屋さんにいく間隔を30日から45日にしたらむさ苦しさで気が重くなります。

外食を週一回から月一回したら潤いの薄い生活になります。

細かい監視と知恵を働かす

スーパーでは値上げ品目が多過ぎてミスをおかすこともあります。買い物帰りにレシートを確認したら、いつも買っている商品がちょうど100円上がっていました。値札は値上がりなしでいつもの値段のはずでした。

翌日、再び出かけ値札を確認したらこちらにはミスがないことが分かり、領収書持参でレジに申し出ました。

係員は買った商品と同じものをレジに通したところ値札より100円高かったので店のミスであることを認め100円の返却と謝罪をしてくれました。これは商品コードで金額を登録するときに入力ミスがあったものと思われます。

少し古くなりますが、あるデパートで5000円ほどの商品が10%オフで売られていました。その商品は必要であり値引額500円は大きいと考え購入しました。

係員はいつものベテラン女性ではなく、名門あるいは銘柄大学を卒業して2~3年と思われる男性社員でレジスターの扱いには不慣れのようでした。

「包装紙で包むと100円かかります」と言われ好みの用紙を指定して包んでもらいました。1万円札で支払いしましたがどうもおつりが少ないように感じましたがそのまま帰りました。

自宅で詳細を確認したところ、値引額が10円であることがわかり100円の包装紙に対して1割引きの操作をしたものと推定し、領収書を持ってレジにかけあい正式な商取引きにしていただきました。

ミスは誰にもある

ガス料金がこの頃、高額な気がしていました。昨年の11月から2倍以上になっていてガス漏れを疑い本気になってガス代支払い明細書を確認しました。

すると電気料金の項目が見つかり、ガス会社なのに電気料金と思いましたが電気代のまとめ払いしたことに気が付き胸をなでおろしました。

まとめ払いをすると割引きになるのですが、その情報を一家で共有し一人が間違っても大事にならないようにしておくべきでした。このことはちょっと気をもんだだけで外に出ることはありませんでした。

ミスを反省する

情報を一家で共有し、重要事項は記録に残すようにしました。それにしても多くを確認せず抗議したりして最後に恥をかかずに済んだことに安堵しました。

ミスは誰にもあることです。政治家が公金を私的流用したのではと疑われ、のらりくらりと言い逃れると潔くない印象を与えます。

スーパーのできごとで今回は、当事者が潔くミスを認めたので一件落着しました。

SNSによる意趣返し

大きな組織ではお客様相談窓口の部署を設けています。そこには様々な苦情が寄せられているようです。

激烈な苦情もあり働く社員も今は大変です。抗議者が酔っぱらっている場合もあり、苦労が絶えないとぼやく人もいます。

非を認めて謝罪された場合は穏便がよさそうです。SNSを使った実名による意趣返しは返り血を浴びかねません。冷静!自制!

最後にひとこと

スーパーで100g340円などの単位価格表記は親切なのか。ブランド間、店舗間の価格比較に役立つと言われていますが、量り売りをしていない商品への表記は違和感があります。

実態価格より小さな価格になり一見、安さを強調しているのでしょうか。

入学おめでとう

お祝いの言葉に再び、動きを付けるには中央のサクラ画像をクリックしてください。
☎012-345-6789 📧cccc.xyz@1122.com 🌸 ©TacM Ver0.02