忍者ブログ
音楽同人サークル『Magicberry Fields』のブログです。 ニコ動マイリスト→http://www.nicovideo.jp/mylist/5662950
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ホームページをスマホ対応させました。
http://magicberry.nobody.jp/

考えなければいけないのは、
・画面サイズ
・PCサイトとの関係
でしょうか。

1.画面サイズ
ウチのページ&ブログの4ヶ月間の解析結果を見ると。

320×568px iPhone5 56回
375×667px iPhone6 29回
360×592px android系 18回
320×480px iPhone4など 11回
360×640px android系 11回
414×736px iPhone6Plus 2回

と、見事にバラバラですが、横幅は、320pxを最低値と考えれば問題なさそうです。
これより大きい場合も考慮して、サイズを固定せず

width:100%;

のように指定することにします。


2.PCサイトとの関係
一昔前はPCサイトとケータイサイトを別にするのが主流でしたが。
はっきりいって、両方修正するの面倒くさい。
なので、PCサイトとケータイサイトを、共通のひとつのコードで表示できるようにします。
いろいろ模索した結果、単純に幅が一定値以下だったら、動的にレイアウトが変わるようにしました。

ここで使えるのが@media。
ブラウザのサイズなどの条件で、場合分けして書くことができます。
後は、displayでレイアウトを変えたり、表示・非表示を切り替えたらうまくいきました。
cssのコードはこんな感じ。



/* スマホ・PC共通の記述 */
div.main
{
    width:100%;
}

div.menu
{
    display: block;            /* ブロック表示でメニューを上に表示 */
    width:100%;               /* 横幅めいっぱい表示 */
}

/* 右列 */
div.right
{
    display: none;    /* 非表示 */
}

/* PC用ページ */
@media all and (min-width: 960px) {
    /* 横幅が960px以上だったら */
    div.main
    {
        width:950;
    }

    div.menu
    {
        display:inline-block;        /* インラインブロックでメニューを左に表示 */
        width:130px;
    }

    /* 右列 */
    div.right
    {
        display:inline-block;        /* インラインブロックで表示 */
    }
}

メリットは、PC上で動作確認ができること。
ブラウザの横幅小さくするだけで、スマホ向けの表示に切り替わります。
デメリットは古いブラウザが対応してないこと。
未確認ですが、おそらく、古いブラウザだと@media内の記述が無視されて、PCでもスマホ向けのサイトだけが表示されるかと。
PR
今週は、動画の投稿方法をあれこれ模索していきます。



■ステップ1 一枚絵+BGMの動画を作る

とりあえず、イラストと、曲はできているので。
イラストをずーっと表示させっぱなしにして。
BGMとして曲を流す、そんなカンタンな動画を作ってみます。

使用ソフトは、Windows ムービーメーカー。
画像とmp3読み込んだら、普通にすんなりできたので割愛します。


■ステップ2 歌詞を表示する

こんなカンタンにできるなら、歌詞くらいは表示させたいです。
ってわけで、ムービーメーカーで文字が表示できないか試してみましたが。
うーん、微妙。
改行が勝手に入るのと、フォントサイズを指定できないのが致命的。
これじゃ文字が入りきらないし。

ってわけで、画像にあらかじめ文字を入れておくことにします。
画像を30枚コピーして。
1枚1枚文字を貼り付けていく。
……そんなメンドい作業やってられるか!

プログラマたる者、メンドいことはプログラムでやれ。
ってわけで、Microsoft Visual C# 2008 Express Editionをダウンロードして。
カンタンなツールを作ることにしました。

以下、サンプル。

            //画像の読み込み
            Image rImage = Image.FromFile( "C:\\img\\pink.jpg" );

            //描画用クラス
            Graphics rGraphics = Graphics.FromImage(rImage);

            //アンチエイリアス
            rGraphics.SmoothingMode = SmoothingMode.AntiAlias;

            //フォント
            Font rFont = new Font("MS P ゴシック", 30F);
            //色/ピンク
            Color rColor = Color.FromArgb( 255, 192, 192 );
            //ブラシ
            SolidBrush rBrush = new SolidBrush( rColor );

            // 文字列を描画する
            rGraphics.DrawString( "桜音", rFont, rBrush, 50, 300 );
           
            //画像の保存
            rImage.Save( "C:\\img\\pink2.bmp", System.Drawing.Imaging.ImageFormat.Bmp );

8行で書けたよオイ。C#メチャクチャカンタンだなー。
あとは、歌詞をstringの配列に格納して、for文あたりで回せばOK。
センタリング処理は、先に幅を計算しないといけないんで、若干メンドイかも。
HOME
TO DO
(整理中)
スケジュール
10/30 M3-2011秋
カレンダー
04 2017/05 06
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
最新コメント
[02/03 ゆーしす]
[02/02 あきる]
[12/30 職人]
[12/27 あきる]
[12/22 あきる]
最新トラックバック
ブログ内検索
カウンター
アクセス解析

Copyright © [ Magicberry Fields - Webログ ] All rights reserved.
Special Template : 忍者ブログ de テンプレート and ブログアクセスアップ
Special Thanks : 忍者ブログ
Commercial message : [PR]