東映ヒーローワールドがメッチャ楽しい
東映ヒーローワールドに行ってきました。東映ヒーローワールドはイオンモール幕張新都心にあります。ネズミの夢の国の近くで挑戦的な取組。
スマホの広告によく出てくる漫画で面白いものランキング
スマホの広告によく漫画出てきますよね。
こういうやつです。
たいてい、エロかったり衝撃的だったりするものが多い。
私が、思わず購入してしまって読んでしまったものランキングです。
結果としてまんが王国ばっかになってしまった。電子書籍のリンクも貼っておきます。
1位 女神たちの二重奏
まんが王国 - 女神たちの二重奏 - 花小路ゆみ,の漫画を無料で試し読み
女神たちの二重奏 - ニコニコ静画 (電子書籍)
これは普通の広告ですが、確かエロい広告もあったはず。
すごくエロそうなのですが、ぶっちゃけ変態な男が出てくるだけで割とストーリーはトンデモで面白いです。
小町に投稿したら「ありえない」と一蹴されるでしょう。
主人公は本当にその男で良いのか??????と疑問。
あと全10巻もあります。長いです。
2位 愚者の皮
まんが王国 - 愚者の皮 - 草野誼,の漫画を無料で試し読み
愚者の皮 - ニコニコ静画 (電子書籍)
これも衝撃的な広告。
途中ネタバレになりますが修行?をして毒を出したら顔が元に・・・・というのがあったりとこれもトンデモ展開です。
最後はあれで死なないのも不思議だし、舐めても平気なの?えっ????と疑問。
上下巻なので読みやすいはずなのに、読むとどっと疲れます。
3位 児童福祉司 一貫田逸子
まんが王国 - 児童福祉司 一貫田逸子 - さかたのり子,穂実あゆこ,の漫画を無料で試し読み
- 作者: さかたのり子,穂実あゆこ
- 発売日: 2014/11/27
- メディア: Kindle版
- この商品を含むブログを見る
Kindleかまんが王国で読むしかない!!(ステマっぽい)
まんが王国で課金して読んだので、お金がかかりすぎて、気になるストーリーしか読んでないのでKindle買おうか悩んでます。
内容は普通に考えさせられる漫画です。
4位 は?これって私の彼氏?
まんが王国 - は?これって私の彼氏? - 白雪,雪人,の漫画を無料で試し読み
は?これって私の彼氏? - ニコニコ静画 (電子書籍)
は?これって私の彼氏?
これ、モバスペbookなんですが原作の携帯小説が面白いです。
今時の子はこの展開でいいんだ・・・とおばちゃん衝撃だわー・・・
携帯小説サイトでこういうことってよくあるのかしら。(ねーよ)
5位 ハッピートラブル・うえでぃんぐ
広告見つからなかった・・・
「下町のコロッケ屋で働く女の子が突然セレブに・・・?」みたいなやつだったと思う。
ハッピートラブル・うえでぃんぐ - ニコニコ静画 (電子書籍)
ハッピートラブルどころか、マジでトラブルしかない。
ツッコミ所だらけ。全8巻もあって長いので頑張ろう!
途中からコロッケ屋のエピソードとかどうでもよくなるよ!
他にもあった気がするけど、思い出せないのでいったんここまで。
ここまで振り返って思ったけどスマホの漫画広告、本当に良く考えられて作られてます。
だいたい漫画読んだら内容裏切られるしね。
あとよくエロ系ですごーく良く出てくる
電子貸本Renta! - 保護者失格。一線を越えた夜
これも内容気になるのですが、読んだ人がいたら教えてください。
gleeシーズン4が面白い
シーズン4、全部見終わりました。
glee/グリー シーズン4 DVDコレクターズBOX (日本オリジナル・フォトブック付)
- 出版社/メーカー: 20世紀フォックス・ホーム・エンターテイメント・ジャパン
- 発売日: 2013/11/02
- メディア: DVD
- この商品を含むブログを見る
- シーズン3までのメインキャラ達が卒業してしまったのであんまり出てこない
- 新キャラが大量に入ってきた
- ドラマとしても、あんまり進展がない
まぁ、全部事実ですね!特にメインキャラが卒業+メインキャラにそこまで進展がないのは確かに寂しいかも!
でもでもシーズン4面白いよ!ちなみにこのブログで取り上げた動画はネタバレっちゃーネタバレだけど見てもストーリーにそこまで影響ないよ!
みんなで歌う曲が多い
今までは、レイチェルとかカート、メルセデスがメインで歌い、他のメンバーはサブ(エピソードによってはメイン)でしたが、シーズン4は毎回最後にみんなで歌うので楽しい。サムやアーティの声もステキだなって気づけた!あと、どんなに話がシリアスでも何故か最後の歌はみんなニコニコで歌っているので、ドラマを見終わった後「はーなんかギスギスしてた事もあったけど最後は笑顔で良かった!」と思えるのがいい。
Some Nightsが最高です。
Glee - Some Nights (Full Performance) - YouTube
新キャラ(キティ)がいい
シーズン途中の新キャラということで、声質が考えられて構成されている(と思う)のでハモりがステキなんすよ!
特にキティがキャラクターも歌声もちょっとハスキーで良いです。
上のSome Nightsでもマーリーと肩を組んで歌っているんだけど、ニコニコして歌ってて見えないとこでチラッと「はーうんざり」って顔するのいいよね。
GLEE - Everybody Talks (Full Performance ...
今話題の「Let it go」のIdina Menzelだって出演してるよ!
今日DVD/ブルーレイ発売日ですね。
【Amazon.co.jp限定】アナと雪の女王 MovieNEX (オリジナル絵柄着せ替えアートカード付) [Blu-ray + DVD]
- 出版社/メーカー: ウォルト・ディズニー・ジャパン株式会社
- 発売日: 2014/07/16
- メディア: Blu-ray
- この商品を含むブログを見る
Disney's Frozen "Let It Go" Sequence Performed ...
やっぱりこの二人は親子役がしっくりくるレベルでデュエット最高!
イディナメンゼル話はずっと出来るので省略!
GLEE - Next To Me (Full Performance) (Official ...
ドラマとして進展はぶっちゃけない!
でも、キャラクター達が相も変わらずくっついたり離れたりウダウダしてるのがアメリカドラマだろ!!!
ってことで、シーズン5を見るためにFOXに加入するか悩む日々です。
シーズン5、youtubeの動画見るだけで泣ける・・・・!もう1年か・・・・
JavaScript本格入門を読む・11(最終回)
はー最終回。感慨深いですなぁ
クロスドメイン環境でAjax通信を行う
$(function(){ $('#disp').click(function(){ $.getJSON( 'http://b.hatena.ne.jp/entry/jsonlite/?callback=?', {url:$('#url').val()}, function(data){ $('#count').html(data.count); for (var i =0; i<data.bookmarks.length; i++){ var bm = data.bookmarks[i]; $('result').append( $('<li></li>').append( $('<a></a>') .attr('href', 'http://b.hatena.ne.jp/' +bm.user) .html(bm.user + '' +bm.timestamp) ) ); } } ); }); }); (中略) <form name="fm"> <label>URL: <input type="text" id="url" name="url" size="50" value="http://www.nicovideo.jp" /> </label> <input type="button" id="disp" value="検索" /> </form> <hr /> <span id="count">-</span>件ブクマされています。 <div id="result"></div>
確かにクロスドメイン処理?はしなくてすんだけど、書くの緊張するのかわりない。
あと閉じカッコおおすぎやで・・・数何回も数えてしまった・・・
9-3.jQuery UI/jQueryプラグインを活用する
アコーディオンパネルを実装する
えと、まずはjQueryUIをゲットしないとか。
Download Builder | jQuery UI
$(function(){ $('#accordion').accordion({header:'h3'}); }); (略) <div id="accordion"> <div> <h3><a href="#">ニコニコ動画</a></h3> <div>動画を見てコメントをつけて楽しむ</div> </div> <div> <h3><a href="#">ニコニコ生放送</a></h3> <div>コメントでリアルタイムに繋がる</div> </div> <div> <h3><a href="#">ニコニコ静画</a></h3> <div>静止画で遊べる</div> </div> <div> <h3><a href="#">ニコニコチャンネル</a></h3> <div>3,000ch以上の公式動画</div> </div> <div> <h3><a href="#">ニコニコアプリ</a></h3> <div>厳選されたゲームが基本無料で遊べる</div> </div> <div> <h3><a href="#">ニコニコ大百科</a></h3> <div>みんなでつくる百科事典</div> </div> </div>
あこーでぃんぐ
うpしてみた。これはいいですな!!!かっこいいですぞ!!!
しかもすごい簡単になった。昔こういうのをひたすらif文で書こうとしてたなー
こんな便利なものがあるなんて。
ユーザー入力の検証機能を実装する
えーとまずはjQuery Validationをゲットせねば。
jQuery Validation Plugin | Form validation with jQuery
こういうプラグインを色々いれることで簡単になるのねー
$(function() { $.validator.addMethod('regex', function(value, element, param) { var r = new RegExp('^' + param + '$', 'gi'); return r.test(value); }, '入力値が不正な形式です。' ); $('#fm').validate({ errorClass : 'valid-error', rules : { 'isbn': { required : true, regex : '978-4-[0-9]{2,5}-[0-9]{2,5}-[0-9A-Z]{1}' }, 'title' : { required : true }, 'price' : { range : [1000, 10000] }, 'publish' : { maxlength : 30 }, 'published' : { dateISO : true } }, messages : { 'isbn' : { required: 'ISBNコードは必須です。', regex: 'ISBNコードの形式が不正です。' }, 'title' : { required : '書名は必須です。' }, 'price' : { range : jQuery.format('価格は{0}~{1}の範囲で入力してください。') }, 'publish' : { maxlength : jQuery.format('出版社は{0}文字以内で入力してください。') }, 'published' : { dateISO : '日付の形式が不正です。' } } }); }); (中略) <form id="fm"> <label>ISBNコード: <input type="text" id="isbn" name="isbn" size="25" /></label><br/> <label>書名: <input type="text" id="title" name="title" size="50" /></label><br/> <label>価格: <input type="text" id="price" name="price" size="5" /></label><br/> <label>出版社: <input type="text" id="publish" name="publish" size="15" /></label><br/> <label>配本日: <input type="text" id="published" name="published" size="15" /></label><br/> <input type="submit" value="登録" /> </form>
ばりてーしょん
うぅ・・・これも成功するまで長かった・・・
でも最後だし、頑張りました・・・・
☆直しかた
・ChromeのJavaScriptコンソールでエラー内容を見る
・jsの指定を絶対パスにする(相対パスにしない)
ってことで、今回のは私がうpしたjquery.validate.jsが最新だったために動かなかったみたい。
(サンプルのjquery.validate.jsをうpしたら動いた)
そんなのわからないやい!
JavaScript本格入門を読む・10
Ajaxアプリケーションで構造データを扱う
昨日モヤモヤしてたけど、yahoo周りは本を読むだけにして、JASONPのほうは書くことにしました。
入力された値をもとに問い合わせURLを作成し、その結果をXMLデータとして出力する
これがね、やりたかったんだけどね・・・
JSONデータを扱う
・eval関数を利用すれば、そのままオブジェクトとしてJavaScriptのコード内で利用できる
・XMLに比べるとデータサイズをおさえられる
クロスドメイン環境でAjax技術を実装する
よし、はてなのほう書くぞ。
http://b.hatena.ne.jp/entry/jsonlite/?callback=show&url=http%3A%2F%2Fwww.nicovideo.jp
まずはこれではてながどのような情報を返すのか見る。
function search(){ var url = 'http://b.hatena.ne.jp/entry/jsonlite/?callback=show&url=' + encodeURIComponent(document.fm.url.value); var scr = document.createElement('script'); scr.type = 'text/javascript'; scr.src = url; document.getElementsByTagName('body').item(0).appendChild(scr); } function show(data){ var count = document.getElementById('count'); var result = document.getElementById('result'); result.innerHTML = ''; if(data == null){ count.innerHTML = 0; } else { count.innerHTML = data.count; var ul = document.createElement('ul'); for (var i=0; i<data.bookmarks.length; i++){ var li = document.createElement('li'); var anchor = document.createElement('a'); anchor.href = 'http://b.hatena.ne.jp/' +bm.user var text = document.createTextNode(bm.user + '' +bm.timestamp); anchor.appendChild(text); li.appendChild(anchor); ul.appendChild(li); } var result = document.getElementById('result'); result.appendChild(ul); } } (中略) <form name="fm"> <label>URL: <input type="text" name="url" size="50" value="http://www.nicovideo.jp" /></label> <input type="button" id="disp" value="検索" onclick="search()" /> </form> <hr /> <span id="count">-</span>件、ブクマされています。 <div id="result"></div>
ひゃっほーすごい。
なんか今までの集大成ってかんじ!むしろspan久々に書いたw
これがスクリプトタグで読み込んで処理できるなんてすごい・・・すごいよ!
9.jQuery
ついにやってきたぞ最終章!(何故なら「10.現場で避けて通れない応用知識」は現場に出ないのでいらんだろ、って思って////)
えーと、まずはjQueryをダウンロードするのか。
Download jQuery | jQuery
どれダウンロードすればいいかわからなくて色々ぐぐってしまった・・・
とりあえず2.1のminiでいいのかな。
条件に合致したデータを抽出する
<div id="list"> <table border="0"> <tr> <td><img src="http://ch.res.nimg.jp/img/system/blog/ch2526250.jpg" height="160" width="120" /></td> <td><img src="http://ch.res.nimg.jp/img/system/blog/ch2567654.jpg" height="160" width="120" /></td> <td><img src="http://ch.res.nimg.jp/img/system/blog/ch2584861.jpg" height="160" width="120" /></td> <td><img src="http://ch.res.nimg.jp/img/system/blog/ch2581686.jpg" height="160" width="120" /></td> <td><img src="http://ch.res.nimg.jp/img/system/blog/ch1254.jpg" height="160" width="120" /></td> <td><img src="http://ch.res.nimg.jp/img/system/blog/ch65001.jpg" height="160" width="120" /></td> </tr> </table> </div> (略) $('#list img').animate({width:240, height:320}, 3000)
な なんじゃこりゃーーーーー
1行しか書いてないよ!?うそっ いつものgetElementByIdをせこせこ書くのはどうしたんですかーーーー
jQueryすごすぎじゃない!?すごい・・・上のはなんだったんだってくらいすごい・・・
ちょっとここ数ヶ月で1番感動したわ。
興奮しすぎてアップしてみた。
ブロマガ動くよ
複数のメソッドを続けて呼び出す
<select id="channel"> <option value="video">ソードアート・オンラインⅡ 第1話「銃の世界」</option> <option value="blomaga">MSSPブロマガ</option> <option value="video">美少女戦士セーラームーンCrystal Act.1 うさぎ-SAILORMOON-</option> <option value="blomaga">ニコニコゲーム実況チャンネル ブロマガ</option> <option value="video">アルドノア・ゼロ 第1話「火星のプリンセス」</option> (中略) $('<option></option>') .attr('value', 'js_master') .text('redcat1113の秘密の部屋') .css('background-color', '#FFff00') .appendTo('#channel');
CSSが動かないーと思ったらローカルだったからか。アップしたら動きました。
チャンネルだよ
<select id="channel"> <option class="video">ソードアート・オンラインⅡ 第1話「銃の世界」</option> <option class="blomaga">MSSPブロマガ</option> <option class="video">美少女戦士セーラームーンCrystal Act.1 うさぎ-SAILORMOON-</option> <option class="blomaga">ニコニコゲーム実況チャンネル ブロマガ</option> <option class="video">アルドノア・ゼロ 第1話「火星のプリンセス」</option> </select> (中略) $('#channel'). find('option.video').css('backgroundColor', '#66ccff').end(). find('option.blomaga').css('backgroundColor', '#ccffcc');
こっちもアップ。
チャンネル2だよ
イベントリスナを登録する
$( function(){ $('#btn').click( function(){ window.alert('ボタンがクリックされたよ'); } ); } ); //--> (略) <input type="button" id="btn" value="ダイアログ表示"/>
イベントリスナのクロスブラウザ対応もjQueryがブラウザ間の仕様差を吸収してくれるんだって!
ほんと、jQueryがいいこすぎてやばいわ・・・
jQueryでAjaxを実装する
またyahooJSONなのでここは読むだけ。やっぱすっきりしたなー
サーバからの応答をそのままページに反映する
おおまたPHPか・・・id:fukkenに教えてもらった
PHP IDE :: JetBrains PhpStormこれをいれたぞ!
<?php require_once 'magpie/rss_fetch.inc'; define('MAGPIE_OUTPUT_ENCODING','UTF-8'); define('MAGPIE_CACHE_ON', TRUE); $rss = fetch_rss($_REQUEST['url']); mb_convert_variables('UTF-8', 'auto', $rss); print('<ul>'); foreach($rss->items as $item){ $pub = $item['pubdate']==null ? $item['dc']['date'] : $item['pubdate']; ?> <li> <a href='<?php print($item['link']); ?>'> <?php print($item['title']); ?></a> (<?php print(date('Y/m/d',strtotime($pub))); ?>) </li> <?php } ?> </ul>
PHP。やっぱりサジェストありがたいけど、=周りが苦手
$( function() { $('#disp').click( function() { $('#result').load('rss.php', $('form').serializeArray()); } ); } ); (中略) <form> URL: <input type="text" name="url" size="50" value="http://www.wings.msn.to/contents/rss.php" /> <input type="button" id="disp" value="読み込み" /> </form> <hr /> <div id="result"></div>
RSSフィード
そして動かないわけだよね。
diffって直しても動かない・・・
なんか昨日もだけど、同じディレクトリにあるファイルを読みにいってないような気がする・・・
つまりは私がジオシティーズの配置を間違っているのではないだろうか。
がーん。道のりは険しいぜ。
今日はここまでにしておくか。
たぶん明日が最後。
JavaScript本格入門を読む・9
Ajax
今日からAjaxです。
私のAjaxの認識は言葉がかっこいい、程度です。
8-1.Ajaxとは
<form method="POST" action="hello.php"> 名前: <input type="text" name="name" size="15" /> <input type="submit" name="submit" value="送信" /> </form> <?php if($_REQUEST['submit'] != null) { sleep(3); print('こんにちは、'.$_REQUEST['name'].'さん!'); } ?>
まずはPHPでって・・・PHPなんて新入社員研修でやった以来ですよ!つまりは6年前!ひどい!
PHPになったとたん、webstormちゃんがサジェストしてくれなくなっちゃったしPHPのエディタを何か別にいれろとか言ってくるし・・・
まーた半角スペースでまごまごしちゃったからな!?(早く覚えろよ)
しかもさー確認のためにアップロードしようとしたらPHPファイルって無料でアップロードできないんだって!!!
そんなん知らなかったよ・・・しょうがないからジオシティーズプラスってやつ月額540円で加入したよ・・・
(ここでジオシティーをチョイスするあたりが古いインターネットの匂い)
来月退会しよう。なので下記のURLはきっとアクセスできなくなるでしょう。
hello
すごいこの程度のPHPすらアップロードできないなんてPHP怖い・・・
function getXHR() { var req; try { req = new XMLHttpRequest(); } catch(e) { try { req = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { req = new ActiveXObject('Microsoft.XMLHTTP'); } } return req; } function asyncSend(){ var req =getXHR(); req.onreadystatechange = function(){ var result = document.getElementById('result'); if (req.readyState == 4) { if (req.status == 200) { result.innerHTML =req.responseText; } else{ result.innerHTML = "サーバーエラーが発生しました"; } } else{ result.innerHTML = "通信中・・・"; } } req.open('GET', 'helloworld.php?name=' + encodeURIComponent(document.fm.name.value), true); req.send(null); } (中略) <form name="fm"> <label>名前: <input type="text" name="name" size="15" /></label> <input type="button" name="submit" value="送信" onclick="asyncSend()" /> </form> <div id="result"></div>
こっちhtml。下がPHP
<?php sleep(3); print('こんにちわ、'.$_REQUEST['name'].'さん!');
Hello,World
何回diffってもエラーになるし、サーバーエラーになる・・・・
何がいけないの・・・
もうずっと色々やってるんだけどうまくいかない・・・
もうやだ・・・
もうやだ!!!
次はAjaxアプリケーションで構造データを扱う、なんだけど既にここで躓いているのに出来る気がしない。
あとyahooウェブ検索webサービスはもう動かないらしい。
書評 JavaScript本格入門 function前の init: って何? - ScriptWorks.JP
つまり、今まで本の通りに書いてきたけど、別のもので書き直さないといけないってことか・・・
ハー出来る気がしない。
上のブログには
以下の getJSON.html はローカル環境でのみお試しください。
ってあったけど、ローカル環境を構築するってのも出来ないんだよね・・・
友達に相談したら、「ローカル環境を作るのも勉強のうち」って言われたんだけど、けど・・・けど・・・・
ハーどうしよう。
とりあえず、今日はここまでにして明日考えるかな。
JavaScript本格入門を読む・8
これ、昨日やったのに公開を忘れたので、公開するぜーーー
ぴょんぴょんするぜーーー
イベントリスナを登録する
function addListener(elem, ev, listener){ if(elem.addEventListener){ elem.addEventListener(ev, listener, false); } else if(elem.attachEvent){ elem.attachEvent('on' +ev, listener); } else { throw new Error(' イベントリスナに未対応です') } } addListener(window, 'load', init); function init() { addListener(document.getElementById('btn'), 'click', function(){ window.alert('ボタンがクリックされました。'); }); } (中略) <input type="button" id="btn" value="ダイアログ表示" />
イベントリスナを削除する
function removeListener(elem, ev, listener){ if(elem.removeEventListener){ elem.removeEventListener(ev, listener, false); } else if(elem.detachEvent){ elem.detachEvent('on' +ev, listener); } else { throw new Error(' イベントリスナに未対応です') } }
次のに必要だったのでこっちも
イベントに関わる情報を取得する
addListener(window, 'load', init); function init(){ addListener(document.getElementById('logo'),'mousedown', function (e) { var result = []; result.push('発生元:' +getSource(e).id); result.push('イベント:' + e.type); result.push('ボタン:' +getButtonType(e)); result.push('X座標:' + e.clientX); result.push('Y座標:' + e.clientY); window.alert(result.join('\n')); }); } function getSource(e){ if(e.target){ return e.target; } else if(window.event){ return window.event.srcElement; } } function getButtonType(e){ if(e.target){ switch(e.button){ case 0 :return 'left'; case 1 :return 'center'; case 2 :return 'right'; } } else if(window.event){ switch(window.event.button){ case 1 :return 'left'; case 2 :return 'right'; case 4 :return 'center'; } } } (中略) <img id="logo" src="http://www.wings.msn.to/image/wings.jpg" />
switch文キター
IE用のやつうざいなぁ
上位要素へのイベント伝播を抑制する
addListener(window, 'load', init); function init(){ addListener(document.getElementById('outer'), 'click', function(e){ window.alert("上位要素のイベントリスナです"); }); addListener(document.getElementById('inner'), 'click', function(e){ window.alert("下位要素のイベントリスナです"); }); } (中略) <div id="outer"> <div id="inner"> クリックしてみましょう。 </div> </div>
cancelBubbleは別にいいかな・・・
メモ:IEはcancelBubbleプロパティ、それ以外のブラウザはstopPropagationメソッドを使用
イベントデフォルトの挙動を抑止する
function cancelEvent(e){ if(e.preventDefault){ e.preventDefault(); } else if (window.event){ window.event.returnValue = false; } } addListener(window, 'load', init); function init(){ addListener(document.getElementById('fm'), 'submit', function(e){ if(!window.confirm('送信してよろしいですか?')){ cancelEvent(e); } }); } (中略) <form id="fm"> <input type="text" id="name" size="10" /> <input type="submit" value=" 送信" /> </form>
また、綴りを間違えたけど、アラートが出るからわかりやすいな・・・
JSは躓くとそれ以降処理されないからどのへんが間違っているかアタリがついて良いなぁ。
今日はAjaxどこまで出来るかしらん。