()

咲-Saki-のブログです。

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

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

あっ…(無慈悲な察し(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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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です。
万が一欲しい方がいらしたら、右クリックでコピーして行って下さい。


ちょ…16ページって…これは夢なのか?

以下、ネタバレ注意でお願いします。
続きを読む

小鍛治 健夜(17)
小鍛治健夜プロの出身校 土浦女子の地元民としての使命感から、通学路探索を思い立ちました。

5161回全国高等学校麻雀選手権大会優勝校  土浦女子(茨城県代表)

土浦市内に存在する高校で、そのモデル候補を挙げるとすれば、
茨城県立土浦第二高等学校
であります(以下、土浦二高と略記)。
理由は、田舎なりにお嬢様学校であってほしいからです(理論武装)。
土浦二高とは、明治三十六年に創立された関東屈指の県立高等女学校。戦後の新制度下で普通高校となった後も、長きにわたって、事実上の女子校であり続けました。
ただし、今は完全な共学校になっています(初稿ではその経緯を詳しく…というか熱く語りすぎて何のブログかわからなくなってしまったので、そこはカット)。
saki-008-191-001.png
作中では土浦女子の所在地についての手掛かりはまだなく、すこやんの実家の正確な位置も、このコマだけではよくわかりません。
よって、本記事ではあくまでも暫定的に、土浦女子≒土浦二高として、小鍛治家はあの階段下近くのどこか、として話を進めます。

すこやん通学路

うーんわかりにくい地図だなあ。一応ベースは国土地理院のなんですが。
太い紺色の線がJR常磐線、石岡から土浦に一本だけ伸びてる緑色の線が、水戸街道こと国道6号線です。
実際はこの道の左側に常磐自動車道が並行して存在します。
あ、縮尺入れるの忘れた…作り直すの面倒くさいから、このままにしますね。
JRの高浜―土浦間が12.6kmってことで、だいたい感じがつかめると思います(放任主義)。

なお、高浜がすこやんの実家の舞台であることは、仮想と現実の真ん中あたり様の、以下の記事で知ることができました。

[咲-Saki-][舞台推理][ふくよかにすこやかに]の舞台

管理人USO9000様の、僅かなヒントから論理と知識を武器にみるみるうちに舞台を特定していく手際はお見事というほかありません。こうした先人の業績に、心から敬意を表したいと思います。

小鍛治家がある石岡市高浜から、学校所在地の土浦市立田町までは、道路状況にもよりますが、自動車で20~30分といったところでしょうか。
NSは実際に土浦二高前から知恩院下のセブンイレブンまで、(法定速度で)走ってみましたが、交通量の少ない早朝で23分かかりました。
自転車通学ができる距離ではないので、高校生的には遠距離といっていいでしょう。
  • case1 バス通学
NSは土浦駅から石岡駅行のバスが出ていることを知っていたので、まずこのケースを考えました。
しかし、石岡駅発のバスは高浜を通りません。乗り換えが必要になります。

自宅―(徒歩)―高浜中央―(関鉄グリーンバス)―国府六丁目―(関鉄グリーンバス)―亀城公園前―(関東鉄道バスor徒歩)―土浦女子

最後の区間は一駅しかないので徒歩でもおkですが、全体としては結構時間がかかります。乗り換えがスムーズにいっても40分、朝の渋滞もありますし、1時間は見なければ遅刻してしまうかもしれません。

  • case2 電車通学
自宅―(徒歩or自転車)―高浜―(JR常磐線)―土浦/土浦駅―(関東鉄道バスor徒歩)―土浦女子

なんと、電車なら僅か二駅、所要時間11分。バスに乗り換えて学校までは、市街地の混雑を考慮しても約10分。駅から徒歩でも20分で着きます。比較するまでもありませんでした。遠距離と言っていいのかもわからなくなりました。

  • case3 親の車通学
自宅―(県道など)―土浦女子

まあ、これもあるんですよね、可能性としては。
職場が土浦やつくばにあれば、出勤のついでに娘を送るのは自然です。
しかし高校生の下校時刻と社会人の勤務終了時刻とでは差があり過ぎでしょうし、部活や残業などの時間が変動しやすいことを考慮すると、この場合でも帰りは公共の交通機関を使うことになるでしょう。

以上から、

すこやんは、電車通学をしていた(常識)

sukoyan_ticket2.png

↑この定期券を捏造するのに精力を使い果たしたので、高浜探訪の話はまた今度ということで。
ん?捏造じゃなくて偽造というべきか・・・でももうレイヤー統合しちゃったから直せないや(迂闊)。

お休みなさいですノシ


【3月3日追記】
定期券の修正をしました。(捏造→偽造、小鍜治→小鍛治 など)


このページのトップヘ