一日でここまで

プログラミング初心者の僕が24時間で頑張った結果をお見せしたいと思います。

http://yohawing.com/exp/blockbreak.html   こちらです。

JavascriptとHTML5のCanvasタグだけで、ブロック崩しを作ろうという試みの途中です。
全然できていない上に、ただ描いて動かしただけなのですが、これでも大きな飛躍の一歩です。

以下JSのソースです。

     <script src="jquery.js"></script>
     <script src="jcanvas.js"></script>
   <script><!--
ここではJQueryとjCanvasというJSライブラリを使っています。
どちらもコーディングを楽にするライブラリです。 
     var dx = 200;  //玉の初期x座標
     var dy = 450;      //玉の初期y座標
     var sw = 300;  //ステージの枠の幅
     var sh = 500;      //ステージの枠の高さ
     sw += 50 ;sh +=50;
     var absxy = 50;  //ステージの絶対座標
     var setx = 62.5;     //箱のx座標
     var sety = 100;    //箱のy座標
      var b = 1;   
      var d = 1;

マウスを動かすたびに座標が取得更新されます。これが結構厄介です。
     $(function(){
      $("canvas").mousemove(function(e){   //マウスの座標取得
            var axis = "マウスの絶対座標("+ e.pageX +","+ e.pageY +")";
            $("p").text(axis);
        });
    });

      var waku ={   //枠の描画
        strokeStyle:"#000",
        strokeWidth: 5,
        strokeJoin: "miter",
        x1:[absxy], y1:[absxy],
        x2:[absxy], y2:[sh],
        x3:[sw],y3:[sh],
        x4:[sw],y4:[absxy],
        x5:[absxy]-3, y5:[absxy]
    };

ブロックをただ書いているだけです。SetIntervalで毎ミリメートルで更新されます。
        $(function(){
        setInterval(function row(){
            do{
            $("canvas").drawRect({
              fillStyle:"#999",
              strokeStyle:"#f99",
              strokeWidth:3,
              x:setx, y:sety,
              width: 60,height:30,
              fromCenter: false
            })
            setx += 70;
            }while (setx < sw -60)
            };
           do{
            row();sety += 40;setx =62.5;
            }while(sety < 300)
        }
        });

    $(function(){
        $("canvas").mousemove(function(e){
            var mouseX = e.pageX - 400;
         $("canvas")
         .clearCanvas({
          x: 0, y:495,
          width:1000,height:10,
          fromCenter:false
         })
         .drawRect({
            fillStyle: "#F00",
            x: [mouseX], y:500,
            width:50,height:5
             })
    })
    });
ボールを描画して動かす関数です。 
変数を関数の外に持っていくことで、やっと動きました。
    $(function(){
	setInterval(function move(){
         $("canvas")
         .drawArc({
               fillStyle:"#eee",
               x: [dx], y: [dy],
               radius: 7
           })
         .drawArc({     //ボールの描画
              fillStyle: "#333",
              x: [dx], y: [dy],
              radius: 5
         })
         .drawLine(waku)

         if(dx < 55 || dx > 345){
          b *= -1
          dx += -b
         }else{
          dx += -b
         }
         if(dy < 55 || dy > 545){
          d *= -1
          dy += d
         }else{
          dy += d
         }

	},10);

    });
--></script>

なかなか、仕組みやルールを捉えるのが難しくて、24時間中手こずってました。
もっと効率良く学習したい気がします。

これからは、当たり判定という苦しい門が待っているはずなんですが、ここは諦めて別の作業に移りたいと思います。

 

未来のWeb人の最初のアウトプット

Index

  1. 最近の動向
  2. 世の中の動き
  3. 自分たちの世代がやらなきゃいけないこと
  4. まとめ

最近の動向

自分は昔からWebの世界はかなり好きで、小学校の時にはじめてWebの世界に触れた時からその魅力に取り憑かれて幾多もの眠れない夜を過ごしました。

ゲームに始まりP2Pファイルシェアリングを経てSNSやブログなど、何でもござれのあらゆる物を試し失敗し学び、また失敗の繰り返しの日常を繰り返してきました。高校時代では、簡易的な自宅サーバーを立てて、iframeをバリバリ使ったしょうもないWebサイトを作ったりしていました。

そこには、興味関心である程度形だけは作るが、いざ運用を始めようとするとアイデアも技術もメッセージもなく、ただ作り終えた時点で興味を失ってしまう自分がいました。しかし、その興味関心の力はとても強いもので何日もの間、自分をPCの前に居据させ続けたのです。

その興味関心の力が大学生になった今ごろに復活してきました。

きっかけは、学校の授業でひとつのWebサイトを作ったことです。企画のアイデアから制作までほぼすべて一人で行った。いままで作った中二臭いデザインではあったが、勉強しながら、徹夜しながらものづくりの楽しさを体感しました。

この事がきっかけになって、興味関心の力は爆発した。片っ端からWeb系のRSSを購読し始めたり、Web広告の面白い事例を片っ端から見つけては体験していき、本屋でも知識を吸収しました。やがて、これからの時代で新しいことをやっていこうとするのなら、Webの技術は絶対に必要不可欠なものだという確信が得られました。

いつからか終焉に向かいつつ有る雑誌メディアを復興させることに24時間頭を悩ませることよりも、21世紀という新しい時代にどんな未来を提示するかを30時間考えるほうが楽しい!と感じました。

かつてまであったDTPへの興味が一気に薄れたからといって、ずっと好きだった雑誌に興味が無くなったのではないのですが、興味関心のベクトルが完全に移ってしまったのです。そして、自分が将来やりたいことを考えて逆算した結果、プログラミングの技術が必要不可欠という事が分かりました。

iPhoneアプリにしろHTML5にしろプログラミングが論理的に打てないと、使える人材としての評価はもらえないだろうという気がしました。確実に修得したい言語としてJavaScriptに絞って、この夏はプログラミング習得に向けて頑張っては居ますが、1/6の夏休みが経過した今、なんとなく基礎がわかってきた程度です。ペースを上げて行かないとやりたいこともできない気がします。 と焦っているのが今。

世の中の動き

自分の情報発信の中心がブログや自作サイトからSNSへと変わってきた今、僕も段々とSNSに依存する傾向に成っていった。周りもミクシィを始め、Twitterになだれ込み、Facebookが熱いと言うようになりました。

より、普段つながらない人間の本質が見えてきて、発言をめぐる反論や険悪感も少しづつ漂い始めてきた。いままでネットの世界に触れたことがあまり無かった人間でも、人のつながりによってネット社会(SNSへと連れ込まれ)3G回線に依存しがちな社会になっていった。その結果、情報に振り回されている人を正しい方向に向かわせて行かないといけない時代だと強く思ったりした。

某3.11東日本大震災発生からの数日間、日本のSNSは大混乱へと陥りました。情報は震災の情報しか流れず、無関係の発言は”不謹慎”と罵られ、一方では間違った情報やデマが流れてゆき、それに踊らされた人たちが間違った注意を呼びかける書き込みが相次ぎました。

その混乱の中、名を上げるチャンスとばかりに活動をする人が後を立たず、”被災者のためTwitterをつかって~~”というサービスが僕の知っているだけで4つも出来た。仕組みは簡単だが、取り上げるメディアは多くその狙いは功を奏す事となりました。

その一方では、SNSやWebサービスによる安否確認が人々の心のよりどころになりました。身の上話ですが、今回の震災で僕の叔母さんの家が津波にながされてしまう事となったのですが、その家庭は壊されはしませんでした。人は強いし、何度でも立ち上がると思います。

しかし、情報に踊らさせて混乱してしまう人々の姿がWebを介して浮き彫りになってしまうという現実を見た気がします。

技術の面から見れば、最近の流れは非常に熱いものを感じます。HTMLの規格が4から5に変わりFlashにも勝るとも劣らない機能をブラウザは得ました。世の中のプログラマーはこぞって開発を始め、この規格の黎明期の功績を残そうと四苦八苦しています。

その中で、よりJavascriptの優位性が評価され、SteveJobsは”Flashは終わるコンテンツ”だと言い放ちiOSに頑なに組み込むのを拒否している。やがて Flash版 と HTML版 の表記があるサイトではHTML版を選んでも同等のクオリティを保てる時代が来るのかも知れません。

高級でリッチでインタラクティブなコンテンツはFlashで、ユーザービリティに優れる扱いやすいコンテンツはHTML5に変わっていくものと思います。画像などのカッコイイスライドショーをコピーペーストだけで誰でも簡単に導入できるのも、JavaScriptの優位性といえるでしょう。

また、GoogleEarthのマッピングやSNSのAPI取得などを生かしたコンテンツが増えてきています。既存のコンテンツや情報を生かして再編集できる技術ももはやトレンドになってきているし、TwitterのAPIからつぶやきなどの情報を取得してGoogleEarth上にマッピングする技術も簡単に行えるようになってきています。

これは、すこしプログラミングをかじったことのある人なら簡単に導入できる技術ではあり、そのアイデアから生まれる作品は眼を見張るものが多い。これはただ、技術的に新しいから評価されているのではあるが、3.11の様な事件のおかげで爆発的な普及を見せたのが最近の例である。

自分たちの世代がやらなきゃいけないこと

すこし長くなったが、自分たちの世代では何を具体的にやらなければいけないのかを考えてみることにする。

これからの時代は超情報化社会になると言われていて、情報弱者は切り捨てられ、高い情報収集能力とそれを活かす技術力が鍵となってくる時代です。また、デザインも重視される時代になってきており、シンプルで洗練されていることのが一つのユーザービリティを追求した答えとなっています。

iPhoneやiPadの成功によりAppleの信頼性が増し、これからはMacintoshが人気になる時代になっていくと思うし、また、知識や思慮に長ける意識の高い学生は、ネットサービスに多大な感心を示していて、Webサービスを利用しての学生起業がところどころ目立ってきています。

日本の古い企業体質も問題視されるようになってきていて、盛んに英語力の必要性が促されている。日本は問題ばかりで息が詰まる。そんな中僕達は生きていかなければいけません。良識のある知識人が批判するように、日本の企業のあり方は問題が山積しているから駄目だ!という意見に成るのも良し、 非常に合理的で確実性に富んでいる企業の現在の体質に甘えて、一生を約束される非常に福利厚生が良い会社に飼われるかを選ぶ権利があります。

ここまで書くと、情報強者で英語ができてMacを持っててWebで起業していかなきゃいけないとなるが、全くそうではなです。しかし、世の中で革新的なサービスをより多くの人に伝えたいと思うのなら、Webのメディアは避けては通れない時代になっていくと思う。

個人的な意見ではあるが、お金を儲けられるスキルランキングをつけてみた。

1,圧倒的な才能のあるひと  2,頭のいい人 3,技術のある人 4,真面目な人    5、体力のある人

これを考える度に、自分はどこにも当てはまらないようにしか思えなくて落ち込むのですが、やはり世の中は頭のいい人が強いなと常々思います。就職難だ学生の質の低下だ騒がれている世の中で、儲けたかったらやはり頭を良くして行かないと賢く生きて行けないなと思ったり。

2011年夏現在、僕はApplim+というソーシャルアプリのビジネスコンテスト に参加していて、次世代ののソーシャルアプリの可能性を探っている所である。
今は手探り状態で、画期的な成功例の乏しいソーシャルアプリ市場に新しい風を吹き込めればこれからの時代を牛耳っていくのも不可能ではない。

いつの時代も結果の出せる人間が評価されるのだと思います。

■4 まとめ

すべて正しい情報で書いている訳ではないので説得力に欠けるのがネットの情報であり、この記事ももちろん例外ではない。ですが、間違った情報でも人は動かされることがあるのがネットです。自分にも言えることだが、必要に応じて情報の取捨選択をしてムダで不正確な情報は切り捨てる心がけが必要だと思います。

これからの時代のWebの技術の必要性を延々と説いてきましたが、僕が実現できている事は一つも無いと言っても過言ではないです。

そんなこんなで、この夏で一皮むけられればいいかなと思っています。そうです。僕は意識が高いのです。

 

Introduce

Gniwahoy

Webデザインを学ぶ学生のブログ

年齢:二十歳
性別:男

首都大学東京在学
広告/デザイン/ Web/マーケティング

独り言的に情報発信をしていくつもりです。