くじぇ工作所の他サイトへ たまり場へ 過去ログへ お勧めGoodsへ トップページへ戻ります

管理者のプロフィール・連絡先へ
PHPやVBによるコーディングやシステムエンジニアを仕事にしています。
主にiPhoneアプリの紹介やWeb開発などのPC系の話題と、
アニメやゲームなどのサブカルな話題を取り扱っています。




2017年10月 7日

(現在作業中)ブログをレスポンシブデザインに適応させるためにしていること

このエントリーをはてなブックマークに追加 Clip to Evernote

アクセス解析によるとこのサイトkuze.tsukaeru.jpについて、アクセス先の9割以上がこのブログです。
そのうちスマホからのアクセスがだいたい4割を占めます。

「このブログがスマホから読みやすければ、退出率が減るに違いない。
 ぶっちゃけ雀の涙もいいところなアフィリエイト収入ももう少しはマシになるはず。

実は随分前からスマホ専用ページへ移動するリンクを用意していました。

スマホ専用ページへ移動するリンク

ーが、Google Analytics先生いわく全く利用されていないようです。

まあ、このサイトは検索が引っかかってちょっと立ち寄ったケースが大半なのですが...
わざわざ「スマホ用ページ」ボタンをクリックするなんてウザいよね。

そこで、以前からレスポンシブデザイン※について調査していました。
※横幅に合わせて自動でレイアウトを変更する仕組み。

その一環でアニチェッカーのマニュアル作成時に、そのエンジンの一つBootstrapを試していました。
だいたい使い方は分かった。
Bootstrapのグリッドデザインは、

①一つのページを大まかなパーツに分解し、

②横幅の割合と横幅が狭くて縦に並べたときの順

これらをそれぞれ指定するのが基本ということですね。

しかしー面倒臭い。

1. このブログは、ブログ管理システムmovabletypeを用いているので、Bootstrap用に書き換えたテンプレートを用意しないといけない。
具体的には、インデックス、アーカイブ何種かを用意しないといけない。
最近movabletype6にアップグレードしたのですが、テンプレートは全く触ってなかったので、知識が古い。
今時の書き方へアップデートしないと。

2.10年以上前-のPerl製掲示板をいまだに運用しているのですが、デザインを直すには直接ソースコードを修正しないといけません。
このソフトテンプレートって食える?という構造なんです。
ていうかー一から書き直したい!
ってフリーの掲示板ならいくらでももっと良いのが提供されているので、やるならそっちを導入した方が早い気がする。

3.ブログ導入前は、HTML上に直接書いていましたが、それらは直接1ページ1ページ書き直さないといけない?
10年以上前は、こういったページでデザインを一斉に描き直すのに(Adobe合併前の)Dreamweaverを使っていました。
しかしながらBootstrapのページが当時のDreamweaverで編集できるかどうか怪しいし、そもそも今どきのPCで動くかどうかが怪しい。
ちなみに、これらのページはアクセス数が全くないので、最新のDreamweaver CC(Adobe Creative Studio)を導入してまで直そうという気には全くならない。

Adobe Creative Cloud コンプリート 2017年版 | 12か月版 | オンラインコード版
アドビシステムズ (2013-10-01)
売り上げランキング: 188


ということで、上記をリストアップするだけでも十分面倒臭い。
そういうわけで直すべきとは思っていても動けなかったのですが。
やっと最近コードを直す気合がたまったので、空いた時間をやりくりして修正に時間を注いでいます。

※でもぶっちゃけゆとりのある人は、こんなことに時間を費やすよりも、クラウドワークスかランサーズあたりにテンプレートデザインの依頼を投げるのが正解だと思う。

1.修正方針を決定します。
ページを完全リニューアルするのではなく、現行のデザインベースで構築する決定をしました。

なんかページ自体を一から作り直したい衝動に駆られます。
しかし、ここは直し始めると完成しないパターンだと戒めて、次に進むことにします。

1-1.Perl製掲示板は、見た目のみレスポンシブデザインに対応させるが見た目以外は原則そのままにします。
こちらも同様の理由で細部に凝り始めると全体がいつまで立っても完成しないので後回しとします。

1-2.HTMLで記述していたブログ部分はいったん閉鎖し、後日公開することにします。

2.テスト用フォルダを用意する
内部的には大規模なリニューアルになるので、作業用フォルダを用意します。

3.要素分解します。
以前作成したソースはレイアウトをtableタグで構成していたので、divタグに組み直します。
その際divタグをスマホで表示するときに並べる順番に配置して、仮テンプレート完成とします。

4.とりあえず現行データのテキストとCSSをはめてどう見えるか試します。
現在トップページに掲載している各記事をコピペして、仮テンプレートに適応します。
また公開中のサイトからCSSからちょっとづつ取り出して、今の見栄えをだいたい維持しつつ、レスポンシブデザインの動作はOKである事を確認します。
CSSは全く触ってなかっただけにこれ何用の設定だっけ?というのがチラホラ。
全部そのままぶち込んだところ、やっぱりBootstrapとの相性がイマイチだったので、ひとつづつ確認して必要最低限のものだけ適応します。

そして、レスポンシブデザインがきちんと動くのか?動いた際の見ばえはどうなのかとかなどを確認します。

するとーあれ?なんかフッターのレイアウトが崩れてしまい、テンプレート通りに動作しない!
divタグの閉じ忘れが怪しいですけど、コードを見ていても対象カ所が分からない。
そんな時はHTML整形ツールを使うと、閉じ忘れの原因が分かるかもしれません。
私は分かった。


いろいろ問題のあるところを直しまして大体許容範囲内で動作すると判断し、次へ進むことにしました。

Bootstrapで構成したサイトに、現行サイトのCSSを適応して動作を確認している例


右カラムのところが、URLを記述した際に折り返しがおかしい(飛び出す)ところもあったのが惜しかったのですが、分からん!ので保留とします。

URLがBootstrapで指定した領域より飛び出してしまう

5.Perl掲示板も問題なく動く事を確認します。

HTMLばかり弄ってましたが気分転換にPerl掲示板に新コードデザインを適応します。
そういえばテンプレートではなかったけど、できるだけ同じ場所にデザイン系のコードを固めていたので、案外悩まなかったな。


ここまではテスト領域で実装したのですが、まだまだ公開はできません。

なぜなら、今回の意向の要、
6.movabletypeのテンプレートを新デザインに適応する

が残っているからです。

とりあえず現行のブログをコピーしてテスト領域へ書き出すように設定を直したので、これからテンプレートを書き直します。

これが完成したら、テストフォルダの名前を公開フォルダに差し替えて一般公開したい!と考えています。
移行完了して完全公開まであと一歩!!


PR

HTML5+CSS3でつくる!  レスポンシブWebデザイン
大串 肇 齋木 弘樹 清野 奨 嵩本 康志 松尾 祥子 松尾 慎太郎 宮崎 優太郎 吉澤 富美
ソーテック社
売り上げランキング: 428,943

最近の気になるブックマーク

投稿者 kuze : 23:18 | コメント (0) | トラックバック (0)

2017年9月15日

アパートの鍵穴が壊れたら、鍵屋を呼ばずに不動産屋を呼ぶべき

このエントリーをはてなブックマークに追加 Clip to Evernote
アパートの鍵穴が壊れたら、鍵屋を呼ばずに不動産屋を呼ぶべき

深夜アパートの鍵が壊れて入室できなくなった場合、基本的にどうしても急ぎ帰る必要がある場合のほかは、近くの何処かに泊まって、翌朝管理会社・大家に連絡すべき。

"アパートの鍵穴が壊れたら、鍵屋を呼ばずに不動産屋を呼ぶべき"の詳細を読む >>

投稿者 kuze : 22:36 | コメント (0) | トラックバック (0)

2017年9月 9日

テキストメモアプリATOK Padの後継は、Simplenoteがいいのかも

このエントリーをはてなブックマークに追加 Clip to Evernote
テキストメモアプリATOK Padの後継は、Simplenoteがいいのかも

iOS11でATOK Padが使えなくなるのがつらい。...しかし、Simplenoteのおかげで何とか凌げるかもしれない。テキストメモを複数デバイスでリアルタイム同期するだけ!これだけなのがいいんです!!

"テキストメモアプリATOK Padの後継は、Simplenoteがいいのかも"の詳細を読む >>

投稿者 kuze : 21:04 | コメント (0) | トラックバック (0)

2017年9月 8日

「ことのはアムリラート」の序盤だと思うが、どうも話が都合良すぎるので嫌な予感がする

このエントリーをはてなブックマークに追加 Clip to Evernote
「ことのはアムリラート」の序盤だと思うが、どうも話が都合良すぎるので嫌な予感がする

最近「ことのはアムリラート」をプレイしているのですが、持てる知識を結集して何とかコミュニケーションを理解しようと四苦八苦する姿は、単独で海外旅行(もしくは海外赴任)した時ってこういう感じなのかな?ー女の子と仲良くなれるのはないだろうけど。と好感が持てます。

"「ことのはアムリラート」の序盤だと思うが、どうも話が都合良すぎるので嫌な予感がする"の詳細を読む >>

投稿者 kuze : 00:41 | コメント (0) | トラックバック (0)

2017年9月 6日

今、iOSで自転車の運動計測をするならStravaがヘルスケア連携でオススメ!

このエントリーをはてなブックマークに追加 Clip to Evernote
今、iOSで自転車の運動計測をするならStravaがヘルスケア連携でオススメ!

Stravaは、「基本的な機能として、経路計測と距離、速度などに加えて、だいたい何キロカロリーか測定してくれる」「最初からヘルスケア連携している」「これらが全部無料なだけでなく、広告も一切出てこない」という点で、最近のサイクリング計測系アプリとしてオススメ!

"今、iOSで自転車の運動計測をするならStravaがヘルスケア連携でオススメ!"の詳細を読む >>

投稿者 kuze : 00:54 | コメント (0) | トラックバック (0)

2017年8月23日

PaintsChainerで着色する前にはそれなりに質感も入れた方がいいみたい

このエントリーをはてなブックマークに追加 Clip to Evernote
PaintsChainerで着色する前にはそれなりに質感も入れた方がいいみたい

#PaintsChainer に渡す下絵について、輪郭線を描いた時点で投げた方がいい感じに描いてくれるもんなんでしょうか?それとも白黒なりに質感をある程度自分で描いた方が上手く描画できるもんなんでしょうか?ー結論としては、余裕があれば質感も書き込んだ上であげる方がオススメです。

"PaintsChainerで着色する前にはそれなりに質感も入れた方がいいみたい"の詳細を読む >>

投稿者 kuze : 01:07 | コメント (0) | トラックバック (0)

2017年8月16日

Chrome remote desktopで実家のWindowsと手持ちのiPhoneからアパートのMacを操作してみよう

このエントリーをはてなブックマークに追加 Clip to Evernote
Chrome remote desktopで実家のWindowsと手持ちのiPhoneからアパートのMacを操作してみよう

Chrome remote desktopを使って実家のWindows10(106キーボード)から、アパートのMac Mini(USキーボード)を遠隔操作してみた。便利だけどキーマップが異なっていて操作が難しい。iOSからならキーは同じように入力できるが、マウスカーソルの代わりにタッチしたり画面を拡縮しないといけないので使いにくい。

"Chrome remote desktopで実家のWindowsと手持ちのiPhoneからアパートのMacを操作してみよう"の詳細を読む >>

投稿者 kuze : 13:52 | コメント (0) | トラックバック (0)

2017年8月 5日

花火写真は難しい

このエントリーをはてなブックマークに追加 Clip to Evernote

花火の写真はなんかピンボケしたり、暗闇撮影特有のノイズがあって、なんかイマイチ。公式サイトの写真ってどう撮っているんだろう?

"花火写真は難しい"の詳細を読む >>

投稿者 kuze : 00:49 | コメント (0) | トラックバック (0)

2017年7月17日

Amazonから商品画像を取得するAPI(PHP製)をGitHubに公開してみた

このエントリーをはてなブックマークに追加 Clip to Evernote
Amazonから商品画像を取得するAPI(PHP製)をGitHubに公開してみた

GitHubへ、アニチェッカーでもサムネイル表示に使用しているキーワードを入力したらそのキーワードに関連しそうな商品をAmazonから引っ張ってくるPHP製のAPIをGitHubにてMITライセンスにて公開しました。大量にamazonへのキーワードリンクを貼りたい場合に参考となるかもしれません。ただちょっと外れる場合もありますが、それはご愛嬌。

"Amazonから商品画像を取得するAPI(PHP製)をGitHubに公開してみた"の詳細を読む >>

投稿者 kuze : 23:37 | コメント (0) | トラックバック (0)

2017年7月12日

初代Nintendo3DSのバッテリーを交換!楽勝です!!

このエントリーをはてなブックマークに追加 Clip to Evernote
初代Nintendo3DSのバッテリーを交換!楽勝です!!

3DSのバッテリーがすぐ切れるようになったので、Amazonで互換バッテリーを購入して自力で交換してみました。手先の器用さが要求されることは全くなく、楽勝に作業完了しました!

"初代Nintendo3DSのバッテリーを交換!楽勝です!!"の詳細を読む >>

投稿者 kuze : 21:58 | コメント (0) | トラックバック (0)

 
このページは WWWC META Check に対応。更新チェックにご利用ください。
 
くじぇ工作所サイトマップ

このサイトについて
© Copyright Hiroshi Kuze 1996-2017 ( hiroshikuze@gmail.com ).

Analyzed by efStat Analyzed by Log_on! WEBCLICKERS.NET 人気blogランキング