ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ作成：2014/02/24 更新：2016/06/30 Webデザイン > デザインの流れや基本的なフローなどを勉強しておくだけでも効率が良くなるし、起業の際にも役に立つと思います。デザイナーさんにもっとデザイン力を上げたいと言われたのもあり、今回は制作フローとデザインやその他の知識を学べるように、出来るだけ制作フローにそって、スライドをまとめました。膨大な量になったので簡潔にしています。全てスライドです。 エンジニア速報は Twitter の@commteで配信しています。
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
Webアプリをいまどきの手法で爆速開発した — KaoriYa
外道はるかぜちゃんジェネレータというWebアプリを いまどきな手法を用いて爆速で開発した話を紹介します。 先の3連休中、外道はるかぜちゃんジェネレータというWebアプリを開発&公開しました。ここで採用した開発手法がいまどきな爆速開発でしたのでちょっと紹介&ステマします。使った技術は以下の通りです。 AngularJS: Googleが開発しているViewModelなWeb開発ライブラリ(MVW: Model View Whateverだったかな?w) Github pages: スタティックサイトのホスティングに最適 Kii Cloud: mBaaS (mobile backend as a service) で共有データの保存に利用 HTML5 Canvas: 画像生成に。サーバサイドではなにもしてない! サービス概要 外道はるかぜちゃんジェネレータはベースとなる画像があり、そこに面白い
HTML5で燃えさかる炎の表現に挑戦！ WebGL対応のJSライブラリAway3Dはパーティクル機能がかなり魅力的 | ClockMaker Blog
HTML5で燃えさかる炎の表現に挑戦！ WebGL対応のJSライブラリAway3Dはパーティクル機能がかなり魅力的 先日の記事で紹介したJavaScriptライブラリ「Away3D TypeScript」(WebGLに対応)ですが、燃え盛る炎の表現を作成してみました。 デモは以下から試せますので、ぜひWebGL対応のブラウザ(Chrome, Firefox, IE11)を使ってご覧下さい。 Demo (WebGL対応のブラウザでご覧ください) Source (TypeScript 0.9.5で作成) 移植元のFlash版のデモ マウスで画面をドラッグ＆ドロップするとアングルを動かすことができます。もしかしたら環境によっては動作が重たいかもしれないので、ブラウザのウインドウサイズを小さくしてみると滑らかに再生できるようになるかもしれません。 ▲右クリックするとFlash Playerではない
ビジネス向けモバイルアプリケーションのUIガイドライン、セールスフォース・ドットコムが公開。アイコンなどダウンロード可能
ビジネス向けモバイルアプリケーションのUIガイドライン、セールスフォース・ドットコムが公開。アイコンなどダウンロード可能 先週13日に、SAPが業務アプリ用のJavaScript製UIライブラリ「OpenUI5」を公開したとお伝えしたばかりですが、今度は、米セールスフォース・ドットコムがHTML5でのビジネス向けモバイルアプリケーションのUIガイドラインやサンプルを多数公開しました。ビジネスアプリ用のモバイル開発環境はHTML5/JavaScriptで急速に充実してきています。 米セールスフォース・ドットコムは先月、新ブランド「Salesforce 1」を立ち上げ、モバイルへ全面的にシフトすることを宣言したばかり。このスタイルガイドは、同社のモバイルへの注力を示すものといえるでしょう。 これまでビジネスアプリケーション向けに、モバイル対応のしっかりとしたスタイルガイドが公開された例はおそら
このJavaScriptフレームワークでHTML5は救われるかもしれない | readwrite.jp
HTML5はウェブ・ページをアプリのように動かし、そしてFlashに取って代わるはずだった。しかしパフォーマンスの問題で、アプリ開発者のHTML5導入は遅れてしまっている。 Famo.us社はこのギャップを埋めるためにスタートした小さな会社だ。同社は2Dと3Dの両方のエフェクトを高速表示するため、HTML5の遅延要素を本質的に回避する独自のフレームワークを開発した。このFamo.usによって、開発者はHTML5のパフォーマンスの問題に苦しむことなく、より短期間でクロスプラットフォームのアプリを開発することが可能となったのだ。 Famo.usの秘密はJavaScriptを利用していることだ。JavaScriptは極めて高速に動作し、既にあらゆるブラウザで広く使われている。Flashとは異なり、ブラウザ・プラグインをユーザーがダウンロードしたり、ブラウザメーカーがそれをサポートする必要もない。
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える（かもしれない）最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。 本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立た
重要！ まずは「オリジン」を理解しよう
連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。今回から、HTML5やJavaScriptに関連したセキュリティの話題について連載することになりました。よろしくお願いします。 もう読みましたか？ HTML5のWebアプリセキュリティに関する報告書 皆さんすでにご存じかと思いますが、2013年10月30日にJPCERTコーディネーションセンター（以下、JPCERT/CC）から「HTML5 を利用したWebアプリケーションのセキュリティ問題に関する調査報告書」が公開されました。 この報告書の調査の一部は、弊社が行いました。また、JavaScriptのセキュリティ上の問題について次々と鋭い指摘を行っているmalaさんにもさまざまな技術的アドバイスを頂いた上、日常的にWebアプリケーションのセキュリティ検査や構築を実際の業務として行っておられる専門家の方々にも査読をお願いして
HTML5 を利用したWeb アプリケーションのセキュリティ問題に関する調査報告書
HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている仕様であり、HTML5 およびその周辺技術の利用により、Web サイト閲覧者 (以下、ユーザ) のブラウザ内でのデータ格納、クライアントとサーバ間での双方向通信、位置情報の取得など、従来の HTML4 よりも柔軟かつ利便性の高い Web サイトの構築が可能となっています。利便性が向上する一方で、それらの新技術が攻撃者に悪用された際にユーザが受ける影響に関して、十分に検証や周知がされているとは言えず、セキュリティ対策がされないまま普及が進むことが危惧されています。 JPCERT/CCでは、HTML5 を利用した安全な Web アプリケーション開発のための技術書やガイドラインのベースとなる体系的な資料の提供を目的として、懸念されるセキュリティ問題を抽出した上で検討を加え、それらの問題
｢スーパーマリオブラザーズ｣をHTML5で完全に再現したサイト｢Full Screen Mario｣ | 気になる、記になる…
｢スーパーマリオブラザーズ｣をHTML5で完全に再現したサイト｢Full Screen Mario｣ 2013 10/16 TNWによると、ファミコンで人気の｢スーパーマリオブラザーズ｣をHTML5で完全に再現したサイト｢Full Screen Mario｣が公開されたそうです。 著作権的に問題ありですが、実際にキーボード操作でプレイする事が可能で、”1−1”だけかと思いきや”8-4”までの全ての面がプレイ可能となっています。 また、マップジェネレーターも用意されており、自分でマップを作る事も可能で、操作面ではBダッシュはShiftキーを押しながら動かすと可能で、ジャンプは十字キーの上かスペースキーとなっています。 ・Full Screen Mario 【追記】 Google Chromeのみのサポートとなるようです。
(1/2) - 第一回 jQueryから始めるBackbone.js - 実践！Backbone - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル
はじめに はじめまして。プログラマ向け情報共有サイトQiitaを開発・運営しているIncrements株式会社の高橋と申します。Qiitaではフロントエンドのアプリケーション開発にBackboneを採用しています。また縁があってBackbone.jsガイドブックという本を執筆させていただきました。本連載では、Backboneを使ったより実践的な話題を紹介していきたいと思います。 初回となる今回は「すでにjQueryを使っているけど最近何かと話題のBackboneも気になる！」という開発者の方がBackboneを試しに使ってみる際の初めの一歩の踏み出し方を紹介することが目的です。そのために今回はjQueryで実装されたサンプルコードをBackboneに移植します。 なぜBackboneを使うの？ すでにjQueryがあるのになんでわざわざBackboneを使うのでしょう。jQueryを使えば
50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング！ - あのねノート。
2013-09-16 50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング！ やり方 適当プログラミング解説シリーズ はじめに。 ラングトンのアリ(Langton's ant)を知っていますか？ラングトンのアリはWikipediaのラングトンのアリによると、以下のように記述されています。 ラングトンのアリ（英: Langton's ant）は、クリストファー・ラングトンが発明した単純な規則で記述される2次元チューリングマシンである。 実際の3匹のラングトンのアリの早送りされた動きです。 一見複雑そうに見えますが、ルールはたったこれだけです。(上のgifでは色のあるマスが白のマスとしています。) 黒いマスにアリがいた場合、90°右に方向転換し、そのマスの色を反転させ、1マス前進する。 白いマスにアリがいた場合、90°左に方向転換し、そのマスの色を反転させ、
50行で作る、HTML5+JavaScriptな簡単ライフゲーム【プログラミング】 - あのねノート。
2013-09-14 50行で作る、HTML5+JavaScriptな簡単ライフゲーム【プログラミング】 やり方 はじめに。 ライフゲームを知っていますか？ライフゲームは世界でとっても有名なシュミレーションゲームです。Wikipediaによると、 1970年にイギリスの数学者ジョン・ホートン・コンウェイ (John Horton Conway) が考案した生命の誕生、進化、淘汰などのプロセスを簡易的なモデルで再現したシミュレーションゲームである。 らしいです。 眺めているだけでもさまざまなパターンを観測することができてとても興味深く、魅力的なゲームです。 見つけだすのに賞金も賭けられたという「グライダー銃」というパターンは特に有名ですね。 もっとライフゲームについて詳しく復習したい方は秀逸なWikipediaのページを見ることを薦めます。 ライフゲーム - Wikipedia また、ライフ
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング - あのねノート。
2013-08-24 200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング やり方 はじめに この前enchant.jsでぷよぷよ by おっ立ち野郎を作って公開しました。 enchant.jsで作ったHTML5+JavaScriptな「ぷよぷよ」を公開しました これを知り合いR君に紹介したところ、嬉しい事に「僕もぷよぷよ作りたい！」といってもらえました。それでぷよぷよの解説サイトをネットで見つけて紹介しようと思いました。 しかし、テトリスの解説サイトは山ほどあるのに、ぷよぷよプログラミングの解説サイトが全然ありませんでした。特に完成まで解説しているサイトは見つけられませんでした。テトリスはあるのに。 ということで、今回ぷよぷよプログラミングの完成までの解説を書いてみました。これはenchant.jsの基礎をひと通り勉強された方におすすめです。クマをちょこちょこ動かすだけ
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
HTML5 Audioで作るiTunes風音楽プレイヤー (1/7)
HTML5サウンドプレイヤーのサンプル。マウスで選択した曲（音声ファイル）が再生される。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） 本連載でもこれまでHTML5 Videoを使って動画を再生する方法を紹介しましたが、今回は音声を再生してみましょう。HTML5ではプラグインを使用しなくても動画や音声を再生できます。 今回はHTML5 Audioのサンプルとして、選択した音楽（音声ファイル）を再生するサウンドプレイヤーを作ります。単に音楽を再生するだけでは面白くないので、Canvasを使ってビジュアルを表示する機能も付けます。さしずめ、iTunesやWindows Media Playerのブラウザー版、といったところでしょうか。 ブラウザーによって違うサポート形式 HTML5 AudioはVideoと同じメディア要素として扱わ
cocos2d-html5エンジンが凄い件 - tsuge development page
cocos2dっていうiPhoneでは有名なゲームエンジンがあるんだけど、それのHTML5版でcocos2d-html5ってのがある。 http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d-html5 これ、ちょっとまともに調べてみたけどかなり凄い。 凄いんだけどいまいちZyngaの日本での頑張りが足らないのか記事が少ないので、ちょっと紹介する。 ダウンロードとか とりあえず自分で触ってみるわって人は、上のリンクからCocos2d-html5-v何がしの最新版リンクをクリックしてダウンロードすればいい。 この記事時点ではCocos2d-html5-v2.1.4が最新。 サンプルゲームはpixi.js辺りに比べるといまいちだけど、個別の機能を確認するのはcocos2d-html5のテストプログラムが使える。 http://www.c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
米Google、「Chrome Apps」を正式公開 ～ネイティブに匹敵するハイブリッドアプリを一般利用者に