2012年8月28日

Bloggerをスマホ対応にする

スマホ用のデザインを設定して、綺麗なBloggerが見えるようにしましょう。
まずは、モバイルテンプレートを無効にして、画面縮小率を調整します。
[テンプレート > HTMLの編集]
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
 <b:else/>
-   <meta content='width=640' name='viewport'/>
+   <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
  </b:if>

width=device-width を設定すると100%表示ってことだけど、ちょっと拡大しすぎね。

スタイルシートを小画面用にカスタマイズしたのがこちら。
スマホ専用じゃないから、普通のブラウザでも画面を狭くすると適用されます。
(デザインを確認するのに、スマホをいちいち持ち出さなくてもいいので、楽だったりします。)

[カスタムCSSの追加]
@media only screen and (max-width: 480px) {
  body { min-width: 0;  max-width: 480px; }
  .content-outer, .content-fauxcolumn-outer, .region-inner {
    min-width: 0; }
  .content-inner { padding: 5px }
  .main-inner .columns { padding-right: 0px }
  .main-inner .column-center-inner .section {
    margin-right: 5px; }
  .Header .descriptionwrapper { display: none; }
  h3.post-title { margin-right: -15px; }
  .post-footer { display:none }
  .fauxcolumn-outer{ display:none }
  .main-inner .column-right-outer {
    position: relative; margin-right: 0px;
    width: 100%; border: 1px solid;
 }
}

2012年8月26日

トマトジュース色に染めたい...

Google Bloggerって、テンプレートの種類が少なくて寂しいので、わたし好みの色に染めてみました~
スタイルを変更するとカスタムCSSが消えちゃうので、ここに書いておきます。

スタイル編集にはFirefoxやChromeがお勧め。
FirefoxのFirebug拡張はとっても便利ですが、プロでもない私にはちょっと重すぎるので、最近はChrome + Stylish愛用しています。
css3やhtml5標準に対応してないIE(Internet Explorer)は論外。きゃー、IE9が、影や角丸、グラデーション対応してない~
[CSSを追加]
body { padding:0 4px 4px 4px }
.content-outer, .content-fauxcolumn-outer, .region-inner {
  max-width:none !important; }

.main-inner {
  padding-top: 10px }
.main-inner .column-center-inner {
  padding: 0; }
.main-inner .column-center-inner .section {
  margin: 0 0 0 15px;
}

.section { margin: 0 0 0 10px; }
.widget { line-height:1.2; margin: 0 0 10px 0; }
blockquote {
  border: 1px dotted #f66;
  margin: 10px 0 10px 20px; padding:2px 4px;
  white-space: nowrap; font-family: monospace;
  overflow: hidden; text-overflow: ellipsis;
}
.titlewrapper {
  padding:8px 15px 0 !important; }
.header-inner .Header .descriptionwrapper {
  padding: 0 15px 4px; margin: 0;
}
.Header .description {
  margin: 0; font-size: 50%;
}

.header-outer {
  margin: -4px -4px 0 -4px;
  border-radius:8px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.8);
  background: #e60004 url() !important;
  background: -ms-linear-gradient(top, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
  background: -moz-linear-gradient(top, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
  background: -webkit-linear-gradient(top, #FF6666 0%, #E60004 10%,
#E60004 90%, #AA0000 100%), #e60004 url();
  background: linear-gradient(to bottom, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
  background-clip: padding-box;
}
.Header h1 { margin-bottom: 0; font-size: 24px;}

h2.date-header { margin-bottom: 4px; }
h3.post-title { margin-top: 4px; font-weight:bold;
  text-shadow: 0 0 1px #fff,
    2px 2px 4px rgba(0, 20, 0, 0.6);
  margin: 0 5px 0 -15px;
  padding: 2px 8px;
  background: -ms-linear-gradient(top, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
  background: -moz-linear-gradient(top, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
  background: -webkit-linear-gradient(top, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
  background: linear-gradient(to bottom, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
  border-radius:8px;
}

.post-body { line-height:1.2 !important }
.main-inner .column-right-inner {
  padding: 0 2px; }

.footer-inner { padding:0 }
.post-footer {
  margin:0 !important;
}
IE9で角丸や影が使えないのは、BloggerのテンプレートがIE7用であるためでした。
グラデーションは表示できないのね。
[テンプレート > HTMLの編集]
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
+ <meta content='IE=9' http-equiv='X-UA-Compatible'/>
テンプレートを修正して対応。スマホ対応も必要ですねぇ。

2012年8月19日

ペペロンチーノを作ってみよう

MoEでペペロンチーノを1000個作るのに、必要な材料を確認してみた。

シェル・レラン風ガレットを作ってみよう

MoEでシェル・レラン風ガレットを1000個作るのに、必要な材料を確認してみた。



ライオン肉、案外少なくて済むのですね。

グラタンをつくってみよう

料理buff(A)なので、他の料理buffとほとんど共存可能。詠唱速度(ディレイ)-15、移動速度 -20というステキな効果。
動けなくなるですって? 桜餅でbuffを上書きできるもにぃ。

作成が非常に面倒なので競合露店の心配も無いわね~。
ということで、MoEでグラタン1000個作成に必要な材料を調査。


これで数合ってるかなぁ?
収穫いってきますぅ

2012年8月17日

ABC楽譜を共有するには...

ABC楽譜を共有するには、どんな方法がいいかなぁ~

個人のブログに掲載


入手元とかがはっきりするから、個人のブログに掲載するのが基本かなぁ。
普通のブログや掲示板だと画像ファイル以外は添付できないので、ぺた~って貼るしかなかったりするけど、Google Drive や Dropbox の公開フォルダを利用すれば、ばっちりだね。
個人的感想だけど、使い勝手はDropboxの方が良さそう。

仲間内で共有

MoE内で楽譜をやり取りしていると、重複してきちゃって面倒って場合は、Google DriveやDropboxで共有フォルダを用意すると便利です。
ABC楽譜を共有する程度なら、クライアントソフトをインストールしなくても使えます。ウィルス感染するのが怖い人は、ブラウザだけで使いましょう。

  • Google Driveではフォルダ所有者を複数設定できるので、管理者の変更が容易です。
    Dropboxでは所有者の変更のみ可能です。

Google Sitesを使う


Sites内にフォルダを用意してABC楽譜を登録するだけです。利用は簡単。

容量は、無料で100MBと少なめです。

オーナーを複数人設定できるので、Master不在でもメンバー追加に困ったりしないなど、FS専用ページで使うと便利かもしれません。


  • 編集にはGoogleアカウントが必要。(閲覧だけなら不要)
  • 容量が少ないので、動画や掲示板は別のサービスをつかうようにした方がよい。


2012年8月6日

MidiからMoe-ABC楽譜に変換!

音楽演奏って楽しいねぇ~。同じ音楽ばっかり演奏していると飽きちゃう、ということで自分でABC楽譜を起こしてみることにしました。
でも、自分で作曲したり楽譜から入力するのは面倒なので、既存のMidiファイルから変換することにします。

用意するソフトと参考リンク
  1. MIDI音楽編集ソフトDomino (http://takabosoft.com/domino)
  2. もえといろ (http://aquavit.hiho.jp/moeabc/)
    toMoEgah r17 (http://d.hatena.ne.jp/vow/)
  3. もえいろは (Moe公式サイトから)
  4. Moe公式サイトの情報: 楽器演奏(作曲)について

1.適当なMidiを拾ってくる

Moe内で演奏してもライセンス的に大丈夫な曲を探すのは大切ですが、はじめは、ピアノやオルゴールなどのソロ演奏曲を探しましょう。
MoE内では、フルートなどの楽器でもピアノのように和音や低音が出せるので、沢山あるピアノ演奏曲から探すとよいかも。
Dominoを使ってMoE専用に楽譜を書き直すと、オーケストラ演奏も2~3人で演奏できるようになります。

2.Midiの中身を確認してみる

Midiの中身を知るために、Dominoで開いてみましょう。
Midiでは、楽器毎に沢山のchが登録されていることがありますが、MoE用のABC楽譜では楽器毎にファイルを分ける必要があります。
Pitch Bend はMoe ABC楽譜で表現できないので、Pitch Bendを多用したMidiは MoE内で演奏すると残念なことになります。
実際の演奏を記録したMidiも存在します。音符の長さが中途半端になっているのが特徴ですが、こんなMidiファイルはクォンタイズやレガートで整形しないと、ABC楽譜が大きくなりすぎてMoe内で演奏できないってことがあります。

3.ABC譜に変換してみる

もえといろ が簡単なので、初心者にはおすすめです。
演奏すると発音がずれるようでしたら、リズム制約 (クォンターゼーション) の制限を緩く/制限なしにします。(出力されるABCファイルサイズが増加します。)
合奏曲で音がずれるようでしたら、toMoEgah を使ってみてください。

4.もえいろはで演奏してみる

もえいろはで演奏しながら、各楽器のボリュームを <v:80> とかABC楽譜を手打ちで調整します。
演奏可能な和音数を超えてしまったら、2人以上のセッション用楽譜にするか音符をゴリゴリ削るしかないですぅ。

5.出来上がったABC楽譜はないの?

Moe公式サイト(楽器演奏(作曲)について)から、楽譜詰め合わせがダウンロードできます。
楽器公開テスト時にも配布された楽譜は、すこし編集が違うようです。
ニコニコ動画の【MoE楽器演奏】紅葉色の帰り道【オリジナル曲】は、動画説明にダウンロードリンクがあります。
おこめさんのがくふおきばを発見。蜜柑箱の隠れ家にも楽譜が置いてあるもにぃ。
MOEの楽譜ですよ。を発見。
私の変換したABC譜も、使ってくださいね。

=== FAQ ===

toMoEgahで変換したらドラムやパーカッションの音が出ません。

toMoEgahではch10をドラム譜と認識しません。認識させるにはチャネル先頭にドラム変換マップを挿入する必要があります。
Dominoで toMoEgah用の音源定義ファイル を使うと一括でドラム変換マップを挿入できます。

toMoEgah で変換するのが面倒です。

C:\Users\[ユーザー名]\AppData\Roaming\Microsoft\Windows\SendTo にtoMoEgahへのショートカットを作成すると、"送る" で変換できるようになります。

toMoEgah が解凍できません。

FreeSoft 100 あたりから、7z解凍に対応したアプリを探してください。

収穫の時給は?

トマトジュースが12gで売れることを前提に、果物類の収穫原価を探ってみました。
1時間あたりいくつ収穫できるかを計測して、トマト価格と比較しただけですけど...
  • トマト: 9.5 (15)
  • リンゴ: 35 (25)
  • イチゴ: 32 (25)
  • グレープ: 30 (25)
  • バナナ: 23 (25)
  • オレンジ: 24 (25)
  • 大豆: 14 ( -)
  • とうがらし:25 (8)
  • ハーブ: 81 (70)
(括弧)内はNPC販売価格です。収穫作業の時給を10k/hに設定してみたんだけど、赤字ねぇ。
リンゴやイチゴを収穫するより、大豆、もしくは採掘した方がいいってことですよねぇ。

ん~、でもイチゴの収穫は、楽しくてやめられないもにぃ。