Thank you for your trust!You will be redirected to System.io page in 15 seconds.
小学生プログラマ・シュン君、UEI清水亮氏とenchant.jsでゲームを作る(前編)#5jcup #html5j 2014.08.05 Category:技術コラム Tag:5jCup ,enchant.js ,HTML5 ,html5j ,shun ,清水亮 HTML5 Japan Cup 2014で見事Webプラットフォーム賞を獲得したのは小学6年生シュン君の「UFO-Escape」。HTML5+JavaScriptをベースとしたゲームエンジンenchant.jsで作ったゲームアプリだ。 今回シュン君にenchant.jsの基礎から「UFO-Escape」のアイデアまでを講義してくれたのは、UEIの清水亮氏。シュン君が「UFO-Escape」が完成するまでの軌跡をレポートする。 by 馬場美由紀 (CodeIQ中の人) UEIの清水亮氏がシュン君に直々の指南 enchant.jsはユ
A lot of JavaScript developers out there, myself included, love jQuery. And rightly so! Like any great tool, it makes our lives easier. When building something with a large amount of front-end code, like a robust site or application, jQuery is a powerful ally. However, if you’re building a small- to medium-sized library, you should seriously consider using vanilla JavaScript. Sometimes it makes se
This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here, or buy your own paperback copy. Written by Marijn Haverbeke. Licensed under a Creative Commons attribution-noncommercial license. All code in this book may also be considered licensed under an MIT license. Illustrations by various artists: Cover by Péchane Sumi-e. Chapter illustrations by Mad
javascriptのDOM操作の基本をおさらいしておこうと思います。jQueryは少し触ったことがあるのですが、javascript自体はほとんど使ったことがないのでこれを機会に勉強していこうと思います。 ここではDOMの操作とイベント処理をまとめてみます。これが出来るようになると、Web上でインタラクティブな要素を盛り込むことができるようになります。 javascriptの基本 DOM操作 まずはiavascriptのDOM操作から。ここで使うHTMLはこちらです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascriptの練習</title> </head> <body> <div id="main" style="border:1px solid #555;width:400px
こんにちは、@yoheiMuneです。 以前簡単な正規表現入門資料を作ったのですが、ブログにも書いておこうと思います。 正規表現って何? ざっくり言うと、正規表現は「文字列を扱う為の技術」と言えると思います。 正規表現を使って、ある特定の文字列を検索したり、置換したり、抜き出したりすることが出来ます。 例えば、HTMLドキュメントの中に以下のようなイメージタグがあった場合に、 <img src="foooooooo.png"alt="画像だよ"/> img要素がHTML文章内があるかを検索することも出来るし、「foooooooo.png」を「huuuuuuuuu.png」に置換することも出来るし、「foooooooo.png」を取り出すことも出来ます。 もちろん正規表現を使わない方法でも同様のことを実現できますが、 正規表現を使うとより複雑なことがより簡単に行えるようになります(正規表現を
Google I/O 2014 ── ServiceWorker でネイティブアプリとの差を縮めよう 矢倉 眞隆(myakura) 今回お届けするのは、Jake Archibald氏とAlex Russell氏によるServiceWorkerのセッション「Appy Times with ServiceWorker – Bridging the gap between the web and apps」です。 Alex氏はService Workers仕様のEditorで、古くはDojoやChrome Frameに携わっています。TC39やW3CのTAGのメンバーとしても活動し、Extensible Web構想を推し進める一人です。 Jake氏はService Workers仕様の「ゴーストオーサー」だそうです。とても面白い人で、今回も彼のユーモアが炸裂、笑いに包まれた楽しいセッションとなり
イベント概要 日時: 2014年6月21日(土) 13:00 – 16:00(開場12:30) 会場: 住友不動産西新宿ビル23F テーマ: リファクタリング 定員: 100名 主催: 株式会社リッチメディア 参加費: 無料 事前登録: 必要 ハッシュタグ: #remixing セッション 1. リファクタリング: What, Why and When by 斉藤祐也 / 15 mins リファクタリングとはなんなのか、どうして必要なのか、そしていつ実行するべきなのか。 本セッションではそんなリファクタリングの基礎について紹介していきます。 斉藤祐也 米国の大学を卒業後、大規模なインターネットメディア運営会社に編集者として入社するもウェブデザイナ兼フロントエンドデベロッパとして従事、その後株式会社サイバーエージェントにてモバイルウェブアプリの開発をメインとした部署にて専業フロントエンドデベ
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
シングルページWebアプリケーション ―Node.js、MongoDBを活用したJavaScript SPA シングルページWebアプリケーション(SPA)は、最近注目を集めているWebアプリケーションのアーキテクチャです。SPAは、ユーザがアプリケーションを使っている間、Webページ全体をロードすることがなく、レスポンスが高速でUI/UXに優れているという利点を持っています。かつてはJavaアプレットやFlashといったWebブラウザのプラグインに依存する必要がありましたが、近年ではJavaScriptを使ったSPAが現実的になってきています。JavaScriptベースのため、既存のWeb開発スキルの活用が容易であり、新しいデバイスへの対応も比較的簡単です。本書では、クライアントでJavaScriptを使ったSPAを採用するだけでなく、WebサーバにNode.js、データベースにMong
この文章について OOP(オブジェクト指向プログラミング、オブジェクト指向パラダイム)について プログラミング勉強中の大学生さんに説明する機会が何度かあったので、 自分の中で整理するために書きました。 中には適切でない説明もあります。ばっさり省いているところもあります。 詳細より イメージを掴んでもらうことを優先しているためです。 「それにしてもあんまりだなー」という表現がありましたらご連絡いただけると嬉しいです。 大学生さん 大学生さんたちはいろんな背景を持っています。 プログラミングを始めたばかりの人 独学で Objective-C や JavaScript を書いた経験がある人 Web やコンピュータの仕組みについてもこれから勉強する予定の人 使用言語 大学生さんたちはプログラミングの第一歩として JavaScript と PHP を使っています。ここでは説明に PHP のコードを使
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
シリアライズとは、ソフトウェア内部で扱っているデータをそのまま、保存したり送受信することができるように変換することです。 データベースに配列データをそのまま保存したい時などに使います。 通常、データベースには「フィールド:値」という形式で保存される為、配列データをそのまま保存することはできません。 仮に「array(‘a’, ‘b’, ‘c’)」という値を保存したとしても、それはただの 文字列 にすぎません。 一方、シリアライズすると、配列データを配列データとして保存することができます。 特に、配列の要素数や構造が動的に変化するデータを取り扱う場合には、必ずと言っていいほど使うでしょう。 では、シリアライズによって、データがどのように変換されるかを見ていきます。 まずはPHPのシリアライズから。 PHP – serialize() シリアライズ シリアライズ後の文字列は「型:値」の形式に変
3/8に開催されたjs Girls TOKYOに行ってきました。 jsのエンジニアでもなくガールでもない、 しがないウェブディレクターの私ですが、js書きたい一心で参加してきました。 課題はクローム用のエクステンションを作るというものでした。 結果として途中まではできたのですが完成せず。 作ろうとしていたのは、クロームの検索の拡張で、一ページ内で複数の言葉を検索し、それぞれ別の色でハイライトして表示させる機能でした。 とりあえず検索はできて、色分けして表示させる事まではできたものの、一回目の検索結果をクリアできない謎仕様に。。 でも同一ページ内複数語検索ってディレクターだと使いませんか?文字校とかで。 もうちょっと完成度が増したら公開します。 みなさんいろいろなエクステンションを作られていて、懇親会のときに5名だけ発表されていましたが、完成度の高さや、発想力に驚かされっぱなし。食べログで気
JS Girls Tokyo #1で、JavaScript初心者向けの勉強方法について話しました。 私自身、HTML/CSSはできてもJavaScriptが大の苦手でしたが、@hokaccha 先生による修行によって、なんとか理解できるようになりました。 その修業の中で、何をどうやって勉…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く