2020年7月

ネタ

お問い合わせフォームにある仕掛けをしたら、営業メールが劇的に減った件

地道に送ってくる営業メール 当社でも営業メールを頻繁に、多いときは同じ方から週1回営業メールをいただくことがあります。 こちらも既読スルーなのですが、本当にお疲れ様ですという感じで。。 ただ、何度も何度もメール送られても忙しいときはイライラしてしまうこともあります。 営業さんに「二度とメール送ってくるな」とも言えませんし。 スパムフィルターも不要の超平和的な解決方法 スパムフィルターを使って毎回ブラックリストを作るのもなんだか。。 そこで当社のエンジニアが超平和的な解決方法を発見しました。 それはこう↓↓↓↓↓↓↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ おかえりなさいと、むしろ歓迎しているのですが、 これがぱったりと、2回目以降の営業メールが来なくなりました。 送るのはもちろん自由 エラーメッセージっぽいですが、このまま送信できますよ。 送る方の人柄が試されるみたいでワクワクしますね!

CSS

【コピペでCSS】Webサイトでもスペースキーを使わずにタイトルを揃える方法

こんな本が今話題? 「スペースキーで見た目を整えるのはやめなさい」という目を引く見出しの書籍が今、売れているのをご存知でしょうか? いわゆるワードで、このように見出しや本文を「スペースキー」でそろえる方法ですが、 今日はWebサイトで見出しをそろえるには?ということを考えてみたいと思います。 最終動作デモページはこちら 中央寄せの場合、落ち着かない 見出しは「text-align: center;」で「中央寄せ」することがあるかと思います。 上の例のような、左に見出しのある表の場合は、中央寄せをすると 各項目のスタート位置と終了位置がそろいません。 ▼「text-align: center;」で見出しを中央寄せした場合 これはこれで「日時」と「会場」の左右が空いて落ち着かない感じがあります。 ここはやはり均等割り付け CSSで均等割り付けを表現するにはどうしたらよいでしょう? text-alignプロパティには、均等割り付けの値「justify」があります。 下図のように、要素の大きさの左右を埋めるようにテキストが配置されるのですが、 問題はこのjustifyに対応できるブラウザが現時点で少ないことです。 ※2020年7月時点で対応可能なブラウザは、FireFox程度でした。 https://developer.mozilla.orgより引用 ただ、これを利用して、うまく均等割り付けできるCSSに改良したいと思います。 まずはHTML 今回はdl, dt, ddタグを使って書いていきます。 ※divでもtableでもどうぞ。 ▼HTML

CSSは疑似要素 :after を活用

dlはdisplay: flex;で横並びにします。 見出しのdt部分にはtext-align:justify;を設定、そしてafterを設定します。 IE対応を忘れずに dtには「text-justify: inter-ideograph;」という値も設定しています。 justityがIEは日本語が効かないので、IE独自の値も設定してあげるとIEユーザーでもOKです。 最終動作デモページはこちら

HTML

RE:【ネタバレあり】おうちdeサイゼ!Javascriptで間違い探し (15分!ライブラリ不要!)

久しぶりシステム担当の記事です… 最近、社内でPhotoshopを使ってサイゼリヤの間違い探しを解いたのですが、 前回の話「【ネタバレあり】おうちdeサイゼ!大人の間違い探しの答え」に続き、15分くらいあれば簡単なJavascriptを使って、探せるじゃないかとチャレンジしてみました。 しかもライブラリを使わず、簡単なJavaScriptのみのプログラムで実装したいと思います! まずは、Photoshopで探すのと同じ要領で、違う画像を2つのLayer分けて重ね、差分を見つけます。 [待ちきれない方はこちらです] 早速紹介します。 今回はhtml canvasを使います。 1. html canvasを初期化する

2. 画像を読み込みと表示

ここまでは一般的な画像表示方法ですが、画像データを繰り返し使いたい場合、 pass by referenceが必要になるので、変数をobjectに変えます。 ※ポイントは画像のwidth、heightとデータ(grey)を覚えるobjectに変えます。 ※特にgreyはカラーデータをモノクロデータに変換した後に使います。

3. 色をモノクロに

4. 2つ画像を比べる関数を作る

5. 結果を表示する

6. 結果を良くするためには調整が必要です。 携帯で撮った写真なので、少しpixelがずれてます、それをソースで改善してみました。 違うモニターにも見やすくために白黒を調整しました。

15分で作って見ましたが、調整いろいろ含めて30分に掛かりました。 最終結果はこちらになります、悪くはないでしょうね。 [実際サンプルはこちらです] 最終ソースコードはこちらです。

ネタ

【ネタバレあり】おうちdeサイゼ!大人の間違い探しの答え

おうちでサイゼリヤの超難問!大人の間違い探し サイゼリヤでテイクアウトを待っていると、間違い探しで時間を潰せるのはご存知でしょうか? 白黒印刷の間違い探しは通常版よりムズい!? 通常版は間違いが10個なのに対し、テイクアウト版は間違いが5個。 どうしても答えが分からない方、次へGO! 答え合わせ 窓の外の動物のマスクの大きさ 水槽の魚の位置 男の子の舌が反転していない 男の子の袖の長さ 辛味チキンの位置 サイゼリヤのテイクアウトは10円引き! 先日サイゼリヤがほぼ全商品1円値上げしたのに対し、テイクアウトはなんと10円引き! ミラノ風ドリアならテイクアウト価格290円(しかも税込み!) 番外編 おうちdeサイゼの間違い探しをJSでやってみました。 RE:【ネタバレあり】おうちdeサイゼ!Javascriptで間違い探し (15分!ライブラリ不要!)の記事はこちら