カテゴリー別アーカイブ: JavaScript

classや変数のネーミングに悩んだら――便利ツール「codic」

Web制作をしていく上で、避けられないのがID、classや、プログラミングの変数などの命名作業。
よく使う「wrapper」や「main」だけで済めばいいですが、そうもいかないのが実情。かといって、スッと出てこない英単語は多いし、分かりにくい名前を付け過ぎるとあとで自分の首を絞めることにもなりかねない……
そんな時に便利なWebサービス「codic」が紹介されていたので、共有します。

紹介元(詳しい使い方)関数や変数のネーミングに悩んだら「codic」に日本語名を入力するとある程度解決するかも

日本語で名前を打ち込むと、英単語になって帰ってきます。複数の単語の接続方法も好みに選択可。
かなり多くの単語に対応しており、使い勝手はバッチリです。会員登録するとさらに機能が増えるようですが、ざっと使った感じでは未登録でも問題なさそうです。
今後対応単語数も増えると思われるので、ぜひ使ってみてください。

2015年総まとめ、jQueryのプラグインとスクリプト100選

昨年出てきたjQueryプラグインなどが100個厳選されて載っていたので紹介します。
最新環境にもあっていると思われ、面白いものも多いです。実際に使用するかはともかく、引き出し増やす感覚で見てみてください。色んなものを知っていると、デザインの段階で「あ、あれ使おうかな」という選択肢が増えます。

2015年総まとめ、jQueryのプラグインとスクリプト100選

上記の中から面白そうなものを選んで抜き出しました。タイトルは直接デモサイトにリンクしています。

bigfoot.js
注釈をクリックすると可愛く出てくるjs。
注釈はそこまで多様するものではないが、もし使用するページがあれば使ってみたい。注釈以外にも使えるかも。
jsの動きそのものもなのだが、デモページ自体が逐一可愛くまとまっている。
全体がフラットでメニューやボタンもいい感じに可愛いので、参考にしてみてください。
slick
カルーセルスライダーのjs。
オプションが非常に多く、レスポンシブにも対応している。
Zoom.js
ライトボックスなどよりシンプルに画像を拡大できるjs。
このブログの画像に適用されています。
iconate.js
沢山の種類のボタンアイコンを、色んなアニメーションで動かせるjs。
デモサイトではプルダウンメニューで「初期表示」、「クリック後の表示」、「アニメーション」がそれぞれ指定でき、動作確認が出来る。
Right Height
内容量に寄らず、指定した範囲内の要素の高さを合わせるjs。レスポンシブ対応なので結構便利。使う機会は多い。
おまけ:RPG.js
jsで頑張るとここまでできるよ、という一例。
Webでの実用性はまるで思いつかないが、頑張ればこれでゲームも作れるかも?
因みにゲーム制作用のjsプラグインもjQueryとは別に存在しています。興味のあるかたは調べてみてください。

他にもたくさんのプラグインが紹介されていますので、興味ある方は色々見てみると面白いと思います。

レスポンシブデザインでのjQueryプラグインの導入

レスポンシブに対応しているか確認

jQueryプラグインは便利だが、仕様上レスポンシブ対応していない(伸び縮みすると動作が狂う・そもそも伸び縮みできないなど)ものも多い。

使用したい動きがある場合先に伸縮する適当なテストページを作って動かしてみるか、使う前に「jQuery スライダー レスポンシブ」などのように検索ワードを絞ってから使用すると良い。

add_jQuery

面倒なようだが、検討していたプラグインがいざ実装段階で使えない方が100倍くらいダメージが大きいので、先行テストをお勧めします。

レスポンシブのメニュー

また、レスポンシブサイトだからこそ多様するjQueryプラグインもある。
よく使われるのが、ナビゲーションメニューである。
スマホ表示まで縮めた場合は横並びもできず、縦並びにしても幅を取るので、ボタンを押して表示する形式が多く採用されている。
ブレークポイントと組み合わせて、スマホ表示やタブレット以下の時にだけ利用する事が多い。

【まとめ】レスポンシブデザインで使えるメニュー3選+1
上記は一例です。また、そもそもこういう形式にしなくても構いません。検討はしてみてください。

11月12日(火) スマートフォンサイト制作基礎①

jQueryの古い命令を読み込む

jQueryは日々更新され、バージョンもどんどん新しいものが出ている。
大まかな構造は変わらないが、仲には新しくなって意味の変わった機能新しく追加された機能がある。
前者は最新のjQueryでは上手く動作せず、後者は逆に古いjQueryで動かない。
これがプラグインが動かない原因の一因になることがある。

そこで登場するのが、migrate.jsである。
これはjQuery公式が提供しているもので、古い命令を復活させることが出来るプラグイン。
公式ページからダウンロードして読み込むか、本体と同じように

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

上記の形で外部から読み込む方法がある。人によっても好みがあるので、どちらでもいい。(僕は外部から読み込んでしまう事が多いです)

ただし、スライダーなどのよくあるプラグインにおいて起きた問題であれば、他の物を代用する選択肢もあるので、状況によって使い分けること。
また、これはあくまで原因の一つなので、動かない時には色んな理由が考えられる。

新しくなって仕様変更になった機能で頻出するのは「toggle、live」くらいなので、コンソールでエラー確認したときにこいつらが表示されていたら疑った方がいい。

モバイルサイトの制作

ケータイ電話でネットを閲覧し始めて以降、PC用ページと携帯用ページを別につくるのが主流だった。
しかし実質2つ以上のページを作らなければならない事、また、URLが変わってしまうせいでアクセス者数がばらけてしまい、検索順位が上がりにくいという欠点があった。更にタブレット等新デバイスの登場により、2パターンで収まらなくなってしまった。
自由にデザインできる性質上、現在でもモバイル専用のサイトを別に作る仕事はあるが、以上のデメリットとCSSのmedia queryの発展により、
今では一つのサイトが画面サイズに応じて変形する、レスポンシブデザインが主流になりつつある。

最近はGoogleがモバイル対応ページの検索順位を上げる事を発表しており、また、レスポンシブの方がモバイル専用ページを作るよりも安価である事から、需要が高まっているという背景もある。

レスポンシブデザイン

上述のように、「画像サイズに応じて表示を変える」デザイン。一つのサイトであらゆるデバイスに対応し得る(もちろん、全てに合わせるとキリがないので、ある程度の妥協は必要)。
CSSのmediaQueryによって変更点(ブレイクポイント)を設定し、それ以上ないし以下の時の変更点を、CSSで指定する。
使用する際、metaタグによるviewportを設定する必要がある(唯のモバイルページにも必要)。

viewport

metaタグのname属性値の一つで、画面による表示方法を設定する。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

↑こんな感じで記述する事が多い(google先生の推奨設定だそうです)。
まずnameでviewportを指定し、contentで設定する。分かりにくいが、大体はコピペで事足りる。
metaタグなので、headタグの中に記述する。

viewportの設定

width
読み込み時の表示領域。初期値(指定していない時)は980px。
width=1000px
と書くと、1000pxが表示領域になり、スマホで見ても倍率が変わらず、320pxの画面に収まる様にそのまま縮小された形で表示される。
width=device-widthは、「見ているデバイスに応じて」の意味になる。
viewportの指定はどうするのが適切なのかいろいろ検証してみた
initial-scale
ページのズーム倍率。数字が大きければ元の表示より拡大、小さければ縮小の形で表示される。
initial-scale=1.0は1倍なので、見たまま表示するという事。余程の理由がなければ他の指定はしない。(実際見たことないです)
minimam-scaleという最低倍率も設定できる。モバイル用だと1を入れた方が安定するらしい。
user-scalable
ユーザーが任意に拡大できるかどうかの設定。
初期値はyesで拡大許可。user-scalable=noを指定すると拡大できなくなる。
スマホだと拡大する人も多いので、こちらも余程の理由がなければ指定しないほうがいい。
media-screen
CSS3から登場した新技術。
ざっくりいうと、特定のウィンドウサイズの時だけ読み込むCSSを書ける。
詳しくは後日。

@media screen and (min-width) (min-width: 321px) and (max-device-width: 920px) {
  //CSSを記述
}

上記はウィンドウサイズが321pxから920pxの間の時にだけ効くCSSが設定できる。

1月8日(木) (実)Webプログラミング演習⑤講義内容

JavaScriptとPHP

php01
Webページがインターネットで閲覧できるのは、ファイルをWebサーバーにアップロードするから。
ユーザーがブラウザを通して、サーバーにアクセスし、ファイルを閲覧する形になっている。
JavaScriptはクライアントサイドスクリプトと呼ばれ、閲覧者のPC(正確にはIE、ChromeなどのWebブラウザ)で動作する言語。クリックしたら~する、などの、動きを作るのに適している。

対して、PHPはサーバーサイドスクリプトと呼ばれ、Webページをアップロードしたサーバーで動作する言語である。
ユーザーがリクエスト → サーバーで実行 → 実行結果を返す
という流れになり、実行時にユーザーの環境に左右されないというメリットがある。
また、ブラウザでソースコードを確認できないのが特徴。JavaScriptに比べ、秘匿性に優れている。
更にサーバーに沢山のデータを保存するデータベースとの親和性が高い。

Twitter、Facebookなどの有名なSNSや、ショッピングサイト等、大量のデータを扱うページでは、サーバーサイドスクリプトが用いられている。

フォーム

コード

お問い合わせフォームやアンケートフォームなどに使われるタグ。種類が沢山ある。
これらのタグを書いただけでは表示しかされず、実際に内容を送信するにはphpやjavascriptとの連携が必須である。

<form method="post" action="">
    <input type="text" name="name" value="お名前" >
    
    男性<input type="radio" name="gender" value="男性">
    女性<input type="radio" name="gender" value="女性" checked="checked">

    読書<input type="checkbox" name="hobby" value="釣り">
    スポーツ<input type="checkbox" name="hobby" value="スポーツ">
   
    <input type="email" name="mail_address" value="メールアドレス">
    <input type="email" name="mail_address" value="電話番号">
    <input type="date" name="date">
    <input type="url" name="http://">

    <select name="list">
        <option>項目1</option>
        <option>項目2</option>
        <option>項目3</option>
    </select>

    <textaera cols=""100" rows="10"></textarea>

    <input type="submit" value=" 送信 ">
    <input type="reset" value=" リセット ">
</form>

表示


男性 女性

読書 スポーツ




実際はtableタグやdlタグを使ってきちんと整理して書くことが多いです

formタグ
フォーム全体を囲うタグ。これがないとフォームとして機能しない。
また、以下のinput等のタグは、全てこの中に記述する必要がある。
属性値として、「method」と「action」が必須になる。
methodはデータの送信方法を指定し、値は「POST」か「GET」のいずれか。
使い分けもするにはするが、今はとりあえず「method=”POST”」と入力すればOK。

actionは、送信ボタンを押した後の飛び先を設定する(確認画面や送信完了画面)。
どこにも飛ばさない時は、「action=””」と表記する。

inputタグ
様々なデータを取り扱う、フォームの中で使えるタグ。
type属性の値によって様々な振る舞いをする特殊なタグでもある。
必須の属性としてnameがあり、これには任意の名前を付けることが出来る。
基本的には半角英数字で入力する。
また、type値によってvalue属性の内容も変わる。

type 用途 valueの扱い
text 汎用的な、短いテキストを入力できるエリア 初期表示
radio ラジオボタン。いずれか一つを選択する。同じ名前尾付けたものがグループになる。
checked=”checked” を属性として入力すると、その項目に初期状態でチェックが入る。
選択された時に送信されるデータ。同じグループの選択肢にはる。
checkbox 複数の項目尾選択する 選択された時に送信されるデータ。同じグループの選択肢に貼る。
email,tel,date,url,他 HTML5から増えたタイプ。本来プログラムで判定しなければいけなかったエラー文を判定してくれるようになった。
古いブラウザだと対応が微妙な場合があるのと、表示の仕方(特にdate)がブラウザによって異なるので、使用はケースバイケース。
type=”text”と同じ
submit フォームに入力した内容を送信するボタン。formタグにactionが指定されていると、そこに跳ぶ。 ボタンの上に表示される文字。
reset 入力したデータを消す。 subimitと同じ。
button 特に何も起こらないボタンを作るタグ。昨日はJavaScript等と合わせて使われることが多い。 subimitと同じ。
select,option
選択式のボックスを表示するタグ。
selectタグを親として、項目ごとにoptionタグで囲む。
紛らわしいが、inputタグではないので注意。
selectタグにname属性、optionタグに送信したいデータを入力する。
textarea
テキストを入力するボックス。inputのtextと違い、複数行のテキストが入力できる。
こちらもinputタグではないので注意。
属性としてcolsとrowsがあり、colsは一行の文字数、rowsは行数を指定できる。