phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 未だに form の validation って, とりあえずなんでも受け付けてサーバー側で してエラー返ってきたらヘッダーなりダイアログなりでエラーメッセージを表示するなんてのをよく見ます. 某大手サイトなんかはエラーがあるとリロードしちゃったりするし... ユーザーさんからすると入力した段階で何かしら間違いがあったらすぐに教えて欲しいですよね. 実はこの辺って HTML5 からクライアントサイドでもある程度チェックできるように整備されています. なのでライブラリを使わなくてもある程度サーバーに送る前に
JSだけでVRできる！『WebVR』ことはじめ
今年はVR元年と呼ばれています。 実は過去にも何度かVR元年と呼ばれ、VRが来る、と言われていた年があります。 ですが、今年はいよいよそれが本格的になりそうな状況になってきました。 そこで今回は、「今からWebVRに備えよう！」ということで、WebVRとはなにか、それを利用して何ができるのか、利用シーンはどうか、といったことに焦点を当てたいと思います。 VR元年 本格的になりそうなのはなぜか。まずひとつ挙げられるのはOculus Rift（詳細は後述）に代表される、いくつかのヘッドマウントディスプレイ（以下、HMD）が比較的安価に家庭で利用できるようになったことです。 今年に発売される予定のものだけでも、Oculus Rift、HTC Vive、PlayStation VR、FOVE(開発キット版)など様々なHMDが市場に登場する予定になっています。 またこれらが注目される理由として、現在
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section3 ～Browserifyをマスターしよう～ - Qiita
はじめに この記事は「旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門」の3つ目の記事です。 シリーズの最初から読みたい方は 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ へどうぞ。 また、このシリーズではECMAScript5を概ね対応するブラウザを対象としています。 もっと平たくいうと、IE8以下は切り捨てます。ご了承ください。 そしてプロによるマサカリ 対策として一つ重要な注意書きをします。 この記事中で出てくる「CommonJSモジュール」という表現は全て「CommonJSのModules 1.0仕様をベースとして、Node.jsが独自に拡張したCommonJS派生のモジュール仕様及びインターフェース(require/exports
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section2 ～CommonJSモジュールと仲良くなろう～ - Qiita
はじめに この記事は「旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門」の2つ目の記事です。 シリーズの最初から読みたい方は 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ へどうぞ。 また、このシリーズではECMAScript5を概ね対応するブラウザを対象としています。 もっと平たくいうと、IE8以下は切り捨てます。ご了承ください。 そしてプロによるマサカリ 対策として一つ重要な注意書きをします。 この記事中で出てくる「CommonJSモジュール」という表現は全て「CommonJSのModules 1.0仕様をベースとして、Node.jsが独自に拡張したCommonJS派生のモジュール仕様及びインターフェース(require/exports
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
WebRTCを仕組みから実装までやってみる - blog::wnotes.net
このエントリはFrontrend Advent Calendar 2013 23日目の記事です。 2014/03/16追記 WebRTC-DataChannelについてもエントリ書きました。↓からどうぞ。 WebRTC-DataChannel使ってみたよ WebRTCを仕組みの理解から実装まで Advent Calendarを書くということでなんか新しいことやったほうがいいかなーって思ってたので、今回はWebRTCを調べてみました。 調べながらだったので間違っている箇所もあるかもですが、専門家の方のツッコミあれば歓迎です。 先に作ったサンプルデモを触りたい方は以下のアドレスからどうぞ。 WebRTC Video Chat Sample ※接続名は同時にアクセスしている方全員から見えますのでご注意ください！接続依頼が来た際にはダイアログが出るようにしてますが、安易に応答すると知らない人とつな
Web StorageやindexedDBを扱う上でのセキュリティ上の注意点 - 葉っぱ日記
localStorageやsessionStorage、あるいはindexedDBのようなブラウザ上でのデータの保存が可能になったことで、これらを取り扱ううえでもセキュリティ上の注意点が必要である。 これらのストレージは、localStorageやindexedDBは永続的に、sessionStorageはブラウザやタブを閉じるまでの間データが保持され続けるので、例えばWebアプリケーションがログイン機構を持っている場合にログイン中にこれらのストレージに書き込まれたデータは、ログアウト後も当然参照および書き換えが可能である。Webアプリケーション上のアカウントに紐づいたデータをこれらのストレージに書き込んでいる場合、ログアウト後もアクセス可能なことが問題を引き起こす可能性がある。 例えばTwitterのようなサービスがあったとして、(navigator.onLineプロパティなどを利用して
Bootstrap向けの汎用的なモーダルボックス実装スクリプト・Bootstrap Modal
よさ気だったのでメモ。Twitter Bootstrap向けのモーダルスクリ プト、Bootstrap Modalです。既存 のモーダルクラスの代替、または パッチとして利用出来る、との事 です。 Bootstrap向けのモーダルスクリプトです。レスポンシブ対応でスタックも可能との事です。デモを触って見ましたが結構使い勝手が良さそうでした。 こういうやつ。モーダルボックス内は自由にマークアップできます。Bootstrap用なので勿論レスポンシブにも対応しています。 このようにモーダルを表示したまま、別のモーダルボックスを呼び出すことも出来ます。 汎用性も高そうです。これは覚えておこう・・・時間が作れなかったのでコードやサンプルは割愛しました。貧乏暇無し。 Bootstrap Modal
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
MDN Web Docs
Resources for Developers, by DevelopersUnited in love //////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../../ ../../<></><></><></><></><></><></><></><></><></><></><><
Greasemonkeyを超えた！ユーザースクリプトを自在に実行できるChromeエクステンション「jsshell」 - Chrome Life
先日、Adobeからモバイル向けFlashの開発中止というニュースがありました。 リッチコンテンツの領域で独占していたFlashでさえ、HTML5の標準化の波には逆らえなかったんですね。 来年あたりから、HTML5の利用が一気に加速していく予感がします。 筆者も、最近ではサイト構築の際にHTML5を選択する機会が増えてきました。 HTML5+CSS3+jQuery この組み合わせで、ほとんどのWebアプリケーションの機能を実装することができる時代になってきたと思います。 必要なデータは、クラウドに保存してAPI経由で読み書きできれば良いので、その部分だけサーバーサイドに任せる感じのシンプルな構成になればベストです。 JavaScriptの部分は、別にjQueryじゃなくてもよいのかもしれませんが、プラグインや情報が豊富で、jQueryが使える開発者も多いことから、jQueryを選択しておけ
学習に最適！ 他人が書いたコードをリアルタイムで見られる｢TheCodePlayer｣ | ライフハッカー［日本版］
プログラミングを学習する良い方法は、実際にコードを書くだけでなく、他人の書いたコードを読んでみることです。｢TheCodePlayer｣は、まっさらな状態からクールなモノが作られて行く過程を動画で追っていくことができるサイト。動画の左側には書かれているコードが表示され、そのコードによってもたらされている変更点を右側で確認することができます。また、コードを自分で変更してみることで、画面にどんな影響があるのかを実際に見てみることも。動画を見る際にはデフォルトの10倍速ではなく、5倍速くらいに落として見るのがわかりやすいかと思います。 CSS3でストップウォッチやアコーディオンスタイルのスライダーを作成する方法、HTML5キャンバスでパーティクルシステムの構築など、JavascriptやCSS、HTML5などを使ってできることのデモンストレーションが20種類以上用意されています。 TheCode
コードリーディングに最適！たった200行で作れるHTML5製テトリスのプログラミング学習ムービー - Chrome Life
みなさんは、フルスクラッチでテトリスを作ることができますか？ プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの４５分でテトリスが完成！ それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Conference 2015 講演資料まとめ #html5j
SSSSLIDE
HTML5 Boilerplate: The web’s most popular front-end template
http://www.qcontokyo.com/data_2013/ToruYoshikawa_QConTokyo2013.pdf
HTML5 × CSS3 × jQueryを真面目に勉強してみる の記事一覧 | DevelopersIO
サンプルだけでも見ておくべきHTML5のチュートリアル集:phpspot開発日誌