WebAuthnでパスワードレスなサイトを作る。安全なオンライン認証を導入するFIDOの基本 - エンジニアHub｜Webエンジニアのキャリアを考える！
WebAuthnでパスワードレスなサイトを作る。安全なオンライン認証を導入するFIDOの基本 FIDO（Fast IDentity Online）とは、公開鍵認証方式を応用し、オンライン経由で認証を行う仕組みです。パスワード認証の安全性は限界が指摘されるなか、Webサイトにおいても生体認証などパスワードレスな仕組みを導入する企業が増えており、このFIDOやWebAuthnに注目が集まっています。Capy株式会社で情報セキュリティに関する研究開発や分析などに携わる、松本悦宜さんの解説です。 こんにちは、松本悦宜（@ym405nm）です。 FIDO（ふぁいど）に関しては、昨年（2018年）から多くのメディアや技術ブログで取り上げられ、導入するWebサイトも増えています。 FIDO2プロジェクトにおいて話題になったWebAuthn（Web Authentication API）についても、主なW
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
青空文庫ゲートウェイ
青空文庫ゲートウェイとは? 青空文庫は、専用ソフトを使うか、WEBブラウザで見ることができます。ただ、前者はダウンロードとインストールが必要、また後者の方法は手軽な反面、長文を読むには縦スクロールがストレスになるなど、一長一短です。「青空文庫ゲートウェイ」は、手軽なWEBブラウザ方式を見やすく改良した閲覧方法です。 青空文庫ゲートウェイはbookreader.jsを使って、青空文庫を紙媒体ようにページめくりしながら読むためのサービスです。縦スクロールが無いと、視線移動が減りブラウザでも意外と(?)長文が読めます。お試しください。 サービスは無料なの? テキストファイル自体は、青空文庫のサーバから取り込みますし、プログラムもJavaScriptなのでサーバへの負荷はほとんどありません。有料化することはありませんが、プロクシサーバの負荷が高くなるようならばGoogleAdを入れるかも。 boo
マウスオーバでテーブルのセルをアクティブ状態にするjavascript『Tablecloth』 – creamu
テーブルのユーザビリティを上げたい。 そんなあなたにおすすめなのが、『Tablecloth』。マウスオーバでテーブルのセルをアクティブ状態にするjavascriptだ。 シンプルなコードを2行追加するだけで、ユーザを魅了するテーブルを作ることができる。 ↑の画像のように、マウスオーバでセルの行と列の背景色が変化する。どのセルが選択状態かがとてもわかりやすい。セルをクリックすると、背景色がより濃い色に変化する。 「Tablecloth」というネーミングもいい。ユーザビリティを上げるために使えるのではないだろうか。 マウスオーバでテーブルのセルをアクティブ状態にするjavascript、チェックして使っていきたいですね。 iPod touchを見てきました。かなりかっこいいけど、音楽を聞くのがメインだからどうしようかな。インターフェースを楽しむ分にはいいんだけど容量が少ないしなーって今日買った
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
Styling File Inputs with CSS and the DOM // ShaunInman.com
The Last Rocket An 8-bit game for iPhone, iPad and iPod touch Minted of course. In partnership with File inputs (<input type="file" />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation. Bef
jsライブラリで実装する効率的なWeb制作(Web標準の日々)
空前絶後のJavaScriptブーム!『jsライブラリ』に焦点を絞りお話しました。 音声データ、スライドデータはCSS Nite公式ブログより公開されるので少々お待ちください。 事前にデザイナーさん数人に「JavaScriptで何を聞きたい？」と聞いたところ『DOM』と『jsライブラリ』という声が多かったです。 JavaScriptブームを語る上で欠かせない2つのキーワードのようですね。 『DOM』に関しては中村享介さんや羽田野太巳さんがお話されるだろと思い、私は『jsライブラリ』をチョイス。 あまりJavaScriptの難しい話ではなく、JavaScriptを覚えなくても、これだけWebサイトをインタラクティブにできるよ、効率的なWebサイトが作成できるよ、という感じの内容です。 最後のグループディスカッションは、『どのようなライブラリがあれば、あなたの仕事は効率的になりますか？』とのテ
MOONGIFT: 必見！Webデザインのお供に「XRAY」:オープンソースを毎日紹介
Webサイトをデザインをしていて、どうにもサイズがずれる事があるかも知れない。そうした時、いちいちソースを表示してCSSのクラスを確認して、CSSファイルと照らし合わせていないだろうか。非常に手間ひまのかかる作業だ。 表示されているそのものを確認できれば便利だ。そしてそれを実現するソフトウェアがこれだ。 今回紹介するフリーウェアはXRAY、CSSレイアウトの情報をフローティング表示するソフトウェアだ。現在ライセンスは明記されていないが、将来的にはオープンソース化される予定との事だ。JavaScriptなので、ソースは現状でも見ることが可能だ。 XRAYはBookmarkletとして導入するソフトウェアで、公式サイトのブックマークをツールバーに登録すればインストール完了だ。後は任意のサイトでBookmarkletを実行すればいい。 Bookmarkletを実行すると、ブラウザ上にフローティン
第5回 次の狙いはWebアプリ
セキュリティが強化されたWindows Vistaの登場により，ボット問題は沈静化に向かうだろう。その一方で，JavaScriptを使ったWebブラウザへの攻撃が急増している。「業務のすべてをWebブラウザで提供する」という流れの中で，大きな脅威になりそうだ。 JavaScript攻撃の狙いはボットと同じ 攻撃者がJavaScriptで狙うのはボット同様，金銭にかかわる情報である。最も価値があるのは，クレジットカード番号と，銀行サイトへのアクセス権をもたらすIDとパスワードである。これらの機密情報を盗むために，Webメールや社員向けWebサーバーがターゲットとなる。 情報を盗むために使われる典型的な手法として，クッキーの横取りがある。その手法とは，Webブラウザに「横取り用のJavaScript」を送り込むというもの。具体的には，（1）クッキーを読み出す，（2）このクッキーを攻撃者の管理下
小粋なインターフェースを実現する25のコード （パート3） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。 全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)
キーコードイベントを一括で調べられるWEBツール:phpspot開発日誌
Keyboard Events and Codes This form cancels all keyUp events. キーコードイベントを一括で調べられるWEBツール。 入力ボックスにキーボードを入力していくことで押したキーのコードがそのまま表示されます。 keydown, keypress, keyup それぞれのコードが取れたり、Shift, Ctrl, Alt キーにも対応しているようです。 JavaScript でのキーコード調査なんかに便利ですね。 関連エントリ クロスブラウザでのJavaScriptキーボードイベントの扱い方
JavaScriptでIEかどうかをたったの1行で判別する方法:phpspot開発日誌
Dean Edwards: Sniff! My current frog exaggerator of choice JavaScriptでIEかどうかをたったの1行で判別する方法。 なんと、次の1行だけで、isMSIE 変数に、IEで見れば true 、そうでなければ false を代入することが出来ます。 var isMSIE = /*@cc_on!@*/false; 次のサンプルコードで確認しました。 <html> <script language="javascript"> var isMSIE = /*@cc_on!@*/false; if (isMSIE) { alert('IE!'); } else { alert('not IE!'); } </script> <body> </body> </html> IEであれば IE! を alert し、そうでなければ not I
ITmedia エンタープライズ：大量の「はまちちゃん」を生み出したCSRFの脆弱性とは？
「mixi」上で、あるURLをクリックすると「ぼくはまちちゃん！」という日記が勝手にアップされてしまうという現象が多発した。その原因はCSRFの脆弱性だ。 4月19日以降、ソーシャル・ネットワーキングサイトの「mixi」で、URLをクリックすると勝手に「ぼくはまちちゃん！」というタイトルで日記がアップされてしまうという現象が多発した。 サービスを提供しているイー・マーキュリーでは、この現象について一応の対処は取った模様だ。ただ、技術的な詳細については「ハッキングでもなく、サーバ攻撃やウイルスでもない。ID盗難などの被害は発生していない」という回答のみで、「それ以上はコメントできない」と述べるにとどまっている。 だがある意味、このコメントは正しい。「はまちちゃん」現象は、ウイルスなどの仕業ではないからだ。 正規ユーザーの操作で「意図しない」結果に URLをクリックすると勝手に日記が書き込まれ
Javascriptの文法チェックや圧縮などが行えるWEBツール「Javascript Developer Tools」:phpspot開発日誌
Javascript Developer Tools Javascriptの文法チェックや圧縮などが行えるWEBツール「Javascript Developer Tools」。 左上のタブのＬｉｎｔ にて文法チェックが行えます。Minify、De-Minifyによって改行などの削除によってスクリプトサイズ削減、そして、その反対が出来るようです。 ブラウザ上で行える簡易開発ツールとして活用できそうですね。
Live DOM Viewer
Markup to test (permalink, save, upload, download, hide): <!DOCTYPE html> ... DOM view (hide, refresh): Rendered view: (hide): innerHTML view: (show, refresh): <!DOCTYPE HTML><html></html> Log: (hide): Script not loaded. This script puts a function w(s) into the global scope of the test page, where s is a string or object to output to the log. Some files are available for testing purposes, notably
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create a new fiddle - JSFiddle
ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting
lllcolor.com
入力テキストその場で確認！ライブコメントプレビュー