Web & AOR Music Blog

I'm Web Front-End Engineer. I like AOR music.

jQuery 背景BGアニメーション

久しぶりの更新。
なんとか、生きています(^_^;;

最近、よく気になるWebサイトをMac Book Airに残したまま、電源をオフしないで、そのまま放置している事が多い。
ブックマークだと忘れるし、と思いブログにメモろうと思った。

今日は以下のサイトの背景が動くのが、どのjQueryを使ってるのか?と調べていて、いろんなサイトを見て行った結果、いろんな気になるサイトが出てきたのでめもメモ。

●株式会社 スタジオエイエス

http://www.studioas.co.jp/bd/

このサイトの背景が動いている仕組みが知りたかった。
Google Chromeの『要素の詳細』で調べたが、なかなか分からなかった。

クラス名『bganim』 でググってやっと判明。

●LiVE2 fot Website

http://www.digitalstage.jp/live/

http://www.digitalstage.jp/live/about.html

というソフトのBGアニメーションという機能が使われているみたい。

●LiVE2 fot Websiteの機能

http://www.digitalstage.jp/live/function/

という所に同じ画像があって確信。

しかし、このソフト、すごいな。
背景を動画にしたり、インパクトが大きい表現が簡単に出来るみたい。

21,394円のところを、5%引きで20,366円らしい。まぁ、そんなモノかな。

●こんなサイトが作れるらしい。

http://www.digitalstage.jp/live/gallery/

http://live2.digitalstage.jp/model/bg_animation/

●ついでに、ググっている間に見つけた星を動かすサイト。

http://detarame.moo.jp/sample/bgautoscroll1.html

http://bit.ly/1oI4Mzf

まっ、jQueryの基本的な考え方は一緒だと思う。

もうちょっと、調べていきたい。

XAMPP for Mac 再インストール

XAMPPの特権のrootを間違って、消してしまったために、XAMPPを再インストールした。

1.MySQLのrootのパスワードの変更。

phpMyAdminで変更すると、アクセス出来なくなるので、

/Applications/XAMPP/xamppfiles/phpmyadmin/config.inc.php

にrootのパスワードを設定すれば、アクセスできるようになる。

うまく動かない時は、index.phpを叩いてるみるとよい。

そして、キャッシュを削除すれば、スムーズに動くようになった。

★本来は、セキュリティの下に出ている
/Applications/XAMPP/xamppfiles/xampp security

をターミナルで動かすと良いらしい。

※そうそう、ターミナル(UNIX)はrootでしか動かないので、
 sudoコマンドでrootのパスワードを設定して、
 suコマンドでrootでログインして動かすべし!!!

http://web.showjin.me/2009/04/xampp_osx2.html

http://bit.ly/JLnvs1

2.php.iniの日本語コードをUTF-8に設定。

mbstring.http_output = UTF-8
あたりの;のコメントを取って、UTF-8に設定。

http://www.arakin.dyndns.org/hp_utf8xampp.php

http://tech.hibachiya.com/articles/hibachiya/xampp%E3%81%AE%E8%A8%AD%E5%AE%9A-php-ini.html

http://www.adminweb.jp/xampp/php/index2.html

3.MySQLの文字化けを解消。

MySQLで使うコードをUTF-8に設定する。

/etc/my.cnf

を変更。

http://www.wakatta-blog.com/xamppmysql.html

http://piyajk.com/archives/318

EモバイルのUSBメモリ使用の設定

EモバイルのUSBメモリ使用の設定をしていたら、再起動しなきゃいけなくなったので、メモ。

●「ProgressionによるFlashコンテンツ開発ガイドブック」サポートページ

http://book.mycom.co.jp/support/pc/prog/

●Progressionダウンロードサイト

http://progression.jp/ja/

●Apple Thunderbolt

http://www.apple.com/jp/thunderbolt/

明日、投稿しよう!

●Blue Note 名古屋 (テーブルレイアウトかい!)

http://www.nagoya-bluenote.com/schedule/index.html

●takaさんのPeter Cetera 2日目のレポート

http://blog.goo.ne.jp/hijiya1/e/07bda285106d5f77d008ec835afd4efe

●Janey Clewerのサイト

http://www.janeyclewer.com/music.html

新作情報&プロモ来日の書き込みを明日やろう!

日曜Webクラス 最後の授業

8月から続いた日曜Webクラス『HTML5によるWebデザイナーコース』。
いよいよ、最後の授業になった・・・

WordPressで企業サイト作るんだってサ!

●ココに完成形が出来るハズ

http://rasiku.xsrv.jp/wp/

 だけど、もろもろ、うまく動かない・・・

●今日のWordPressでの企業サイトで、うまくいかなかった事。

1.ナビのCSSの設定が、うまくいかない。
2.Home用の大きいヘッダが、うまく表示されない。

——

●先生の完成サイト

http://ws1107.blqt.org/yonekura/wp2/

●FlashサイトのWordPress化検討中だそうで・・・・

http://www.rico-m.jp/

次回の卒業制作の
2/15(土) 18:00~20:00らしい・・

頑張ろう!!!

横スクロールで魅せるWebサイトまとめ12個

●横スクロールで魅せるWebサイトまとめ12個

http://w3q.jp/t/688

●CSS3だけで作られたスライド調の画像切り替えエフェクト4種

http://tympanus.net/Tutorials/CSS3SlidingImagePanels/index.html

— sekainetjp —

●jQueryを使ったツールチップとイメージプレビュー

http://sakuraxren.blog103.fc2.com/blog-entry-1041.html

●リンク先のスクリーンショットを表示(jQuery)

http://sakuraxren.blog103.fc2.com/blog-entry-1042.html

●jQueryサンプル: メニュー編

http://jsajax.com/jQuery.aspx

日曜Webクラス WordPressのためのPHP勉強会

●WordPressデザインギャラリー

http://wpgallery.kachibito.net/

http://wpgallery.kachibito.net/2527.html

●Amazon API

http://www.ajaxtower.jp/ecs/

●PHPマニュアル

http://php.net/manual/ja/index.php

●PHP基本的な構文

http://www.php.net/manual/ja/language.basic-syntax.php

●PHP日付の設定方法

http://php.net/manual/ja/function.date.php

●TAさん作成のサンプルCMSサイト

http://yuutakimoto.com/wp/

●日本語版 WordPress チートシート

http://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet/

●Webフォント
・No More Bullshit. Join the Revolution

http://www.theleagueofmoveabletype.com/

●jQuery val

http://semooh.jp/jquery/api/attributes/val/val/

Mac Book Air 13インチ購入!

1/11(水)の夜に、Mac Book Air 13インチ 256MB 1.7GHzデュアルコアIntel Core i5
を水曜日に購入いたしました。

Mac Book Air 13インチ 256MB

Mac Book Pro 13インチの方がi7プロセッサ積んでいるし、金額も安いんで、メインで使うのが目的な方はそっちの方がオススメでしょう。
私はメインのiMacがあったのでAirにしました。
というか、絶対迷うので『Airを買う』と決めてからお店に行きました。

- – - – - – -

3連休終わるまでの、自分でもビックリの正月ボケでグダクダ過ごしてしまったので、自分に気合いを入れようと禁SNSしていました。

Windows7も動くのサ!
写真3のように、MacがIntel製のCPUになってから、MacにWindows7が同居できるのです[m:76]そういう理由もあってWebデザイナーさんは、Macを使っている人が多いです。

まぁ、実際の理由は、Macの動きには『この動き!をWebサイトでも実現させたい!』というのがあるという理由が多いみたいですが・・・

実際、今、日曜に通っているWebクラスの先生、生徒さんは、Mac率100%、iPhone率100%です。しかし、現実の世界はInternet Explorerがイチバンだと思っている人達が大多数な訳で、どうやって説明したらイイか?悩む所です。

- – - – - – -

さて、新規購入の、キッカケは今使っている2008年製のiMacのOS X 10.5 Leopardが、最新のFlash Player11.1で見捨てられてしまって、

下記のFlashサイト

http://wonderfl.net/

にアクセス出来なくなったのがキッカケでした。

- – - – - – -

Mac OS X 10.6 Snow Leopardにアップデートすればイイ話なんですが、ちゃんとバックアップも取っていなかったので、

・本格的にTime Machineを始めよう
・MacにWindows7を同居させてみたい
・xamppというサーバープログラムをローカルで使ってPHP+MySQLを使いたい

などと、いろいろと挑戦してみたい事があったので、そうなるとサブのマシンが無いと、ちょっと怖いってなって感じだったので、今年は頑張るゾ!という意味もこめて思い切りました。

- – - – - – -

そうそう、2008年製のiMacの内蔵DVD-Rドライブが調子悪いっていうのも大きな理由でした。TSUTAYAで借りたCDを取り込んだ時に付いていたシールが中で取れたらしくカタカタ音がしていたのですが、
例のKOINONIAのeco-DVDを入れてみた時にトドメをさしてしまいました。

まぁ、CDは読み込む事は出来たのですが、DVDはヤバイ音がしていたので、12月頭に24倍速の外付けDVD-Rを購入していたのです。

外付けDVD-Rを持っていれば、Airでも大丈夫って自分に言い聞かせて・・・

- – - – - – -

イーモバイル

光るキーボードがカッコよくて、嬉しくなります。

イーモバイルとも契約してみました。ポケットWi-Fiも実際、試してみないとよく分からないですしね。
かなりWi-Fiスポットは増えてきたのですが、スクールとか仕事先で繋がらないと意味がないので・・・

下り42Mbpsとか言われちゃうと、家の下り8MbpsのCATVのインターネット回線とか、iPhoneのパケホーダイプランとか必要なのか?と感じてしまいますね。

という訳で、2012年、頑張ってサイトをたくさん作りたいと思います。

とりあえず、Bar Breezin’のドメインを私が持っているので、日曜Webクラスの卒業制作は、マスターの要望のジャケメインのサイトを制作予定です。

今年もよろしくお願いいたします。

等々力渓谷紹介サイト制作中

日曜クラスの課題で『等々力渓谷』の紹介サイトを制作しているが、はたして、間に合うか?

これから、地図を書くという、あいかわらずのギリギリにならないと『やる気』がおきないダメダメぶりだ・・・
あと3日!頑張ろう!!!

等々力渓谷 紹介サイト

——–

明日への課題。
地図、作成しなきゃ〜

fancyboxのliをたくさん、非表示にしたいので、CSS3の:nth-childをマスターせねば!!!

http://www.ideaxidea.com/archives/2011/06/css_master.html

——–

●今までmarginでゴマかしてきた、縦のセンタリングの方法。

http://www.webbibo.com/blog/htmlcss/vertical.html

 heightとline-heightを揃えるのか!知らなかったぁ〜

12/11(日)日曜クラスまとめ

●マッシュアップ

http://www.mercedeath.com/cornelius_remix/

●Google Map API

jQuery gmap3 js

http://blog.bumberboom.net/archives/monthly/2010_09/google-maps-api-v3-jquery.php

・経度緯度を調べる

http://www.benricho.org/chimei/get_LatLon/

——-

●ブログRSS読み込み

http://blqt.org/

http://blqt.org/?page_id=2 (サンプルページ)

●Weather API

http://weather.livedoor.com/weather_hacks/

●ランダム文字 (textShuffle)

●jQueryで制御する文字エフェクト集「20+ Easy to Use jQuery Text Effects and Animations 」

http://design-develop.net/web-design/20-easy-to-use-jquery-text-effects-and-animations.html

●Fireworks GIFアニメの作り方
ステート 右クリック 追加

背景は別のレイヤーで作っておいて、右クリック
『レイヤーを複数ページで共有』
そして、ロック。

シンボルを始点と終点において、右クリック。

『シンボル』-『インスタンスのトゥイーン』

●来週のスマホサイトのURL

http://blqt.org/em/

カフェ撮影

岡本 カフェ NISHI ann

木曜日、雨が小降りの中、日曜日に通っているスクールの課題の『お気に入りスポット』で紹介しようと考えている岡本にある

●カフェ Nishi ann

http://www.nishiann.com/

へ撮影に行って来た。

雨で暗かったせいもあり、コンパクトデジカメで撮影した写真は、どれも納得出来るモノではなかった。

というより、夏にオープンカフェにすると、緑が豊かなんですが、この時期はちょっと寂しい写真にしかならない事に気づき、どうしようか?と検討中。難しい・・・

NISHI annのカレー

食べたカレーは美味しかった!

Copyright © Web & AOR Music Blog, All Rights Reserve.