javascriptを使って簡単なクイズを作ってみた

はてなブログjavascriptが使えるということを知ったので試験的にクイズを作ってみました。

難しい問題はないので試しに遊んでみてください。

クイズ終了後に下の採点結果ボタンを押すとコメントが表示されます

第一問

フランスの首都は次のうちどれ?

パリ
マルセイユ
ボルドー

第2問

世界一長い川は次のうちどれ?

アマゾン川
ナイル川
ガンジス河

第3問

世界一広い国は次のうちどれ?

中国
カナダ
ロシア

第4問

次の3つのうちで猫はどれ?

メイクイーン
ダックスフンド
スフィンクス

第5問

9月1日は何の日?

てんやの日
防災の日
山の日

第6問

この中で毒がある生き物は?

スベスベマンジュウガニ
こおろぎ
アマガエル

第7問

この中で初音ミクキャラクターボイスを担当したのは誰?

渕上舞
生天目仁美
藤田咲

第8問

フランス、スペイン、ドイツ。この中で一番広い国はどこ?

フランス
ドイツ
スペイン

第9問

この中でロシアの曲はどれ?

シュシュ
カチューシャ
ブラウス

第10問

日本で一番小さな県は次のうちどれ?

香川県
富山県
東京都




猫の手、貸します 猫の手屋繁盛記を読んで

あらすじ

ある事情で白猫姿になってしまった近山宗太郎(通称:猫太郎)

は町の雑事を引き受けるよろず請け負い稼業、「猫の手屋」を営んでいます。

そんな奇妙奇天烈な猫のサムライが活躍するお話が3話収録されています。

 

迷子地蔵

夫婦げんかが絶えないお軽と三郎太。そしてしっかり者の娘、お妙。

いつも通りの日常にある人物が訪れます。

 

ネコの恰好をした托鉢僧です。江戸の町の物乞いはみな風変わりな

恰好をしており、ネコの恰好をした托鉢僧もその一人です。

両国にある回向院をもじってねこう院と駄洒落をうって子供たちに大人気。

 

そんなとき、大事件が発生します。お妙が行方不明になってしまうのです。

お妙は、どこにいったのか?

ネコの恰好をした托鉢僧がどう関わってくるのか?

ネコ侍のはどう活躍するのか?

 

鳴かぬ蛍

迷子騒動が一件落着しても、元の木阿弥。三日月長屋の名物

お軽と三郎太の夫婦げんかがすぐに始まってしまいます。

 

そんな時大家の惣右衛門からネコ侍の宗太郎が幽霊が出る

と言われるお屋敷で寝ずの番をしてほしいと頼まれます。

 

承諾した宗太郎はうわさの屋敷に向かいます。その途中で

ネコの恰好をした托鉢僧に再び出会い、一緒にその屋敷に行くことに

なります。

 

「幽霊の正体見たり枯れ尾花」と言うように、正体は分かってしまえば

大したものではありませんでした。

 

これで一件落着かと思いきや、物語はもう少し続いていき意外な結末をむかえます。

思案橋から

宗太郎がなぜ、白猫姿になってしまったのか、その理由が

明らかになる回です。

 

しかし、宗太郎は、猫の姿をした張本人から本物のネコにされて

しまいます。

ネコにされてしまった宗太郎は色々とひどい目にあいますが

猫語が分かるようになり、近所の猫たちと会話ができるようになります。

そこで20年ほど前にいた白猫親子について宗太郎は知ることになります。

 

最終的に無事?元の姿(白猫)に戻ることができますが、

宗太郎が元の人間に戻れるようになるには、しばらく時間がかかりそうです。

 

 まとめ

 猫の姿をした侍を主人公とした話で、江戸の庶民の生活が

ところどころ垣間見えてきますが、インパクトのある話はなく、

宗太郎が猫にされてしまった理由も、最後まで引っ張るほどのものでは

ないかと思いました。

 

おしまい

 

今と昔、どちらの方が夏は暑い?1970年代から2010年代までの最高気温と最低気温から出てきた結果は!

f:id:kirakira_rin:20170813104441j:plain

  • 疑問
  • 調査項目
  • 結果
  • まとめ

疑問

夏になると熱中症が話題になりますが実際昔は今よりも

暑くなかったのでしょうか?

 

熱中症で病院に運ばれるニュースはここ最近増えてきていますが

実際に現代は昔と比べて暑くなっているのでしょうか?

気象庁のデータベースからデータを抽出して調べました。

 

調査項目

調査範囲:1970年から2016年の8月

地点:東京(東京都全地点の一つ)

調査データ:最高気温、最低気温

抽出:調査データの35度以上、30度以上、25度以上、25度未満を

   各年代ごとの平均

 

続きを読む

ブログのモチベーションを維持する自分なりの方法~累計アクセスと記事数は裏切らない

f:id:kirakira_rin:20170811100640j:plain

継続が難しい

ブログ継続するのは結構難しいという話の記事をよく見かけます。

理由はなかなか結果が出ないからだそうです。

求める結果がどのくらいかは分かりませんが、脱落するブロガーが

多いそうです。

積み重ねは裏切らない

累計アクセス

一日当たりのアクセス数は増減するので多ければうれしいですが

0とか1とかだと、そっ閉じしたくなります。

 

ただ一つだけ裏切らないものがあります。

 

それは、累計アクセス数です。

 

累計アクセスは今までのアクセス数がどんどん積みあがっていくので

決して下がらないパラメーターです。また自分自身でコントロール

出来ないパラメータでもあります。

 

ドラクエで例えると、累計アクセス数は経験値の合計みたいなものかも

しれません。以降、ドラクエ方式とします。

 

例えば累計アクセス数が

0・・・・・・LV1

50・・・・・LV5

100・・・・LV10

500・・・・LV15

1000・・・LV20

 

のようにすると自分のブログが育っていくのが見える化

していきますので、「あと100アクセスでLV30になるぜ」

みたいな・・・。

 

記事数

また記事数もブロガー自身が投稿すればするだけカウントアップしていくので

これも絶対に減りません。これは累計アクセス数と違って自分でコントロール

出来るパラメータです。

 

これもドラクエ方式にすると一つ投稿するたびに経験値が1上がります。

 

また○○か月後に○○記事投稿するを目標にするのをモチベーションに

するのもいいかもしれません。多くのブロガーが実際にやっていることですし。

 

総スター数

これは実際に投稿した記事を読んでくれた読者の方々の反応です。

これは上記の二つと違って他人の反応なので自分自身で出来ることは

記事を書くことと質を上げることだけです。

 

頑張って書いた記事にスターがつくと、やはり嬉しいので次の記事を

書くモチベーションになります。

 

そして、これもカウントアップしていくものなのでドラクエ方式が

使えます。またスターはその記事を読んだ方全員が押すものでは

ありませんので、累計アクセスより価値が高いと思います。

終わりに

僕は100記事投稿を一つの目標に決めています。一日当たりのアクセス数は

気になりますが現在の目標にはしていません。

100記事投稿後の目標に立てるかもしれませんが未定です。

 

そして、継続するのがそもそも難しいといわれるブログ界ということ

ですが、ゆるりと続けていきますので今後ともよろしくお願いします。

 

おしまい

連想配列にご用心~初期化の有無で結果が変わるよ

 プログラマーならば実務で連想配列を使うことはしょっちゅうだと思います。
今回、現場で連想配列の初期化忘れによる不具合に出会ったので
備忘録兼、同じようなバグで困っている人の手助けになればいいなと思い記事にしました。
記事が長くなるのでご容赦を

続きを読む

【ネタバレ有り】「君の名は。」を見て

 

f:id:kirakira_rin:20170808210220j:plain

小説では読んでいたけれど映画を見るのは初めてだったので

どんな風に仕上がっているのか楽しみでした。

 

可能な限りネタバレは控えようと思っています。まだ内容をご存知

でない方は続きを読むのは控えてください。

続きを読む

Symfony2入門で学習してハマったところ

基礎から学ぶSymfony2入門で学習していてハマったところ

を4章までをまとめました。

  • 諸悪の根源?
  • consoleが最初使えなかった・・・
  • デモアプリケーションのホームページが表示されなかった・・・
  • フォームの基本でフォームの要素編で「Could not load type "text"」・・・
  • フォームの入力値の受け取りのところで 「Call to a member function createView() on null」・・・
  • まとめ

諸悪の根源?

Symfony2入門なのにinstallしてきたのがSymfony3.3.5だった。

これが一番大きいのかもしれない。

続きを読む

ARIA第一巻、第二巻を読んで

 

アニメ「ARIA」シリーズの原作はAQUAが全2巻、ARIAが全12巻あります。

僕はアニメからマンガに入りましたが、お気に入りのマンガの一つです。

今回は、ARIA第1,2巻の紹介をします。

ARIA 1

季節は秋になり灯里も衣替えすることから始まります。

 

半人前の灯里はひょんなことから観光に来ていて迷子になった

地球(マンホーム)出身のおじいさんと一緒に娘夫婦を探しつつ

ネオ・ヴェネチアの町案内をします。

 

何もかもが合理化された地球と不便だらけのアクアの対比が

灯里とおじいさんの会話で描かれており、地球の様子が

少し垣間見えてきます。

 

続きを読む

知っている方も知らない方もプリキュアの黄キュア限定のキャラソン紹介

 黄色プリキュアについて

黄色をモチーフとしたプリキュアは、2017年現在登場している

キュアカスタードまで含め10人おり、イメージカラーがピンクの次に多い

プリキュアです。

その性格はマイペースで少し幼い感じがありながらも、

夢に向かってまっすぐ進むキャラが多いと感じております。

 曲の紹介

今回はイメージカラーが黄色のプリキュアのキャラソンを2曲紹介します。

 

一曲目はGO!プリンセスプリキュアに登場するキャラ

キュアトゥインクルのキャラソン「ハイエンド・スター」

です。

 

作詞:只野菜摘

作曲:間瀬広司

歌っている方はキュアトゥインクル役の山村響さんです。

ハイエンド・スター

ハイエンド・スター

 

キュアトゥインクルこと天ノ川きららの夢は実の母、ステラのような

トップモデルになることで、そのための努力は怠らない

まっすぐな子です。

 

努力は夢への愛の証

自慢なんてはしたないわ

オーラこそ本物よ

歌詞より引用

 

この歌詞が彼女のすべてを物語っていると思います。

曲調もキラキラとして前向きでまっすぐさを感じさせる曲だと思います。

 


 

二曲目はドキドキ!プリキュアに登場するキャラ

キュアロゼッタのキャラソン「CLOVER~オトメの祈り~」

です。

 

作詞:青木久美子

作曲:小杉保夫

歌っている方はキュアロゼッタ役の渕上舞さんです。

CLOVER ~オトメの祈り~

CLOVER ~オトメの祈り~

 

70年代、80年代を彷彿させるようなレトロな曲調の曲です。

歌い方も何となくほんわかとした感じがして可愛いところを感じさせる

一方、下の歌詞にあるように一本芯が通っている

ありすらしさを感じさせる曲です。

 

あなたをずっと守りたい

ただそれだけが理由なんですの オトメの祈りは最強!

歌詞より引用

 

実際キュアロゼッタこと四葉ありすは友のためなら

四葉財閥の経済力や政治力の行使はもちろんのこと

戦闘機を操縦して大気圏突破までやってのける

超人的なスペックを持つ子です。

 

以上、2曲紹介させていただきました。

青キュアの曲紹介に続いての記事になりましたが

気になる曲は見つかりましたでしょうか?

 

キャラソンもそうですがキャラソン以外にもいい曲は

プリキュアにはたくさんありますので、

時々紹介していきたいと思っています。

 

 

 

はてなブログでCSSを使って色の指定

こんにちは、雑記ラビリンスです。

 

ブログを書き始めてからレイアウトについて気になってきませんか?

そしてブログを書いているとき、色を使いたくなる時ってあると思います。

そういうとき、CSSを使うと簡単に色を使うことができます。

 

はてなブログCSSの設定は

  1. HTML編集
  2. デザインー>カスタマイズー>デザインCSS

で可能です。

 

例として下にブロックを一つ配置しました。

 

 <div style="border: solid 2px black; width: 20%; height: 30px;"></div>

 

コードとしては、こんな感じにしました。

これはHTML編集で直接書きました。

 

border:枠線のスタイル。

width:幅

height:高さ

を表しています。

 

この場合ですと、高さ30px、幅は全体の20%、枠線は太さ2pxの

黒い直線となります。

 

枠の中を赤にしたいときは

 

 <div style="border: solid 2px black; width: 20%; height: 30px;

background-color: red;"> </div>

 

background-colorというプロパティを使って

英語のredと書けば背景が赤になってくれます。

 

でもなんて表現していいかわからない色ってあると思います。

赤っぽい色とか、でも赤とは少し違う。

 

そういう場合に

CSS/HTML色見本

というリンク先がお役に立ちます。

 

色の名前が一覧表になっておりますので、表現しにくい

色も見つけることができます。

 

またこのサイトの右上にあるツールを使えば、よりあなたが

使いたい色に出会うことができると思います。

 

また下の四角にマウスを乗っけると色が変わります。

   色が変わるよ

 

:hoverという疑似クラスを使って実装できました。

 #color:hover{

    background-color:"yellow";

}

これは2番の方法で記述しました。

こんな遊びができるのもCSSの面白いところです。

 

 また、CSS全体については

www.htmq.com

というサイトがとても詳しくて便利ですので

ブログのレイアウトに関してとても重宝するかと思います。

 

まだまだレイアウトに関しては試行錯誤の連続なので

分からないことが多いですが、より見やすいサイトにできればいいなと

思っております。

 

おしまい。

下の記事もあわせてどうぞ

 

【ピックアップ関連記事】

ブログでアイコンが正しく表示されないときの対処法 - 雑記ラビリンス

あなたの残り時間は何時間ですか?計算してみませんか - 雑記ラビリンス

はてなブログでサムネイル画像をクリックすると、大きい写真が表示される機能を実装してみた - 雑記ラビリンス