サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
css-eblog.com
単著でJavaScriptの本を書きました! カテゴリ:執筆 2013年12月11日 10:24 『JavaScriptの教科書』という本を書きました 今回、人生で初めて単著で本を書きました。タイトルは『JavaScriptの新しい教科書』です。 内容はタイトルからも分かる通り初心者向けに書かれた本です。 想定したターゲットは、「これからJavaScriptをメインでやっていきたい人」か、「Webデザイナー」や「Webディレクター」などすでに現場でJavaScriptを見ている人です。 その人たちが、JSの知識を手に入れるために読む、というようなことを考えて書きました。 そのため、比較的幅広く書いています。自分の中では「超入門」的な位置づけで、これを読んで幅広い知識と現場で使われているものの概要を掴み、全体像を把握してもらう、というのが目的です。なので「次の書籍を読むための書籍」みたいなイ
CANNON.jsを使って3Dに物理演算を持ち込む カテゴリ:WebGL 2013年12月 8日 09:09 さて、今回はGraphical Web Advent Calendar 2013の第7日目です。 Graphical Webということで、前回、スマホでも動く物理演算で転がる3Dサイコロを作ったのでその解説で紹介したサイコロのデモで使用したCANNON.jsについて書いてみたいと思います。 CANNON.jsとは CANNON.jsは、物理演算を提供してくれるいわゆる「物理エンジン」ライブラリです。 3D向けの物理エンジンライブラリはいくつかあり、有名なのは「ammo.js」というものがあります。 これは、物理エンジンの(おそらく)デファクトスタンダードとも呼べる「Bullet(弾丸)」というエンジンがあり、それをJavaScriptに変換したものです。 余談ですが、Bulletに
記事を書くときに気をつけていること カテゴリ:執筆 2013年12月 2日 09:24 Editors' & Writers' Advent Calendar 2013の第2日目です。 なにを書こうか迷ったんですが、こういう機会でもないと書くことがないと思ったので、普段記事を書くときに気をつけていることを書いてみたいと思います。 これを見て、なにか書くときの参考になれば。 ターゲットをイメージする 記事を書くとき一番最初にすることは、「この記事を読んでくれている人はどんな人だろう」というイメージを持つことです。つまりターゲットですね。 きっとこういう人が読んでいて、こういう感想を持ってくれるといいなーというのをイメージしてから書き始めます。 この感想というのは、一言で言うと「なにを持ち帰ってもらいたいか」という視点です。 どういうことかと言うと、記事を読むからにはなにかしら情報をほしがって
スマホでも動く物理演算で転がる3Dサイコロを作ったのでその解説 カテゴリ:3D 2013年9月 1日 16:46 CSS3DRendererはexamplesの中 ルービックキューブの解説は少しお休みして、Three.jsのCSS3DRendererを使ってサイコロを作った話をしようと思います。といっても、ルービックキューブを作る上で使用した概念などもあるので、まったくの無関係というわけではありません。 今回のポイントは「CSS3DRenderer」です。 これ、実はThree.jsだけを読み込んでも使用できません。実験段階だからなのか、Three.jsのgithubのリポジトリ内にある「examples」の中にこっそり含まれています。 実装サンプル なので、まずはこれを取り出してThree.jsと一緒に読み込ませます。 ちなみに今回作成したものは以下のようなサイコロです。(CANNON.
CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その2 カテゴリ:3D 2013年8月28日 19:04 前回はこれから解説していくルービックキューブの紹介と、3D関連の学習に利用した記事などの紹介をしました。 いよいよ実際にルービックキューブについて解説をしていきたいと思います。 まずは基本的なところから始めて行くので、人によっては今回の記事はほぼ知ってることだらけになるかもしれません。 要素の変形 - transformプロパティの基礎 上でも書いた通り、まずはtransformプロパティの基礎から解説していきます。 すでに使ったことがある人ならおなじみだと思いますが、transformプロパティ(WebKit/Blink系はまだ-webkit-のプレフィクスが必要です)にはいくつかの値が指定できます。 実際にtransformプロパティに指定でき
CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その1 カテゴリ:3D 2013年8月20日 09:04 しばらくぶりの更新です。 最近はWebGLやCSS Shaderを始め、3D関係のことをメインに勉強しています。 おかげでだいぶ詳しくなってきました。 ちなみに、CSSでクリアできる、と書いていますが「CSSだけで」ではないので当然JavaScriptもてんこ盛りですw 最近はインプットばかりだったので、備忘録も兼ねて以前案件で制作したCSS Rubik Cubeを解説を交えながら書いていきたいと思います。 CSS Rubik CubeはMaxellの商品のキャンペーンで、エビ中キューブと名付けられたコンテンツです。 エビ中キューブは、エビ中というアイドルグループの動画を、ルービックキューブで操作して自分好みのものに揃えて見る、というものです。 P
CSS Shaderで遊ぶ(2) カテゴリ:CSS Shader 2013年5月26日 08:15 前回記事、「CSS Shaderで遊ぶ」ではCSS Shaderの触りを書きました。 詳細にはほとんど触れていませんが、どんなことができるのか、CSS Shaderの可能性は感じてもらえたのではないでしょうか。 今回の記事では、前回触れたUIを作るという点にフォーカスを当てて、簡単なエフェクトを作ってみるとともに、シェーダでどんなことをやっているのかひとつずつ見ていこうと思います。とはいえ、自分もまだまだ勉強中の分野のため、間違いだったり勘違いがあるかもしれません。なので、読む方はそれを念頭に読んでいただければと思います。 CSS ShaderでUIを作る ということで、さっそく今回のために作成したサンプルを見てみようと思います。サンプルはまたしてもjsdo.itに上げました。 UIというこ
CSS Shaderで遊ぶ カテゴリ:CSSテクニック 2013年5月16日 09:25 久々の更新です。さらに、ものすごく久々にCSSのネタですw 今回はCSS Shaderについて触れたいと思います。 内容がだいぶ濃いので、徐々に調べながら何回かに分けて書いていこうと思っています。 CSS Shaderについて詳しく話すと膨大な量になる上に、そもそもそこまでまだ詳しくない(w)ので、今回はどんなことができるの? どうやるの? というのが分かる程度の記事にしたいと思います。 CSS Shaderとは CSS Shaderとは、CSSでOpenGL ES2.0のGLSL(シェーダ記述言語)を利用し、DOMを様々な形に変形、演出することができる仕様です。(ちなみにOpenGLのGLは「Graphic Library」の略) OpenGL ESはWebGLのシェーダ部分でも利用されているので、
【翻訳】シンプルJavaScript継承 カテゴリ:Javascript関連 2013年3月16日 10:00 更新履歴 [13/03/17] @hokacchaさんにいくつか指摘され、それを元に「今風」の書き方のものをアップしてみました。 だいぶ記事の更新がなくなっていて、久々の更新です。 最近ではHTMLやCSSを書く機会が少なく、もっぱらJSしか書いていません( ;´Д`) ということで、これからはJSネタが中心になりそうです。 さて、今回はjQueryの制作者であるJohn Resigさんが考案したシンプルなクラス風継承を実現するJavaScriptコードを紹介したいと思います。 さらに最近では英語を勉強しているので、彼のブログ記事の翻訳に挑戦しつつ紹介したいと思います。(本人の許諾を得ています) 原文はこちら シンプルなJavaScriptの継承 私はたくさんの仕事をしてきて、最
『ノンプログラマのためのJavaScriptはじめの一歩』を献本いただきました カテゴリ:雑談 2012年11月 4日 22:31 ピクセルグリッドの社員である @hokaccha さんに、11/7発売予定の『ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)』という本を献本いただきました。 中身を読んでみた感想をつらつらと書いてみたいと思います。まず最初に言っておくと、タイトルの通り「ノンプログラマ」向けの書籍です。 そのため、普段からJavaScriptを書いているような人にとっては若干物足りない書籍でしょう。ただ、「これからJSを学びたい」という人や「プログラムってなんだかむずかしいんでしょう?」と思ってなかなか手を出していない人にとってはとても分かりやすく、理解を助ける良書になると思います。 プログラムの基礎から解説 ノンプログラマのため
[Fixnel] iOS風スクロールを実現するライブラリを書いてみた カテゴリ:Javascript関連 2012年9月23日 17:38 iOS風スクロールライブラリ、名前は「Fixnel」 最近の案件で、ライブラリを使用すること自体がNG、というケースの案件があり、そういう場合でも対応できるよう、iOS風スクロールをさせるライブラリ を自前で書いてみた。発端がそういう状況なので、もちろんどのライブラリにも依存していない。このライブラリ単体で動作します。 ちなみに名前の由来ですが、hogehogeスクロール的なものはなんか色々出ているので、どうせならまったく違う名前を、っていうことと、"fix" と "panel" を組み合わせた造語になっていますw [デモ、詳細はこちら] [Downloadはこちら] GitHubページを初めて作ってみた さて、今回のライブラリはGitHubにて公開中
COLOPL FrontNightに登壇してcompassについて話してきました カテゴリ:登壇 2012年7月14日 16:21 compassを使って簡単! CSS3を手軽に利用する 最近めっきり更新できなくなっています( ;´Д`) 書きたいこととかは色々あるんですが、最近はJavaScriptしか触ってなくてJSの話ばかりになりそうな感じです。(まぁそもそも書く時間ないんですけどね) さて、昨日コロプラさん主催の「COLOPL FrontNight」というイベントに登壇してきました。フロントエンドエンジニア向けの実践的な話をするイベントでした。 自分が話した内容はcompass。compassを使うことでCSS3をとても簡単に、メンテナンス性もよく記述できる、というお話しです。 compassで簡単! CSS3を手軽に利用する View more presentations fro
CSSに関する本を執筆させて頂きました カテゴリ:執筆 2012年5月29日 10:00 「すべての人に知っておいてほしい スタイルシートデザインの基本原則」という本を執筆させて頂きました 最近めっきり更新が滞ってました・・。 さて突然ですが最近、すべての人に知っておいてほしい スタイルシートデザインの基本原則という本を執筆させて頂きました。 内容はCSSに関する書籍となっています(当たり前ですがw) そして自分が担当させて頂いたのは主に、HTML5の章とjQueryとCSSの連携についての部分になります。 具体的には「Chapter 6 これからのWeb制作〜HTML5の描く未来〜」全般と「Chapter 7 jQuery」の「7-02 jQueryとCSSの住み分けを明確にする」「7-03 jQuery animateを使って要素に動きを付ける」「Column Webアプリで使うjQu
ドラッグ&ドロップで要素を入れ替えるスマホ向けjQuery pluginを作った カテゴリ:Javascript関連 2011年12月31日 09:10 dragreplace.js とある案件で作る必要があったので、それをカスタマイズしてjQueryプラグインの形にしてみたのが今回作成したdragreplace.jsです。 できることはシンプルで、ドラッグ&ドロップで要素を入れ替えられるようにしました。ただ、主にスマホ(WebKit)で使うことを想定して作っています。 そのため動作はWebKitだけになっています。(transitionやtransformを使って操作しているため) pluginについてはgithubでも公開しています。 デモ jsdo.itでデモを公開しています。それを貼りつけたのがこちら↓ (WebKit系のみ対応しているので、WebKit系ブラウザでご覧ください)
sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する カテゴリ:sass 2011年12月20日 22:45 この記事はLess & Sass Advent calendar 2011の20日目として書いている記事です。 sassを使った繰り返し処理の基本 sassにはプログラム言語と同じような処理が存在します。 その中でも繰り返し処理をピックアップして、ちょっとめんどくさい処理を簡単にする方法をご紹介します。 単純な繰り返し処理 sassには繰り返し処理に使える文として、@each と @for があります。 JSなどではおなじみですね。 使い方も、他のプログラム言語のものと同じです。 @eachは指定したリストを順番に処理するもの、@forは指定した数値の間で繰り返し処理をするものです。 また繰り返しではありませんが、めんどくさい処理をまとめる、という意味で@function
HTML5でスマホをコントローラにするゲームを作ってみた カテゴリ:HTML5 2011年10月27日 09:00 Canvasゲームをカスタマイズ ゲーム自体は以前作ったものをそのまま使いました。 今回作ったスマホコントローラ版 http://edo-m18.me:9000/ 以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。 これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`) ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。 Node.jsを使って実装 今回、WebSocket部分はNode.jsを使って実装しました。 最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんw やはりサーバサイドとクライアント
CSS3なら簡単! アニメーションするリングメニューを作る カテゴリ:CSS3関連 2011年7月19日 07:40 jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。 ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。 ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。 デモ まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。 リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS テクニックの肝 今
CSSの色々なテクニックのサンプルとその解説をしています。
iOSのフォトビューワのような動きを実装するfrick-image.js カテゴリ:Javascript関連 2011年7月11日 09:34 JavaScriptライブラリ作りました 久々にJavaScriptライブラリを作ってみました。その名も「frick-image.js」。 まずは下のデモを見てもらうと、どんなものか分かると思います。ちなみに、アニメーションを実装しているのはFirefoxとWebKit系(iOS、Android含む)のブラウザのみになります。それ以外は、ドラッグ可能なことと、あふれた要素を強制的に定位置に戻す機能のみとなります。 iOSのフォトビューワのような動きを実装する - jsdo.it - share JavaScript, HTML5 and CSS 使い方 使い方は簡単です。写真を内包するコンテナになる要素(*A)と、その中に写真を含むボックスのふたつ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
次のページ
このページを最初にブックマークしてみませんか?
『CSS-EBLOG - (X)HTML+CSS/JavaScript Tips site.』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く