WebデザインノートBOOK

Webクリエイターに関する勉強を書き記したブログになります。

Scriptはhtmlソース内に書くべきでない

前回の、サイトの保守(?)に関する記事。
タイトルの通り、Scriptはhtmlソース内に書くべきでない。

具体的な例をあげると、

    • bodyタグのonload
    • onclick、onmouseover、onmouseoutなど

など。


なぜかというと、
修正するときに大変だから。
同じ理由で、タグにstyle属性で直書きされるcssもダメ。
なんらかのエディタにて、複数ファイルの一括置換操作が完璧にできるならいいが。


もちろんグローバルナビやサイドバーなどの共用部分は、phpのincludeでまとめておけば多少作業は緩和される。



やっぱり何にでも言えるけど、
「パーツは細切れにして色んなところで使う」べき。プログラミングの基本です。

(極端な例)
自作パソコン作るときに、
製品として最初からマザーボードにCPUがくっついてたら、組み合わせの自由が損なわれてしまう。→使い勝手が悪い

具体的にどう書くべきか

onloadの場合
window.onload = function(){
  onloadしたい処理
}

これをhead内にエンベッドするもよし。
.jsファイルを作成して読み込むもよし。

onclickの場合

jQueryを読み込んだ上で…

$function() {
  $('onclickイベントを追加したいタグのid(class)名').click(function() {
    onclick時の処理
  });
});

同じく、これをhead内にエンベッドするもよし。
.jsファイルを作成して読み込むもよし。



htmlのbodyタグ内は、なるべくhtmlソースのみにしましょう
ページ数が多い場合、修正が本当に面倒です。

Web制作も人も中身からきれいに

ここ最近、とある既存サイトのリニューアル(サイト構成ファイル群なし)を行っております。かなり巨大なサイトです。cssやjsは3000超えのものがいくつもあります。
それに携わっている中で一つ、非常に言いたい事が。


「ブラウザでの見た目だけじゃなくて、とにかくソースもプログラムも見やすく解りやすく作れ!あkljdrせcvb0−thなdrbっにyhん@いんzf...」


サイト自体はとても作り込まれていてすごいのですが、これを修正等するとなると...。
headerとかfooterとかのブロック毎にcssを分けて作ってあり、そこで細々指定をしています。
ただ、変更作業している時に、CSS一か所だけ修正すればOKという訳でなく、また別の所で指定されちゃったりしているので困ります。
つまり何ヵ所かで多重指定されているという訳です。後から継ぎ足した感丸出しですね。規則性なんかほぼありませんから。
4000行超えのold.cssなるものがインポートされてますからすごいですよねw
外してもいいのか悪いのか...


人間のカラダと一緒で、外見をきれいにする為には、
まず“中身”からきれいにするよう心がけましょう。


20120227180137

Flashにもつかえそうな光の表現

Flashでの演出に使えそうな、光の表現の素材。

輝く幻想の光をつくるPhotoshopブラシ55個【無料素材】


光ブラシのイメージ画像


Flashはやっぱ仕事でも普通にあります。
確率でいうと、ランディングページとケータイサイト以外ならほぼ100%でしょうか。ただしフルフラサイトでなければScriptはほぼ使わないです。


Webで使用する画像の大半を占める静止画像と違い、動きで魅せるというのは、より製作者の感性が必要になってくることだと思います。
タイムラインをつかった演出のバリエーションを増やすため、いろんな演出を見て、それを再現してみる練習も必要だと思います。

javascriptを使った演出01

ふと思いついたイメージを演出したくて、いろんなjavascriptを探してみました。それを改造しておもしろいライブラリを作ってみたいと思います。

画像をゆっくり表示

ザ・演出。
趣味での演出以外は必要なさそうな...そんなScriptです。



htmlソースのbodyタグで初期読み込みを行う。

<body onLoad="showDsp()">

メイン部分

<div>
  <img src="img01.jpg" />

  <div id="curtain"><img src="black.jpg" /></div>
</div>
    1. エフェクトをかけたい外枠のdivは「position:relative;」指定する。
    2. その中に同じサイズの画像を
      position:relative;
      z-index:1
      top:0;
      left:0;で配置。
    1. div id="curtain"の部分も
      position:relative;
      z-index:2
      top:0;
      left:0;で配置。
      こちらの中には同じサイズの真っ黒な画像が入っています。
次に下記jsファイルを読み込む

slowDsp.js(すみません勝手に命名しましたw)

var yy=300;

function slowDsp(){
  if(yy>0){
    yy=yy-1;
    document.getElementById('curtain').style.top=300-yy;
    document.getElementById('curtain').style.height=yy;
    setTimeout('slowDsp()',20);
  }
}

【解説】
↓1行目から。画像を隠すための真っ黒画像の高さを記入。
(画像サイズは300*300)

slowDsp関数へ入って、
↓隠す画像サイズの高さが「0」以上の場合
↓その画像の高さを「1」小さくする
↓positionのtop指定に「1」を足す(表示上下に1pxズレる)
↓表示上の画像サイズを「1px」小さくする



※最後の部分。自分と同じ関数をもう一度呼び出しています。
 ループと同じような処理になります。
 こういった処理をおこなう関数を「再帰関数」と呼びます。

※「setTimeout('slowDsp()',20);」の20の部分は、20ミリ秒後に左の処理を行うという指定。

※画像サイズと書いてますが、本当は画像が置かれているdivのサイズを変換しています。

【サンプル】

※ちなみに表示の仕方を変えることも可能。
例えば下から表示していく場合。
「document.getElementById('curtain').style.top=300-yy;」の1行を削除します。

おまけ改造

【斜めバージョン】



う〜んくだらないw
これだけだとつまらないですね。


いずれここに追加で別の演出を書き加えたいと思います。

スマートフォンサイトについて|メモ

はじめに

当WebサイトはIE対策を全くしてないです。IEの方ごめんなさい。
IE対策は仕事でお腹いっぱいです(笑)


メモ

iPhoneシミュレーター

iBBDemo2

●使用方法

iPad
Ctrl + 1
iPhone
Ctrl + 2
縦横切替
Ctrl + ←(or→)
10分でわかる! jQuery Mobileのキホン

http://ascii.jp/elem/000/000/665/665861/



サンプル

http://webdesign.iinaa.net/study/practice/smartphone_site/

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1">
<div data-role="page" id="index" data-theme="b">
  <div data-role="header">
    <h1>ページタイトル</h1>
  </div> 
  <div data-role="content">
    <p>コンテンツ内容が入ります</p>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">Menu</li>
      <li><a href="#book8"><h3>ページリンク08</h3><p>ページ内容について</p></a></li>
      <li><a href="#book7"><h3>ページリンク07</h3><p>ページ内容について</p></a></li>
      <li><a href="#book6"><h3>ページリンク06</h3><p>ページ内容について</p></a></li>
      <li><a href="#book5"><h3>ページリンク05</h3><p>ページ内容について</p></a></li>
      <li><a href="#book4"><h3>ページリンク04</h3><p>ページ内容について</p></a></li>
      <li><a href="#book3"><h3>ページリンク03</h3><p>ページ内容について</p></a></li>
      <li><a href="#book2"><h3>ページリンク02</h3><p>ページ内容について</p></a></li>
      <li><a href="#book1"><h3>ページリンク01</h3><p>ページ内容について</p></a></li>
    </ul>
  </div>
  <div data-role="footer">
    <h4>フッター表記</h4>
  </div>
</div><!-- ▲page index end -->


<div data-role="page" id="page08" data-theme="b">
  <div data-role="header"></div>
  <div data-role="content"></div>
  <div data-role="footer"></div>
</div><!-- ▲page page08 end -->

        :
        :
おまけ2|スマホサイトでのposition:fixed;

ついでに調べてみました。
既知の事実ですが、スマートフォンではposition:fixed;が効きません。
これを効くようにする方法。
iscroll.jsを使うとできるそうですが、不都合があって全部おkというわけではないようです。

サイブリッジさんのサイトで説明を行っておりますので、組み込む場合は参照してみてください。


ちなみに本家サイトのサンプルから頂いたjsソースだと、追加するコードを挿入する行が若干ズレています。(この例だと317行目でした。付近のソースで検索してください。)

ブログを新規開設しました

現行ブログからこちらに移行できるまでの間、
こちらでは、
「WEBデザイン関係で気になったサイトや、画像、素材などを書き記すためのブログ」
にしようかなと考えています。たぶんデザインメモ的な扱いになると思います。

どうぞ、よろしくお願いいたします(^^)