フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
kbpgp·サーバ/Webブラウザ両方で使えるPGP暗号化 MOONGIFT
最近、Webサービスのセキュリティが問題視されるケースが増えています。大量のデータがある分、一度セキュリティインシデントが起こると大きな被害に繋がる可能性があります。それを防ぐには運営者からも読み取れないデータの保存が一番です。 そこで使えそうなのがkbpgp、JavaScriptによるPGPライブラリです。クライアントサイド、サーバサイドの両方で使えるライブラリになります。 kbpgpの使い方 Web上でのデモ。鍵ペアを生成できます。 使い方としては生成された秘密鍵を読み込みます。 alice_pgp_key = "-----BEGIN PGP PRIVATE ... etc." alice_passphrase = "rat:beast::np:complete" kbpgp.KeyManager.import_from_armored_pgp { armored: alice_pgp
JavaScript - Markdownパーサーのshowdown.js、markdown-js、markedを簡単比較 - ぼっち勉強会
主に比較したいこと 使い方 変換結果の見た目の印象 table記法を解釈できるか コードブロックの解釈 動作確認の前提 MarkdownはQuick Markdown Exampleから一部引用しています 使用したテキストはGistに置いておきます CSSはTwitter Bootstrapを使っています クライアントで使う場合を想定しています(=node.jsでの使用例ではない) HTMLはどれも次のコードを基本としています <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link href="bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div id="content">hoge</div> </di
Fingerprintjs - Cookie不要でブラウザを特定する技術を体感
ブラウザを特定するためにCookieを使うのが一般的です。しかしプライバシーの問題があり、個人のブラウザ遷移を記録することないようDo Not Track機能が追加されたりと徐々に厳しくなってきています。 そんな中、新たに注目を集めているのがJavaScriptだけでブラウザを特定する技術になります。今回はそれを体感するFingerprintjsを紹介します。 Fingerprintjsの使い方 この数字は同じブラウザである限り、常に同じものが出ます。実に94%の精度でブラウザを特定できるとのことです。ブラウザの言語やユーザエージェント、セッションストレージの有無などに加えて、Canvasを使った画像生成による違いも使っています。 この数字はブラウザをシークレットモードにしても変わらないようで、非常に怖い技術と言えます。広告のトラッキングなど悪用されると相当な精度で個人のブラウザ遷移が追わ
Odyssey.js·地図とテキストをミックスした格好いいコンテンツ MOONGIFT
地図を使ったコンテンツを作るのは楽しいですが、いざ作るとなると意外と難しいのではないでしょうか。Googleマップにマーカーを載せても、それをタップしないと内容が分からなかったりします。 そこで紹介したいのがOdyssey.jsです。地図とコンテンツをミックスした面白いプレゼンテーションを作成できます。 Odyssey.jsの使い方 こちらはエディタになります。地図と、右側に編集できるコンテンツがあります。 Odyssey.jsのコンテンツはMarkdownフォーマットで記述します。ただしcenterやzoomなど特別な気泡も幾つかあります。 左側のカルーセルを移動するとマップもその場所に移動します。 こちらは縦スクロール型。上にある地図は固定で、スクロールすると地図も移動する仕組みです。 こちらはヒートマップ風に線が描かれるデモです。時間軸によって動くのが面白いです。 刻々とアニメーショ
Notify.js·HTML5のデスクトップ通知を手軽に実装できるJavaScriptライブラリ MOONGIFT
HTML5の新しい機能の一つにデスクトップ通知があります。ブラウザ上だけでなく、デスクトップに通知が出せるのでメッセージやチャット、お知らせを配信するのにぴったりです。とは言え実装方法が面倒そうで手を出していないという人も多いでしょう。 そこで使ってみたいのがNotify.jsです。各ブラウザのデスクトップ通知をラッピングし、手軽に扱えるようにしたライブラリです。 Notify.jsの使い方 Notify.jsを使っている場合、以下のようなコードを書きます。 var myNotification = new Notify('Yo dawg!', { body: 'This is an awesome notification', notifyShow: onNotifyShow }); function onNotifyShow() { console.log('notification
魔導師になって兵士を操作してJavascriptを覚えよう！っていうCodeCombatが面白い | バンクーバーのうぇぶ屋
僕は色々勉強しなきゃ行けないのは分かってるんだけど、勉強しなきゃなーとか言いながらズルズルとしてしまう人で、気づけばゲームばっかしてるような人間なんです。 もはや、WEB屋兼ゾンビキラーとか名乗った方がいいんじゃないかとこのまえ友人に冗談半分で言われましたが、そのくらいゲームは結構好きなんですね。（先月はCOD2のOriginsやりこんで、今はGTAVやってます…） そんな、学ぶの面倒だけどゲームは好きって人に、もしかしたらオススメできるかもしれない、CodeCombatというJavascriptを学ぶサイトを今日はご紹介させて頂ければと思います！ 内容は至って簡単で、ゲームをすすめる為にはJavascriptでコードを書かなきゃならないって感じの物。それっぽいのはいくつかありましたが、ちょっととりあえずやってみましょう。 とりあえず、PLAY！ どうやら僕はウィザードとしてプレイするよう
AngularJSの素晴らしさを整理してみる - pochi's weblog
久々のブログになります。 3年ほどJavaScriptを利用した開発をしてきましたが、最初はなぜJavaScriptでMVCフレームワークが必要なのかいまいちわからず、いろいろ試行錯誤してきました。 今日はタイトルの通りAngularJSが素敵だなということを書きたいのですが、よくあるベストプラクティスみたいなものではなく、自身がどのように思考回路を経由してここに行き着いたのかという経験談を記しておきたいと思います。 ちなみに私のJavaScript力は高くありませんのであしからず・・・。 jQuery 昔々、JavaScript MV(V)Cみたいなものがなかった時代、JavaScriptでリッチなものを作ろうとなるとjQueryやDojoのような低レイヤーのフレームワークが主に利用されていました。 その当時簡単なシングルページアプリケーションを作っていましたが私はjQueryを採用しま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
