java script DOM の活用
前に作った脳トレプログラムでスキルが足りなくて妥協した部分が、先週習ったDOMを使うとできそうだったので、また挑戦。
＊秒数をリアルタイムで表示
＊1〜20まで順番にクリックしていく
＊順番が合っていれば、秒数の下にクリックした番号が追加されていく
＊特に制限時間は無いけど、なるべく急いでやると脳に良い
リベンジ
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <style> *{ padding :0; background-color:#000; font-size: 15px; font-weight:bold;} p{ margin:0; line-height:1em; padding:5px; text-align:center; cursor:pointer;} #time{ margin :10px 0 10px 50px; width :560px; text-align:center; font-size:50px; color :#f00;} #seik{ background-color :#333; padding :3px 3px 3px 45px; color :#fff; font-size :16px; margin :0px 50px; width :560px; text-align:left;} #main{ margin :0 0 800px 0;} </style> <title>java script 脳トレ</title> </head> <body> <div id='time'>0</div> <div id='seik'> </div> <div id='main'> <script type="text/javascript"> var c =["001","c44","111","fff","a20","349","fff","f00","444","00a","070","f70","e0e"]; var d =["a7f","faa","999","0a3","fee","fff","333","fff","ff0","bbf","bfb","feb","fdf"]; var e =["solid","double","groove","ridge","inset","outset"]; var z =1; var a =new Array(); var xx=7 , yy=5 ; for( i=0; i<xx; i++){ a[i] = new Array(); for( j=0; j<yy; j++){ a[i][j] = 0; }} function rnd(r){ return(Math.floor(Math.random()*r ));} for(i=20;i>0;i--){ repeat: for (;;){ x=rnd(xx); y=rnd(yy); if (a[x][y]==0){a[x][y]++;break repeat;}} x=x*80+50; y=y*80+140; f=rnd(15)+25; k=rnd(50)+335; dat ="<p id='"+i+"' style='position:absolute;top:"+y+"px;left:"+x+"px;" dat+="font-size:"+f+"px;" h=rnd(13); b=rnd(6); g=rnd(3)+3; dat+="color:#"+c[h]+";" dat+="border:"+g+"px "+e[b]+" #"+c[h]+";" dat+="background-color:#"+d[h]+";" dat+="-webkit-transform: rotate("+k+"deg);" dat+="-moz-transform: rotate("+k+"deg);'>" document.write(dat+i+"</p>");} var sk=""; document.onmousedown = function(){ for ( j=1;j<21;j++) { hant(j);}} function hant(j){ document.getElementById(j).onclick = function(){if(j==z){tik();z++;}} if (z==20){tik();z=0;clear();}} function clear(){ alert(i-1+"秒でした。"); clearInterval(time);} function tik(){ sk+=z+" ";document.getElementById("seik").innerHTML=sk;} i=1; time=setInterval(function (){ document.getElementById("time").innerHTML=i; i++; if (z>20){z=0;clearInterval(time);}},1000); </script> </div> </body> </html>
豆知識サイトのグルーバルメニューを jQuery で再現してみる
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel='stylesheet' href='style.css' type='text/css' media='screen,print'> <style> .list{ margin :20px 0 300px 20px;cursor:pointer; } dl dd{ margin :0px 0; width:173px;height:auto; } dt { color:#fff;line-height:24px;} body{ background-image: URL("b_images/0.jpg");background-color :#dfd;} .list dl{ margin :0 20px; padding :0;} .list dt{ line-hight:100px; background-image: url("http://xn--k7yw82bmua.com/b_images/kate.png"); background-repeat: repeat-x; margin :0 0 1px 0; border: 2px solid #393; border-top: 2px solid #8b8; border-left: 2px solid #696; width :173px; text-align :center; font-size :12px; font-weight:bold;} #memo dt{background-image: url("http://xn--k7yw82bmua.com/b_images/katem.png"); background-repeat: repeat-x;} #memo dt {font-size:10px;color:#050;} #memo dt a:hover{background-image: url("http://xn--k7yw82bmua.com/b_images/katemp.png"); background-repeat: repeat-x;} .list a{ display : block;text-decoration: none;padding:7px;} .list a:link { color :#fff;} .list a:visited { color :#fff;} .list a:hover { background-color :#5c5;} .mlist ul{ margin :0 2px;padding :0;list-style-type:none;} .mlist li{ background-image: URL("http://xn--k7yw82bmua.com/b_images/mame.png"); background-position: 8px 9px; background-repeat: no-repeat; width :173px; font-weight :bold; text-align :left; margin :0 -1px; padding :0; background-color :#beb; border :solid 1px #dfd;} .mlist a{ padding :11px 5px 5px 30px; display : block; color :#000; font-size :10px; text-decoration: none;} .mlist a:link { color :#030; font-weight:bold;} .mlist a:visited { color :#888; font-weight:normal;} .mlist a:hover { background-image: URL("http://xn--k7yw82bmua.com/b_images/mame.png"); background-position: 6px 8px; background-repeat: no-repeat; background-color :#8e8;} </style> <title>豆知識のまとめのグルーバルメニューをjQueryでやってみる</title> </head> <body> <div class='list'> <dl> <dt>トップ</dt><dd></dd> <dt>世界の偉人</dt> <dd> <div class='mlist'> <ul> <li><a href='http://xn--k7yw82bmua.com/ijin/ainstain.html'>アインシュタイン</a></li> <li><a href='http://xn--k7yw82bmua.com/ijin/ryouma.html'>坂本龍馬</a></li> <li><a href='http://xn--k7yw82bmua.com/ijin/edison.html'>トーマス・エジソン</a></li> <li><a href='http://xn--k7yw82bmua.com/ijin/teduka.html'>手塚治虫</a></li> <li><a href='http://xn--k7yw82bmua.com/ijin/brucelee.html'>ブルース・リー</a></li> <li><a href='http://xn--k7yw82bmua.com/ijin/leonardo.html'>レオナルド・ダ・ヴィンチ</a></li> <li><a href='http://xn--k7yw82bmua.com/ijin/stevejobs.html'>スティーブ・ジョブズ</a></li> <li><a href='http://xn--k7yw82bmua.com/ijin/oda_nobunaga.html'>織田信長</a></li> <li><a href='http://xn--k7yw82bmua.com/ijin/miyamoto_musashi.html'>宮本武蔵</a></li> <li><a href='http://xn--k7yw82bmua.com/ijin/Isaac_Newton.html'>アイザック・ニュートン</a></li> </ul> </div> </dd> <dt>音楽</dt> <dd> <div class='mlist'> <ul> <li><a href='http://xn--k7yw82bmua.com/music/bz.html'>B'z</a></li> <li><a href='http://xn--k7yw82bmua.com/music/mrchildren.html'>Mr.Children</a></li> <li><a href='http://xn--k7yw82bmua.com/music/tmn.html'>TM NETWORK （TMN）</a></li> <li><a href='http://xn--k7yw82bmua.com/music/xjapan.html'>X Japan</a></li> <li><a href='http://xn--k7yw82bmua.com/music/sazan.html'>サザンオールスターズ</a></li> <li><a href='http://xn--k7yw82bmua.com/music/exile.html'>EXILE</a></li> <li><a href='http://xn--k7yw82bmua.com/music/gackt.html'>Gackt</a></li> </ul> </div> </dd> <dt>漫画・アニメ</dt> <dd> <div class='mlist'> <ul> <li><a href='http://xn--k7yw82bmua.com/manga/drab.html'>ドラゴンボール</a></li> <li><a href='http://xn--k7yw82bmua.com/manga/wanp.html'>ワンピース</a></li> <li><a href='http://xn--k7yw82bmua.com/manga/lupin.html'>ルパン三世</a></li> <li><a href='http://xn--k7yw82bmua.com/manga/kin29.html'>キン肉マン</a></li> <li><a href='http://xn--k7yw82bmua.com/manga/hokuto.html'>北斗の拳</a></li> <li><a href='http://xn--k7yw82bmua.com/manga/cap_tsubasa.html'>キャプテン翼</a></li> <li><a href='http://xn--k7yw82bmua.com/manga/gundam.html'>機動戦士ガンダム</a></li> <li><a href='http://xn--k7yw82bmua.com/manga/doraemon.html'>ドラえもん</a></li> </ul> </div> </dd> <dt>スポーツ・格闘</dt> <dd> <div class='mlist'> <ul> <li><a href='http://xn--k7yw82bmua.com/supo/anton.html'>アントニオ猪木</a></li> <li><a href='http://xn--k7yw82bmua.com/supo/gatts.html'>ガッツ石松</a></li> <li><a href='http://xn--k7yw82bmua.com/supo/ochiai.html'>落合博満</a></li> <li><a href='http://xn--k7yw82bmua.com/supo/ichiro.html'>イチロー</a></li> <li><a href='http://xn--k7yw82bmua.com/supo/kingkaz.html'>三浦知良</a></li> <li><a href='http://xn--k7yw82bmua.com/supo/Mike_Tyson.html'>マイク・タイソン</a></li> <li><a href='http://xn--k7yw82bmua.com/supo/oh_sadaharu.html'>王貞治</a></li> <li><a href='http://xn--k7yw82bmua.com/supo/Darvish.html'>ダルビッシュ有</a></li> </ul> </div> </dd> <dt>お笑い</dt> <dd> <div class='mlist'> <ul> <li><a href='http://xn--k7yw82bmua.com/talent/takeshi.html'>ビートたけし（北野武）</a></li> <li><a href='http://xn--k7yw82bmua.com/talent/sanma.html'>明石家さんま</a></li> <li><a href='http://xn--k7yw82bmua.com/talent/tamori.html'>タモリ</a></li> <li><a href='http://xn--k7yw82bmua.com/talent/downtown.html'>ダウンタウン</a></li> <li><a href='http://xn--k7yw82bmua.com/talent/tonnerus.html'>とんねるず</a></li> <li><a href='http://xn--k7yw82bmua.com/talent/ucchannanchan.html'>ウッチャンナンチャン</a></li> <li><a href='http://xn--k7yw82bmua.com/talent/summers.html'>さまぁ〜ず</a></li> </ul> </div> </dd> <dt>映画</dt> <dd> <div class='mlist'> <ul> <li><a href='http://xn--k7yw82bmua.com/Movie/starwars.html'>スターウォーズ</a></li> <li><a href='http://xn--k7yw82bmua.com/Movie/backtothefuture.html'>バック・トゥ・ザ・フューチャー</a></li> <li><a href='http://xn--k7yw82bmua.com/Movie/shawshank.html'>ショーシャンクの空に</a></li> <li><a href='http://xn--k7yw82bmua.com/Movie/TITANIC.html'>タイタニック</a></li> <li><a href='http://xn--k7yw82bmua.com/Movie/SpiderMan.html'>スパイダーマン</a></li> <li><a href='http://xn--k7yw82bmua.com/Movie/Harry_Potter.html'>ハリー・ポッター</a></li> <li><a href='http://xn--k7yw82bmua.com/Movie/Pirates_of_the_Caribbean.html'>パイレーツ・オブ・カリビアン</a></li> </ul> </div> </dd> <dt>ゲーム</dt> <dd> <div class='mlist'> <ul> <li><a href='http://xn--k7yw82bmua.com/game/mario.html'>マリオブラザーズ</a></li> <li><a href='http://xn--k7yw82bmua.com/game/Dragon_Quest.html'>ドラゴンクエスト</a></li> <li><a href='http://xn--k7yw82bmua.com/game/FINAL_FANTASY.html'>ファイナルファンタジー</a></li> <li><a href='http://xn--k7yw82bmua.com/game/Pac_Man.html'>パックマン</a></li> <li><a href='http://xn--k7yw82bmua.com/game/puyopuyo.html'>ぷよぷよ</a></li> </ul> </div> </dd> <div id='memo'> <dt>豆知識メモ</dt> <dd> <div class='mlist'> <ul> <li><a href='http://xn--k7yw82bmua.com/c_memo/2012-07-12.html'>2012-07-12 豆知識メモ</a></li> <li><a href='http://xn--k7yw82bmua.com/c_memo/2012-07-13.html'>2012-07-13 豆知識メモ</a></li> </ul> </div> </dd> </div> </dl> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script> <script type="text/javascript" > $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("first"); $("+dd",this).slideDown("first"); }}); }); </script> </body> </html>
豆知識サイトのアクセス解析
epikhigh さんからリクエストがあったので、豆知識サイトのアクセス状況を公開します。
ここに画像を表示すると拡大しても文字が潰れて読めなかったので、リンク先に画像を置きました。
まず、ここ一ヶ月の日別アクセス数。
グラフは訪問者数です。
記事が増えるごとに順調にアクセスが上がって行き、更新ペースを落とした7月1日頃を境に徐々にアクセスが落ちてきています。
一瞬だけ急激にアクセスが伸びてる日は、一時的にアクセスが増えるだけでも検索エンジンの印象が良くなるかなと思って、ツイッターから誘導した影響です。
次に、一ヶ月分の上位の検索ワードです。
全体で 943 種と多いので、1ページ目の100件です。
上位の単独ワードはおそらく画像検索で上位表示していたものと思われます。
最高の「スパイダーマン」でも 238 で 8.818% と比率としては低く、検索のほとんどが月に1，2度しか検索されないような、細かな複合ワード等からのアクセスです。
・ガクト バツイチ 韓国人
・王貞治 実姉
・アインシュタイン サヴァン症候群
・ガッツ石松 切れる
etc.
最近サイトの内部の手直しはちょこちょこやっていたけど、新しい記事の更新を放置しすぎて、本日とうとう検索エンジンからのアクセスが100を下回りまってしまいました。
現時点で考えられる要因は以下の３点。
１．google 意外の検索エンジンを意識していなかった
⇒近々、先生に教わったyahoo対策を行う。
２．strong タグの多用
⇒昔の知識で strong タグを途中から使用していた。試しにタグを全て消してみたところ、ちょうどその日に先生からも strong タグはあまりよろしくない的な話・・・今日 Webマスターツールの検索クエリで確認すると最近ずっと下降気味だった表示回数が上向きに！
やはり strong タグの使い方が悪かったのか、かなり足を引っ張っていた模様。
３．更新頻度の極端な低下
⇒多分この影響が一番大きい。はじめ更新ペースを落としても2,3日に１ページは更新する予定だったのに、10日で2ページしか更新してないｗ
ネタが無いわけではないけど、前と同じペースでは更新できないし、でもほったらかしだと評価が下がる一方…
なので対策として、軽めの記事を頻繁に更新できる仕組みを作る。
作りたてのドメインなので、そもそも一時的な結果(Google Dance)だった可能性もあるけど、今出来る限りの事は全てやっておく。
ここ数日で行った事
・記事ページのタイトルとdescriptionと最初のｐタグを全部一致させた。
・最終更新日の日付を日本語表記から yyyy-mm-dd に変更した。
【追記】
「豆知識」という単語がページの中で意外と少ない（使えない）ので、●●豆知識だけじゃなくて、理想は全く豆知識を意図してなかった人からのアクセスもいっぱい集めて、辿り着いたついでで読んでもらう事。
最初から想定してたわけではないけど、画像からのアクセスがその典型。
イメージ検索が一般化してきたことからも、オリジナルの画像が作れる人にとって、今後大きなアクセス源になっていくのは間違いなさそう。
「ドラえもん」（おそらくほぼ画像）の表示回数は170,000回でした。
サイトの評価が下がってからは、同じ画像を使った別サイトの画像と検索結果が入れ替わった様子。
もしこれがオリジナル画像だったなら、多少順位は下がっても画像はそのまま残って表示は継続されたのでは？
因みにOS別アクセスはこんな結果。
Windows 54.936%
Android 18.97%
iPhone 14.357%
Mac 5.37%
その他 6.367%
スマートホンが多いのはわかるけど、 Android の方が多いのは意外だった。
まさか iPhone で見ると、レイアウトが崩れてるとか…（^^;
【HTML5課題20】
見出しをまとめて表示させなさい。
<body> <header> <hgroup> <h1>七夕</h1> <h2>日本五節句の一つ</h2> </hgroup> </header> <section> <h3>七夕の語源</h3> <p>「古事記」または、日本書紀に登場する。</p> </section> </body>
【HTML5課題19】
ブログのエントリー記事を表示させなさい。
<body> <header> <h1>カフェランチブログ</h1> </header> <article> <h2>7月1週目ランチ</h2> <p>ランチで人気の特製ロコモコ丼です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。</p> <p><img src="image/locomoco.jpg" width="450" height="338" alt="ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼。"></p> </article> </body>
【HTML5課題18】
文章を内容でわけて表示させなさい。
body> <header> <h1>クリスマスオーナメント</h1> <p>クリスマスツリーに飾られるオーナメントをご紹介します。</p> </header> <section> <h2>ツリートップ</h2> <p>クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されることもある。</p> </section> <section> <h2>クリスマスボール</h2> <p>光沢のあるボール型のオーナメントで、カラーが豊富。好みにあわせて選ぶことができる。</p> </section> </body>
