2014年5月11日日曜日

FCの発売タイトルを分析してみた その１

最近Rとかをちょろちょろいじってるので、練習としてファミコンのソフトの発売情報についてちょっと分析してみました。

元ネタはwikiの

これを使って、発売タイトル数（販売本数ではなくて）Rとggplotでグラフ化してみたのがコチラ。
年別ソフト販売タイトル数。
これを見ると左に裾を引いたグラフになっているので、凋落速度は早かったように見えます。（ただ、これは他のゲームハードとかとも比べんとなんともいえません。ゲーム業界みんなこういう形なのかも知れませんし）
あと、1985に発売タイトル数が跳ね上がってますが、この年の9/13にあの『スーパーマリオブラザーズ』が発売されています。個人的には、『スーパーマリオが起爆剤となって他のメーカも大量に参入したのでは』、と思ってたのですが、それだとマリオは1984くらいに出ていて欲しいところです（起爆剤の次年度から一気に増える前提だとすると）

次に、月別販売タイトル本数。

12月はクリスマス商戦とかいわれてるので販売本数多いんだろうな、って思ってんだけど、ここまで圧倒的とは思いませんでした。
あと、てっきり２月が一番低い（クリスマス商戦もお年玉争奪戦も終わってるから）と思ってたんですが、一番低いのは５月でした。あとお年玉争奪戦があるから１月って高いのかと思いきや下から二番目でした。（なんでだろう？？？）

次はソフトメーカとかジャンルとかも分析してみたいところ。
投稿者 時刻: 0 件のコメント:

2013年12月5日木曜日

ハートを描けるCSS

ふとハートのアイコンが欲しくなったのですが、入手した画像の解像度が荒かったので、
『この科学文明の世の中にハートアイコンなどCSSで書かれてるに違いない』
と思ってググってみるとやっぱりありました。

おなじみcss-tricks

ハートだけじゃなくて色んなアイコンがあるのがウレシイ。
あと、アイコン単位でCSSが独立してるので、
『bootstrapのこれだけが使いたいのに、他のクラスもついてきて既存ソースへの影響ががが！』
的な悩みも気にしなくていいのですばらしい。

で、『これでなんでハートになるんだよ』って思ったので順を追ってみてみました。
ハート描画は以下のCSSで行っているのですが、なんかぱっと見たくさん書いてあるように見えます。

#heart {
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;

}

#heart:after {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin :100% 100%;
}


ただ大半は複数種類ブラウザ対応用のベンダープレフィックスなのでそれを取り除き、これからやること用のナビゲーションコメントをふると以下のようになります。
ちなみにワタクシはchrome使ってるので-webkit-のやつで試してます。

#heart {
  // サイズ調整
  position: relative;
  width: 100px;
  height: 90px;
}
#heart:before,
#heart:after {
  // 共通部分で右半分と左半分の領域サイズを定義したり色を定義したりしてる
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  // ハートの描画ステップ1（上丸長方形）
  border-radius: 50px 50px 0 0;

  // ハートの描画ステップ2（回転中心設定）
  transform-origin: 0 100%;

  // ハートの描画ステップ3（半時計周りに回転）
  transform: rotate(-45deg);
 
}

#heart:after {
  // ハートの描画ステップ4（今までafterとbeforeの二枚重ねだったやつのafterのleftを0にすることでafterを左にずらして見えるようにする＆回転中心設定）
  left: 0;
  transform-origin :100% 100%;

  // ハートの描画ステップ5（時計回りに回転）
  transform: rotate(45deg);
}
でこれを図解したのが以下です。


………
……
…
よくかんがえるね、こんなの。
すごいです。

CSSの中身は難しくないのでradiusの値とかwidthとかcolorとか調整したら任意のハートがつくれるでしょう。
今回は以上です。

それではまた次回までごきげんよう。

追記
上の画像回転の説明が若干うさんくさい（というか間違ってる部分がある）のですが、なんとなく雰囲気（ずらして回す）は伝わると思うのでそれでユルしてください。



投稿者 時刻: 0 件のコメント:
ラベル: ,

2013年7月3日水曜日

ハローワークに突撃しよう 〜雇用保険書探索編〜

というわけでタイトル通りハローワークに突撃してきました。
やることは求職申し込みと失業保険の受給申請です。

 失業保険の受給申請には雇用保険書なるものが必要なのでちゃんと持っていきましょう。
ちなみにこの雇用保険書は会社が管理している場合と既に自身に配布されているケースの２パターンがあるそうです。
#さらに加えると『ウソ！ 私の会社雇用保険に入ってない！』とかいうケースもあるそうですが、そういう会社には気をつけましょう。

 で、退職時の書類を確認してみると（辞める前にしろよ）ワタクシの前の会社は各員に配布しているとのこと。
-> というわけで探してみる。

 ………
……
…

 みつからねえ...

 まずい
このままではまずい
じつにまずい
おれのけいかくがー！

 …という訳で前の会社の先輩に
『誠にご無沙汰しております 前職では大変お世話になりました 雇用保険書ってどんなもんでしたっけ？』
って聞いてみたところ、
『なんか領収書くらいのぺらいやつだよ』
というすばらしい情報を入手したので再度検索

 ごそごそ……
ごそごそ……

むっ、引き出しの一番下に小さい紙が！
これだ 間違いない！
フッ、この私のサーチ能力を持ってすれば雇用保険書を探し当てることなど雑作も無い

 ………
……
…




 SaGa2 秘宝伝説の説明書じゃねーか！

 これはあれか
『しつぎょうほけんなんかもらわず たびにでようぜ』って言うことか
いや、確かに魅力的だけどそいういうんじゃないんだよ！
このご時世一番強いのはフレアの書じゃなくてなげせんなんだよ！

 という悲劇があるので皆さん雇用保険書はちゃんと確認しておきましょう。
->あ、雇用保険書はその30分後に見つかりました。

 で、受給認定申請をするにはこいつとあと離職票（前の会社辞めましたよ書類）が必要です。
次回はその離職票を持たずにハローワークに突撃する話です。

 それではまた次回までごきげんよう。

投稿者 時刻: 0 件のコメント:
ラベル:

2013年7月2日火曜日

国民健康保険に切り替えてきました

今日は失業者三大手続きの一つ（というか進めたら2つ一気にやってしまえた）『国民健康保険への切り替え』の話。

 なおノウハウだけサマリーすると以下なので、それを読んで『もういいや』と思った人はメガテン4でもやってるのがいいと思います。
じつにすばらしいゲームです。
  • 失業した場合（厳密ではないですが、退職して次の就職先が決まっていない場合、と考えてください）は退職前の保険証は使えないので多くの人は国民健康保険に切り替える必要がある*1
  • 国民健康保険の切り替えはお住まいの区役所・出張所等で行える上に手続きしたその日に保険証がもらえる（もちものとかは区役所のホームページとかで確認するが吉）
  • 前の職場の健康保険資格損失証明書（だいたい辞めた後に自宅に送付されるという人が多いとはず）が無い場合でも役所の人が電話で現場に確認してくれる（と思われる）
  • 辞めてから14日いないに切り替えしないとめんどくさいことになるらしい（よくはしらないけど）
で詳細ですが、国民健康保険の切り替えには
  • （前の職場の）健康保険資格喪失証明書
  • 身分証明書（運転免許書とか）

 とかが必要だと書いてあったのですが、資格喪失証明書は後日郵送なので身分証明書（運転免許書）とあと一応印鑑を持って区役所にやってきたのだった。


 で、窓口で、
『前職を退職し国民健康保険へ切り替えたいのですが、今までの健康保険の資格喪失証明書は後日郵送されてくるので手元にありません』
『この状態で切り替えをお願いしたいのですがいかがでしょうか？』
と聞いてみる。

『原則は書類が無いと発行はできませんが、前職に電話で退職したことを確認できれば発行できます』
と言われる。
なーる。
->前職の名前と電話番号を伝える&身分証明書を要求されたので提示

『ついでに国民年金の切り替え手続きも進めてしまいますね』
というありがたいお言葉をいただけたので、ホイホイ進めてもらう。
#国民健康保険への切り替えの件で会社に電話するので、年金の方もついでに確認してもらえるらしい。

『確認がとれれば30分くらいで発行できますよ～』
と言われたのでいったん待ち合い席に下がる。

こんなこと（30分かかる）もあろうかとMac Book Airを持ってきていたので作業開始。
ローカルでApacheとMySQLを起動してWordPressの練習をすることにする。
『せかいひろしといえども失業して国民保険の切り替えをしている最中にapacheを起動した人間はオレ以外にはいないぜ、ククク』
とかニヤニヤしてたらapacheが起動する前にまた呼ばれる。
はえーよ。

『確認がとれましたので国民健康保険書をお渡ししますね』、といって渡される。
ついでに国民健康保険の説明書+国民年金の手続きに関する紙ももらう。

健康保険の納付書（的なもの）と国民年金の納付書（的なもの）は後日とどく（らしい）のでまた確認しよう。

 1: 国民は何らかの健康保険には加入する必要があるらしい。が、失業した場合は前の職場の健康保険を任意で継続でも、国民健康保険へ加入するでも、民間の保険に加入するでもいい（らしい）のですが、国民健康保険切り替えがメジャーのようです。

投稿者 時刻: 0 件のコメント:
ラベル:

2013年7月1日月曜日

無職になりました

前職を6/30に退職して晴れて無職になりました。

この後はひと月ぐらいフリーのエンジニアとして準備したり、もしくは考えが変わって次の就職先を探したりする予定です。

さしあたり国民健康保険に切り替えたり、年金手続きしたり、万が一に備えてハローワークにいったりします。
#ちなみに無職は無職でも次の職業を探しているので今流行のニートではありませんし、みんなのあこがれの社内ニートなんて夢のまた夢です。

せっかく無職になったので日記くらいは書こうと思っています。
#また三日BOZUにならないとよいのですが。にんともかんとも。
投稿者 時刻: 0 件のコメント:
ラベル:

2013年6月1日土曜日

Bootstrapのcarouselをつかってみる その２ 使ってみる

というわけでBootstrapのcarouselを実際に使ってみましょうというやつです。

の冒頭のサンプル

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

を使ってみます。
で、実際に使ってみたんですがこんなカンジになりました。

右上の○をクリックすると各ページに移動して、左右の△をクリックすると次/前ページ移動になります。 これとさっきのソースを照らし合わせてみてみると以下のカンジです。 ＃ソースに解説をつけただけです。 
<!-- carousel全体のdiv --!>
<!-- class属性にcarouselとslideを指定する必要がある --!>
<div id="myCarousel" class="carousel slide">
  <!-- 右上のページ指定移動リンク -->

  <!-- carousel-indicators のclass指定で ○が横に並ぶのを実現（実際にはcssがやってくれる） -->
  <ol class="carousel-indicators">
    <!-- 右上の○の１つ１つ data-slide-to で移動先スライドを指定 -->
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->

  <!-- 表示する写真たち carousel-innerをclassに指定するとスライドセットとして認識される -->
  <div class="carousel-inner">
    <!-- … という部分にはimgタグ等で写真を表示する -->
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->

  <!-- ページめくりボタン -->
  <!-- classにcarousel-control left（right）と指定してdata-slide にprev(next)を指定すると機能する --!>
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
うむ、簡単だ。

carouselは使ったカンジのメモとしては以下のようなものがあります。

スライドショーの全体幅を調整するには？
大外のdiv（#myCarousel）にwidthを設定すればいい

自動スライドショーを止めるには？
大外のdiv（#myCarousel）に data attribute形式で指定
以下の感じ
data-interval="false"
ちなみに指定されない場合のデフォルトは多分5000ミリ秒になってるんだと思う（感覚）

サイズの違う画像をめくろうとするとどうなる？
大外のdiv（#）で指定したwidthに収まるようにリサイズされた
恐らくwidth,heightのうちオーバーする方に勝手にリサイズされるのだろう（多分divのフツーの挙動）

ページめくり画像ってどうしてるんだ？
『>』っていう文字を装飾しているようだ
なーる

右上の○○○は画像に引きずられて移動するの？
しない
CSSで
position: absolute;
top: 15px;
right: 15px;
と指定されてる

ちなみにposition: absolute;は
親要素が position:static のときはウィンドウの左上、親要素が position:static 以外の時は親要素の左上を基準位置とし、top, left あるいは right, bottom で指定されたオフセットの絶対位置に表示します。
らしいので、この場合は親divがposition:relative; なので親要素の左上が基準位置になっている

これモーダルダイアログ化できる？
（かなり簡単に）できた
ダマされたと思ってモーダルのデモコードのbodyの部分にcarouselのコードを挿入してみなさい


と言ったところでcarouselはこんなもんで（簡単なので）
それではまた次回までごきげんよう。
投稿者 時刻: 0 件のコメント:
ラベル: , , ,

2013年5月31日金曜日

Bootstrapのcarouselをつかってみる その１ マニュアル確認

だいぶ間が空いてました
すいません

 で、今回から２回ぐらいでBootstrapのcarouselの使い方を見ていきます。
carouselというのはあれです。
写真とかをプレビューしてページ送りするようなやつです。

まずものは
にあります。
ちなみになんでコレがcarouselなんだ？ と思った人は英語の辞書でcarouselを引いてみましょう。
carousel というのはおなじみスペースアルクで引いてくると
  1. 〔遊園地の〕回転木馬◆【同】merry-go-round
  2. 〔空港などの〕回転式コンベヤー
  3. 〔書店などの〕回転式棚
  4. 〔中世の騎士の〕馬上試合
というカンジなので、くるくる回って見えるものが変わるというのを表現しているのでしょう。
＃まあ、ものを見れば一発でわかります。

で、チョット翻訳してみます。
＃わかりにくいんで翻訳は青文字にしておきます。
＃あと、（）で囲まれているのは本文には無いけど、意味が通りやすいようにワタクシが補足した部分です。


Carousel bootstrap-carousel.js

Example carousel

The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
は（ほぼ訳すまでもないですが）

（Bootstrap carouselは）カルーセルみたいに回転するスライドショーのプラグインとコンポーネントです

というかんじですね。
＃全然関係ないですがカルーセルとセガールってちょっとにてますね。


Usage

Via data attributes

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to it's current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which jump's the slide position to a particular index beginning with 0.

データ属性でカルーセルを使う場合。

データ属性でカルーセルを使えば位置を簡単にコントロールできます。
data-slide属性にはpref/nextを設定でき、スライドめくり（次のスライド/前のスライド）という操作を実現できます。
（exampleにあるようにリンクなどに追加すると、そのリンククリックでスライドめくりができるようになるということです。）
スライドめくりのもう一つの方法としてdata-slide-to属性でスライドのページ数を指定する方法があります。スライドのインデックスは0から始まります。

次、JavaScriptの方

Via JavaScript

Call carousel manually with:
    

  1. $('.carousel').carousel()
    2.

Options

Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to data-, as indata-interval="".
Nametypedefaultdescription
intervalnumber5000The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pausestring"hover"Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

JavaScriptで実現する場合は
$('.carousel').carousel();
で初期化します。
（おなじみですが $('.carousel')の部分は要素抽出セレクタなので対象が指定できるならidでもいいんでしょう）

初期化の際のオプションとしては以下があります。
データ属性で実現する場合はprefixとして data- をつけたデータ属性をcarouselのコンポーネントに記述します。
（ようはcarouselの大元のdivにdata-pause="hover" とか書くということです）

オプション
interval 自動でページめくりされる時の間隔（おそらく単位はミリ秒）
pause マウスオーバーで自動めくりを停止しマウスリリースで自動めくりを再開する（と書いてあるのだが、hover→unhoverはいがいの切替セットはどうするのだろうか…）

といったあたりで大体翻訳を終わりにします。
後書いてあるのは各メソッドについて（初期化/ページめくり/停止）なのでサンプルを見ていけばわかるでしょう、ということです。

というわけで今回はここまで。

投稿者 時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)