悪気のないおじさんたち｜帆立の詫び状｜新川帆立先月から二カ月弱の間、日本にいる。新刊プロモーションのための一時帰国だ。大阪、福岡、宮崎と移動しながら書店さんに挨拶をし、サイン会2件、講演会2件、取材十数件をこなし、なんとかひと段落ついた。その間も原稿の〆切は止まらない。日中は動き回り、夜はホテルで執筆、寝落ちという日々が続いた。
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
チルドレン・オブ・ボドムのアレキシ・ライホが死去 - amass
【Update：2021/03/05 16:39】 アレキシ・ライホの公式な死因が明らかに。元シナジー (Sinergy) のバンドメイトで、彼が亡くなった時にまだ法的に結婚していたキンバリー・ゴスによると、アレキシ・ライホは「アルコールによる肝臓と膵臓の結合組織の変性」が原因で亡くなったという。さらに、ライホの体内には鎮痛剤、オピオイド、不眠症の薬が入っていたという。 ・・・・・・・・・・・・ 【オリジナル掲載：2021/01/04 19:46】 フィンランド出身のメロディックデスメタル・バンド、チルドレン・オブ・ボドム（Children Of Bodom）での活躍で知られるギタリスト／ヴォーカリストのアレキシ・ライホ（Alexi Laiho）が死去。彼のSNSで発表。声明によると「先週、フィンランドのヘルシンキにある自宅で亡くなりました。ライホは晩年、長期にわたる健康問題に苦しんでいま
ウェブフロントエンドの設計力を高めるためにアプリケーションの構造を捉えてみる話 - Chatwork Creator's Note
こんにちはー。 フロントエンド開発部の火村(ひむら/id:eiel)です。前回までは id:cw-himura で記事を書いていましたが、個人アカウントに切り替わりました。 よろしくおねがいします。 以前はサーバーサイド開発部に所属していましたが、2019年6月ぐらいからフロントエンドチームにヘルプとして無期限レンタル移籍中です。 主な担当している業務は「難しいバグ対応」と「これからChatworkのウェブフロントエンドをどうするかを考える」です。 昨日は期待の新人であるレオくんの入社して3ヶ月の熱烈な想いでした。アツいです。 さて、今回のお題は「レガシーフロントエンド脱却への挑戦」と雑に上から投げられたのですが、未来のことを考える作業をしているので書きやすいネタがありません。 あってもオチがつきません。 ということで、設計に役立つかもしれない話をラフに書くことにしました。 アプリケーショ
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
美学は何の役に立つのか？
以下の原稿は、もともと2019年10月12-13日、東京の成城大学における第70回美学会全国大会のために用意した講演原稿ですが、台風19号のために中止となったため、2020年1月12日に同じく成城大学において発表させていただいたものです。その後、雑誌『美学』に掲載するという話もあったのですが、字数制限などがあり残念ながら実現しませんでした。美学会の将来ということを意識した内容なので、このまま一般の雑誌原稿としても発表しにくいため、ここで共有したいと考えました。 〈１〉「歴史の終焉」が意味するもの 2010年、中国の北京大学において、第18回国際美学会議が開催されました。その時の大会テーマは「美学の多様性（Diversities of Aesthetics）」というものでした。企画者のひとりであった佐々木健一氏はそこで「美学の哲学的役割（Philosophical Role of Aesth
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
提案書の書き方、徹底解説～提案書のストーリー・コピー・デザインの基本法則【スライド付】 | knowledge / baigie
PowerPoint歴23年、デザイナー歴20年、経営者として10年以上に渡って自社のマーケティングやセールスに深く関わり、提案書を作ったコンペでの勝率91%を誇る私の知見を余すことなく注ぎ込んだ、『最強の提案書を作る方法～伝わるストーリー・コピー・デザインの法則』というスライドを公開しました。 便宜上「提案書」としていますが、企画書、営業資料、ホワイトペーパー、社内文書など、人を動かすために作られるすべてのビジネス文書に応用できるはずです。 提案書のストーリー、コピー、デザインに関する、実践的かつ具体的なノウハウを詰め込んでいます。デザインについては、プロのデザイナーではなく一般のビジネスパーソンを対象とし、仕事の中で本当に必要な知識だけをまとめています。 約170ページある本スライドは、私が企業向けにこれまで20回以上行ってきた有料講座の配布資料を元に、公開用に仕上げたものです。スライ
GoogleマップAPIをStyling Wizardでお洒落にカスタマイズする方法 | Cloud 9 Works
デフォルトのGoogleマップだと、ウェブサイト全体の色とのバランスが悪く、浮いてしまう場合が多々ありますが、GoogleマップAPIなら色や項目を変更してお洒落にカスタマイズすることができます。 今回は、Googleマップの見た目を簡単にカスタマイズできるStyling Wizardの使い方と表示方法を解説します。 GoogleマップStyling Wizardの使用方法まずは、GoogleマップStyling Wizardへアクセスし、『CREAT A STYLE』をクリックします。 表示させたい住所と拡大率を調整右上に表示させたい住所を入力し、右下の±のボタンで拡大率を調整します。 Adjust density of features地図内の表示項目の密度を調整します。 Roads … 道路の密度Landmarks … ランドマークとなる店舗や建物のアイコン表示の密度Labels …
チームで成果を出すためには心理的安全性が必要で、そのためには礼節とHRTが不可欠だ、という話をしました | DevelopersIO
事業開発部の塩谷 (@kwappa) です。 クラスメソッドの関連会社であるアノテーション株式会社の研修として依頼を受け、チームと心理的安全性、それに礼節というテーマで話をしてきました。 スライド 概要 ここしばらく重点的に書いたり喋ったりしている、心理的安全性とその土台となる礼節がテーマです。昨年のDevelopers.IO Tokyo 2019でのセッション『3つの「Re」〜ソフトウェアの信頼性を高めるためにぼくたちができること〜』 をベースに、発表時間が少し長くなったので各要素の解説を丁寧にしつつ、全体の流れを整理しています。 また、エンジニアに特化した部分をはがすことも意識しています。チームで仕事をするのはエンジニアに限ったことではないですし、昨年末からOpsチームのスクラムマスターをやっていることも影響しています。ともすると「仕事 = コードを書く」という意識に傾きがちな自分への
コード共有サイトCodepenで2019年に話題となったHTMLスニペット・ベスト100
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるCodepen。その中でも、2019年のあいだに特に人気の高かったコードを、ランキング形式でまとめた The Most Hearted of 2019 が発表されていたので、今回はその中でも特に印象的だった、クリエイティブな作品をいくつかピックアップしてご紹介します。 やはり話題性の高い、最先端テクニックを駆使した投稿が中心にまとめられています。HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 コード共有サイト Codepen で2019年に話題となったHTMLスニペット・ベスト100 99位 SVG Hamburger Menu Icon Animation Collection ハンバーガーメニューのさまざまなSVGアニメーションエフ
【ブラジル人の反応】今年のブラックフライデーがカオスすぎた件【BlackFridayブラジル2019】 - Brasil x Brazil
「今年のブラックフライデーがカオスすぎた件」とは？ 日本でも定着した感のあるブラックフライデー。 こちらブラジルでも、年々セールの規模が大きくなってきています。 今年のブラックフライデーは、例年より詐欺まがいのことや喧嘩が多かった気がします。 今回は、今年のブラックフライデーで起こった（私個人的に気に入ってる）喧嘩や詐欺（？）と、それに関するブラジル人の反応をまとめました。 喧嘩も詐欺もだめだけれど、カオスすぎて逆に笑えてくる。。。かもしれません！ BlackFridayブラジル2019 1）入場！ ブラジルのブラックフライデーの入場方法（笑） シャッターが壊れる大迫力です！将棋倒しのお手本のような状況ですね。 ちなみに、最初にこけて将棋倒しのきっかけをつくった、白いシャツの女性は無事です。テレビ局のインタビューをうけて、どなりながら不満をぶちまけるくらい元気でした。あれだけ踏みつけられた
CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック
CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかなラインで実装するテクニックを紹介します。 Avoiding jagged edges on gradients. by Mandy Michael 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 斜めのラインがギザギザになってしまうのを回避する方法 よく見かけるデザインの一つに、コンテナの下部に斜めのカラーブロックを配置したものがあります。下記の画像のようなデザインです。 斜めのカラーブロック このデザインがたまたま、わたし
町山智浩『ジョーカー』を語る
町山智浩さんがTBSラジオ『たまむすび』の中で『バットマン』シリーズの最悪の敵、ジョーカーの誕生を描いた映画『ジョーカー』を紹介していました。 “Phoenix’s Joker brings something that no previous version has had: Humanity.” #JokerMovie – in theaters October 4. pic.twitter.com/zHA3ctcii5 — Joker Movie (@jokermovie) September 19, 2019 （町山智浩）今日、ご紹介する映画はあのベネチア国際映画祭で最高賞、金獅子賞を受賞した大問題作、『ジョーカー』をお送りします。 （町山智浩）はい。いまの曲はクリームというエリック・クラプトンがいたバンドの『White Room』という歌なんですけども。これがこの『ジョーカー』の
火葬で良いのか？ その環境負荷と新たな選択肢
ヒンドゥー教伝統の合同火葬で燃える棺。2013年8月18日、インドネシアのバリ島にて。（PHOTOGRAPH BY PUTU SAYOGA, GETTY IMAGES） 米国では過去4年で火葬が土葬を上回り、最も人気の葬送方法になったと、全米葬儀ディレクター協会が発表した。遺骨や遺灰を生まれ変わらせる独創的な方法もさかんに宣伝されている。プレスしてレコード盤にしたり、岩礁を造るのに利用したり、あるいは圧縮してダイヤモンドにしたりするのだ。 火葬はまた、死体防腐処理（エンバーミング）と棺を使用する土葬よりも、環境に優しい選択肢として宣伝されることが多い。費用だけではなく環境への配慮が、火葬人気の一因なのかもしれない。（参考記事：「蘇生を願い、人体を冷凍保存する人々 写真16点」） 「なかには、環境への配慮が理由の一つだという人もいます」と話すのは、米ワシントン州に本部を置く、人生最後の選択を
「脂こそとんかつの本体」と思う人にとって、浅草橋「とんかつ藤芳」のバラかつ定食は心の友である - ぐるなび みんなのごはん
脂への探究心が強いことでおなじみのココロ社です。 われわれがおいしいとんかつに出会ったとき口にするフレーズの中央値はおそらく、「衣がサクサクしていて、肉は厚みがあるのに軟らかく、噛むごとに肉汁があふれてくる。脂の甘みもたまらない！」……などになるだろう。 ここで、もし、この文でいちばん大事なところに線を引きなさいという問題が出たら、あなたはどこに線を引くだろうか。わたしの場合、恥を忍んで告白すると、「脂の甘みもたまらない！」に線を引くだろうし、もしかしたら「脂の甘みが最高。ちなみに肉は柔らかくてジューシー」などと口走り、肉は脂の引きたて役であるとの認識を露わにしてしまうかもしれない。 この記事を、脂が好きだけれども「何よりも脂が好き」と素直に言えない同志に贈りたいと思う。 味も味以外も濃い街として知られる秋葉原。今回の舞台は、そこから一駅の浅草橋駅のすぐそばにある、「とんかつ藤芳 駅前店」
CMSとFrontned / cms-frontend - Speaker Deck
2018/12/08にFRONTEND CONFERENCE FUKUOKA 2018 （#fec_fukuoka）の登壇で使用した資料です。
見せない写真を撮る 長島有里枝 :日本経済新聞
ちょうど二年前にインスタグラムを始めた。普通大学の文系コースで写真を教え始めて二期目、美大生とは少し違う学生たちと向き合うにあたって、彼女/彼らがよく口にする「インスタ」というものを知っておいたほうがよさそうだと思ったのだ。震災のときはツイッターにお世話になったが、インターネットの世界のルールにはなかなか馴染（なじ）めない。見ず知らずの人に向かって呟き、それを読んだ人からコメント（という名目の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの本を書くときに参考にしてるもの
第68回紅白歌合戦「TOKYO GIRL」（2017）ノーカット版【Perfume×TECHNOLOGY】
