スマホ版作成中5:最終回
ようやく☆music.BBSトップの新しいスマホ版を書き替えました!
テストと言うか、練習を数百回繰り返したので何の問題も無く一発で決まりましたよンw
о^∇^)/ ヨッシャー!
ちょっと間が空いたのでUI:ユーザーインターフェース(下部ボタン)のアクションとか、ちょっとこだわって改良を加えました(先ほど作成したこのブログで実験したUIに更なる改良を試みた)。
カテゴリページやBBSのUIも変更したいと思うくらい良い出来だった、、(今更ムリなんですがw)
たった2行のJavaScriptと数行のCSSだけでテキストの開閉などスタイルの変更が可能になったのでJavaScriptファイルを使わず、追加CSSファイルも軽量化出来ました。
可能にしたのは、数年前から使っている...
function op(n) {var box = document.getElementById(n);box.className = 'op';}
function cl(n) {var box = document.getElementById(n);box.className = 'cl';}
※opとclは任意の値(名前)
..この2行の(クラス名を書き替える)JavaScriptと、、
セレクタ1,セレクタ2,セレクタ3{transition:all 0.2s;}
セレクタ1{font-size:100%;color:#000000;height:20em;line-height:100%;}
セレクタ1.cl{font-size:0;color:#ffffff;height:0;line-height:0;overflow:hidden;}
↑こんなカンジのCSSなどの組み合わせです!
下の例の様なボタンで指定IDのクラス名を書き替える事により、少ない記述でUIにいろんなアクションをつけることが出来るようになりました!
【例】
<要素 onClick="op('ID名');">
または、
<要素 onClick="cl('ID名');">
前までは、transitionプロパティーに all なんて値がある事を知らず、長〜〜いCSSやJavaScriptを記述していたので「こんな簡単なんでええんかいな?」ってカンジでやってみたのですが、いいカンジに仕上がってビックリしました!
┗Chromeさま様でんな(^-^;ハハハ..
まだまだ勉強が足りてないと痛感しましたヨw
いつの日かバラバラのサイト群をひとつのサイトで運用する時の為に「頑張って勉強せなアカンな〜」って思います。
宜しくお願いしま〜す!
トップページのスマホ表示が新しくなりました
音楽掲示板群☆music.BBSのスマートフォン版表示が新しくなりました!
HTMLテキストの全書き替え&UIの刷新、全カテゴリと直営BBSの最新投稿情報のトップ表示などなど改良と改善を致しました。
■対応ブラウザ:
最新版Chrome
最新版Firefox
最新版Opera
Edge(Windows)
■準対応ブラウザ:
IE10,IE11,PC版最新Safari
▼PC用スマホ版表示
スマホ版:音楽掲示板群☆music.BBS
※携帯電話とスマートフォンはそれぞれの表示になります!
旧Opera(Safari)はスマホ表示です!
宜しくお願い致します!
スマホ版作成中4
☆music.BBSトップの新しいスマートフォン版トップを19日日曜日のみんなが寝静まった頃に書き替えようと思っていたのですが、オイラが先に寝入ってしまって出来ませんでしたw
(^-^;汗‥‥ハハハ
今日までに、、
細かいところのCSSを微調整したり追加したり文章を書き替えたりしました。
いろんなブラウザでの表示テストを数百回繰り返したので、大方のブラウザで思った通りの表示になると思っています(総表示回数1200回以上)。
┗SafariやIEには警告を表示するとか、、
新しくサイトのトップページを作成する時は表示回数がだいたい千回くらいになる、、携帯電話でCSSファイルとかを編集してPC等で確認したりするからです。
┗僕のメイン携帯電話は外部CSSが反映しないしJavaScriptもムリだしフルブラウザも古いIEと同じカンジだから、、w
同じURLでキャリア別に違うテキストを表示するページの場合は軽く千回以上の表示回数になるw
今の新☆music.BBSのトップページ作成には半年以上かかったので数千回になってたよン、、
┗しんどかったナ〜〜w
まあ、今月中には確実に変更出来そうだで、、
o(^-^)o..ヨシ!
スマホ版作成中3
EdgeとIE11のテストもやりました。
何故かこの日に限って突然SAMEHAに接続出来なくなったり(サーバーダウン?)、僕のセカンドPC(Windows10)がフリーズしたり勝手にEdgeが閉じたりとかトラブル連発だった、、
ちょっぴり不安になったけれど、まぁ問題無いみたいですヨw
y(^-^;..タブンダイジョーブ、、
UAスイッチャーでのブラウザテストの第2弾でも問題は無かったので、あとはテキストを差し替えして確認するだけになりました!
さて、いつやろうかな?
スマホ版作成中2
ブラウザテストの第1弾やりました!
問題の旧Operaと新Operaでは、やはり問題があり修正、、
大丈夫だと思っていたIE10でも修正、、
EdgeのテストはまだだがChromeなので問題ないでしょうw
IE11はどないやろ?
Safariや旧IEと旧Operaは非対応ブラウザなのでコメントを表示するのですが、UAスイッチャーを使ってクローラーに表示しないとかプログラム(サーバーに処理させるif文)をやり直しました。
一応問題ないみたいw
UAやブラウザの情報を使ってのCSSやコメントなどの出力振り分けは完成したかな?
if文は、むかし使っていたプロページのモノに比べるとかなり簡単な事しか出来ないのですが、今となっては☆music.BBSトップのサーバーでしか使えないので重宝してます
あとは、アンドロイド実機とEdgeのテストかな?
(^-^;...
スマホ版作成中
☆music.BBSトップのスマホ版をリニューアルする為のテスト版を作成しています。
先月からやっててブラウザ別の確認チェックを残して殆んど出来上がっているのですが、(いつもの事ながら)公開を前に「本当にこれでいいのかな〜?」とか、迷って足踏みしとりますw
2月中には公開したいな〜〜