[B! jQuery] PAFのブックマーク

短期間でJavaScriptを習得し、アプリ・Webサービスをつくるための勉強法 | らふらく ^^ @TwinTKchan #spam

前回書いた短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめが好評だったので、今回は、JavaScriptに絞って習得するための方法をまとめてみたいと思います。ちなみに、一番最初に、JSに触れた時は、Hello, Worldを表示させたり、 aタグでリンクをはったりぐらいしか出来ませんでした。ですが、現在はjQueryで社内システムの画面をつくる(Ajaxとかを使って)事を任せてもらっています。なぜ、JavaScript(JS)がいいのか？なぜ勉強するのか？まずは、なぜJSをお薦めするのかを説明します。 ①ネイティブアプリがつくれちゃう。ネイティブアプリとは、iPhoneアプリとか、Androidアプリのことです。これまでは、iPhoneなら、Objective-Cという言語を、 AndroidならJava(JSとは別物)という言語

PAF 2013/02/16

リンク

Youtube動画を透過(opacity)できるjQueryプラグイン・YTPLAYER

あまり見かけないタイプのライブラリだったのでメモ。Youtubeの動画を透過させる事が出来るjQueryプラグインです。インターフェースもクールにされて全画面に配置したりオート再生させたりも可能でIE6や7でも一応は動作してくれます。僕はちょっと知らないんですけど、Youtubeって普通は透過出来ない、で合ってますよね？普通に出来るならちょっと恥ずかしい記事ですけどｗ透過だけでなく、オート&リピート再生、ミュート設定も出来て、見た目もスッキリさせてくれています。以前はYoutube動画を背景にするjQueryプラグインをご紹介しましたが、今回は透過が出来るプラグイン。いろいろ出来るんですね・・ CPUの問題は否めないとして、これはちょっと素敵なので覚えておきたいです。透過のみに関してはIE6や7にも対応していますが、Operaは透過出来ませんでした。バージョンにもよるんですか

PAF 2011/06/27

リンク

デザインから選ぶjQueryツールチップ5つ

ちょっとした解説や情報を表示したい時、あらかじめデザインに当てはめておくよりも必要な時だけに表示させる方がより目を引く場合があります。そんな時に利用できそうなツールチップの中から使ってみたいデザインのものをピックアップしてみました :)

PAF 2011/06/22

リンク

jQuery Mobileを触りながら覚えよう！ [Japanese Version Only] - jsdo.it - Share JavaScript, HTML5 and CSS

サンプルを用意しました！フォークしてjQuery Mobileを体験してみよう！スマートフォンサイトをプレビューするには、エディタ画面の「Smart Phone Preview」ボタンをクリックしてください。こんなことを試してみるとオススメ！ aタグに data-transition 属性を付加するとトランジションのエフェクトを選ぶことができます。 Footer要素を画面下に固定することができます。data-position="fixed" フォーム周りの要素もjQuery Mobileで表示できます！そもそもjQuery Mobileってなんだっけ？ jQuery Mobileはモバイルサイト構築のためのフレームワークです。スマートフォンサイトやWebアプリを作成する際に利用します。非常に手軽に利用でき、少し勉強するだけでそれなりのものが作れてしまうんですよ！ということで、j

PAF 2011/06/11

リンク

HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい - かちびと.net

結構便利だったのでシェア。Web制作に関する日本語スライドを集約しているフォロワーさん作のWebサービスです。話題のHTML5やCSS、iPhoneの事や jQueryからPHPやRubyと幅広くサポートしてあります。人気のスライド共有サイト、SlideShareで日本語のスライドのみを集めています。スライドはその場でLightbox風にポップアップして見れます。英語が苦手な方も探す手間が省けるのでは。 @deeekiさん作のWebサービスです。クックパッドのエンジニア向け「第2回開発コンテスト24」に応募する予定だったようで、数時間で作成されたみたいで見た目はシンプルですね。カテゴリもHTML5やjQuery、PHPやiPhone、WordPressなど多岐にわたりサポートされていますので全Web屋さん向けと言えそうです。日本語のスライドのみを集約集められたスライドは全

PAF 2011/04/30

html5
jquery

リンク

CSSとJavaScriptで文章をメモ書き風に

または和文フォントから仮名部分のみ抜き出してサブセット化したものとYahoo! Japanのルビ振りAPIを組み合わせて、ユーザー環境やサーバー性能に左右されずに比較的自由なフォント表現を行うためのイロハ。おれここめもかきなぐる！ Demo: Scribble My Tweet #3 フォントのサブセット化ここでいうサブセット化とはつまりフォントから必要な部分のみ抜き出して再構築すること。Webフォントとして使えるからといって、サブセット化までは許されていないことがあったりするので、それには気をつける必要がある。例として新BSDライセンスで提供されている、きろ字プロポーショナルを取り上げる。サブセット化に留まらないWebフォントのジェネレーターとしてFont Squirrelの@font-face Generatorが利用できるが、アップロードするフォントのサイズ制限が厳しい

PAF 2011/04/26

リンク

「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net

Twitterに流れてきたスライドがとっても分かりやすかったのでブログでより多くの方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さそうですね。ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。 jQuer

PAF 2011/04/23

jquery

リンク

Shadowbox.js 3.0.3 の正統な使い方～ YouTube の動画を表示する : WEB 職人

※ 2010/11/23 追記記事の最後に shdowbox.js の変更が必要な内容について記述しています。 ※ Google Cheome のみの問題の対処です Shadowbox をブログに前もって組み込む必要の無いコードを作成するツールを用意しました。と言っても、結局私のサイトの Shdowbox を使用するだけなのですが、あちこちのブログでテストして正しく動いています。 YouTube の場合、動画ID で構成される特定の URL は、flv を再生する為のプレイヤーなので通常のYouTubeのオブジェクト埋め込みが表示されます。 rel で、player=swf と指定していますが、無くても動作します。 rel で指定できるのは、player、width、height です。title は A 要素の title 属性で指定します。( gallery ももちろん指定で

PAF 2011/04/05

jquery

リンク

jQueryで実現するスライドショー&フォトギャラリーBest20「20 Best jQuery Slideshow / Photo Gallery Plugins」

jQueryで実現するスライドショー&フォトギャラリーBest20「20 Best jQuery Slideshow / Photo Gallery Plugins」 javascriptを利用した非常に高機能なライブラリjQuery。利用者も多く、日々新しいプラグインがリリースされており、便利に使えるので、WEB制作の現場でもにjQueryを利用して構築するということも多いと思います。今日紹介するのはjQueryのプラグインの中でも利用頻度の高い、ギャラリーやスライドショーのプラグインを集めたエントリー「20 Best jQuery Slideshow / Photo Gallery Plugins」。 1. Galleria 今回は紹介されているスライドショー&フォトギャラリープラグインからいくつか気になったものをピックアップして紹介したいと思います。詳しくは以下 ■2. Galle

PAF 2011/04/05

jquery

リンク

jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。１）3D表示プラグインサンプルデモ今年のトレンドと言えば3D。というわけでこちら。まずはサンプルデモを確認。触ってわかる通りですが、2枚の画像が3D表示されます。呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;