()

咲-Saki-のブログです。

推奨ブラウザ:Google Chrome / Firefox
非推奨:Internet Explorer / Edge(表示の不具合に対応中です)
Edgeで閲覧の際に画面の一部がぼやける問題は解消しました。
当サイトで使用している画像その他著作物の著作権は、すべて各著作権者様に帰属します。


今回もたっぷり16ページでした。直前のたかたゆうじ先生のタッチを取り入れられたのでしょうか、ぶっとい描画線がカッコいいですし!

おっとこれ以上のネタバレは
コチラ↓でどうぞ
続きを読む

昨日あみあみにコンビニ入金したらもう今日届きました。佐川急便GJ!

いえす、咲-Saki-阿知賀編episode of side-A Blu-ray SPBOXなのですよー。
NSは咲-Saki-のDVD/BDを買うのはこれが初めて。TV放送を録画・編集して見る派でした。
しかし阿知賀編の13話以降は地上波の放送がなく、家にネット環境もなかったから未視聴で、BOXが出たら絶対買うつもりでいたのです。先月光回線引いてからはもちろんぐぐって見ちゃいましたけれど(笑)

  • この阿知賀感満開のパッケージ(うっとり)
  • atigaBD02.jpg

  • 照お姉ちゃんのねんどろいど(ギュルルン!)
  • atigaBD03.jpg
    一点だけ、咲-Saki-世界に背理する箇所はありますが…見なかったことにしよう


  • 野依プロ麻雀カード(プンスコ)
  • atigaBD06.jpg

  • 設定資料集(特別編の台本つき)
  • atigaBD04.jpg
    atigaBD05.jpg
    すこやんだいすこ。スーハー


    ただ、うっかり店舗別特典付きじゃない方を注文してしまったので、特製マウスパッドは入手できず。
    ドンマイ私!
    しかしなんと言っても今日一番のお目当ては…あったこれ!

  • DISC 9:特別編 玄の誕生日
  • atigaBD08.jpg


ぬあーBDプレイヤーのリモコンの電池が切れとる!最近youtubeばっかり見てたから…気づけなくてゴメンな。
電池を取り換え、トレーを開けると、わたモテ特装版DVDが。オイいつから使ってなかった(笑)atigaBD09.jpg


スゥ~……ではいざ、視聴開始!(正座)






















むはぁ…

OP/ED 含めて12分の掌編ではありましたが、もうこのまま妙喜世界にトバされるかと思いました。時節的にも。
まだ阿太峯の制服を着てる憧が灼に敬語で話してるのが妙に新鮮で、久しぶりに敬語萌えしましたわ。
洋榎とセーラの絡みも見られたし、いやーいい買い物しました。


しばらく猫まんま+水道水だけど、脳からなんか出てるからむしろまだまだプラスすぎ!
あ、オーディオコメンタリーという楽しみも残ってるし♪

ではまた。

五十嵐あぐり先生のホームページ・アンチヒロイン通信が、およそ五ヶ月ぶりに更新されました。
五十嵐あぐり先生待ったなし
何があと一ヶ月なのか。

あっ…(無慈悲な察し(ry

では、運命の4月12日にむけて、できることを、していこう……


【謹記】本記事公開から約40分間、管理人NSの不手際により誤った情報が掲載されました。当該部分を削除し、関係者及び閲覧者の皆様にお詫び申し上げます。(06:28)






MJ初段で逃亡したNSです。
すこやんの記事の続きを書きたいのに、雑記みたいなのが続いてしまい申しわけないです。

今回の記事もすこやんとは関係ない、本当ならブログカテゴリにすべき内容なのですが、咲-Saki-要素をごり押ししつつ行ってみたいと思います。すこやんだいすこ!
なお、HTMLやCSSについてある程度知識のある方には噴飯ものの内容かもしれませんので、ウェブデザイン?歴3ヶ月のNSと同レベルな感じの方にしか、閲覧はお奨めできません。


さて、咲-Saki-の記事を書くとき、麻雀牌の画像を表示するわけです。NSの場合、何の分析もできないくせに、なんかカッコいいですし!カッ ユキちゃんかわいい
しかし、それが結構大変だったりします。弊ブログでは右のサイドバーにリンクが貼ってあるアンコロ牌画という素晴らしいデザインの牌画を、無償で使わせて頂いているのですが、たとえば先日の記事 咲-Saki-第140局[攻防] 削り合い で絹ちゃんが和了ったところ。絹ちゃんかわいい

画像

二筒三筒三筒三筒四筒赤五筒六筒 一筒ロン  四筒四筒倒四筒 倒九筒七筒八筒


タグコード

<a href="http://negative4sugar.blog.fc2.com/img/p2.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/4/7/4723c4d6.gif" alt="二筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p3.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/0/2/0220dfa6.gif" alt="三筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p3.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/0/2/0220dfa6.gif" alt="三筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p3.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/0/2/0220dfa6.gif" alt="三筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p4.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/c/0/c0a38b22.gif" alt="四筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p5a.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/d/e/decf25c0.gif" alt="赤五筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p6.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/3/d/3de19ae8.gif" alt="六筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p1.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/0/1/010624f4.gif" alt="一筒" border="0" width="21" height="29" /></a><span style="font-size:x-small;">ロン</span>
<a href="http://negative4sugar.blog.fc2.com/img/p4.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/c/0/c0a38b22.gif" alt="四筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p4.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/c/0/c0a38b22.gif" alt="四筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/y_p4.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/9/5/95a1ecc3.gif" alt="倒四筒" border="0" width="28" height="22" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/y_p9.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/3/d/3df2132e.gif" alt="倒九筒" border="0" width="28" height="22" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p7.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/d/0/d0fc99a4.gif" alt="七筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p8.gif/" target="_blank"><img src="http://livedoor.blogimg.jp/nsforscoyan/imgs/9/c/9c10c0eb.gif" alt="八筒" border="0" width="21" height="29" /></a><br />

発狂してもいいですか?

まあアルバムへのリンクとか、要らないタグや省略できるプロパティも含まれてるから削れる部分があるとは言え、めげたい投げたいつらいつらい末原さんかわいい
さらにもうひとつの問題があります。上の上埜さんかわいい和了形を表示するためだけに、牌の枚数と同じ、14回ものサーバーへの読み込みリクエストが発生するということです。
サイズは小さくても、リクエストが多ければサーバーへの物理的な負担が増え、これにアクセス数をかけたぶん、「重く」なるのです。幸か不幸か弊ブログにはそんな事態は起こらないと思いますが…ワハハー
とにかく決して広くはないエディタウィンドウがHTMLタグに占拠されて、本文が肩身を狭くして縮こまっている、そんな環境をなんとかしたいと思い至ったわけですよフナQかわいい

で、いろいろ調べたり自分で考えたりする中で、スプライトという技を知ったのです。アイコンなどの、小さくて頻繁に使われるウェブアイテムの画像を1枚の大きな画像ファイルにまとめてしまう。するとそのぶんの全画像の読み込みは一回で済み、あとはその情報は端末のメモリ上でやり取りされるので処理が速くなる。メンテナンスが面倒、というデメリットはありますが、ユーザーとしてブログに手軽に牌画を書き込めるメリットの方がはるかに大きい。
やってみようそうしよう。

では、以下は具体的な手順です。

  1. 牌画のデータを入手する

    ネットで無料で手に入る、麻雀牌のフリー素材をダウンロードします。GIFかPNG、透過性のもの。JPGはNGです。利用規約をよく確認し、クリエイターの方にきちんとお礼を言いましょう。


  2. 牌画のデータをスプライト画像に変換する

    無料で変換してくれる便利なサイトがあります。

    CSS Sprite Generator

    必要な画像をzipに圧縮してアップロードすると、1枚のスプライト画像とCSSコードを一瞬で書き出してくれます。


    Sprite Pad

    NSはこちらのお世話になりました。
    サイトの作業ウィンドウに画像をドラッグ&ドロップして配置します。
    手作業なので時間はかかりますが、自分好みの配置にできるのが魅力。
    はやりやはりCSSコードを自動生成してくれます。はやりんかわいい
    はやっ☆↓79枚の画像ファイルが、1枚に収まっています☆

    SP_ancoro_blue.png

  3. スプライト画像をアップする

    自分のブログ/HPのサーバーに、完成したスプライト画像をアップロードします。


  4. スタイルシートをカスタマイズする

    ブログのスタイルシートに、牌画用のCSSコードを書き込みます。既存のセレクタコード(この場合クラス、つまりピリオドで始まるセレクタ)群のいちばん下にでも挿入すればOKです。各牌のコードは2.のサイトで書き出してくれますが、これは座標など個別のプロパティしか定義していないので、全ての牌画の表示を制御するために、以下のコードを自分で書きます。

    .ancoro {
       display: inline-block;
       background: Transparent url(http://・・・) -1000px -1000px no-repeat;
       vertical-align: bottom;
       text-indent: -9999px;
    }

    黄色のマークは半角スペース、赤字の部分は3.でアップしたスプライト画像のURLです。
    これは共通プロパティなので、各牌のCSSコードに追加しても同じことです。ただ、そうすると全体のコード量が倍になってしまいます。それにブラウザがスタイルシートを読み込むときに、79回も同じスプライト画像のファイルにアクセスすることになり(まあ実際はキャッシュ参照とかするのかもしれませんが)、いろいろ非効率な気がするので、共通部分だけ別のクラスとして定義しています。
    なお、上のancoroというクラス名は、既存のものと被らなければ、何でも構いません。
    ちなみに2.のサイトで書き出してくれる牌のCSSコードがどんなものかというと、こんな感じ。

    .tile_ton{
       background-position: 0 -90px;  /*スプライト画像内の座標*/
       width: 21px; /*牌の表示領域の幅*/
       height: 29px; /*牌の表示領域の高さ*/
    }

    tile_tonはを表すクラスの名前で、これも任意に名づけて構いません。79種類の牌すべてに、同様のコードが生成されていますから、上のancoroと合わせ、計80クラスとなります。
    実際にスタイルシートに書き込むときは改行などせず、1牌1行にまとめた方が見易いかもしれませんね。


  5. 文章に牌画を使ってみる

    画像とスタイルシートの準備ができたところで、牌画を表示させるためのHTMLタグを書いてみます。
    使用するタグはspanです(aタグでリンク用のアイコンのような使い方もできます)。
    その下準備として、例えば <span class="ancoro tile_"></span> という文字列を辞書登録しておきます。NSは「すこ」で登録しました。////
    ancoro tile_xxxxxxの部分に牌の種類を表す記号を書き入れます。白ならhakとか一索ならs1とか、4.で定義したクラス名になるように。
    エディタで <span class="ancoro tile_s1"></span> と書けば、ブラウザにはが表示されるというわけです。いちいち画像挿入のサブメニューを呼び出さなくてもよくなりました。とても快適ですね。
    では、この方式で上の絹ちゃんの和了形をもう一度書いてみます。絹ちゃんかわいい

    画像

     ロン   

    タグコード

    ※スマホやケータイではbackground属性の画像を表示できないことがあるので、<span・・・></span>タグの間に代替テキストを挿入しておきます。赤字の部分は、⑤を赤くして赤五筒であることを示すための記述です。(3/16追記)

    <span class="ancoro tile_p2">②</span>
    <span class="ancoro tile_p3">③</span>
    <span class="ancoro tile_p3">③</span>
    <span class="ancoro tile_p3">③</span>
    <span class="ancoro tile_p4">④</span>
    <span class="ancoro tile_p5a"><span style="color:red"></span></span>
    <span class="ancoro tile_p6">⑥</span>
    <span class="ancoro tile_p1">①</span>ロン  
    <span class="ancoro tile_p4">④</span>
    <span class="ancoro tile_p4">④</span>
    <span class="ancoro tile_y_p4">④</span>
    <span class="ancoro tile_y_p9">⑨</span>
    <span class="ancoro tile_p7">⑦</span>
    <span class="ancoro tile_p8">⑧</span>

    どうすか。シロかわいい
    最初のよりずいぶんスッキリしましタネ。メグでかい
    いろいろ応用できる技術なので、興味のある方はトライしてみてはいかがでしょうか。
    一緒に楽しもうよ!咲さんかわいい


最後になりましたが、牌画スプライト作成と本記事執筆に当って、以下のサイト様の記事がとても参考になりました。
ここに記して御礼申し上げます。

  ウェブサイト作成入門>CSSの小技集>CSSスプライト。




やっちまったなー

あ……またやっちゃった…

えー、NSは、すこやんの通学路探索という記事で、小鍛治健夜プロの母校、土浦女子のモデルは土浦第二高校である、と決めつけた。
でも……人は予想を超えてくる。

以下のブログ様に、別の説がありまして。

 何の変哲もない咲の地名紹介
  茨城・土浦女子高校と小鍛治さん周辺


制服がほぼ同じ、という極めて有力な根拠により、土浦日大高校がモデルではないかとされていました。
なるほど、土浦日大かー……

思いっきり近所だよ!

近所といっても田舎的な意味なので、NS家の前を朝夕女子高生が歩いているわけではありませんが、車で十分もかからない、たぶんウチから最も近い高校です。
そう言われてみればあの制服、見覚えがないでもありません。確か男子の制服も同じ灰色の詰襟だった気が…。
あれ? でも最近あの制服全然見かけないような。
んー? ドユコト?

はい、何の変哲もない咲の地名紹介様でも触れられていましたが、高校生すこやんが着ているのは、実は昔の制服なのです。
調べてみたらちょうど十年前にデザイン変更があって、今はブレザー型になっているようです。
という事情もあり、四年前に初めて単行本で見た ふくよかにすこやかに のすこやんの制服姿から、土浦日大を連想することはできませんでした。
まあリアルの女子高生なんか興味ないし!

同ブログ様のコメント欄のやり取りで、制服は土浦日大、学校は土浦二高という折衷案も提起されていましたし、何より校舎の描写がまだなので、土浦二高説が否定されたわけではありませんが、土浦日大説の存在を知らずに記事を書いてしまったのはNSの不勉強でした。

なお、JR土浦駅から土浦日大高校までは約2km、長い坂もあるので徒歩では少しキツいかも。バスを使うのが普通だと思います。


最近すこやんの記事を書いたり高浜に取材(笑)に行ったりで、なんかもう、今は一日中、すこやんで頭がいっぱいのNSです。すこやんに悪いと思って、プロフ欄に書いていた別の女の子たちの名前も消しました。

一方、あちこちで見かけるニワカ咲き様の各校応援バナー、画面がにぎやかになっていいなーと思ってました。
私もダウンロードに行ったら、管理人 庭取様のこんなお言葉が。

自分で作った方が気持ちが入るヨ!




kouko0001
…………














う、

うっしゃー!やったるァアアア!!!!

































────二時間経過

で、できました。(ゲッソリ)

土浦女子応援バナー



土浦編なので単純にside-Tにしました。今所属してるつくばのTでもあるし、いいかなと思って。
すこやんのS(あとシノハユにもかかってる)でside-Sと迷ったんですけどね。

episode of side-○のところの三種類のフォント探しにいちばん時間がかかりました。
見比べるために一回ラスタライズしなきゃいけないので、パッパッと調べられないのが辛かったです。
しかしどうにもこれというのが見当らなくて、結局元画像の文字部分をコピー&加工して使ったという…
考えてみれば、正解のフォントが見つかったとしても、手作業である以上、仕上がりに微妙な差は出たと思います。
初めから素直に元画像を使えばよかったと反省。

上の画像は拡大表示してありますが、鯖上のサイズは180×84です。
万が一欲しい方がいらしたら、右クリックでコピーして行って下さい。


このページのトップヘ