マルチライナー記法とは？ マルチライナー記法とは、その名の通りシェル芸をワンライナーではなくマルチライナー（複数行）で書くことです。長すぎる行をワンライナーで書くと以下のように横スクロールが必要になって非常に読みにくくなります。（コードは Convert long single line command to a bash shell script より借用。長いコードとして利用しているだけで中身に意味はありません）。マルチライナー記法はこのようなワンライナーを読みやすく書くことです。 nice --20 iperf3 -c somelocation.com -f k | while IFS= read -r line; do echo "$(date) $line"; done | tee onespeed.txt | tee -a speeds.txt; sleep 30 ;cat o

ゴールデンウィークのはじめ（4月29日）に投稿された以下のツイートですが、5月7日20時において、1,938.8万件の表示ということで、非常に注目されていることが分かります。 我が名はアシタカ！スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた。どうすればよい！ pic.twitter.com/e26L1Bj32Z — スタバでMacを開くエンジニア (@MacopeninSUTABA) April 29, 2023 これに対して、私は以下のようにツイートしましたが、 これ入社試験の問題にしようかな。『スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた』と言う事象に至る現実的にありえる脅威を説明せよ。結構難しいと思いますよ。 https://t.co/LH21zphCTV — 徳丸 浩 (@ockeghem) April

こんにちは。ミーティングテクノロジーという会社で会議ツールを開発している伊勢川です。 仕事で位置情報サービスを軽く調べる機会があって、せっかくなので調べた内容を記事にしたいと思います。 位置情報（地図）サービスといえば、Google Mapを思い浮かべる人も多いのではないでしょうか。私もGoogle Mapのヘビーユーザー＆ファンで、カーナビの代わりとして使ったり、街で見つけた史跡の写真等を2000件以上投稿したりしています。 B2Cのサービスの中ではGoogle Mapが圧倒的な存在感を放っていますが、B2B向けのサービスとなると様相が異なるようです。今回は、ある調査でB2B向けサービスの中ではGoogle Mapより高い評価がついていた「HERE」というサービスについて書きます。 Google Mapよりすごいと言われる所以はなにか Omdiaのレポートによると、B2B市場の位置情報サ

Dockerfileのベストプラクティス ベースイメージには公式のレポジトリを使用する FROM命令において、使用するベースイメージは公式のリポジトリのものを使用し、軽量なものが推奨されている。 例えば、Debian イメージなど。 FROM [--platform=<プラットフォーム>] <イメージ名> [AS <名前>] FROM [--platform=<プラットフォーム>] <イメージ名>[:<タグ>] [AS <名前>] FROM [--platform=<プラットフォーム>] <イメージ名>[@<ダイジェスト>] [AS <名前>]

概要 自宅サーバのセキュリティチェックをして見た。 脆弱性診断ツール nikto niktoは、Web アプリケーションセキュリティスキャナー。 $ sudo apt install nikto -y $ nikto -h localhost - Nikto v2.1.5 --------------------------------------------------------------------------- + Target IP: 127.0.0.1 + Target Hostname: localhost + Target Port: 80 + Start Time: 2019-08-23 22:26:00 (GMT9) ---------------------------------------------------------------------------

IE終了により、webpackやbabelを使う必要がなくなるのか、フロントエンドからビルドステップを完全に消し去ることはできるのか。 そもそもなぜフロントエンドを「ビルド」していたのか そもそもなぜwebpackやbabelを使ってJavaScriptをバンドル（1ファイルにまとめる）していたのか 1. HTTP/1.1とモジュールシステムの相性の悪さ ブラウザにはES Moduleというモジュールシステムが導入されています。これはimport文で他のファイルを読み込むことができるシステムです。 HTTP/1.1については、ブラウザ側で同時接続数制限があります。これは、ファイルを多数読み込む必要があるES Modulesには不向きでした。 2. ブラウザのES Module対応率の低さ ES ModulesはIE非対応です。開発するWebサイトがIEをターゲットにしたい場合、ES Mod

この記事では、Webフロントエンド開発において役に立つと思われるサービスやツールをまとめます。 全般 Can I use 指定した特定の機能が、どのブラウザのどのバージョンで利用可能かを確認するためサービスです。新しいJavaScriptのAPIやCSS3の機能を使ってモダンなWeb開発を行う場合、必須とも言えるくらい利用することになります。 指定した国におけるブラウザのシェア情報をもとにして、特定の機能が何割のユーザーで使用可能かを調べることもできます。 npm / webpack BUNDLE PHOBIA 指定したnpmパッケージのサイズを調べるサービスです。近年のWebではページの表示速度が非常に重要視されており、Webサービスにバンドルするパッケージのサイズも極力小さくすることが求められています。パッケージのサイズを調べる方法は多々ありますが、このツールの場合はパッケージ自体のイ

こんにちは。この記事は筆者が開発した「better-typescript-lib」を宣伝する記事です。これは、導入するだけでTypeScriptプログラムがより型安全になるという素晴らしいライブラリです。あくまで型定義なので、導入してもランタイムの挙動は何も変わらず、バンドルサイズなどへの影響もありません。 better-typescript-libの導入法 ここに記載されているのはv1 (TypeScript 4.0 〜 4.4向け）のインストール方法です。v2 （TypeScript 4.5〜）ではインストール方法が変わり、最初のnpm installのみで良くなります。詳しくは次の記事をご覧ください。

こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良い製品を作るのに役にたつかもしれない。 たぶんね。 だから、いくつかの興味深い方向を示すことで、この名誉あるクエストを君が簡単に達成できるように少し時間をもらいたい。 すべてのコンセプトについて1から10まで説明するのではなく、そのコンセプトとそれがどのように有用であるか紹介しよう。最後にはさらなるリソー

はじめに X.509 証明書について解説します。(English version is here → "Illustrated X.509 Certificate") ※ この記事は 2020 年 7 月 1 日にオンラインで開催された Authlete 社主催の『OAuth/OIDC 勉強会【クライアント認証編】』の一部を文書化したものです。勉強会の動画は公開しており、X.509 証明書については『#4 X.509 証明書（１）』と『#5 X.509 証明書（２）』で解説しているので、動画解説のほうがお好みであればそちらをご参照ください。 1. デジタル署名（前提知識） この記事を読んでいただくにあたり、デジタル署名に関する知識が必要となります。つまり、「秘密鍵を用いて生成された署名を公開鍵で検証することにより」、「対象データが改竄されていないこと」や「秘密鍵の保持者が確かに署名したこと

はじめに エンジニアにとって、仕様書などの技術的な文章を書くこと（テクニカルライティングとも言います）は避けて通れません。ただ20年来多くのエンジニアの方々と同僚として接してきて思うことは、エンジニアの方の中には「文章を書く」ということに苦手意識がある方が一定数いるということです。 でもこの「テクニカルライティング」のスキルは、才能というよりは一種の「技能」だと思うんです。ある一定の原理原則を理解して実践を繰り返すことで、必ず一定レベルで習得できるものだと著者は信じています。 もしこのテクニカルライティングの原理原則をまだ体系的に学習したことがない、または過去学習したが改めて再学習したいという方に、お勧めのコンテンツを見つけたのでご紹介します。 https://developers.google.com/tech-writing Every engineer is also a write

SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜JavaScriptRailsJWT認証React SPAのログイン周りについて、「これがベストプラクティスだ！」という情報があまり見当たらないので、様々な可能性を模索してみました。 いろいろな状況が想定され、今回記載する内容に考慮の漏れや不備などがありましたら是非コメントでご指摘いただきたいです！特に「おすすめ度：○」と記載しているものに対しての批判をどしどしお待ちしております！ この記事でおすすめしているものであっても、ご自身の責任で十分な検討・検証の上で選択されてください。 前提 想定しているAPIは、 ログイン外のAPIにはPOST/PUT/DELETEのものがなく、GETのみ GETのAPIにはDBを更新するなどの操作がない とし、そのためログイン外では

はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト…　といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし

となります。 この $C_i$ を、$0\leq i\leq 2N$ を満たすすべての $i$ について求めるのが今回の目標です。 それぞれ愚直に求めると、$f,g$ の全項を組み合わせて参照することになるので、 $O(N^2)$ です。これをどうにかして高速化します。 多項式補間 愚直な乗算は難しそうなので、$C_i$ の値を、多項式補間を用いて算出することを考えます。 多項式補間とは、多項式の変数に実際にいくつかの値を代入し、多項式を計算した値から、多項式の係数を決定する手法です。 たとえば、$f(x)=ax+b$ という $1$ 次関数があるとします。 $a$ と $b$ の値は分かりませんが、$f(3)=5,f(7)=-3$ がわかっているものとします。 実際に $3,7$ を代入してみると、 $3a+b=5$ $7a+b=-3$ と、連立方程式が立ち、$a,b$ の値が求められま

この記事は npm へ公開可能なパッケージを TypeScript で作成しながら、JS/TS 開発で良く使われるツールを紹介する記事です。 typescript-npm-starter という名前の Hello, world! パッケージを公開するという体で話を進めます。

はじめに 近頃の翻訳技術の発達は目覚ましいですが、いまだに、「英語ができなくても何も問題はない」というところまでは程遠いのではないでしょうか。特にエンジニアであれば、なおさらだと思います。 英語で情報収集ができれば、英語力の向上と情報収集が同時にできて、一石二鳥ですよね。英語圏の情報は一次情報であったり、情報の速度が早かったりもするので、「情報の価値」、という点においてもかなり優秀です。 というわけで今回は、英語学習はもちろん、情報収集にも死ぬほど役立つ英語圏のサイトを紹介します。すべてのサイトがプログラミング関連で、しかも面白いサイトばかりなので、ハマるとヤバいです。 【10選】ハマると時間が一瞬で過ぎるプログラミング系の英語圏のサイトまとめ ネタ系 Reddit 日本で言うところの、2チャンネルとツイッターの中間のようなサイトです。プログラミング関連だけじゃなくて、各種テーマの話題のス

今年はmacOSのアップデートによりヒラギノが動かなくなったり、 来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、 エンドユーザーの環境を考えなければならない節目の時です。 そこでいつもコピペで済ましているfont-familyについて1から考え直してみます。 全部読もうとしている人はスクロールバーを見てから考えてください。 結果 コピペユーザーのために先に結果を記載します。 ブログ等に転載する場合はこのページのURLぐらい貼ってください。 @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Original Yu Gothic"; src: local("Y

みなさま、こんにちは。 プラコレアドベントカレンダー2019も折り返して、8日目。 冒険法人プラコレのデザイナーzukaです。 （投稿が遅れてしまいました。本当に申し訳ございません。） なんだかんだとデザイナー歴３年目。 少しずつ社内で力になれることも増えて、毎日充実しております。 令和初のクリスマスも間近に迫り、 女性率の高いプラコレ社内は一層明るい会話も飛び交っておりますが、 先週、信じられない発言が私の耳をつんざきます。 “もう、自分でつくれちゃうから” えぇ…………。 私たちはDressy（ドレシー）というブライダル系メディアを運営しており、 多くの花嫁さまのハートをきゅんとつかむようなコンテンツを 365日毎日発信し、業界へ新しい価値を提供しております。 なかでもデザイナーの役割といえば、 良質なグラフィックを作り出し、企画を盛り上げること。 かつての広告バナー100000000

本投稿は私の主観によって書かれています。コメントは大歓迎です。もし長くなるようでしたら別途記事に投稿し、リンクを張っていただけると嬉しいです。 概要 GoFのデザインパターンは適当すぎるから、いい加減、修正されるべき。 参考までに各パターンに対するコメントを書く。 GoFのデザインパターン GoFのデザインパターンは適当であり、教科書通りに学ぶべきものではないように思う。 以下がGoFのデザインパターンの良くない原因だろう。 本が出版されたのは1994年であり、Java(1995)が出てくるよりも前だった オブジェクト指向が未成熟な時代にカタログ化された 現代のプログラミングと合致しないものが多い 「オブジェクト指向における～」と断っている以上、OOPに絡める必要があった パターンのいくつかに「多態性を用いると便利」という蛇足がついている 挙げたパターンに根拠がない 「とりあえず、23個ほ

emacsキーバインドに慣れ親しんだせいで長らくVim幼稚園のままだった私が来ましたよ。キーバインドを一度に覚えようとすると挫折しやすいので、以下のように少しずつボキャブラリーを増やすのがたぶん吉。 特記しない限りノーマルモードが前提。後、.vimrcでの設定については最小限にしか触れない (emacsでつい設定ファイルをいじってしまいがちだった反省から) ので各自好きにしてください。 Level 1 最小限の使い方だけ覚えて、ぶっつけでサーバーの設定ファイルを更新したりしていた。10年以上この状態。 iでその場でインサートモード aで直後の文字にインサートモード :wqで保存終了 :q!で保存せずに終了 移動はひたすらカーソルキー xでカーソル下の文字を削除 困ったらEscキーを連打 上はもともと、vimの先祖でずっと機能の少ないviの操作なのだけど、viならほぼどんなたいていのUnix