かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ

はじめに The Bezos Mandateという文書があります。日本語に訳すと「ベゾスのお達し」とか「ベゾスの勅令」でしょうか。 言わずと知れたAmazon.comのCEO、ジェフ・ベゾスが開発チームに通達した内容です。 これが（元Amazon.com従業員によって）公開されたのは2011年ですが、ベゾスがこのお達しを出したのは2002年前後です。17年経過した現在でも真理をついているどころかようやく時代がベゾスに追いついたかという感想です。 この記事ではThe Bezos Mandateの紹介と、僭越ながら補足説明も行います。 お達しの内容 原文は元Amazon.com従業員のGoogleエンジニア（公開当時）、Steve Yeggeによって公開されました。 Google+にStevey's Google Platforms Rantというタイトルで、Amazon.comと比べたGoo

前振り 全国の暗号を使うエンジニアの皆さんこんにちは。今日は暗号移行とRSA暗号の話をしたいと思います。まず暗号を利用している皆さんであればCRYPTRECの「電子政府推奨暗号リスト」のことはご存じですよね！（言い切るw） CRYPTRECから2022年7月（昨年夏）に暗号強度要件（アルゴリズム及び鍵長選択）に関する設定基準（PDF直リンク）が公開されました。この中では暗号のセキュリティ強度で各種暗号と鍵長が整理されています。セキュリティ強度はビットセキュリティと呼ばれるビットサイズ（共通鍵暗号の場合のビット長）で区分されます。暗号アルゴリズムが違ってもセキュリティ強度で比較ができるということですね。例えば現在一般的に良く使われているセキュリティ強度は112ビットセキュリティが多く、これにはデジタル署名であればRSA暗号の2048ビットやECDSAのP-224等が含まれます。今日は公開鍵暗

タイトルが全てです。 個々のパーツとしてはありふれた部品なのに、合体させると「存在しない漢字」になる組み合わせは一体何なのか調べてみました。 ※この記事は TSG Advent Calendar 2022 の14日目の記事です。 手法 以下の手順で「ありそうで存在しない漢字」を調べることにしました。 すでに存在する漢字を構成する部品を調査する 出現回数が多い部品どうしを組み合わせ新たな漢字を作る 構成する部品の出現頻度から、それぞれの組み合わせの「ありそう度」をスコア付けする スコアが最も高いものを「最もありそうで存在しない漢字」とする CHISE 漢字構造情報データベースは、Unicodeに収録されている全漢字を含むさまざまな漢字の部品構造をデータベース化したオープンデータです。今回はこちらのデータを利用して調査を行うことにしました。 頻出部品を調査する UnicodeのCJK統合漢字か

この記事の概要 サムネイル画像やユーザーアイコンなど、どんな画像が適用されるか分からない要素ってありますよね。 そんな要素に対して、視認性を確保するためにborderをひいてあるのによく遭遇します。 そのborderが時折ちらついて見えるのが嫌だったので、改善策を考えてみました。 完成物＆通常のborderとの比較 全体像はこちらです。 差がわかりやすそうな部分をクローズアップしました。 左の画像の草、真ん中の画像の右端にあるペンケース（？）、右の画像の机や天井など「borderの方が明るい箇所」が悪目立ちしているというか、ノイズに見えて気になります。 修正版がこちらです。 左の画像の空や右の画像の窓など、白く飛んでいる場所にだけborderが見え、それ以外の箇所は元の画像を活かしています。 CodePenはこちら。 仕組み <div class="adjusted-border"> <!

私ですね。 いるいるって言わないでもらえると嬉しいです。 そうする根拠はいくつかありますが、私はマイクロソフト系言語をメインに使うプログラマなので、マイクロソフトの公式サイトがそうなっていることが大きいです。 そんなものは機械がやるべきことで、人がやることではない。 たとえば Word なら自動的に調整してくれる。 （↑ これです） わかっています。 でも染みついてしまいました。 質問に答えます。 ――疲れませんか？ 習慣になっているのでそれほどではありません。 ――時間の無駄では？ 一連の動作になっているのでそれほどではありません。 どうかコストの浪費と咎めないでください。 ――意味あるの？ 見やすくはなると信じています。 ――本当に？ 昨晩Generative Artに関する論文をMicrosoft Wordで書きました。 よりも 昨晩 Generative Art に関する論文を M

何を言っているんだと思われるかもしれないですが、気軽にパスワードの1文字目に「~」を使わないほうがいいというお話です。 起こった問題 踏み台サーバー経由でサーバーAに接続して作業をしていた時の話です。 いわゆる多段 ssh 接続というもので、リモートワークになってからは結構使われる方も多いかと思います。 サーバーA上で root 権限になろうと sudo su - してパスワードを入力したら Connection to xxx.xxx.yyy.zzz closed. の文字とともにサーバーAから追い出されてしまいました。 なにかの間違いだろうと何度か挑戦していたのですが、結果はサーバーAから切断され踏み台サーバーに戻る羽目に。。。 そのときに入力していたパスワードが ~.xxxxxxxxxx のような ~ から始まるものでした。 調査 ~ って何か意味があったよなーと思ってどう調べようかと

# !wget https://dl.fbaipublicfiles.com/fasttext/vectors-crawl/cc.ja.300.vec.gzで落とせます model = gensim.models.KeyedVectors.load_word2vec_format('cc.ja.300.vec.gz', binary=False) repat = re.compile(r'^[あ-ん\u30A1-\u30F4\u4E00-\u9FD0]+$') vocab_list = [w for w in list(model.vocab.keys())[10000:50000] if len(w) > 2 and repat.fullmatch(w) and w[-1] != 'っ' and w not in list(ww_df.word) and w not in list(sw

Firefox / Safari MozillaはMozilla Specification Positionsというリストを公開しています。 IETFやW3C、TC39などが提唱しているWeb技術に対して、Mozillaはどのように評価しているかという立ち位置を表明したものです。 あくまで現時点での評価であり、もちろん今後の仕様変更などに伴い評価は変わる可能性があります。 Mozilla's Positions Mozillaはどのように評価しているかの分類。 under consideration 評価の検討中。 important 優れた概念であり、Mozillaにとっても重要である。 worth prototyping 優れた概念であるが、プロトタイプを作成し、フィードバックを得て磨きをかける必要がある。 non-harmful 有害ではないが、良いアプローチではなく、取り組む価値

ソケットモード（Socket Mode）とは？ Slack は、2020 年に開催された年次イベント Frontiers にて「ソケットモード」という Slack アプリの新しい通信方式を発表しました。 これまでの Slack アプリ開発では、イベント API やモーダル送信、ボタンクリック、スラッシュコマンドなどのインタラクティブな操作のハンドリングには、公開された Web エンドポイントを用意して Slack からのリクエストを受信する必要がありました。 ソケットモードは、これを WebSocket での接続に切り替えることができる機能です。昔から Slack アプリやボットに慣れ親しんでいる方であれば Hubot や RTM (Real Time Messaging) API のように接続できる方式という言い方がわかりやすいかもしれません（RTM との違いについては、こちらのコメント

こちらはLivesense アドベントカレンダー 2020 23日目の記事です。 こんにちは。転職会議事業部でエンジニアをやっている落合です。 同僚のエンジニアが素晴らしい記事を投稿しているのを横目に、本日のコンテンツは転職会議の本番サイトを一時的にダウンさせた経緯を共有・懺悔する謝罪広告となっております。 え？お前が書くべきアドベントカレンダーはここじゃない？ そういうことを言うのはやめて差し上げろ。 背景 話を始める前に、今回の惨事の舞台になるシステムについて解説したいと思います。 問題が発生したシステムは、転職会議において企業に対する口コミを掲載している企業情報ページ です。 ご存知の方も多いと思いますが、転職会議は企業に関する様々な口コミを集めて提供しているメディアです。 求職者向けの求人ページなどもあるのですが、トラフィックの大部分は各企業の年収・財務情報・面接情報などが公開され

# 以降はコメントなのでこれは valid な pnm フォーマットです。 拡張子 pgm で保存すれば、Windows の場合は IfranView、macOS の場合は Preview.app で表示できます。 これで BigQuery で画像を出力できることが確認できました。 BigQuery によるレイトレーシング というわけで、BigQueryでレイトレーシングをやってみましょう。 実際のSQLコードは以下のようになります。 -- Vec3のドット積 CREATE TEMPORARY FUNCTION DOT (a STRUCT<x FLOAT64, y FLOAT64, z FLOAT64>, b STRUCT<x FLOAT64, y FLOAT64, z FLOAT64>) AS ( a.x*b.x + a.y*b.y + a.z*b.z ) ; -- 線形結合 aP +

この記事はGo Advent Calendar 2020 16日目の代打記事です。奇しくも16日目にGo1.16の話をすることになりました。 【追記】タイトル改題しました 状況が落ち着いてだいぶ経ったのと、未だに多くの方にこの記事を見ていただけていることから、Go1.16での変更というより、今を生きる私達がどうすればいいか、という点にフォーカスしたタイトルに改題しました。本文に変更はありません。一応注記すると、go get が廃止になったわけではなく、普段の開発フローで使うことはまずなくなった、という意味です。（一通り読んでいただければお分かりいただけるかと。） 【追記】Go1.18について ついに待望のGo1.18がリリースされましたね！ https://go.dev/doc/go1.18#go-command そして予告通り go get によるインストール機能は削除されました。どうし

自己紹介 本職のエンジニアではありませんが、ちょっとICT系に詳しそうなやつって感じで、部署のサーバ管理を任されたりもしています。 背景 私の（当時所属していた）部署では、毎年、数週間かけて前年の各人の業務実績をとりまとめて一つの冊子（PDF）にするという仕事があり、この作業を少しでも自動化するため、Webサービスが内製されました。当初は単純に各ユーザが自分の業務実績一覧をテキストで用意してアップロードするというものでしたが、秘伝のタレのように毎年少しずつ改良されたり、大幅に作り直されて別システムから業務データを取り込んでからブラウザ上で編集できるようになったりしつつ、なんやかんやあって私が引き継ぎます。他にやりたい人もなく、ひとり鯖管です。OSはCentOS6でした。 このシステムでは、毎年新しいデータを編集するため、その作業開始時にデータを初期化する必要があります。この作業も自動化し、

displayTextは、Googleアシスタントなどで表示される文章。 他にもDialogflow上で処理するデータなども色々盛り込めるみたい。 詳しくは、Webhook requirementsを参考。 以下、上記JSONを返すPHPのサンプル。 <?php $arr = array( 'speech' => "どうもどうも！", 'displayText' => "平素より大変お世話になっております。" ); header("Content-Type: application/json; charset=utf-8"); echo json_encode($arr); サーバー上でこのJSONの文字列を作る処理次第で、色んな応用が効く。 これをGAEや適当なサーバーにアップして、ウェブからアクセスできるようにしておく。 Actions on Googleの操作 https://con

EDIT^7: blink と box86、FEX。 EDIT^6: Unikraft 。 EDIT^5: Tilck 。 EDIT^4: コメント。gVisor はすっかり忘れていました！Linuxを拡張するためにLinuxを実装した良い例だと思います。LINE有りましたね。。 SF.netのCVSはもう死んでしまったので除外にしました。。 OSvのバイナリ互換 はPIEであることが要求なので。。といっても世間的にはもうLinux = Debian/Ubuntu で良いですかね。。表現を調整しました。 EDIT^3: Noah忘れてた！ EDIT^2: Cygwinは 下書き段階で削ってしまった 。。 qemuを移植したとき に互換性がイマイチだったので。。特殊fdやprocfsの充実ぶりとかを考えると "かなりLinux" と言って良いとは思うけど、 mmap 等でLinuxとWind

続編を書きました。CSSも大幅改善してるので、一度見てみてください。 【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた - Qiita 完成品 まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめに はじめて、CSS カウンター の存在をはじめて知ったときは驚きました。 テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がない と思っていたからです。 Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - Qiita CSSで見出しタグに連番をつけ

この記事は おうちハック Advent Calendar 2016 の3日目の記事です。 まえがき パナソニック（旧パナソニック電工（旧旧松下電工））の製品にこんなモノがあります。 ＿人人人人人人人＿ ＞　壁からUSB！　＜ ￣Y^Y^Y^Y^Y^Y￣ カッコイイですね。 ですよね。。。 他にもこんなモノがあります。 壁のスイッチをリモコンでON/OFFできる！ 使ってみたくないですか！？ 使ってみたいですよね。。。 しかし、これらの設置工事をするには、電気工事士（二種）の資格が必要です。 資格がないなら取得すればいいじゃない。 という話をします。 電気工事士の資格とは 簡単に言うと、ブレーカーを切ってからじゃないと感電しちゃいそうな工事をする場合に必要な資格です。 前述のUSBコンセントやリモコンスイッチなどの設置工事をする際はブレーカーを切ってからでないと危ないですよね。 コンセントか

2. キャプチャ用VMインスタンスの作成 [GCPメニュー] > [Compute Engine] > [VMインスタンス]でインスタンスを作成します。 リージョン:us-central1 (アイオワ)、ゾーン:us-central1-aでインスタンスを Windows Server 2016 Datacenterで構築しています。 下の[ネットワーキング]タブでネットワーク:vpc2、サブネットワーク:subnetwork2(10.129.0.0/20)を 忘れずに指定してください。(指定しないとdefalutネットワーク行きになります) 3. インスタンスグループの作成 [GCPメニュー] > [Compute Engine] > [インスタンスグループ]でインスタンスグループを作成します。 今回はシンプルに新しい非マネージドインスタンスグループで作成しています。 VMインスタンスにc

はじめに 時はPlayStation2も　そろそろ終わり。 PS2互換機がゲームセンター等で使われていた時代の事です 私は当時　超新人だったんだけどね ただ私は 大学を3ヶ月で光速中退して すぐにフリーランスになった変な経歴持ちです そんな時　ある人物が 掲示板に メモリマネージャやDMA、３DCGについて質問をしていた ちょうどその時期　仕事が楽だったので　光速で回答しました。 メモリマネージャ作りたいっていうので、簡単な方法として、連結リストでAllocateしていくと簡単だよ DMAについては 方向のふらぐがこーであーするだけだよ ３DCGについては　DirectXを知識は入れてたので なんとなく回答 すると　やり取りから1週間で 仕事してもらえますか？ PS2の自社タイトルを作ってます。コアエンジニアが不足しています とメールアドレス宛にメッセージがきたので　請ける事に これがすべ