初心者向け
良書です
良書です
次はこれが
欲しい
欲しい
いつまでたっても人のマネでは自分で企画できません…。 今日も勉強しましたので記録しておきます。最初に言うときますけど、最初の方は雑談です。orz…
この記事を見て初心者向けの記事だと思った方は、まずこちらとか見られたらよくわかると思います…
私の勉強の仕方は、1冊のこれはわかるなと思える本を、徹底的に読み込みいろいろ実際に見ながら書いてみるというスタンダードな方法です。 (アホなんです） で、1冊はマスターしたなと思ったら、次からはいろいろ読むという感じでやってます。
この西畑さんの本ですが、表紙がまず夜中にドーナツが猛烈に食べたくなるという問題点がありますが、これでもかというほどの初心者向けの本です。
←この本も読みたいのですが、美味しそうすぎます。デブには辛い。
できたら風景写真でお願いしたいです。
私、php勉強した時もそうでしたが、新しいこと勉強しようとすると脳がそれを拒否するんです。
で、本を開けたとたんに眠くなるという病気を持ってます。
で、30分ほど寝て目を開けたら、なぜか頭にその本を素直に入ってくるんです。 で、ある一定を超えると、また眠くなり…というくり返しをマジでしながら勉強します。 自分の能力を超えることをしているんだろうなと思います。
受験生の頃もそうでした。 でも、今は本当にこの勉強でしたいことがあると思えるので頑張れるというか…。
ハマッテます。 他のことしたくなくなるから困るのよね。 これがオメシの種になったらいいのになぁ。
ただ、この西畑本は初心者すぎて、いったい何にこれが使えるのだろうかというようなところもあります。
あまりに簡単すぎてささ～っと読めてしまいますが、例えば73ページに出てくるattrなんて、初心者にはいったいこれをどう使うのかがわかりません。が…ある程度マスターして、さらに変数などを理解したらこのようにメニューに色をつけるとか使えるようになります。
が、ここまでいくのは若干知識が必要です。 私もPHPでちょっとは知っているからできたけど、本当の初心者はしんどいかもしれません。せめて簡単な変数のこととかも書いてあったら、もっとよかったんじゃないかなと思いますけど…。
でも、この本は、後々人の書いたものを理解するのにも読み返して使うものだと思います。
今回私は一念発起し、めざせカフェ開発プログラマーということで、Lets noteにVM Wareを入れてubuntu を使い、emacsなんか入れちゃって、こつこつサンプルを開けてショートカットキーを覚えつつ、お勉強してみました。
上へ
ただ、なんかwinodwsのショートカットとちょっと違うので、保存とか全然違うので、それをメモ帳に書きだして覚えるところから始まりました…。
ま、ちょっと、お遊びが多い感じですが、自分的にこの無味乾燥な勉強をマスターする自信がなかったので、開発環境から独自に工夫したことで、ぐっとjQuery楽しいと本当に思えるようになりました（と、書いてみる）。 教えてくれる人がおらず、苦労している人多いと思いますが、マンネリにカツを入れる方法として、開発環境変えてみるというのは、刺激になっていいかもしれません。
環境整えるだけで２日かかりましたが…。 そのうちイチビリでカフェに開発してみたい。
でも、私はマックじゃないのよ！みたいな。5年くらい前のレッツノートなのよ。でも、現役なの！みたいな。 でも、書いてるプログラムは、なんじゃこりゃ。みたいな…。
このパソコンが10年たって、それそろ買い換えてもいいなぁと思える頃には、そこそこ書けるようになっていたいなぁと思います。
エアで冷却するのを別につけているという。 ファンレスなので発熱がすごいんです。 やはり動きが長時間使っていると悪くなる気がします。
このノートＰＣ、私の持ってる物の中で一番高いものです。 シャネルのバックくらいするのよ！ むちゃ高かったけど、どうしても欲しくなり、私は一生、シャネルもビトンも欲しがりませんと神様に誓い、
一生物大切に使うつもりで買った！名前入り、カラー天板の思い入れタップリのノートなんですが、今となってはムダに高かったと反省しています。 パソコンあんまり高いともったいないと考え方が変わった。 どんどんいいの出てくるもん。 技術は日々進歩するもの。高いものなんかいらんなと。原発もいらんなと。そんな感じですね。
と、本題になかなか入れませんが、この本の２章サンプル１７のフォームの実例他を見ながら、考えて自分だったらこう作るというのを作ってみたのです。
リセットボタンを押したら送信しましたというメッセージが出て、それが数秒後に消える。 送信ボタンをマウスオーバーすると送信しますというメッセージ。 マウスオーバーがはずれると消えるというものです。 本ではリセットボタンを押したら１度だけメッセージが出て、出たままになっていましたが、それを改造したいと思いました。
↓
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
↓リセット押したら初期化しましたとメッセージ
$(function(){
$(":reset").click(function(){
$(this).after("<p class='test'>入力内容を初期化しました</p>");});
});
↓追加したメッセージを消す
$(function(){
var count = 5000;//表示までの時間（ミリ秒）
setTimeout(function(){$(".test").fadeOut(1000);},count);
});
↓マウスオーバーで送信しますの画像にかわる メッセージがでる
$(function(){
$(":image").mouseover(function(){
$(this).attr("src","button_on.jpg").after("<p>送信します</p>");}).mouseout(function(){$(this).attr("src","button.jpg");});});
↓マウスオーバーはずれたら文字が消える
$(function(){
$(":image").mouseout(function(){$("p").remove();});
});
このプログラムは本では、リセットボタンをクリックすると「初期化しました」というのを .after に入れるというものですが、ここで、やはりp要素だけで書くことって、あまりないと思うんです。
やはり、cssで設定したものにしたいでしょう。
で、ここでこれを p class="" といつもの感じで ダブルコーテーションで書くと、エラーになってしまいます。
なんで、エラーになるのかわからずムチャ悩みました。その後、特殊文字に変換するとわかったが、別に'でもよいようである。
で、次のFunctionはこれを５秒たったら消えるというのを、探して書いてみました。意味はわかっていない。数字変更しても５０００と２０００で、あまり変わらない気がする。
が、この方法だと1回だけしかできない.ブラウザによっては、まったくリセットのメッセージが消えないのです。(テスト)orz
格闘は続く…
上へ
で、こうするとできました。（サンプル）
要するに、リセット押したら初期化しましたとメッセージと追加したメッセージを消すを別々に書くとだめ。で、リセットボタンを押すFunction内に書かないといけない。
$(function(){
$(":reset").click(function(){
var count = 2000;
$(this).after("<p class='test'>入力内容を初期化しました</p>"), //カンマでつなぐ
setTimeout(function(){$(".test").fadeOut(1000);}, count);});});
と、まとめて書かないと、いけない。これも結構悩みました。 考えたら当り前ですな。 で、こうするとできました。（サンプル）
要するに、リセット押したら初期化しましたとメッセージと追加したメッセージを消すを別々に書くとだめ。で、リセットボタンを押すFunction内に書かないといけない。
$(function(){
$(":reset").click(function(){
var count = 2000;
$(this).after("<p class='test'>入力内容を初期化しました</p>"), //カンマでつなぐ
setTimeout(function(){$(".test").fadeOut(1000);}, count);});});
$(function(){ setTimeout(function(){ ～ここに処理を記載～ },1000);});
twitterで見つけたリアルタイム表示を組み合わせるとケッコウ便利かも…
上へ
また、137ページあたりのAjax()によるXMLの取得ですが、セキュリティ上、同じドメイン内のファイルしか読み込めないので、親切にもphpの file_get_contents($url) で変換して読み込む方法まで書いてあるのですが、本のとおりの方法だと読み込んだxmlファイルをeach()で全部表示してしまうことになる。
実際にページにRSS表示させたい場合は数を指定したいと思うので、これも相当探しましてありました。
<script type="text/javascript">
$(function(){
$.ajax({
url: 'import.php', //外部ファイルから読み込んだphp
dataType: 'xml',
success : function(data){
$("item status",data).each(function(i){
if(i>3){ //4個表示させる場合
return false;}
$("dl").append("<dt><a href='"+$("link",this).text()+"'>"+$("title",this).text()+"</a></dt><dd>"+$("pubDate",this).text()+"<dd>");
$("dl").append("<dt><a href='https://twitter.com/yumisaiki/status/"+$("id",this).text().replace('16692370','')+"'>"+$("text",this).text()+"</a></dt><dd>"+$("created_at",this).text()+"<dd>");
});
}
});
});
</script>
@yumisaikiのツイッター情報を４つ表示する（サンプル）
↑ちなみに紹介されているのはPHP5です。<script type="text/javascript">
$(function(){
$.ajax({
url: 'import.php', //外部ファイルから読み込んだphp
dataType: 'xml',
success : function(data){
$("
if(i>3){ //4個表示させる場合
return false;}
$("dl").append("<dt><a href='https://twitter.com/yumisaiki/status/"+$("id",this).text().replace('16692370','')+"'>"+$("text",this).text()+"</a></dt><dd>"+$("created_at",this).text()+"<dd>");
});
}
});
});
</script>
@yumisaikiのツイッター情報を４つ表示する（サンプル）
本のとおりのPHPで何も表示されないときはtwitterのrssを読み込めてないときですので、ちょっと加工してみました。 赤字は…(2012年11月にrssの出力が変わったため変更。)
**********************************
<?php
header("Content-type: application/xml; charset=utf-8"); //これがないと表示されないです。
$url =@file("https://twitter.com/statuses/user_timeline/yumisaiki.rss")or
$url=@file("https://api.twitter.com/1/statuses/user_timeline/yumisaiki.xml")or //@制御
print<<<EOF
<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
<channel>
<title>ツイッター出ません</title>
<status>
<text>ツイッター調子悪いのよね～</text>
<id></id>
</status>
</channel>
</rss>
EOF;
ini_set('display_errors', 'Off'); //エラーを出さないようにしないとxmlがエラーが出る
$rss=("https://api.twitter.com/1/statuses/user_timeline/yumisaiki.xml");
$xml = file_get_contents($rss);
header("Content-type: application/xml; charset=utf-8");
print $xml;
?>
**********************************
↑で読み込めない時はメンテナンス中の文章が、ある時はツイッターが表示されます。
確かにphpより簡単かもしれない。 が、変更になったことで id が 今回 ２つになり、どっちもつないでしまうため、リンクがうまくいかなくなっています。.replace('16692370','') を追加して（これ思いつくのに2時間！） 私のuser id の方を消すことができました。**********************************
<?php
header("Content-type: application/xml; charset=utf-8"); //これがないと表示されないです。
$url=@file("https://api.twitter.com/1/statuses/user_timeline/yumisaiki.xml")or //@制御
print<<<EOF
<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
<channel>
<title>ツイッター出ません</title>
<status>
<text>ツイッター調子悪いのよね～</text>
<id></id>
</status>
</channel>
</rss>
EOF;
ini_set('display_errors', 'Off'); //エラーを出さないようにしないとxmlがエラーが出る
$rss=("https://api.twitter.com/1/statuses/user_timeline/yumisaiki.xml");
$xml = file_get_contents($rss);
header("Content-type: application/xml; charset=utf-8");
print $xml;
?>
**********************************
↑で読み込めない時はメンテナンス中の文章が、ある時はツイッターが表示されます。
2-6のアニメーション効果は、クリックイベントで起動する考え方のものばかりで、これも確かにメニューを作ったりしたときに、使うかもとは思うけど、今ひとつﾋﾟﾝとこない。
CrossSlide.jsは
ちなみに、CrossSlideは、jQueryのリンク先が全然違うので、本のリンクでは動かなかった。
ＣrossSlide→動作サンプルこちら… より詳しいCrossSlideの設置方法。
こっちの解説はもっと詳しいこれでフラッシュに近くなる
こんなすばらしいスライドショーのプラグインも見つけました！
このように、最初の2章が基本中の基本なんだけど、直接すぐに役立つ感じがないのが残念。3章からは実用的なんですが。 要するにこういうFlashみたいなアニメを自在に作ってみたいというのはそうとう難しいことがわかりました。
で、先日、土屋の案件で…どうしても横にスクロールするjQueryを作る必要に迫られ、この方に頼みました！ ええ人です～。仕事早かったです。 このサイトも最高カッコいいよこちらに連絡したらパパっと作ってくれますので、困っている方はお願いしてみましょう。
ま。本を読むよりお金で解決！っていうのもありですね。
と、いうわけで…
お金を払って書いてもらいましたが、惜しげも無く紹介します！（というか、見たらわかるけど）
作ってもらったのが、クリックするとめくれるメニュー付きのもの… これはなかなか珍しいと思う。
↑これを自動で動くスライダーだけにしてみました。
timer プラグインを自作しているのですが、意味が全然わからない。
検索してもしっくりくる説明がないので、また教えてもらいたいと思います。
気がついたことはソースに書きこんであるので見てください。
これでもかと親切に書いてもらってます。
jQuery.timer とか jQuery って書いてあるのを時々みかけますが、先生に聞きましたら、$.timer と書いてもいいんだそうです。 ただ、protype.js なんかと共存させる場合にjQuery と書いたりするのだそうです。 ああ、初心者はこいうことが悩む。そうじゃないかなと思っていたのですが、やはりそうでした。
実装してわかったのですが、jqueryはprotype.jpと共存できません。動かない場合はprotype.jsを削除し、それ使ってるメニューとかはjqueryで書き直しましょう…orz
でも、こんな風に効果のあるスライダーってどうやって作るのでしょうかなぁ。（更新されて今はなくなりました。今のもまたカッコいいですね！）
というわけで、→これまた書いてもらいました。☆彡ポップバージョンスライダー
なるへそ、.(ピリオド）でアニメ部分をつないで動きの変化をつけたらいいんだ～ 感動～～！
こっちは左右ボタン付きバージョンです。
こういうのはよくあるけど、やはりぶよよ～んがいいですね。
これわかると、このチョロンと動くよというのも意味がわかる気がする？
お金出して教えてもらいましたが、この企画、使おうと思っていたクライアントが、
ラグジュアリー路線に変更したので、いきなりボツに…。誰か仕事ちょうだ～い。
このテレビショッピング的ホッププレゼンテーションは点数高いと思うんですよ。
よければお使いください。
印象が強いのが結局売上につながると思います。
本当にjquery楽しいわ。回転するやつ… これやろう！ これも使える真ん中gifにしたり…
ボードの回転もかっこいい～～
これも良さそうなHTML5で作られたプレゼンスライド「deck.js」 これはホントウに将来を感じます。
この頃、ホントウに長い文章を読めない人が増えていると思うし、理解してもらうということの難しさを感じるわけです。
html5はホントウに勉強したいなといつも思います。
上へ
-->
さらに本を読み、jQuery で blogger の記事の複雑なcssを簡単に設定することができるなと思い、やってみました。
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$('li > b ').css('color','red'); // >←は子セレクターと言います。
});
</script>
こうすると、liの中でbの設定をしたものを赤にしろ ということです。 別にcssで設定してもいいんですけどね…
本来はaddClass で
$('li > b ').addClass('red');
などと、クラス要素を追加して、cssで改めてクラスの色ずけをするのが本筋であると本にも書いてありましたが…。
bloggerのゴチャゴチャしたところの一番上にこれだけ書いたら、加工したぞ！というのが明示できてありじゃないかなと思います。
なんか、' は自動で文字の'形式に置き換えられてしまうのですが、ちゃんと動きます。ただ、 a herfに自動だとなってしまうので、ここに target="_blank" を自動ですべてに入れるreplaceWith（ htmlの変更について…参考） は <script type='text/javascript'>
$(function(){
$('li > b ').css('color','red'); // >←は子セレクターと言います。
});
</script>
こうすると、liの中でbの設定をしたものを赤にしろ ということです。 別にcssで設定してもいいんですけどね…
本来はaddClass で
$('li > b ').addClass('red');
などと、クラス要素を追加して、cssで改めてクラスの色ずけをするのが本筋であると本にも書いてありましたが…。
bloggerのゴチャゴチャしたところの一番上にこれだけ書いたら、加工したぞ！というのが明示できてありじゃないかなと思います。
ここで見つけましたが…こうしたらやれるみたい。
$(function(){ |
$("a[href^='http://']").attr("target","_blank"); |
}); |
これくらいしか使い方が具体的に浮かばないけどなぁ。P要素だったところに h2を入れたりしたくなったりするでしょうかねぇ～。（後日…いろいろbloggerについてアイデアがわいたので記録していきます。増えたらいいなぁ。）
西畑さんの本、確かにいいのですが、
もうちょっと、実用性がある実例が最初の方にもあるとダラけないのですが、あまりに教科書的で簡単すぎて頭に入りにくいので、工夫が必要な気がします…。 ま、一山越えるというのは、何でも大変ですなぁ〜。
皆様はどのようにして勉強しているのでしょうか…
いつか、私が書いてやる！なんてな。
とてもまとまっているjQuery入門 西畑さんの本を読んだらこれもわかる気がします…。
jQueryでメニューに動き…この本読んだから意味わかる～ 本家の文章もわかるかも～
animate で作ったメニューの例 楽しすぎる～
でも、本当に自在に書けるようになりたい。フラッシュよりjQueryの方が加工のこととか考えたら面白くて便利だと思うけど、かなり道のりが遠いことがわかりました… 勉強で仕事ができない。 辛すぎる。
でも、先生曰く、ruby書けるけどjQueryできない人もいるから向き不向きがあるじゃないかと慰めてもらいました…。
私、flashも途中で挫折したので…。 寝ずに頑張ります！ って寝ないとできないよ＝。
皆、がんばろうね！
先生も発見できたことなので、次はこれを読むぞ～ って仕事が多くてここに整理しとくのが精一杯で次はいつになるかわかりませんが…
これもコツコツ読みたい→もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） もっとコンパクトに教えて欲しい気も…
↑もちろん もうかなり前に買っていてまだキレイなままです。 はい。
でも、apple はなんでflash がいらないと思ったのか…気持ちはわかるんだけど、マジ喧嘩売ってると思うわ。
FlashDoとか常連客やったんだけどな。 いろいろ買いたいと思うけど、iPadの人twitter とかしてるとケッコウ年配の人に多い気がするのね。 それを見ていると、なんかねぇ。 flashは使えないなぁと思うようになりましたね。
そういう意味でも私はマックが嫌いだ…。なんてことは言ってる暇もない。
ビデオタグがhtml5に使えて便利になるとかいうのはわかりますが、こういうビデオビューアーとか、会社関係のサイトにはいい感じのものなんで。
これをまぁたぶんhtml5普及する頃になるとjquery で書くようになるだろうなと思って焦っている。まぁ。早くて適当な仕事でいいんだとは思うのであるが。
私なんかがそこまでインタラクティブなものはいらないとは思いますが、
カッコいいですね。HTML５ 憧れます。
全国統一テストなんていうものもあってもう来てます！
このくらいは書けるようになりたいなと。
もっと雑誌的な感じが増えてくるじゃないかなと…。 IEでの挙動もケッコウ分岐していけてるみたいだし。 これなんて超かわいい～フランスって感じ
そろそろ５でも書けるようになりたいです。 参考
JavaScriptとhtml5だけで書いたゲーム フラッシュ終わった…こんなものは作れなくてもいいけど、簡単なイエスノーゲームとかで仕事に役立ちそうなことは勉強したい。どうしたら勉強できるのだろう…
今私が電子書籍で読んでるhtml5の本を書いた人がやっているというjqueryのポッドキャスティング…。まったく意味がわかりません。 個人的には女性のお肌のトラブル具合が気になる。ちゃんと食べてはるのかしら…
なんかスゴイナ というのだけがわかるけど、リンクをたどっていくと、私にもたまに使えそうなものがあるようです。
*****************
↑かわいい画像アイコンなんかもいいです。こういうところで買う時に、ダメもとで ドメイン名とCoupon と検索すると結構出てきたりして、入力すると10％とか割引になったりして、ちょっと嬉しかったりする。 この前2000円ちょっとで wow slider というのを買いました。 なんと日本語化できてけっこう便利そうだった。 いつかちょっとしたところに使って褒められたいな～。
これもなかなかいいなぁと
Slider kid
この会社すごいなぁと思った。若いのにえらいねぇ。あやかりたいよ。
こんなの作れるようになりたいですよ。まったく…10ドルで買ったほうがいいと思います。
でも、こんなこと毎日のようにやってないと絶対に上達しないなと思う。ああ時間が欲しい…
今さら聞けないjQuery実行パターンまとめ
ジャバスクリプトについて例を参照しながら勉強できるサイト（英語）
JavaScript DOM Tutorial with Example
なんと、このページを見て教えてくれました！ 参考になりそうで、早速勉強します！私にはグル（師匠）がいないので、嬉しいです！ Thank you!
0 コメント :
コメントを投稿
コメントありがとうございます。