学習サイトとして良さそうだったのでご紹介。 JS Daresでは、簡単なゲーム作りを通してJavaScriptを学ぶことができる。 最初は戦車を動かすプログラムからはじめて、少しずつ、自分のペースでレベルアップしていくことができるようだ。 すべてブラウザ上で完結するので環境を用意する手間もいらない。そろそろプログラミングを、という初学者の方はいかがだろうか。
簡単なゲーム作りを通してJavaScriptを学べる『JS Dares』 | 100SHIKI
学習サイトとして良さそうだったのでご紹介。 JS Daresでは、簡単なゲーム作りを通してJavaScriptを学ぶことができる。 最初は戦車を動かすプログラムからはじめて、少しずつ、自分のペースでレベルアップしていくことができるようだ。 すべてブラウザ上で完結するので環境を用意する手間もいらない。そろそろプログラミングを、という初学者の方はいかがだろうか。
ブラウザ上でNode.jsの開発が出来る『Runnable』 | 100SHIKI
Node.js・・・、のインストールではまる人も多いはずだ。 そこで（というわけでもないだろうが）登場したのがRunnableだ。 このサイトではブラウザ上でNode.jsの開発ができるようだ。 インストール不要で、ちゃちゃっとコードを書いて「Run」すればいいだけなのでお手軽だ。 Node.js以外の言語にもこれから対応していくとのことなので楽しみですな。
なんと！JavaScriptだけでテキスト読み上げ·Speak.js MOONGIFT
Speak.jsはJavaScriptだけでテキストを読み上げるソフトウェアです。 Webブラウザで音声ファイルを指定してJavaScriptで解析、なんてソフトウェアもありますが今回は一から“音声”を生み出してしまう驚きのソフトウェア、Speak.jsを紹介します。 ボタンを押すとHello Worldと話します。 こんな感じで任意の言葉を話させることもできます。 Speak.jsはジェネレータを通じて音声を動的に生み出します。対応しているのは英数字のみとなっており、日本語には対応していません。常に動的に生成しているので自由なテキストを読み上げさせることができます。 Speak.jsはJavaScript製のオープンソース・ソフトウェア（GPL）です。 MOONGIFTはこう見る テキストを外部サーバに送って、それを音声ファイルにして返すAPIも世の中にはあります。当然、こちらの方が英語
『スマートフォン向けJavaScriptライブラリchikuwa.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！スマートフォン版Ameba（通称：デカグラフ）でフロントエンドの開発をしている2012年度新卒入社のオオシモと申します。 デカグラフでは、主にSNS機能（サークル・掲示板・メッセージ・写真など）のNode.jsからフロントエンドのJavaScriptを担当しています。ちなみにエディタはSublime Text 2を使用しています。とっても軽くて高機能でオススメです。jQueryを使用しているのではないでしょうか。 デカグラフでは、chikuwa.jsと呼ばれるスマートフォンに特化した軽量ライブラリを使用しています。このライブラリは弊社の首
独学でフロントエンド・エンジニアを目指す人のための基礎カリキュラム - DESIGNMAP
本記事は2013年に書いた記事で内容がだいぶ古くなっております。 フロンドエンドは3年間で大きく状況がかわりました。下記の2016年に書いた改訂版の新しい記事をおすすめします。 「フロントエンドエンジニアとは／Webアプリケーションの歴史／フロントエンドの勉強が難しくみえる理由 － まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム vol.1」 2011年に『まったくのゼロから、独学でWebデザイナーになる方法』、2012年に『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』を書いて、独学でWebデザイナーを目指す人向けの具体的な独学方法を書いた。今回は、Webデザイナーという大まかなくくりではなく、フロントエンドエンジニアにしぼって独学方法をまとめてゆきたい。 フロントエンド・エンジニアとは フロントエンドとはWebブラウザ側（クライアント
JavaScript のスコープチェーンとクロージャを理解する - tacamy--blog
前回で JavaScript のスコープの基本がわかったので、今回はスコープチェーンとクロージャを勉強してみました。 Call オブジェクトとクロージャの理解がかなり大変でした・・。 変数オブジェクト JavaScript で変数の宣言と参照をするということは、変数オブジェクトを読み書きするということです。 変数オブジェクトというのは、key と value による変数管理専用のハッシュテーブルのこと key が変数名、value が値のセットになっているテーブルで、変数の数だけレコードができるイメージ 変数オブジェクトはプログラマが意識することのない、便宜的なオブジェクト グローバルオブジェクト JavaScript は、ブラウザが新しいページを読み込んだとき、内部的に新しいグローバルオブジェクトを生成して初期化します。 グローバルオブジェクトとは、グローバル変数やグローバル関数を管理す
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinterest) そんな女子力の
Web ブラウザで動くとは思えない、凄い WebGL デモ・アプリ 65 個 - WebOS Goodies
今月の 22 日に GTUG Girls のイベントで WebGL (Three.js) のハンズオンをやります。内容は初心者向けで、簡単な物体を表示してみたりして Three.js の基礎を学ぼうというものです。女性限定ですが、興味のある方はぜひご参加ください。 【告知】第10回GTUG Girls Meetup 「キラリとひかるモノ作り！WebGL(Three.js)入門編」 募集開始！ で、本日は宣伝も兼ねて WebGL を使ったデモやアプリケーションのまとめエントリを書いてみました。いずれも Web ブラウザで動くとは思えないほどインパクトのあるものばかり。 WebGL 対応のブラウザで（Chrome か Firefox の最新版が無難です）、おもいっきり堪能しちゃってください！ 長編デモ 音楽に合わせてインパクトのある映像を展開していく、ちょっとしたストーリー性のあるデモなどを集
車輪の再発明×jsdo.itのススメ. 色々なコードを tmlib.js で作りなおしてみた | TM Life
jsdo.it にある色々なコードを勉強がてら tmlib.js で作りなおしてみました. せっかくなので作ったコードを紹介したいと思います. っとその前にプログラミングを学んでいる方向けに, 車輪の再発明×jsdo.it の良さについて軽く書きたいと思います. Table of contents 車輪の再発明って？ 車輪の再発明×jsdo.it サンプル Hexagon Phase 2 – tmlib.js version Fire Effect – tmlib.js version Water Effect – tmlib.js version Ice Effect – tmlib.js version 車輪の再発明って？ 車輪の車輪再発明とは, 既存のものをまた改めて作ることを言います. 新たな付加価値がないことから良いニュアンスで使われることはあまりありません. ですが, プログラ
モバイルアプリ向けJavaScriptフレームワーク「Junior」、Backbone、Zeptoなどを採用し、ネイティブのルック＆フィールを持つ
Juniorは、Justin Martin氏が開発したフレームワーク。Martin氏は“My holiday project”としてJuniorを開発したとツイートしています。 Juniorの特徴は、モバイルに最適化したCSSトランジションによるスムーズな画像効果、zeptoやbackbone.jsなど多数のライブラリに依存していることなど。UIコンポーネントはRatchetを利用しているようで、モバイルネイティブのルック＆フィールを備えていると説明されてます。 modernizr、zepto、backboneなどに依存 Juniorが依存しているライブラリは以下。 modernizr（ブラウザごとに異なる実装を調べて、対応するコードを書きやすくする） zepto（jQuery互換のミニマルなライブラリ） zepto flickable（zeptoのタッチ対応プラグイン） lodash（U
正規表現をわかりやすく視覚化してくれる『REGEXPER』 | 100SHIKI
おっと、これは便利かも。 REGEXPERを使えば、JavaScriptの正規表現をわかりやすく表現してくれる。 一見、難解な正規表現だが、これを通しても見ると「なるほど、この文字とこの文字にはされまれていて、この間は何の文字でも良いのだな」といったことがわかるようになる。 他の人のコードを読んでいて「？」となったときに試してみてもいいかもですな。
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
Webカメラから超絶カッコいいプロフィール写真を撮れるWebサービス作った - 海峡
Webカメラでめっちゃカッコいいプロフィール画像を簡単に撮れて便利.JS インターネットの皆さん、こんばんは。国民的スポーツの一つであるアニメGIFに関する記事です。 今回、Webカメラから超絶クールなプロフィール画像を撮れるWebサービスを開発したのでご紹介させて頂きます。 SNSや履歴書などに貼るプロフィール写真を撮ったら思ったよりもカッコよくなくてつらい気分になったことはありませんか？ 「動いてるときはもっとカッコよく見えてるはずなのに……」静止画になると急に生命力が失われた感じに見えてしまいます。とてもつらい思いになりますね。 そこで、簡単にもっとかっこいいプロフィール写真を撮りたいと思い、Webカメラから超絶クールなプロフィール画像を撮れるWebサービスを開発しました。 言い換えれば、Webカメラから撮った映像からアニメGIFを作れるWebサービスです。 サービス名は「Webカメ
『今年中に読んでおきたい！2012年人気の記事10本！』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 今年も残すところあとわずかですね。いかがお過ごしですか？ スマートフォン版Amebaのディベロッパーを担当している宇納(@TasukuUno)です。 このブログの編集委員なんかもやったりしています。 本日は、今年2012年に公開された記事の中から、特に反響の大きかった記事をピックアップしてご紹介致します！ 【デザイン】ピグアイテムのイラストレーションについて 長年アメーバピグのデザインを支えてきたデザイナー、青山の記事。 ピグの世界感はただ「かわいい」だけではなく、2Dながら空間を感じることができるような、きちんと計算された構図やデザインポリシーの上
HTML5アプリで簡単にジェスチャーを実装できるライブラリ QUOjs 【18日目】 | DevelopersIO
モバイルHTMLシリーズ HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか おすすめ iPhone、Androidで使える！撮ったその場で画像編集できるHTML5アプリを作ってみよう iOS6のSafariでサポートされるHTML5の機能 HTML5で使えるスマートフォンの機能 スマートフォンサイトのパフォーマンスチューニング スマートフォンサイト用の軽量ライブラリ QUOjs HTML5のWebアプリで使えるジェスチャーにはどんなものがあるのか調べていたら、QUOjsというライブラリを見つけたので試してみました。 サイズが16KBと軽量なライブラリですが、簡単にイベント処理を実装できるので便利です。今回使ったバージョンは2.2.0 になります。 以下のサイトからダウンロードできます。 QuoJS 英語ですが以下のページに使い方が書いてあり
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
[PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。
iOS6 のマップって不便って騒がれたけど、それほどでもないよね？…って思ってましたが、最近お店探しで使って全然見つからなかったので、さすがにこれは…と思いMapion インストールしました。使いやすいですね… 今日は、だらしない明らかに非効率なjQueryなコードを書くとやんわりと指摘してくれるPhpStorm/WebStormの機能「Inspection: jQuery usage efficiency 」を紹介します。(バージョン5.0以降) New JavaScript inspections and intentions | WebStorm & PhpStorm Blog 非効率なjQueryのコード っていったいどんなコードなのか。具体的には以下のようなコードです。 $("p").addClass('hover'); $("p").toggle(); 実際にはこんなコードを書
![[PhpStorm/WebStorm]jQueryの非効率な使い方をすると警告してくれるようになった | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b62b4e0fd4ed08a00e42d880ceb27ae1f776b93/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fws_ps01.jpg)
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CODEPREP
