「アコーディオン」を含む日記 RSS

はてなキーワード: アコーディオンとは

2019-08-31

anond:20190831174458

カテゴライズ問題に思えてきた。ピアノは(ハープシコードなどは含まれず)全部ピアノだけどギターにはアコギクラシックギター、十弦ギター、十二弦ギター、リゾネーターギターとかがある。

ギターとくくるならバランス的には鍵盤楽器とくくって鉄琴(グロッケンシュピール)、木琴(マリンバ)、鍵盤ハーモニカアコーディオンなども含めるべき。

2019-01-08

傷痍軍人を見た話

昭和50年代の話。

幼い頃、祖母と買い物に行ったとき商店街入口に白い服を着たおじさんが座ってアコーディオンをひいていた。

おじさんの片足がなかった。

おじさんをじーっと見ている僕の目を祖母はすぐに手で覆い、すごい剣幕で

「見ちゃダメ!!!!」

と叱った。

いつも優しい祖母から初めて怒られたので驚いたのをおぼえている。

2018-11-17

anond:20181117202438

小4くらいの時に学芸会アコーディオンいたことを思い出した。

ずっと忘れてた。懐かしい。

2017-03-16

春のドラマが楽しみな増田酢魔並シノタガマラドのルは(回文

雪が溶けて川になって流れてゆきますぅ~

ヘイヘイヘイ!

先生男子が春眠暁を覚えてくれません!!!

卒業できない恋もある、

そんな斉藤由貴の曲を

コバのアコーディオンとともに過ぎ去りし永遠の日々をお送りしたい。

そんなおしゃれカンケイ

いつまでも卒業式前日だったらいいのに!

暮れなずむ街に水戸黄門の声がとどろく金八先生水戸光圀公も楽しみだわね。

そう思ったらBSしか見れないのね。

悲しいわ。

で、あの時代時代考証的にハンガーが無かったか

一体どう戦うのかしら?

でもそんなの無視して

オーパーツ的に場違いな加工品として登場してもいいわよね。

針金のハンガーじゃない!って

怒られそう、木のヤツ木のヤツ!って

あれでバシバシ戦って欲しいわ。

そんで、印籠も出さないで毎回勝っちゃうの!

助さん格さんも出る幕がないというか、

そんで、決めゼリフは

思えば遠くへ来たもんだ!って終わるの。

帰り道が分からなくなって一堂ズコーってコケるの。

そんな水戸黄門シリーズ6。

黒船でやって来た、

ペリー役のジェイソン・ステイサムと戦って欲しいわ。

そんで、金八先生ばりの演出で、

最後足立区柳原二丁目荒川堤防河原に二人寝転がって、

おまえ強いなって言い合うの。

それで国交樹立ってわけ。

関根勤ペリーの演技指導するのジェイソン・ステイサムによ。

それ考えただけでワクワクしちゃうわ。

でも、

放送BSなのね。

見れないわ~。

悲しい。


今日朝ご飯

タマサンドがなかったのでハムタマゴと

ジャーマンポテトサンド

ジャーマンってなんのことなのかしらね

スープレックスのこと?

あいいか

デトックスウォーター

オレンジイチゴミックス。

混ぜるよりも単品の方がいいかな。

私はそう思いました。


すいすいすいようび~

今日も楽しく頑張りましょう!

2016-11-06

http://anond.hatelabo.jp/20161106094548

LaravelのCRUD程度ができる、CakePHPはやったことないけど同じPHPフレームワークだし覚える気はある。

jqueryアコーディオンとかは何も見ないでも作れるが他はネットで調べつつ。

PostgreSQLをよく使ってたけどMySQLはしたことない。

でもフレームワーク使うならSQL文ほぼ使わないだろうから追々覚えたら行けるだろ

って考えの大阪プログラマーだけど雇ってもらえます

2016-05-28

の子時代はまだ詰め込み学習が幅を利かせていた時代で、全国展開している塾が満員御礼時代だった。

御多分にもれず教育ママだった母のもとに生まれた俺は、ある程度の金銭的余裕もあり、勉強以外にも多種多様習い事を受けた。

週二日の塾が2つ、毎日の家庭学習教材が一つ、習字そろばんスイミングスクール英会話野球

小学校までは季節毎に活動部活が変わるため(期間制だった)、サッカーバスケ水泳陸上と、受けられるだけの部活動を行い

中学からバスケ部所属し、上記習い事と家庭学習に加えて学校練習量の多い部活を両立した。

今、俺は学歴必要ない、上記の様々な分野とは全く関係ない生活を送っている。

基本的能力が平均的以下な俺は、これだけ勉強しても偏差値63が限界だった。県内一の進学校に落ち、滑り止めの私学に入った時には、

はいつの間にか侵されていた癌で入院していた。

間もなく母は死に、解放された私は全ての柵を捨て、勉学を一切放棄し、成績不振留年が決定したと同時に高校をやめた。

皮肉なことに、高校をやめてから進んだ道が今の職業に繋がっている。

中学卒業までの生活は、基本的苦痛だった。毎日毎日勉強ノルマがあり、母にチェックを得てから眠る日々だった。

習い事ノルマしかなかったので、いか効率的に終わらせるかという一点にしか興味がなかった。

(例外として、学友の多く所属していた野球をしている時、塾の休憩時間にお喋りをしている時は楽しかった。)

興味の無い習い事は、一定レベルまでしか身につかなかった。具体例を上げると、夏休み習字宿題評点で銀賞をたまに貰うくらい。水泳部マイナーな種目の三番手くらい。

時間を費やしても全く成長の意欲が無かったうえに、(あとから気づいた事だが)才能も劣っていたために、ただの器用貧乏が生まれた。

逆に、何もしなくてもいい点数がもらえるものが幾つかあった。教科で言えば国語現国は、何も勉強しなくても90点は取れた。漢字の書き取り以外は間違える気がしなかったし、実際ほぼそうだった。

音楽も同じ様に、リコーダー演奏も平均よりはるかにできたし、小学生時分のイベント特別楽器演奏できるとあらば名乗りを上げた。文化祭学芸会の劇ではサックスアコーディオンを誰に習わずとも独学で勉強し、演奏した。歌は基本的に手本となる生徒だった。

夏休み昆虫スケッチ習字よりも良い賞をもらえることが多かった。

今になって子供時代を振り返ると、なぜあの時に今の道に触れることができなかったのかと後悔する。なぜ専門家の道を最初考慮しなかったのか。

その道は、後になって発見しても遅いのだ。高校入学時に洞窟発見しても、辺りはもう夕暮れなのだ

母に対して思う事はそんなに無い。死んでから時間が経っているのもあるが、上記生活の辛さと、その他少しのいい思い出、それに同情と申し訳無さが合わさってある程度フラットになっている。

ただ、後悔だけが残ってしまった。

2016-05-15

共産音楽趣味者としての共産主義の魅力

私は共産趣味者だ。歳は20代共産主義シンパではあるし、社会主義者ではあるかも知れないが、共産主義者ではないと自己規定している。

共産趣味にもいろいろある。私はソ連音楽が好きだが、映画ポスタースローガンに惹かれる人もいるし、ミリタリー方面が中心の人もいる。地域についても、東ドイツはじめ東欧諸国ユーゴスラビア東南アジア南米などの東側諸国だけではなく、日本西欧などの西側諸国で見られた共産主義の関わる文化活動に惹かれる人など様々だ。

ソ連音楽社会主義者音楽の何が私を惹きつけるのだろうか、と思ったので書いてみる。多少ガチ共産主義者っぽい部分もあるかも知れないし、不勉強なので思想の細かいところは間違っているかも。

こっち側にとって史上最大の敵対相手であったこと

世界の半分で、少なくともその当初は熱狂的に支持された思想であり、いくつかの分野では一時とはい西側を圧倒する成果を生み出しもした。つまり強かった。

その思想

ブルジョアの打倒、プロレタリアートによる平等平和建設!惹かれないわけがない。

対する資本主義陣営自由民主主義を掲げて戦ったし、これも強力な思想だが、その登場はあくま共産主義に対するカウンターしかなかった。資本主義陣営の根幹にある思想あくま資本主義の維持だったからだ。戦う相手社会主義陣営というよりは資本主義陣営労働者階級だった。社会主義陣営が実際に自由民主主義を侵していたからこそ、この主張には効果があった。

感情を揺さぶるように作られたプロパガンダ

プロパガンダ的な作品には共産主義社会への魅力が詰め込まれているのだ。私はプロパガンダに乗せられていると言っても良い。乗せられやす性格なのだ

ソ連中央テレビジョンソ連国歌と一緒に流れるビデオ (https://www.youtube.com/watch?v=rHomETco0MI) なんかは最高で、労働者たる人民労働の喜びに溢れている様子が流れ、十月革命労働者の怒り、ブルジョワジーの打倒の精神が示され、人民の力で支える連邦の強大さが示され、レーニンの党と人民の力が我々を共産主義へと導く!という具合でひょいひょいと感情を揺すられてしまう。

お馴染みのインターナショナル (Интернационал, The Internationale, https://www.youtube.com/watch?v=t8EMx7Y16Vo)、国際学連の歌 (日本語https://www.youtube.com/watch?v=SCdlGH6RhBw) なんかは私の中ではこういう類の歌だ。

こういうこと言うとクラシック畑の人には笑われそうだが、ショスタコーヴィチの5番や11番も大好きだ。

音楽ではないし、およそ普通意味ではプロパガンダでもないが、ソウル五輪体操女子団体メダル授与式 (https://www.youtube.com/watch?v=l7lAZ89Pu_c) がもう最高である彼女らがステートアマ国家に大変な恩義があるというのは確かであるにしても、私の目に映る、エレーナ・シュシュノヴァ選手赤旗を見上げながら国歌の「我らを共産主義への勝利へと導く」という歌詞を口ずさんでいる姿は、紛れもなく共産主義への希望と勝利への確信に溢れたソビエト連邦人民の姿なわけですよ。こんなに晴れ晴れとしたことはないじゃないですか

正直私はかなり危ないと思う。実際に共産主義に走った連中もこんな奴らだったのかも知れない。この先本当に扇情的プロパガンダが私に向けられたときに私は正気で居られるだろうか。

もっとプロパガンダが全てではない。90年代ロシアポップスには体制の変革と自由を喜ぶような歌も多く、味わい深い。こちらは「作り物」ではなく本物だと思う。Комбинация の American Boy (https://www.youtube.com/watch?v=W7hAo28NCXc) とか Наташа Королева の Жёлтые тюльпаны (黄色チューリップhttps://www.youtube.com/watch?v=E57T8XYa7OM) とか。

基層にある、主にロシア文化ウクライナ文化

理想的にはこれを一番の理由に挙げるべきだと思う。ロシア旋律情緒があっていい。アコーディオンバラライカ音色ロシア語自体の響きによく合う。

ウクライナの Розпрягайте коней, хлопці (若者よ馬の軛を外せ、https://www.youtube.com/watch?v=MCuqR4Jz9DU) なんかは民族的でよい。

蛇足: 私が生まれときには共産主義は死んだ思想として扱われており、残虐行為ナチスのそれほど宣伝されないので、擦り込まれ忌避感がない。

ただしそれでも一切忌避しないと言うわけにはいかない。まさに現代冷戦構造がそのままここにあって、新左翼の連中が日本革命を起こそうとしていたら(しているが)、私は反対する。マルクスの主張するように暴力革命によって社会を変革するべきだとは、革命権を行使すべき状況にならない限りは思わない。共産主義建設の名のもとに数千万の命が失われたことは紛れもない事実だし、少なくとも過去ソ連社会主義国家の遺産を消費して楽しむ上でここを批判せずにいることは危険すぎる。

蛇足: それでもまだ共産主義を含む社会主義思想は負けていない。

東側陣営はなぜ冷戦に敗北したか計画経済市場経済に比べ資源配分効率が悪かったので人民生活を維持しつつ経済の発展を続けることができなかったからだ。

西側陣営の掲げた自由民主主義は本当に勝利したのか?東側陣営との対決のために自らもまた市民自由制限し、アメリカドミノ理論を振りかざして世界中開発独裁政権を打ち立て、現地の市民を抑圧した。21世紀紛争の種を撒いたのは紛れもない事実だ。結局のところ西側陣営が実際に対抗勢力に対して振るった武器自由民主主義ではなく資本主義だった。

共産主義にしても、本来人民を抑圧し民主主義否定する思想ではない。

これをもって社会主義喧嘩に負けて勝負に勝ったのだなどと言うつもりはないが、思想的に決着が付いたとは言えないと思う。競争相手がいなくなったか勝敗という言葉が使えなくなっただけで、今我々のいる陣営もまた行き詰まってしまったというのは確かなことではないか

2015-07-06

Nusrat Fateh Ali Khan ‎– Qawwal And Party, Volume Two

http://www.discogs.com/Nusrat-Fateh-Ali-Khan-Qawwal-And-Party-Volume-Two/release/1444291

ジャンル:ノリノリトランシーなぶっ飛び民族音楽

Nusrat Fateh Ali Khan(ヌスラト・ファテー・アリー・ハーン)のレコードgetたか投稿します。

イスラム教に様々な宗派はあるのは皆さんご存知ですが、今回紹介するのは、その中でもイスラム教神秘主義に分類されるスーフィズム宗教音楽です。

スーフィズムイスラム教の中で珍しく、歌や踊りを通じて神と一体化することを目的としています。そのための踊りがセマーであり、歌がカッワーリーなのです。(セマーに関しては映画イブラヒムおじさんとコーランの花たち」なんかで見れますスカートはいクルクル回る。)

Nusrat Fateh Ali Khanはカッワーリーの第一人者で、数多くのCDレコードカセット作品を残しています

何を歌っているのかも分かりませんし、どれも同じに聴こえますが、それらから伝わる熱量、ぐっときます

床に置くタイプアコーディオンの様なものや、太鼓手拍子トライバルリズムを作り出し、そこに甲高いおっさんボイスが冴え渡ります

youtubeでこの人のライブ動画を見ることが出来るのですが、みんな楽しそうですね。

5:25付近のDum Mast Mast Mast Mast Mast Mast Qalandar~のブレイク昇天確実^^

https://www.youtube.com/watch?v=i2STpgD16tM

2014-10-03

なんというか日本人あくまで内なる所属組織で生きてるんだけど、外国人

「街」という外的世界で生きてるんだよね 。街の中に学校があり、企業があり、官庁があり

歴史建築がある。そしてそこで学んだり働いたりする人が共存する「街」がある。企業で働いているとき

でも学校で学んでいるときでも「内」よりも常に見知らぬ人間同士が交錯する、「外」の世界「街」という

公共意識している。

その証拠に例えば、外国では日本のように学校の中で部活動や各種行事をあまりおこなわない。

それらは公的な地域が担っていくべきもの学校あくまでも「勉強をしにいくところ」

と割り切っている。日本子供は常になんでも一つの組織で済まそうとして、

学校の中で一日中過ごして何もかも内なる組織で、「知ってる人同士」で片付けようとする。

外の未知なる地域公共で新しい人間関係を構築する機会を奪われている。

広場カフェ政治議論を楽しんだり、知らない人と公園で夢を語る。

電車の中でアコーディオンを弾く芸術家おじさんに遭遇し会話を楽しむ。

そんな日常の中にある非日常子供の成長を促したりすると思うのだが。

ところが、日本はそういう狭い社会組織の「中」or「内」に街をつくっている。赤の他人に冷たい

のはこういうわけかな。他者がいない内なる空間ばかりで生きてるから

自分他人が異なるということが思いも寄らなくなる

2013-09-10

ceroLIQUIDROOM Ebisu

2020年東京オリンピックが決定した9月8日早朝。その日、我々日本人否が応でも7年後の日本想像せざるを得なかったわけだが、日本未来を予感させる出来事は同日夜の恵比寿リキッドルームでも起きていた。

今回のライブは、ceroとして久しぶりのワンマンライブだった。タイコクラブに始まりライジングサンに至るまで、全国津々浦々と様々な夏フェスに出演してきた彼らは、一回りも二回りも成長した姿を見せてくれた。ボーカル高城は自ら今回のライブを「文化祭」と形容したが、オープニングアクト表現(Hyogen)や、サポートメンバーの面々と力を合わせて作り上げられたステージには文化祭のごとく熱いエネルギーが集約されていたと言えるだろう。

満員のリキッドルームで観客たちが開演を待ちわびる中、開幕したステージに現れた高城ZAZEN BOYSよろしく「死ぬほど練習をして、マツリスタジオで練習をぶちあげてきたので」と観客から笑いをとる。そして、告知されていなかったオープニングアクトである表現を紹介するとさっと身を引き、表現演奏が始まる。

アコーディオンバイオリン一曲目のみ)、アコースティックギターウッドベースの4人組からなる表現ceroと関わりの深いバンドだ。ギター古川高城高校の頃からの知人であり、その後もcero表現で互いに切磋琢磨してきた仲だ。お互い尊敬しあえるバンドとして成長を遂げた両者が集い、久しぶりの対バンとして出演する彼らを見て高城舞台袖で涙を流していたそうだ。

さて、表現演奏はというと、全員がコーラスを務めているのが特徴的だ。セリフのような歌詞メンバー全員が声を張って歌いあげる様はまるでミュージカルのようであるスキャットハミングを多用し、途中ポエトリーリーディングのようなシーンも挟まれることによって、声の持つ魔力を改めて感じさせられた。もちろん楽器演奏も素晴らしく、アンプラグド楽器アンサンブルによるオーガニックなサウンドは、その名に恥じぬオリジナルな「表現」となっていた。ceroコンテンポラリーエキゾチックロックオーケストラであるのと同様に、彼らもまた名前通りに素晴らしいバンドであった。

ceroを見に来た観客も大満足のオープニングアクトであったが、ceroの開演までは20分ほどの転換があった。幕の裏から聞こえてくる様々な曲の断片は、これから始まる演奏への期待を高めるには十分だった。

いざ幕が上がり、「セロセロセーロ」と叫び続ける入場曲と入れ替わりで始まった一曲目は“水平線のバラード”。ステージには点滅する6本の蛍光灯を背景に、メンバーが立っており、イントロスタジオ版にないトランペットから始まった。しっとりとした雰囲気で始まったステージだが、ノルウェイの森風のイントロから入り軽快なラップが冴える二曲目“ワールドレコード”でフロアテンションは急激に引き上げられる。続く三曲目“マウンテンマウンテン”の4つ打ち部分では後ろの方までほぼ全員が音に身を委ね踊っていた。

盛り上がった後一息つくかのように挟まれたMCで、高城cero表現の辿ってきた道を振り返る。そして「世界で唯一表現の全員とデュオを組んだことがある人」と名乗る荒内を「音楽ビッチ」呼ばわりするなどしてステージが暖かな笑いに包まれたところで次の演奏へ。

つの間にかステージから消えて戻ってきた高城。傘を片手にレインコート羽織った高城が歌うのは“21世紀の日照りの都に雨が降る”だ。続く“エキゾチックペンギンナイト”では「パーパパパー」と全員が高らかに叫びフロアをより一層祝祭的空間へと引き込む。少し落ち着いて始まった“クラウドナイン”も結局はcero特有の「祭」感へと収束していくのだった。

二度目のMCサポートメンバーの紹介から始まる。今までになく多くのサポートメンバーを迎えた今回は、ceroメンバー3人+サポート5人の8人編成だ。トランペットスティール・パンをこなすマルチプレイヤーMC sirafuのみならず、サックスタンバリン担当したあだち麗三郎表現での演奏とは変わってパーカッション古川麦ドラムの光永渉、ベースの厚海義朗という5人のサポートメンバーがそれぞれ紹介される。

ひと通りメンバー紹介が終わると、スタジオ版に比べて遅く重厚な“大洪水時代”のイントロが始まる。この曲から始まったVIDEO TAPE MUSICによるVJは、フェイザーのかけられたノイズギターと相まって、我々を水中へと誘う。そして、ノイズの海の中へと一筋の光が射すかのように響き渡るのは、高城によるフルート音色だ。最後には全員がしゃがみ、背景であったスクリーンが前景化される。水中の映像、そして流水音のSEと水の映像しか受け取ることの出来ない状況はまさに大洪水時代といったところか。そして、海つながりで次に演奏されたのは“船上パーティー”。VJには男女の横顔が交互に映り、高城一人二役セリフを言い合う。スタジオ版でも印象的な「ちょっと待った!」のセリフの後はじれったいほどのタメにより、聴衆をより一層演奏へと引き付ける。そうして引き付けられた我々観客が次に耳にするのは新曲、“我が名はスカラベ”。メルヘンチックな歌詞VJは、初めて聞く我々も十分楽しめるものであり、聴衆はみなceroのニューリリースへの待ち遠しさを煽られたに違いない。

新曲披露後のMCでは、大洪水時代から加わったVIDEO TAPE MUSICの紹介。そして最近高城のハマっている「文化祭」というキーワードに関連してTwitterにおける高校生つぶやきや、ceroメンバーそれぞれの思い出などと話が弾む。

再びメンバー紹介から入った曲は“Contemporary Tokyo Cruise”。本ワンマンライブ表題曲とでもいうべきこの曲ではミラーボールきらめき、最も「祭」感のある曲だったかもしれない。そして音は途切れることなく、思わせぶりな長い間奏から始まったのは“マイ・ロスト・シティ”。2ndアルバム表題曲でもあるこの曲では「ダンスをとめるな」という歌詞、その通り踊り続ける客、ダンスをする人々を映すVJが一体となっていた。

短めのMCを挟んだ後、演奏されたのはまたもや新曲、“yellow mangus”。ムーディーなサックスからまり展開されるのはceroお得意のディスコビート。そしてこれまた長めの間奏からはじまるのは“わたしのすがた”。途中挟まれる8ビートの部分では赤い照明が似合うほど激しい展開で、普段とは違った一面を見せてくれた。

最後の曲の前には今後の活動を仄めかすようなMCを挟み、演奏されたのは“さん!”。観客と共に「いち!に!さん!」と高らかに叫んだ高城は29歳の文化祭最後の盛り上がりを演出した。

しかし、我々の文化祭はまだ終わらない。アンコールを期待する拍手に応えて登場したのは高城橋本。残りのメンバーも続々と登場し、最後最後演奏されたのは“大停電の夜に”。ゆったりとしたメロディーはまるで蛍の光のように、我々を切なくも満たされた気分へと導き、文化祭は幕を閉じた。

実は、最後MCおいてなんとも頼もしい言葉があった。高城は、表現やVIDEO TAPEMUSICのような仲間たちを見ている中で「日本音楽がこれからまたちょっと変わっていくんじゃないかな」という実感を述べた後に、「俺達が変えるぞみたいな気概を感じている」と宣言したのだ。変わりゆく東京風景、そして変わりゆく日本音楽シーン。7年後、東京オリンピック開催を前に我々はこの日をどのように思い出すだろうか。29歳の文化祭には「ここから何かが変わっていきそう」な予感、そして希望に満ちあふれていた。あの晩、もしかしたら我々は時代目撃者となったのかもしれない。

2011-05-02

Webサイト制作】独学素人jQueryで、ドラクエ画面を作ってみた

こんなサイトを作ってみました

 オッス、オラ日曜ネット大工

 1年に1回くらい趣味webサイトを作ったりする独学素人ノンプログラマーです

 仕事はIT系にかすりもしないけど、たまサイトが作りたくなるんです

 htmlCSSも知識不足ですが、作成ソフトに頼ればなんとかなります

 そんなレベルで無謀にも「JavaScriptも使いたいな」とか思ったりするわけですよ。

 で、たまに「簡単にわかJavaScript入門」なんてサイトや記事がありますよね。

 ああいうのを書いてくださる人に、ちょっと言いたい。

 あの、独学素人ノンプログラマーの俺をなめてませんか?

 あなた方の想像を絶するほどに、俺のIT系理解能力ゴミクズですよ!

 「簡単に分かる入門」にさえ入門できません助けて先生

 と、鼻水をたらしながら泣き出すような底辺レベルスキルしかないザコであります自分は。

 ですが、jQuery出会い、見よう見まねと思いつきで作ったら、こんなんできました

ドラゴンクエスト・ロトシリーズのストーリーまとめ

 jQueryってやつを使えば、ド素人にもこんなものが作れるんですね。

 超簡単で超便利! 作ってめっちゃ感動した

 そんな感動を伝えるため、このサイトの中身を説明してみます

 あと自分の個人的な超自己満足! いやっほぅ!

 なお、素人なんで専門的な解説は他にお任せします。

 用語とかあんまり使わずに、中高生でも読めるレベルで語ります

 (小学生はがんばれ! めっちゃがんばれ!)

 web制作にくわしくない方にも「どうなってるのか?」って雰囲気は伝わるかと思います。

 技術はないけど、人とは違ったwebサイトを作りたいって方、jQueryジオススメです

 きちんと勉強されてる方からすれば失笑ものの内容かもしれませんが、ご容赦を。

 よくある「入門」すら難しく感じる自分のような方々に届けるつもりで書きます

 くわしい方は、間違いなどがあれば温かくご指摘いただければ幸いです

 あと、「知識不足人間はこんな思考をしてるのか」という参考になればうれしいです

 前置きが長くなりましたが、それではサイトで使用したつのjQueryを説明します。

1・パッケージ画像が拡大されて表示されるとこ

 jQueryには「プラグイン」ってのがあります

 プログラマーさんたちが作った高性能なjQueryコードなんですが、このプラグインってのが超便利なんです

 使い方は、すでに作られているコードコピーして、ちょっとのアレンジするだけ!

 自分ゼロから作れなくてもOKなんです

 昔、jQueryの知識がほぼゼロだったころ、このプラグインを知りました

 で、俺も「カッコいいプラグインが使いてええ!」と考えて試しに使ってみたわけです

 けどまあ、プロが作ったコードを、知識ほぼゼロで動かそうなんて甘すぎですよね。

 でも、あんまり深く考えずに、貼りつけて動かしてみたところ――

 あっけないほど簡単に動きました

 それがサイト内の、パッケージ画像マウスを合わせると大きくなる部分です

 みなさま、マウスを合わせて動くか確かめてみてくださいませ。

 きれいな動きしてるだろ? ほぼコピペなんだぜ、それ。

 プラグイン「Bubbleup」

 紹介記事1 マウスオーバーを気持ち良くするjQueryプラグイン「Bubbleup」 | Web活メモ帳

 紹介記事2 JavaScript + Ajax 実践サンプル集 - jQueryのbubbleupプラグインでアイコンを拡大する

 配布元(英語BubbleUp jQuery Plugin to Spice Up Your Menu | AEXT.NET MAGAZINE

 ネット上にはこういうのがいっぱいあるんで、ぜひいろいろ眺めてくださいませ。

 とりあえず、プラグインまとめサイトを置いておきますね。

jQuery 469 プラグイン:skuare.net

 こういうの眺めても、「どうせこんなの使えないし」と思えますよね。

 でも、「これがコピペで使えるのか!」と思えば楽しくなってきません?

 このプラグインってのを使いこなすには、htmlCSSの知識が必要です

 ですが逆に言えば、それと切り貼りアレンジだけで、高性能のjQueryが使えるわけです。最高ですぜ。

2・最初の消える画面

 プラグインを貼ってカッコよく動いたんで、

「やっぱ俺天才だな、自作も楽勝じゃね?」

 と考え、最初に作った自作jQuery部分が、サイトの表紙です

 世の中には、JavaScriptを有効にしていない人がいます。

 たとえば、決して私ではありませんが、エロサイトで出る変な広告表示をさけるため、それを切っている人もいます。

 で、頻繁にエロサイトに通いすぎて、切ったままなのを忘れて普段のサイトを巡ると、たまに表示がおかしくなる。

 あれは実に面倒らしいですね。噂で聞きました

 で、そんな人のために「JavaScriptを有効にしてください」と書いた表紙をつけたわけです

 ですが、jQueryはまだよく分かってなかったんで、「入門」のサイトを眺めてました

 で、いくつか読んでみても、やっぱりすぐには分からん……。

 でもね、そういうとこには、「練習用サンプル」ってのがあるんですよね。

 練習台で「ボタンクリックすると画像が非表示になる」みたいなのがあったんで――

 それをほぼコピペしました。ふひひ。

 みなさま、いかがでしょ?

 サイトjQueryは、「画像クリックすると画像が非表示になる」とアレンジしています。

 最初に現れる画像クリックすると、画像が消えて下の画面が現れましたでしょうか?

JavaScriptを切っていると動きませんのでご注意を)

 この表紙は1枚の大きなjpg画像で、それをクリックすると消えるようになってます

 よく分からんまま見よう見まねで貼りつけて動かしただけなんですが、こ、こいつ、動きます

 なんつーか、簡単すぎる。マジでjQuery万歳三唱です

自分が主に使った入門用サイトの紹介>

 はじめてのjQuery

 ・5分ほどのスライド最初見たときは知識不足で理解不能だった。

 ASCII.jp:40分で覚える!jQuery速習講座

 ・初心者の神・西畑一馬様の入門講座。jQueryの雰囲気が分かる!

 なお、「はじめてのjQuery」を見たのが、このドラクエサイトを作るきっかけでした

 黒い画面に浮かぶスライドを見て、「ドラクエの画面っぽい」とひらめいたのです

 いろんなjQueryサイトを見てパクれる……いや、参考になるのを探すのは面白いかと思います。

 うちのサイトを見て、「懐かしのゲームブックサイトを作りたい!」とかひらめいてください。

 個人的に楽しみたいので、ホントぜひどうか誰かひらめいてください!

 で、簡単に動くのを見て、jQueryのすごさを改めて思い知り、きちんと勉強しようと考えました

 そこで助けられたのが、jQuery初心者救世主西畑一馬」さんの記事です

 それを見ながらようやくjQuery勉強を始めたのです

 なお、本格的に勉強しようという人は、入門の「速習講座」より、

 ASCII.jp:Web制作の現場で使えるjQuery UIデザイン入門

 という記事がオススメです

 これも同じく西畑さんの記事なのですが、こちらは量が膨大にあります

 速習講座では軽く流された部分も、一個ずつ丁寧に解説されています。

 本気でやる気に火がついた方にはこちらがオススメです

 というか、西畑さんは本を書いてはるので、それを買いましょう(布教)。

 サイト作成ではホンマに助けていただきました……!

3・「すすむ」と「もどる」

 勉強しながら、コピペでなく試行錯誤で作ったのがこれです

 ここは入門によく書かれる「アコーディオンパネル」をアレンジして作りました

 アコーディオンのように開いたり閉じたりするアニメーションでの演出です

 jQueryは、簡単にいろんなアニメーション効果がつきます。これが楽しんです

 そこから3種類を紹介すると、

 どうですか? なんかおもしろそうじゃないですか?

 自分サイトの「すすむ」「もどる」で使っているのは、スライドアニメーションです

<「すすむ」の仕組み>

 「すすむ」を押すと、表示部分が上に隠れて消え、次が表示されます

 あんま気にしなくていいんですが、処理を細かく言うと、

  1. 最初は一番目だけが表示部分
  2. クリックで、表示部分の次の二番目も表示
  3. 直後に一番目を上にスライドして消すことで、二番目がスライドして現れる

 という変な動きをしています。

 たぶんもっと簡単な処理ができると思うんですが、自力で考えてやるとこんな感じになりました

<「もどる」の仕組み>

 こっちは簡単。

 クリックしたら、表示部分の前の部分スライドして現れるだけです

 正直この「すすむ」には苦戦しました……。

 けど、ちょっと苦戦して勉強するところがあるのもまたよいです

 勉強したおかげで、jQuery能力がちょっと見えました

 htmlとかCSSとかからすると、jQueryはなんか信じられないくらい大量のことができます

 たぶん、jQueryの元になってるJavaScriptがすごいんでしょうね。

 わずかに勉強して改めて、使いこなしているプログラマーのすごさを思い知りました

4・「もくじ」とかの移動

 で、順調に進んでいたサイト作成最後で壁になったのが、こいつです

 この目次には、2つの仕組みがあります

  1. 「もくじ」にマウスを合わせると、ひょいっと選択画面が現れる仕組み
  2. クリックすると指定の場所へ飛んでいく仕組み

 1つめの、「マウスを合わせたときの動作」は「hover」というものを使っています。

 hoverってのは、「マウスを合わせたとき」ってことです

 なんか難しいのが出てきましたが、実はこれも入門講座の例をパ、参考にしました

 上で挙げた、「はじめてのjQuery」に出てきた「hover」の使い方の例ですコピー万歳

 でも、いきなり「hover」とか言われても意味分からん人も多いですよね。

 なので、どんな感じで動いているか、「ふーん」とイメージだけ見ておいてください。

処理イメージ

  1. 初期状態では選択画面を隠す
  2. 「もくじを hover(カーソルを合わせる)したとき」「選択画面を 表示させる」
  3. (hoverじゃないときは、選択画面を隠す)

 ということをやっています。

 これは簡単な処理した。まあ、ほぼ丸写しですし……。

 で、苦戦したのが、2番目の「クリックして移動」です

(なお、パッケージ画像クリックしたときも同じ移動を使っています)

 処理の内容としては、たとえば「ドラクエ1・1話」の項目に飛ぶ場合

  1. ドラクエ1・1話」の前の部分すべてをスライドさせて消す。
  2. ドラクエ1・1話」の部分スライドさせて出す。

  (実際に見えるのは、2のスライドして出てくるところだけ)

 という処理です

 が、なぜかここでエラーが。

 「ドラクエ1・1話」に飛んだ後、「すすむ」がうまく使えない……。

 まるで「次が存在しない」みたいに進まなくなってしまうんです

 ぶっちゃけると、ここは今でも原因が分かりません。

 で、理屈が分からいから、思いつく方法を手当たり次第試してみました

 その中で成功したのが、「次が存在しないなら存在させてしまえ」というものです

 何を言っているかからないと思いますが、大丈夫、俺も分かりません。

 いちおう処理としては、

 1・「ドラクエ1・1話」の前の部分すべてをスライドさせて消す。

 1.5・「ドラクエ1・1話」の後ろの部分すべてをスライドさせて出す。

 2・最後に「ドラクエ1・1話」の部分スライドさせて出す。

  (実際に見えるのは、2のスライドして出てくるところだけ)

 と、1.5を入れたものです

 自分でもなんで成功したのかはよく分かりませんが、きちんと表示はされています。

 よく分からないなりにも動いてしまったのは、きっとjQueryのパワーだと勝手に納得しておきます

(ここはきちんと知識のある人に見せるのが恥ずかしい内容ですね。変なコードですみません)

最後お話したい、jQueryのすごいパワー

 つまるところもありましたが、以上がjQueryでの処理です

 これで何とかサイトは完成しました

 たま休日作成する趣味レベルサイトとして、自分でもすごく満足です

 で、このサイトを作って気づきました

 jQueryは何がすごいかって、これ、めっちゃ楽しいですよ。

 ・プラグインコピペするだけで見違えるように、サイトが動く。

 ・ちょっと表現を覚えるだけで、表現アニメーションが加わる。

 ・さらに研究すればするほど、いろんなことができるようになる。

 今までJavaScriptとか、独学素人なんで、なかなか勉強する気が出ませんでした

 勉強の大事さは分かるんですが、時間とか取れないです

 しかも、「関数引数がどうたらで、まずは足し算をアラート表示」とか、あまりやる気が出ません。

 でも、jQuery勉強の成果がすぐにめっちゃ分かりやすく出ます

 たぶん、自分にとって一番効果が大きかったのは、簡単さよりも便利さよりも、「やる気が出る」ってことでした

 実は、いったん完成した後、付け加えた機能があります

 それは「すすむ」の部分

 「最後のページで『すすむ』をクリックすると、始めに戻る」という機能です

 ここは、jQuery独自の機能を使ったわけではありません。

 JavaScriptの「if構文」を勉強して作りました

 jQueryJavaScriptの一種なんで、こういう構文が使えるんですよね。

 どんな感じの処理かを説明すると、

  • もし、最後なら最初に戻る。
  • それ以外なら、表示を次に進める

 という、単純なものです

 単純だけど、初めてのJavaScriptの構文で、自分には大きな一歩です

 今まで進むことができなかった、本当に大きな一歩を、自然と踏み出せていたのです

 届けたいので、もう一度書きます

 jQueryめっちゃ楽しいです

 めっちゃ楽しくて、やる気を引き出してくれるんです

 今はま技術はないけど、魅力あるwebを作る力を身につけたい方、jQueryジオススメです

 自分も取れる時間は少ないなりに、楽しみながら少しずつ進歩していきたいと思います。

 このような長い文章をご覧いただき、誠にありがとうございました

2010-05-27

ウェブサイトでよく使われるデザインや機能の呼称のまとめ

「あちこちでよく見かける『あの機能』を実装するためにCSSのテクニックとかJSライブラリとか探したいんだけど、どういうキーワードで探したらいいのかわからない…」という人向け。

注意

※この呼称が正しいとは限りません

※この呼称に統一されているわけではありません

ブロック要素等の角を丸め

角丸

複数の画像を一枚にまとめてCSSbackground-positionで制御する(メニューのマウスオーバーなどでよく使われる)

CSSスプライト

フォームにうっすらと説明文が表示される & フォームにフォーカスすると消える

プレースホルダ

フォームに入力された文字にあわせて入力候補を表示する

サジェスト

ページ内リンク等をクリックした際に滑らかにスクロールさせる

スムーズスクロール

他のメニューを押しのけるようなアニメとともにサブメニューが表示される & 開いているメニューは常にひとつだけ

アコーディオンメニュー

メニューの横にある+マークなどをクリックするとその下にサブメニューが表示される & 複数のメニューを開くことができる

→ ツリーメニュー

水平メニューから垂れ下がるようにサブメニューが表示される

→ プルダウンメニュー

横一列に並んだアイテムスクロールバーでスライド表示 & アイテムが床面に反射したようなエフェクト

カバーフロー

水滴のように光沢のあるデザインボタン

→ アクアボタン

画像サムネイルクリックするとオリジナルサイズの画像が画面中央に表示される

ライトボックス

警告ウィンドウ等が画面中央に表示される & その他の操作を受け付けない(※指摘を受けて追記しました)

→ モーダルボックス

説明文等が書かれた小さな吹き出しをマウスカーソルの隣に表示させる

ツールチップ

タグアルファベット順に並べる & その使用頻度等に応じてフォントサイズや色を変えて表示する

タグクラウド

ひとつの記事を分割してページ番号を振る

ページャー、ページネーション

フッター部分が常に最下部に固定されている

→ フッタースティック

2009-09-17

9/16

今日は7時過ぎに起床。

7時半過ぎに朝ごはんを頂く。

毎度のこと東京へは観光に来たわけでは無かったので、とてもブルー

さすがに今のままお世話になるのはごめんだ。

家に居るのも気まずい。

せっかく田舎から来たのだからいろいろ見て回らねば。

おじさんに、秋葉原に行ってくるといったら

そっちの方に行くなら上野とかアメ横とか雷門とか見てきなさいといわれたのでとりあえず見に行くことにした。

秋葉原は一度入ってみたかったところだったが、やはり一人で行ってもなんか虚しい。

とりあえずヨドバシカメラと近くのファミリーマート楽器屋とかに行って見た。

楽器屋のドラムとかあるフロアで、小出シンバルの特集がされてたニュース番組かなんかの映像に見入った。

自分ドラムを叩くのだが日本シンバル職人が居るなんて知らなかった。

DTMフロアナノコルグに触って遊んだりした後上野へ向かう。

上野へ行って適当に歩いてたらアメ横についた。すごい賑わいぶりだ。

気持ちの切り替えができていたら何かいろいろ買っていたとこだろうが

すぐに歩いて通り過ぎた。

そして、上野公園へ。

すごい広いかった。とりあえず適当に座ってファミマで買ったタピオカミルクティーとパンを食べたかったので

適当に歩いていたらアコーディオンの音が聞こえたのでそこへ向かうと大道芸人がアコーディオンを弾いていた。

座って聞きながら昼食を食べた。

そしてぶらぶら公園を歩いた。猫が居た。西郷隆盛像を見た。

その後浅草へ向かうものの東京メトロがどこから乗ればいいのか分からず

改札口を通ってしまったのでいったん一駅のって上野に戻ってから浅草へ。

駅から出たら金のうんこみたいなのが見えた。あれってなんなんだっけ?

まぁ、いいや雷門へ向かうもののたどり着くまでちょっと時間がかかった。

雷門行きのバスが見えたのでそれを追ってたらついた。

雷門をくぐって店が並んでるとおりをまっすぐ行って次の提灯あるところまで突き当たった。

その後は適当にお寺を見る。名前は分からないけど。

お賽銭を入れて拝んだ、あとおみくじを引いた。なんてこった「凶」だった。

それから一休みしてから戻った。

途中で電車を降りるの忘れて焦ったけど、気付いたところで降りたら目的地行きの電車あったのでそれに乗ったら帰れた。

戻ってきたのが17時くらいかな・・・

晩御飯を19時過ぎに頂く。

後は話をいろいろした。明日は下北沢に行ってみようと思うとか。

そのあと、親戚宅の近くを散歩した。

散歩途中に地元の友人からメールが届いていたので返した。

東京仕事探すとかでかいこといったけど、親戚に迷惑かけるし帰るとか

家出して住み込みで働こうと思ったけどそれこそ心配かけるし迷惑だとか。

友人が、じゃあバンド組もうぜとか。専門学校なのに独学でやってきた自分より下手の人しかいないとか信じられなかったけど。

それから戻って風呂に入って増田見たりして今に至る。

自分はもうちょっと思ったことを遠慮なしにいったほうがいいとガチで思う。

思ったことを言えない、それなのに裏ではぐちぐちいうめちゃくちゃたちの悪いタイプ

事なかれ主義なんだよなぁ・・・安定を求めるが上に言われるがままって言うか・・・

自己開発セミナーとか行ったら変わるもんなのか?とか考えたりする。

マジ、人生損してる。どうしてこうなった

現にこうして匿名日記を書いてる。なんなんだこれ。

どうすれば誰にも迷惑や心配をかけずにうまく社会的に復帰できるのだろうか

4ヵ月で会社を辞めてしまって次の仕事探すにしても何も無いから資格を取ろうとかバイトしながら音楽やるとか

都合のいいことばかり考えてしまう。

だいたいこういうことは昨日にも増田に投稿していて

なんだ、まだ何もして無いじゃん。

 

自分の甘さがわかってるなら4択。

 

1)慰めて欲しい

2)甘さを克服したい

3)人生絶望した

4)EASYモードでお願いします

 

1か3か4→せっかく生まれてきたけど運が無かったと思え。

2→ブラック経験して音楽ネタにするくらいの覚悟持てばおk

というのを見つけた。自分は18歳でこの先まだ長いので覚悟を決めればやり直せる

もともと音楽をやって生きたい。

まだその覚悟ができてない。そこがだめなんだろうな。ちくしょう

この記事の中でも何回も「とりあえず」がいっぱい出てきてお分かりのことだと思う。

気持ちシフトできてないけど今は東京観光しとこうと思う。

2008-12-26

[][]Rails of Ruby on Rails ~Case of LOCUSANDWONDERS.COM~

Blog locus.heroku.com

Products locus.heroku.com

Rails of Ruby on Rails サポートサイト

http://railsofrubyonrails.com/download/locus_files.zip

LOCUS. AND WONDERS.

Heroku | Cloud Application Platform タグ「heroku」を含む新着エントリー - はてなブックマーク

BitNami :: RubyStack

BitNami :: From InstantRails To RubyStack

BitNami :: Redmine

Amazon.co.jp: Rails of Ruby on Rails ~Case of LOCUSANDWONDERS.COM~: Plan de Sens, 清水 智雄: 本

ブログショッピングサイト作成ケーススタディを解説します。

音楽サイトを選んだのは、画像、音声、動画など、

今のWebで考えられるほとんどのコンテンツを扱っており、

Railsの良さを一番実感していただけると思ったかです

Ruby on Rails 2.0対応

「レイルに乗ってみた」の検索結果一覧 - 牌語備忘録

「Rails of Ruby on Rails ~Case of LOCUSANDWONDERS.COM~」を含むブログ - はてなキーワード

満足せる豚。眠たげなポチ。:RAILS OF RUBY ON RAILS が実にすばらしい件

RAILS OF RUBY ON RAILS - 世界線航跡蔵

いろんな意味で新しい Rails 本: Rails of Ruby on Rails - まちゅダイアリー(2008-05-24)

Rails of Ruby on Rails 目次

Rails of Ruby on RailsCase of LOCUSANDWONDERS.COM~

Introduction

 HTMLCSSからその先のステップ

 Ruby on Railsの基礎知識

 プログラミングRubyの基礎

Chapter 01 開発環境構築

 Windowsでの環境構築

 Mac OS Xでの環境構築

 Windows / Mac OS X共通の設定

Chapter 02 プロジェクト作成

 Rails プロジェクト作成

 データベース接続の設定

 データベース作成

 データベースの内容を確認する

 開発用Webサーバの起動

Chapter 03 ブログ作成

 記事の作成・読み出し・編集・削除

  スキャフォールドジェネレータで管理画面を作る

  レイアウトを変更する

  各ページのデザインを変更する

 バリデーションと日本語対応

  バリデーションを使ってフォームの入力内容を検証する

  Ruby-GetText-Packageをインストール

  バリデーションエラー日本語化

 ユーザ認証管理

  ユーザー認証機能を付ける

 画像アップロード

  FileColumnプラグイン

  マイグレーション

  モデルの修正

  フォームの変更

  画像を表示するようにViewを修正

 フィードAtom)を配信

  Atomフォーマットを追加

  Atomフィードテンプレート

  Auto Discoveryを追加

 コメント機能

  ベースを生成

  マイグレーション

  モデルの修正

  ネスティッドルート

  コントローラの修正

  コメント機能を記事に組み込む

 トラックバック機能

  スキャフォールドでベースを生成

  マイグレーション

  モデルの修正

  ネスティッドルート

  コントローラの修正

  トラックバック機能を記事に組み込む

 タグタグクラウド機能

  プラグインインストール

  記事にタグ付け機能を追加する

  タグクラウド表示をサイドバーに追加する

Chapter 04 ショッピングサイト作成

 商品管理

  商品管理

  ジャンル管理

 ショップ画面

  商品一覧画面を作成

  商品詳細画面の作成

  ライトボックスJSライブラリを使って商品画像を効果的に見せる

 ショッピングカート

  Cartモデル作成

  CartItemモデル作成

  Cartコントローラ作成

  カート画面の作成

 注文処理

  OrderモデルとOrderItemモデル作成

  決済・注文画面の作成

 自動返信メール

  メール送信のための設定

  メーラージェネレータでOrderMailerモデル作成

  送信内容のテンプレート作成

 コンタクトフォーム

  メーラージェネレータでContactモデル作成

  フォームの作成

  入力の検証をする

Chapter 05 サーバー環境

 Railsアプリケーションの公開

  Herokuを設定する

  アプリケーションを公開する

  サイトを本番運用環境に変更する

Chapter 06 ユーザー事例

 ケース1 Saigenji (http://saigenji.com)

  サイト携帯電話対応にしたい

  インタビュー

  作品集 (Saigenji & Happiness Records 編)

 ケース2 UK.PROJECT (http://ukp-pr.com)

  Railsインクリメンタルサーチ

  インタビュー

  作品集 (UK.PROJECT 編)

 ケース3 Traffic (http://trafficjpn.com)

  動的データを静的ページに表示したい

  インタビュー

 ケース4 RX-RECORDS (http://rx-records.com)

  複数の画像が切り替わるFlashバナーRails管理・生成したい

  各バンドごとに情報を集約させたい

  インタビュー

  作品集 (RX-RECORDS 編)

 ケース5 石田ショーキチ (http://scudelia.net)

  ラジオ番組ポッドキャスト形式で配信したい

  通常のページ構成以外の特設ページも管理したい

  サイトの好きな場所にバナーを設置・管理したい

  インタビュー

  作品集 (石田ショーキチ 編)

 ケース6 V2 Records (http://v2records.co.jp)

  Wordのような操作感でニュース記事を編集したい

  情報を限定し直感的で簡単に管理したい

  インタビュー

 ケース7 橋本昌彦 (http://www.hashimotomasahiko.com)

  天気と連動した画像を表示する

 ケース8 BUMP OF CHICKIN (http://www.bumpofchicken.com)

  拡大画像ロールオーバーで表示したい

  インタビュー

  作品集 (HIP LAND MUSIC 編)

 ケース9 Cradle (http://cradleorchestra.com)

  見たい記事だけをアコーディオン表示させたい

  インタビュー

  作品集 (Cradle & Palette Sounds 編)

Appendix

 主なエラーの例と対策

 Reference

ログイン ユーザー登録
ようこそ ゲスト さん