jQueryを使いこなせるようになる為に始めた事

少し更新が空いてしまったけど、今勉強している事に対して。

javascriptとｊQueryをほんとのほんとに基礎から勉強しようと思っていろいろ本を読んでます。
これまでも実務で使ったことが無い訳では無かったけど、必要に迫られた時に必要な情報だけを探してなんとかこねくり回して、「動いた、良かった」で終わってたんですね。
もちろん、公開されてるプラグインもその中身が何をしているのか何て分からないし、分かろうとも思ってなかったんですが。

ただ、今の世の中、「WEBデザイナー」＝HTML+CSS+javascriptっていうのがスタンダードになりつつあるし「こんな事がしたいなー」と思った時に、それにぴったりなプラグインが見つかる保証もありません。

そんな時に自分で作れたら・・・・と想像したら、これがもうワクワク以外の何物でも無くて。

でも、プログラム初心者にとって、独学で覚えていこうとするとHTMLやCSSに比べて途端にハードル上がるなぁっていうイメージもあって、今まで本格的に学ぼうとはしてませんでした。いや、過去になんどかしたんだけど、その都度挫折したというか。

で、あれこれと参考書を探していて辿り着いた本があって、ああもっと前にこの本に出会いたかったと思えるような本を知ることが出来たのでその紹介です。

基本的にHTMLとCSSはある程度分かるけど、プログラムはさっぱりっていう人向けだと思います。
それを踏まえて。

3ステップでしっかり学ぶJavaScript入門

使えるようになりたいのはjQueryなんだけど、いろんなHowto本を読んではみたものの、なんというか「javascriptの基本は分かってるよね？」と言われてるような本が多くて、それで挫折した事もありました。
なので、javascriptの基礎をまず分かるようになろうと思ってあれこれ探した結果たどり着いた本ですね。

一言でいうと初心者に取ってこれ以上優しい入門書は無いんじゃないかと思います。
ほぼ全ての項目で、「予習」「体験」「理解」という3つのステップになっていて（タイトルがそうなんだから当たり前なんですけど）、まずは意味が分からないけど、こんな動きが作れた！みたいな感動から、じゃあなんでそうなるの？という所を詳しく説明してくれてます。

HTMLとかCSSが割りと初心者でも分かりやすいのは、構文（という表現で良いのか分からないけど）がそんなに複雑じゃないからだと思うんですよね。タグやstylesheetは英語の意味から何となくやってる事が分かったりもするし、取っ付き易い。あと記号が少ない（笑）

でもプログラムになると英語と記号の割合がまるで違いますよね。記号の羅列を見ても、そこからは何も想像できないし、でもその記号が一つ抜けると全く意味が違ったりエラーになることは想像できて怖くて触れない。

ノンプログラマーの人がプログラム触ろうとして躓くのはこういった所が原因じゃないかなと思ったりします。少なくとも僕はそうです。

そしてこの本は、その「意味が分からない部分」をちゃんと教えてくれました。
例えば

alert("ようこそ")

の「"」がどうして必要なのか、とかもうプログラマーの人からすれば、「いやいやそんな事も知らずにプログラム書こうとか10年早いよ」と言われそうな、ほんとにほんとの基本的な所から教えてくれるんですよね。

公開されてるプラグインをちょこちょこ触ってて「ココを変えればこうなる」みたいなのはある程度分かりますよ。だって数字変えるだけとか、動きの種類を変えるだけとか、予め用意されてるオプションしか触らないから。でもそこに付随してる記号とかその他もろもろがどんな働きをしてるかなんて分かりません。分からないから単純な部分しか触れない。それこそスクリプトの中の1文字単位ですよ。

だけどこれを読んでからプラグインをもう一度見ると、全てでは無いですが記号の意味が分かって何をやってるのかなんとなーく分かるようになりました。これって凄い事だと思います。特有の関数とかメソッドとか？はその都度検索すれば意味は分かります。ようなその関数やメソッドが他の要素をどう繋がってどう動いてるのかっていう部分（骨組み）が分かるようになります。

プログラムを始めたいWEBデザイナーの方全てに読んで欲しいと思うくらいの本です。

答えも解き方も分からない難題があって、どう手を付けていいのか分からなかった所に、答えはまだ分からないけど答えにたどり着くための方法が分かったような感じですね。

凄いと思います。

今はjQueryの入門書をいろいろ読んでます。
次回にその紹介をしたいと思います。

自作テンプレートの道5 下準備3 Concrete5（Ver5.6.3.1）

下準備の記事で3回も書くことになるとは思わなかったけど何とか今回で終わりたい。

前回の記事でいろいろと工夫してHTMLを書くという事でひとまず組み終わったHTMLがコレ。
http://concrete.dsm.jp/_themeHTML/ver1/

メインビジュアルが無いのは、これはConcrete5に標準で入ってるブロック「Flex Slider」を使う予定なのでコーディングする必要が無いって事。一応このスライドショーが入る為のブロック要素だけコーディングしている状態。最初から言い続けてるけれど、このテンプレート作成は「プログラミングスキルがほとんど無いWEBデザイナーでも、オリジナルデザインで更新しやすいCMSを構築する事」が目的なので、難しい事はほとんどしない。ほぼHTMLとCSSだけで組んでみたい。

自作テンプレートの道4 下準備2 Concrete5（Ver5.6.3.1）

そしたら前回の記事で用意したHTMLに作成したいデザインを組み込んでいく。
いつものように、HTMLとCSSしかまともな知識が無いってレベル向けの話なので、間違いやおかしい所があれば、都度都度訂正していきたい。

ひとまず作ったデザインを下のように分けてみた。

<!--header START-->
<header>
 <div id="headerIn">
 </div>
 <nav>
 </nav>
</header>
<!--header END-->

<!--contents START-->
<div id="contents">
 <div id="mainVisual">
 </div>
 <div id="contentsIn">
  <div id="mainColumn">
  </div>
  <div id="sideColumn">
  </div>
 </div>
</div>
<!--contents END-->

<!--footer START-->
<footer>
</footer>
<!--footer END-->

こんな感じ。

自作テンプレートの道3 下準備1 Concrete5（Ver5.6.3.1）

デザインは決まった。
エリアにする所も決めた。

じゃあいよいよテンプレートを作っていく。
任意のフォルダを作って、以下のような構成にした。

css、images、jsフォルダは、読んで字の如し。
elementsフォルダは、サイト全体に『共通パーツ』としてインクルードさせるエリアのファイルを格納する場所、と思ってもらえれば良い。ヘッダーとかフッターとか、全ページに共通する、あるいは特定のディレクトリに共通するエリアの事。

自作テンプレートの道2 デザイン作成とテンプレート作成時の考え方 Concrete5（Ver5.6.3.1）

Concrete5（Ver5.6.3.1）のインストールも終わって、さぁオリジナルデザインのテンプレートを作ってみようというお話の2回目。

1回目はファイル構成の事に触れたけど、ここから読み進めても多分大丈夫な気がする。前提として、HTMLとCSSくらいしかまともな知識が無いっていう初心者向けの話なので、間違ってるよ！って意見があれば教えてください。訂正します。

何はともあれデザイン

当たり前の話だけど、デザイン作んなきゃ始まんない。そして、こうゆうのってやっぱりクライアント向けに展開する事も多いから、コーポレートサイトを前提に作ろうと思う。
こうゆう感じでデザインしてみた。

非プログラマー系でも素敵なサイトが作れる！Concrete5

とある場所で、WeebyがWordPressの代替になる云々という記事に対して、やり取りしてたんだけど、じゃあConcrete5だって代替って言えるじゃないか。と思った訳です。

でも、基本的に自分所のサーバーにインストールするオープンソース系のWordpressやConcrete5、MovableTypeとかと、ストレージもついてて完全にクラウドなWeebyとかだと、タイプが違うものになるんじゃないかと、知識の無い頭で思いました。

でオープンソース系だとWordPressってもう独壇場といっても良いくらいメジャーなんですけどね。
敷居がね、高いんですよ。
そりゃ今どきレンタルサーバーの中では簡単インストールサービスなんかもあったりして、導入そのものには難しさは減ってきてますけど、自由にやりたいー！なんて思った途端に裸眼で夜の街を歩くような不安に襲われます。
それに固定ページって結局中身はHTMLだから、普通にコーディングしてんのと変わんないし、ブログ部分だけじゃないですかね、スキル無くても更新できるのは。

自作テンプレートの道1 ファイル構成 Concrete5（Ver5.6.3.1）

久しぶりにConcrete5を触ってみた。
おそらく3年ぶり。

当時に比べると比較にならないくらい便利で使いやすくなってるという話を聞いて、CMSとは言えど高度なPHP、Javascriptスキルが無いと、どうにもならないWordpressから、新しい手段を一つ持っておくのも悪くはないと思った。

という訳で、自分に対する忘備録としてあれこれ書いていこうと思う。

CMSって最近、本当に流行ってるというかスタンダードになりつつあるんだけど、便利に使おうとか、かっこ良くしようと思うと、スキルが低かったらどうにもならない。
自分と同じように初心者向け、HTMLとCSSはある程度分かるけど、「jQueryとか知らん」「PHPって健康食品？」くらいのレベル向けにいろいろ書いていけたらと思う。

まずはテンプレートファイルの構造から。

作ったテンプレートファイル一式をフォルダごとtheme/以下にアップロードするのはまぁ分かるとして、どんなファイルが居るの？って事がhttp://concrete5-japan.org/help/design/step_by_step/に載ってるんだけども、ここから既に少しハードル高し。

そして多分3年前と内容変わってない気がする。

いろんなファイルとフォルダがあって、一応意味は分かるんだけど素人からすると、必須なのかどうかって所だと思う。