作者別: michi
Chromeモバイルシミュレーター
今日もとても寒いですね。
土曜日は東京でも雪が積もるということで、ちょこっとだけワクワクとしていたけれど、まったく積もらなかった…！
残念な気持ちもあるのですが、その後、凍った道を歩くのも怖いですからね。
と書きつつ、今日も雪が降らなくて残念！
というわけで「Chromeモバイルシミュレーター」。
少し前に知ったのですが、PC版(Mac版)のGoogleブラウザ「Chrome」でモバイルサイト表示シミュレーターという機能があるのですね。
「Chrome」でのモバイルサイトの見方は、ブラウザ右上、縦に並んだ三つの点をクリック。
「その他のツール(L)」から「デベロッパー ツール(D)を選択で観られます。
「iPhone5s」といった少々古めの機種から「iPad」などの画面サイズでも観られて面白いですね。
実機での自分のサイトの確認は「Xperia X Performance」と「iPod Touch5」、「iPad」でしたのですが、「Xperia X Performance」よりも画面の大きなスマートフォンだと、横向きにしたときに「ハンバーガーメニュー」ではなくPC版のメニューが表示されてますね。
画面の大きな機種でも「ハンバーガーメニュー」が表示されるように修正しようかと一瞬だけ思ったけれど、なんだかドツボにハマってしまいそうなので、このままにすることにしました。
あと、サーバーにアップしていないローカルファイルでも確認出来るのですね。
こんな便利な機能があるなんて、サイトを作っているときに知りたかった！
AFCアジアカップ 決勝 日本vsカタール
前々回、このブログをレスポンシブ化の話でスマートフォンからアクセスがあった場合は画像を70%表示するということを書きましたが、その後、css(スタイルシート)を書き換えました。
PCでは左側に回り込んでいる画像をスマートフォンでは回り込み解除、中央配置に変更。
cssって、ホントいろいろなことが出来るのですね。
というわけで、AFCアジアカップ 決勝 日本vsカタール。
ああ、なんとも残念な結果…！
カタール、とても強かったですね。
前半に2得点されてしまったけれど、後半、カタールの足が止まるんじゃないかと思っていましたよ。
が、最後までカタールの集中力が凄かったですね。
あと、イラン戦ではVAR判定が良い方向にいったけれど、決勝ではVARが悪いほうにいてしまいましたね。
あれがなければ日本の勢いが凄かったし、残りの時間でもう1得点出来たんじゃないかな。
出来れば優勝してほしかったけれど、今回のアジアカップは怪我人が多い中、日本はとても良いチームでした。
6月開催のコパ・アメリカに日本が参加するということで、そちらも楽しみ！
日本はJリーグの選手が中心に参加するのですかね。
AFCアジアカップ 日本vsイラン
ファイル転送サービス「宅ふぁいる便」で個人情報の流出がありましたね。
今は「firestorage」をメインに使用していますが、「宅ふぁいる便」には私も登録していました。
今日の朝、慌てて同じパスワードを使用していた他のサイトのパスワードを変更しましたよ。
というわけで、AFCアジアカップ 日本vsイラン。
昨日の準決勝は今までの日本の試合とは違い、終始ピリピリっとした雰囲気でとても面白かった！
下馬評ではイランのほうが上といったものが多くて、試合前はドキドキしてましたよ。
それまでの対戦国はラフプレイもなく、どのチームもキレイなサッカーをやるんだなぁと思っていたら、昨日のイランは非常に荒々しかったですね。
これぞアジアカップといった感じもしましたが、やっぱり怪我が怖い。
そんな中、1点目の南野と大迫は見事でしたね。
日本も以前にセルフジャッジからピンチになったことを思い出したけれど、昨日の試合はイランよりも日本のほうが集中を切らさなかったですものね。
あと、イランのアズムン。
体が強くて速いし、とっても恐ろしい。
が、アズムンを好きなようにさせなかったセンターバックの冨安健洋にビックリです。
以前は海外で活躍するのは前線の選手が多く、その後にサイドバックの選手が続き、最近はセンターバックの選手も海外で活躍するようになってきましたものね。
金曜日の決勝戦も楽しみ！
出来ればザッケローニさん率いるUAEとの試合が観たい気持ちもあるけれど、ホームのUAEはとっても怖そうだな。
サイトのレスポンシブ化
PCから観るとあんまり変わりがないのですが、サイトのレスポンシブ化が完了しました！
お正月にAmazonを観ていたら、ウェブサイト作成ソフト「BiND」の一つ前のバージョン「BiND9」が安めのお値段で売られていたので購入。
今までのサイトデザインそのままにしたこともあって、簡単にレスポンシブ対応のサイトが出来ました。
が、いくつか問題が。
ギャラリーページのサムネイル画像を開いて大きな画像をふわっと表示させたいのですが、どうも同じ画像を拡大表示しか出来ないようなのですね。
あと、メールフォームCGIも設置したいけれど、「BiND」さんで用意された専用フォームしか使えないようです。
「BiND」単体ではソースコードを直接編集出来ないので、ためしにアプリ外で直接htmlの編集、その後に「BiND」を開いてみたところ、ちょっとでも「BiND」で編集をはじめると、アプリ外で編集した箇所がすべて消去されてしまいますね。
考えた結果、「BiND」でおおよそのレスポンシブ対応サイトデザインを作成、その後は「mi(ミカキエディット)」で直接htmlやcssファイルを編集して完成させるという方法にしました。
後戻りの出来ないことに恐怖しつつ、ギャラリーページにモーダルウィンドウの「Colorbox.js」を設置、コンタクトページにメールフォームCGIを設置しました。
制作の途中、スマートフォンからも確認したところ、どうも「BiND」付属の「ハンバーガーメニュー」が重いのですね。
「ハンバーガーメニュー」というのは、「三」みたいなボタンを押すとメニューが表示されるというものです。
ここまで来たら、外部で色々と変更してしまえ！ということで、「ハンバーガーメニュー」は「drawer.js」に変更。
「ハンバーガーメニュー」はPCやMacのブラウザからもブラウザの画面を狭めれば見えるのですが、ちょこっと昔のブラウザで確認すると、ボタン部分がずれちゃうものもありますね。
PCやMacのブラウザを狭めて観る状況はほとんどなさそうなので、ここは無視しました。
最後に一番の難所。
このブログのレスポンシブ化。
使用している「さくらのブログ」はレンタルしているサーバーのおまけ機能なのですが、ノーマルの状態でスマートフォンからアクセスすると、スマートフォン専用デザインのブログに振り分けられてしまうのですね。
それを無効にしつつレスポンシブ化する方法は下記のブログを参考にしました。
http://blog.kantan-tech.net/article/174800796.html
想像していたよりも簡単にブログのレスポンシブ化が完了！
スマートフォンから確認してみると、画像の大きさがそのまま表示されて文字が窮屈になってしまうので、cssを追記してスマートフォンからアクセスした場合は画像を70%表示することにしました。
長々と書いてしまったけれど、ご機会などありましたらスマートフォンからもアクセスしてみて下さいね。
あけましておめでとうございます
あけましておめでとうございます！
昨年は年末ジャンボ宝くじをバラで10枚購入しました。
31日にドキドキしつつ確認をしたら、3,000円が当たっていました！
このお金で「レスポンシブデザイン」の本を買おうと思ってます。
というわけで、今年の自分用の年賀状イラスト。
普段は西暦で表記をするのですが、今年で平成が最後ということで「平成」を入れました。
今回は今年の干支のイノシシさんの他、ネコさんとツルさん、カメさんに参加してもらいましたよ。
そうそう、干支は中国から伝わったのが有名な話ですが、中国ではイノシシさんではなくブタさんが干支なのですよね。
なんでも、中国から干支が伝わったとき、日本にはブタさんが存在しなかったので替わりにイノシシさんにしたのですって。
ではでは、2019年もどうぞよろしくお願いいたします！
皆さまにとって2019年が素敵な一年でありますように。
良いお年を！
今日で2018年も終わりですね。
今年のお仕事は29日でなんとか完了しました。
そうそう、今のウェブサイトは「レスポンシブウェブデザイン」が推奨されていますよね。
「レスポンシブウェブデザイン」は画面の横幅サイズなど、PCやスマートフォンなど端末のブラウザに応じて見え方が変わるデザインです。
そろそろ自分のサイトもレスポンシブにしようかと勉強中。
でも、これはもう自分のような素人レベルじゃ大変そう…。
なんとか2019年中にレスポンシブ化が出来たらと思っています。
ではでは、サイトやこのブログを見ていただき本当にありがとうございました！
2019年もお時間のあるときに遊びに来てくださいね。
みなさま良いお年を！