サンプルサイトの制作を通して、「Webサイトのコーディング」についてまとめた、第3(+α)回めです。 トップページにツイートを表示したり、Like Boxを設置したり、JavaScriptでいろいろ実装したり、その他もろもろ。 「Lopan cafeというWebサイトのトップページ総仕上げ」について、制作過程をまとめました。 以下目次。 その前に、ちょっと修正 一番上のナビゲーションのところ Lopan's infoと新作パン/おすすめパンのところ 「画面を縮めると変」だったところ ちょっと脇道:サーバーの話 Webサーバーとは サーバーにファイルをアップロードする トップページにツイートを表示する。 Twitter ウィジェット Embedded Timelines(埋め込みタイムライン) トップページにLike Boxを表示する。 Facebookページを作る Like Boxを設置す
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
私はこれまで自分が時々イライラしやすいのは、 周囲の人が私をイライラさせているだけだと思っていました。 特に夫クン!ええ、アナタのことですってば(苦笑) イライラの原因はPMS ところが、ある日、電話で夫婦喧嘩の愚痴を実家の母にこぼしていたところ、 「ライラするのも分かるけど、でもあなたもちょっと怒り過ぎるところがあるわよね。」 とたしなめられました。 そうかな?・・・と思いながら黙っていると、母から 「もしかしたら、PMSなんじゃない?」と、言われました。 それ以来、自分が夫婦喧嘩で爆発した日をカレンダーに記していったところ、 母の指摘がビンゴ~!であることが判明しました^^; 婦人科で桂枝茯苓丸料エキス顆粒(ツムラ25)という漢方薬を処方 そこで、いつも子宮頸がんの検診をしてもらっている婦人科を受診して、生理前に自分で抑えがきかないほどイライラすることを主治医に相談をしてみました。そし
JSライブラリのまとめサイトの ご紹介。既知の方も多いかもし れませんが、探すのに便利なの で改めてご紹介します。カテゴ リ分けもしてくれているので探 しやすいです。 様々なJSライブラリがまとめられています。探し物がある際は覗いてみるといいかも。 UIやメディア、グラフィック、ユーティリティなどのカテゴリに分けられています。現在は900ほどのライブラリがまとめられています。 シンプルで探しやすいのではないかと思います。ライブラリはそれぞれ簡単な説明もしてくれています。 パッと見たところ、評価の高い印象のライブラリに絞ってくれている・・・気がしました。(気がするだけかも 困ったら覗いてみようと思います。 Jster
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
equalize.js 高さや幅が不揃いのDOM要素を同じ高さ・幅にします。 height, width, outer-, inner- に対応
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード(ZIP) 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
スマートフォン等で、左右フリックでページ移動させてみました。 フリックのイベントが取得できれば、簡単です。 [デモページ] ※スマートフォンでご覧ください。下のQRコードからも移動できます。 フリックと言っても「フリックした」というイベントはなく、 画面をタッチした タッチしたまま指を動かした 画面から指を離した という3つのイベントにわかれていて、それぞれのイベント発生時に処理を行うようにします。 動作の概要 画面を左右にフリックして、次のページが存在していたら移動します。 フリック時にコンテンツも指に追随してスライドし、一定の移動距離以下であれば元の位置に戻ります。 JavaScriptファイルは共通化したいので、HTMLファイルに移動先のURLが入った変数を用意しました。変数が存在していれば、フリックの反応とページ遷移を行います。 JavaScript ※jQueryを
Flash3D界のスーパースターROXIKからJavaScriptで作られた凄まじくレスポンシブな3Dネコさんがリリースされている。 ウィンドウの幅に合わせてめちゃめちゃかわいいネコさんが多様に変化する。その凄まじくかわいレスポンシブ具合を見ていこう。 ブラウザに合わせて健気に体を伸ばす 楽しそうに首を振りながらブラウザに突っ張ってる。カワイイ。 430px以下にすると。。 ブラウザをモバイルサイズくらいに縮めると太る!お腹タプタプ。かわいい 太らせた後再度ブラウザを広げると。。 なんか背中に生えてきた。本人は知らん顔で音楽も激しくなってきたようで首のシェイクが激しくなってきた。 さらに勢い良く広げると バィィィィィン!!このバィィィン感はとってもイイ。キモチイイ。 バィィィンの後はオンステージ 楽しそうに中央で踊ってます。このネコさんカワイイなぁ。 このネコさんの構造を見たい 右上のch
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記:イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記:イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 1.使い方 本エン
HOME>jQuery>7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。(っていうかそんな偉そうなこと言える程修めてない
vintageJS - add some awesome retro and vintage style to your images with the HTML5 canvas element gitHub - vintageJS ブラウザ上で画像をトイカメラ風に変換できるJSライブラリ「vintageJS」。 ファイルをアップするとパラメータを調整して簡単にトイカメラ風の画像が作れるサイトとライブラリです。 HTML5のCanvasを使っているのでサーバにやさしい。 あとはこれがどのブラウザでも動いてくれればと思うところですが、こうしたCanvas関連のライブラリが沢山あると将来的に便利になりそう 関連エントリ CSS3やCanvas、JS等を使ったローディング画像実装プラグイン12 画像のプレースホルダを生成してくれるJSライブラリ「Holder.js」
timelapse audio / Inha Leex Hale ブログの表示速度を少しでも速くするために、ブログ内で読み込んでいるJSファイルとCSSファイルを圧縮せんと、「YUI Compressor」というツールを試してみました。 使い方 使い方は非常に簡単。まずはOnline YUI Compressorへアクセスしませう。 続いては「Code」の部分にCSS or JSファイルをコピペ、「File Type」を適宜切り替えて、オプションを選択したら「Compress」ボタンをクリックしましょう。 しばらくすると余計な改行や空白部分が消去された圧縮コードが吐き出されますので、あとは煮るなり焼くなりはんなり。 圧縮されたコードはあとから編集しにくいので、しっかりバックアップをとっておきましょう。あと、デザインなどが崩れる事も考えられるので張り替え後は確認を!(当サイトでは特にデザイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く