nakashimmer

郵政省の外郭団体でかたーい仕事の後インターネットの世界へ。
ソフトバンク→GeoCities JAPAN→Yahoo! JAPAN→SBI→ジョインベスト証券勤務。
現在は企業研修・自主講座・大学公開講座などでHTML5の講師。
日々受講生と、新しい発見に感動中。

【東京アプリ・ワークショップ】→ http://on.fb.me/tokyoAppWorkShop

簡単なコードで絵がかけるCanvas 2Dのクリエイターズサイト
【 canvasina 】→ http://canvasina.com

Works

CSSサンプル サンタ

  • 1916
  • 4

Japanese MOMIJI

フルスクリーンで御覧ください。 http://jsdo.it/nakashimmer/oeWi/fullscreen

  • 2864
  • 2

nakashimmer's profile

  • 2369
  • 1

放送大学の隠れキャラ「obake」をハロウィンにして描いてみた

  • 1954
  • 0

RhythmBox @WCC Q2 #3

Go to FullScreen ->> http://jsdo.it/nakashimmer/oFjD/fullscreen And click checkboxes freely with your mind, So YOU MUST FEEL COOL RHITHM & MELODY! Let's enjoy ! this application works on "SAFARI" or "CHROME" PC browser. How to use -> http://youtu.be/B8nwmKHKCUk I use audio API, web font API of HTML5

  • 11293
  • 24

12月のcanvas講座「聖なる夜にHTML5」

東京アプリ・ワークショップの12月のcanvas講座のサンプルです http://on.fb.me/tokyoAppWorkShop

  • 1341
  • 0

10月のcanvas講座 Jack-o'-lantern

10月31日は「ハロウィン」! 「Trick or HTML5?」HTML5しなきゃ悪さするぞ! http://atnd.org/events/32700 音声:びたちー素材館 http://www.vita-chi.net/sozai1.htm

  • 3010
  • 1

9月のcanvas講座 マリオのようなRPG

昔なつかしマリオを作ってみた。。。 と思ったら、 9月13日はマリオの日だったんですね(嬉!) 画面をクリックすればマリオが跳ねます。 コインをゲットすれば得点上がって大きくなり、 ドカンにぶつかれば減点で小さくなり。。 HTML5で作って見ませんか? → http://atnd.org/events/31564

  • 2445
  • 2

8月のcanvas講座 絵日記風「湘南海岸」

Web Creator's Contest Q the 2nd【vol.1】参加 http://jsdo.it/event/q/2nd/vol1 結果は残念でしたがFavボタンを押して下さった皆さま、本当にありがとうございました! 「夏を涼しく」するというお題から「湘南海岸」 ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ カモメも飛び交い、クジラも泳いでいます 夏の海で遊び、潮の風に吹かれ、波の音とともに、暑い夏を「涼しく」エンジョイしましょう しばらくすると、月と夜空と流れ星の美しさにうっとり… ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ・Chrome safafi推奨。横幅は1200px、海の音も聞こえますので、画面はフルサイズ&音量をあげてご覧ください。→ http://jsdo.it/nakashimmer/4dPd/fullscreen 【ちょとだけPR】お仕事案件お待ちしております。いやまじで、本気で・・・ → http://facebook.com/nakashimmer

  • 15218
  • 18

7月のcanvas講座「織姫と彦星と天の川」

7月の HTML5 canvas講座サンプルです。 http://atnd.org/events/30386 この「織姫と彦星と天の川」は、その講座で製作するWebページ・アプリのサンプルです。どうぞフルサイズでご覧ください。 http://jsrun.it/nakashimmer/akUG HTML5は文字のWebページを制作するだけではなく、このような描画も簡単にできます。 初心者でもOK。ぜひご参加ください。

  • 4253
  • 0

6月のcanvas講座「6月といえばかたつむり」

東京アプリ・ワークショップ 6月のcanvas講座で作成するアプリのサンプルです。 東京アプリ・ワークショップ 「Webでできる あたらしいなにか 探しにきませんか?」 http://on.fb.me/HTML5WorkShop

  • 1300
  • 0

5月のcanvsa講座「こいのぼり」

も~いくつ寝ると〜♪ じゃなくて、屋根より高いこいのぼり〜♪ 音楽は背比べですが、細かいことは気にせずに、 かしわ餅、たんと召し上がれ! スマートフォンをお持ちの方は、「コントローラ版」でお楽しみください。 http://jsdo.it/nakashimmer/uhyW ********************************************************** 5/4(金・祝)に、新宿文化センターで、HTML5 canvas講座を開催しました。このWebアプリは、そのサンプルです。 東京アプリ・ワークショップではHTML5講座開催中!⇒ http://atnd.org/users/37643

  • 5468
  • 3

4月のcanvas講座 インベーダゲーム

東京アプリ・ワークショップ4月のcanvas講座サンプルです http://on.fb.me/tokyoAppWorkShop

  • 4549
  • 1

2月のcanvas講座「バレンタインでHTML5」

東京アプリ・ワークショップ 2月のcanvas講座サンプルです

  • 1408
  • 1

1月のcanvas講座「初日の出にHTML5」

東京アプリ・ワークショップの1月の講座のサンプルです http://on.fb.me/tokyoAppWorkShop

  • 1357
  • 1

【桜姫】〜 SAKURA HIME 〜

桜の木に宿る「桜姫」 "Sakura Hime" dwells in the cherry tree 満月の夜 風に舞う桜の花びら 髪を揺らせて 何を想う Night of full moon, Cherry blossom petals dancing in the wind. Shaking the hair, What does She think? フルスクリーンでご覧下さい。 クリックすると花びらが…。 Please see in full screen. Many petals will dance out when clicked. バックミュージックや、花びらのグラデーション、 散り方、クリックによる花びらの増加、お月様、 そして桜姫の髪の毛、そして表情… 細かいディテールにこだわってみました。 Background music, the gradient of the petals, How to dance, the increase in petal by clicking, the moon, And facial expression, hair of Sakura Hime I tried to stick to fine detail. ----------------------------- Favボタンよろしく!! Please press "fav" button HTML5講座開催中!⇒ http://atnd.org/users/37643 音楽 TAM Music Factory (http://www.tam-music.com/)

  • 11677
  • 8

シンデレラ城の花火

私は個人事業主になって、4周年を記念してHTML5の無料講座を開催します。 このHTML5はその時のサンプルです。 http://on.fb.me/tokyoAppWorkShop HTML5講座開催中!⇒ http://atnd.org/users/37643

  • 2079
  • 0

HTML5でドラえもん

100年後の9月3日が誕生日なんですね!! http://on.fb.me/tokyoAppWorkShop

  • 2456
  • 2

Merry Xmas

2012/11/4に行う 八洲学園大学 公開講座用 HTML5サンプルです。 http://www.yashima.ac.jp/univ/extension/course/2012/08/html5.html

  • 1607
  • 2

夏はやっぱり風鈴でしょう!

夏の風物詩はやはり「風鈴」 チリンチリン、チリンチリン。 江戸風鈴を日本画調に描いてみました。 涼しくなったでしょ? フルスクリーンでどうぞ。 http://jsdo.it/nakashimmer/pv0Z/fullscreen 夏の暑さを表現するためにわざと明度を強めにしています。明度の高い画面で見ると明るすぎる場合がありますので、ご了承ください。実際の画面を動画にしましたので、ご確認ください。 http://www.youtube.com/watch?v=qjO33AVNkwQ&feature=share

  • 4088
  • 6

ピンボールゲーム

東京アプリ・ワークショップ主催「HTML5 canvas講座」でのアプリサンプルです フル画面でご覧下さい。 http://jsdo.it/nakashimmer/4R5B/fullscreen ※講座で制作するアプリは、画面は傾いていません。 ブラウザ:safari or chrome 東京アプリ・ワークショップ http://on.fb.me/tokyoAppWorkShop HTML5講座開催中!⇒ http://atnd.org/users/37643

  • 6610
  • 2

voice clock

use : chrome or safari。 image rights : http://www.civillink.net/fsozai/autumn.html#a1

  • 2328
  • 0

新入女子社員

  • 5475
  • 10

中央フリーウエイ的じゃんけんぽん

safariとchromeのブラウザで、「フルスクリーン」でお楽しみください。 遠近感のある画面が表示されるはずですが、もし平面的な画面のときは、ブラウザを変えてご覧ください。 http://jsrun.it/assets/e/s/4/W/es4WH.png ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 中央フリーウエイを走行しているっぽい3次元的なじゃんけんゲームです。 自分の手と同じ路線を走行してください。 そうすれば得点です。 時間は30秒。 何点ゲットできますか? ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 今回はcanvasは封印。 CSS3の持つ、なめらかな動きをお楽しみください。

  • 1824
  • 15

虫眼鏡

  • 2332
  • 1

CSS3サンプル メトロノーム

  • 1857
  • 0

スイス国鉄の時計モデルとそっくりのiPhoneの時計のような時計のデザインのetude

練習用。 元ネタはこちら http://www.gizmodo.jp/2012/11/ios_616.html シンプルだけど、とても考えられているデザインです。 0秒で分が切り替わる時、秒針が1.5秒止まるそうです。「stop to go」だとのこと。

  • 2457
  • 1

クリスマスツリー

12/9に八洲学園大学(横浜市)での公開講座で行う 「「HTML5」canvas集中体験講座 〜ホームページに、あなただけのオリジナルな絵とアニメーションを描きましょう。」 のサンプルです。 右の再生ボタン「▶」をクリックしてください。 詳細はこちら http://www.yashima.ac.jp/univ/extension/course/2012/09/html5canvas.html バックミュージックについては「Music Cafe」様に著作権があります。 http://homepage2.nifty.com/MImusic/

  • 3629
  • 4

position:absoluteで位置を指定した「氷」

  • 1199
  • 0

夏はやっぱりCSS氷。WCC Q2#1

製氷皿から氷を6つ。 こっそり食べちゃいましょう。 ソーダ味の氷だから。甘くて冷たいぞ! ひとくち食べると、ほら涼しげでしょ? フルスクリーンで御覧ください。 http://jsdo.it/nakashimmer/qyGb/fullscreen

  • 2197
  • 2

ピカチュウのようなもの

  • 1673
  • 0

まる子ちゃん

私が責任者をつとめている放送大学HTML5勉強会で、 メンバーの方からリクエストがあったので、 CSS3だけでまる子ちゃんを作ってみました。 CSS3は四角の角を丸くし、アニメーションすることができます。 また、三角形を作るのはボーダーを使っています。 作者:http://www.facebook.com/nakashimmer

  • 2376
  • 2

こいのぼり

  • 1200
  • 1

春の夜の櫻

HTML5 Canvasサンプル 音楽 TAM Music Factory (http://www.tam-music.com/)

  • 2389
  • 3

CSS3 で Mac Pro

ほしいなぁ、Mac Pro。。。 CSS3だけで作りました。HTMLも本体はdiv要素ひとつだけ。 ※chrome か safari でみてね

  • 1921
  • 2

CSS3 の box-shadow だけで「どっとマリオ」を作ってみた。

  • 2536
  • 0

CSS3で「ペチゾー(仮名)」を作ってみた

PHP技術者認定機構のマスコット「ペチゾー(仮名)」です。 とてもかわいらしいので、CSS3で作ってみました。(画像は一切使っていません。ついでにアニメーションも) 詳細は[PHP技術者認定機構](https://www.facebook.com/pages/Php%E6%8A%80%E8%A1%93%E8%80%85%E8%AA%8D%E5%AE%9A%E6%A9%9F%E6%A7%8B/134122379993080) すべての著作権はPHP技術者認定機構にありますのでご注意ください。

  • 2066
  • 0

太陽系のようなもの

safariは開発者メニユーを有効にして、「WebGLを有効」にチェックしてください また、フルスクリーンでご覧ください。 http://jsdo.it/nakashimmer/r93f/fullscreen

  • 2624
  • 3

一酸化炭素?

  • 900
  • 2

友達百人できるかな

  • 866
  • 0

ひな祭り

  • 826
  • 0

明日は雪だそうですので、雪。

  • 920
  • 0

Knight

新年あけましておめでとうございます

今年は午年。馬といえばチェスのナイト

ナイトを動かして全ての枠を開きましょう

ナイトはななめ2つ向こうにしか動けません

制限時間は30秒

用意ができたら画面をクリック!

音素材提供: http://www.tam-music.com/

  • 949
  • 2

exchange messages

  • 623
  • 0

もみじ

  • 1560
  • 0

放物線作ってたらスーパーボール。。ノミにも見えてきた

  • 936
  • 0

飛行石を作ってみた!バルス!

オリジナルはこちらで公開中 http://canvasina.com/

  • 1442
  • 1

サッカー日本代表、2014年ワールドカップブラジル大会出場おめでとう!

サッカー代表おめでとうございます! ということで、CSS3でサッカーボールを作ってみました。 ballというdiv要素に、s1~s5までの要素を配置しました。 sxの六角形は:beforeと:afterにborderで台形を作ったものをつなげています。 静止しているときはもうすこしボールらしくできたのですが、 動いているときのoverflow+border-radiusがうまくいかないので、 このような形になりました。 東京アプリ・ワークショップでHTML5の体験講座してます。 どうぞご参加ください。 https://www.facebook.com/tokyoAppWorkShop

  • 1440
  • 0

スイング

  • 882
  • 0

円グラフ

  • 683
  • 0

グラフサンプル

  • 2948
  • 0

nine

  • 858
  • 1

棒倒し法による迷路の作成

  • 1592
  • 0

オシロスコープ

  • 1646
  • 0

Animation en CSS3

CSS3でアニメーションを行うためのサンプル。 http://atnd.org/events/32702

  • 1600
  • 0

夏はやっぱりガリガリ君 WCC Q2 #1

おなじみのソーダ味のガリガリ君です。 CSSだけで作りました。 ソーダ、梨、いちごの3本あります。 フルスクリーンでどうぞ http://jsdo.it/nakashimmer/vDT7Z/fullscreen

  • 1816
  • 0

SPEC #5 合成を作ってみた!

SPEC vol.5にエントリー中。 ⇒ http://jsdo.it/event/spec/vol5 フルスクリーンでご覧ください。 ⇒ http://jsdo.it/nakashimmer/eWJE/fullscreen ・少々重いので、何度かリロードしてご覧ください。 ・既存ライブラリを使うのは他力本願的な感じがして好きではないので、自力で頑張ってみました(汗) ・気に入ってもらえたら右上の「Fav」ボタンをクリックしてください。よろしくお願いします! 音素材はこちら ⇒ http://www.senses-circuit.com 円陣ぐるぐるがおきにいり。いい動きでしょ? 私のFacebookはこちら ⇒ http://facebook.com/nakashimmer

  • 150045
  • 11

CSS3でアニメ サンプル1 MacDock風CSS

  • 871
  • 0

Skills

  • Wordpress
  • iOS Browser
  • Titanium Mobile
  • HTML5
  • CSS
  • CSS3
  • JavaScript
  • PHP
  • Perl
  • SQL

Hot tags

Categories

HTML / CSS / JavaScript