読者です 読者をやめる 読者になる 読者になる

「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

「作りながら学ぶjQueryデザインの教科書」の非公式な正誤表

「作りながら学ぶjQueryデザインの教科書」のAjaxでハマる時の対処

今年は技術を学び、身につける一年にする。

その一冊めの教材として昨年末から取り組んでいるのがこちら。

 

作りながら学ぶjQueryデザインの教科書

作りながら学ぶjQueryデザインの教科書

 

 

ドロップダウンや固定ヘッダー、スライドショー、さらにAjaxなど今風な技術を網羅していて、発行から2年以上たった今でも物凄く使える一冊。

私はjQueryもJSもまともに学んでいなかったのですが比較的スムーズに学習が進んでおり、説明も丁寧で分かりやすいため同じような状況の人にはお勧め。

しかし、これからこの本を手に取る人の為に書いておきたいことがあります。

Ajaxの章でハマる。

多分、多くの人がAjaxの章で躓くのではないかと思います。

いくらコードを見直しても間違いない。でも動かない。
それで2時間程度はハマったでしょうか。
結果としては公式サイトに対策の記載がありました。

www.solidpanda.com

端的に言えばサーバーがJSONファイルに対応していないケースがあるので、設定してあげればOKとのこと。すぐに見つけられれば....。


作者のコラムという形で掲載されておりますが、見つけにくいです。

私は写経で動かない場合、

  1. 再三ソースを見直し
  2. 「書籍名+正誤表」で情報を探す
  3. それでもダメなら動いていない原因や箇所の特定をして、
  4. 対処をググる

という順序なのですが、皆さんどうなんでしょうか??

これは正誤表に乗せても良いんじゃない?という意味で、本記事のタイトルを非公式正誤表としました。

 

We Project2200

Statistics

Activity TypeDurationPercent
Total95:59100.0%
仕事 20:10 21.0
勉強 04:47 5.0
勉強 04:47 5.0
読書 01:26 1.5
その他 69:35 72.5

2017年の現在地[We Project2200]①

2017年の現在地。そして道しるべ

この記事に触発されて、今年は技術を磨く一年にしようと思った。

itkeijyoshilog.hatenablog.com

僕は2015年の半ばからweb制作を学び始めて、2016年から社内のweb制作部門に配属となった。年齢的にはまあ、本来であればベテランディレクターとかプロデューサーになっていておかしくない位。

 

だというのに、まだまだ足りない部分しかない!というのが個人的な気持ちで、もっともっと早く、クオリティの高い仕事を出来る様になりたいと思っていた。

そんな正月に上記の記事がTwitterのタイムラインに流れてきたのでグッと触発され、主さんには迷惑かもしれないが真似してしまおうと思う。

デザイナーではなく、Web Engineerを目指すということで[ We2200 Project ]とする。

現在地の確認

今現在のスキルとしてはこんな状態。

  • HTMLは一通り書けるが、もう一段上に行きたいと思っている。
    具体的には属性値について理解、活用することであったり、エラーを一切吐かないコーディングであったり。そして、何と言ってもスピードだろうか。
    自分のスピードを数値化できていないし、業界の水準もわからないのでなんとも言えないところだけど、最低限Emmetと構築全体を意識したコーディングがスピーディーにできる様にする。

  • CSS。こちらも一通り書けるが、細かい部分は調べながら書いていることも多い。そして時々超基本的な部分で躓いたりする。blockにし忘れてやられるとか。
    基礎理解がまだ甘いということなので、改めて要素の特性を学ぶことと、セレクタ、プロパティ共に知らないものも多そうなのでさらってみることが第一だろうか。全体としてはシンプルなCSSを目標に。

  • JSやjQueryはなんとなく読める程度。人様のブログ記事を見ながら、コードを頂いて生活しているコード乞食状態だ。これはまずいなと思っている。まずはjQueryを習得するべく書籍で勉強している最中。自分の課題を発見する以前の問題。まずはスタートラインに立つべく、数冊書籍で写経をするのが第一目標。


  • バックエンド。PHPの基礎は理解している。簡単なメールフォームやそれを応用した簡単なプログラムなら作成可能。ただし、手探りというか、エラーとgoogleの三者通話しながらな部分が多く、まだまだ。そしてデータベースの理解をしていないのが大問題。簡単なwebアプリでも作りながら学んでいこうと思う。

こうして振り返ると薄く広くの典型。この一年でどこまで分厚くできるか、試してみたい。

どこを切り取って2200時間をカウントするのか?

正直、2200時間学習するのは業務時間を省くとかなり厳しい。365日休まず6時間でようやく達成できる。ただし業務時間を全て当て込んで行ってしまうとほぼ業務時間だけで終わってしまう。

・・・・・・・・・

パレートの法則で行くことにする。2割の個人学習が8割の業務を支えると信じて。

出勤日数240*8=1920の20%で384時間。

日々残業もあるのだけど、それは含まないことにして。

それ以外でこの時間を個人学習として追加すれば良いこととすれば一日1時間半程度になるので、かなり現実的だ。

2200時間は少々超えてしまうけれど、まあいいだろう。

 

目標とするところ

今年取り組みたい技術的な部分としては、

高機能なwordpressのテーマ作りと、ECサイトの構築(ASP系とEC-CUBEそれぞれ)の2点があるのだけど、そのための柱、基礎力としてHTMLやCSSjQueryなどを自在に使える様になることを今年の目標としたい。

siblings()の使い方|jQueryメソッドの覚え書き|「webで何か」作るブログ

年末のお休みを利用して、jQueryの勉強をしていますが、歳のせいかメソッドが覚えられないので同じものを何度も調べてしまいがち。

記憶の定着のために少しづつ整理するというのが本記事の趣旨になります。

今回は

siblings() が取得するもの

siblings()は、自身を起点とした兄弟関係にある要素を取得します。

ただし、自分自身は含まれないのでアコーディオンラジオボタンなど、一つの要素が選ばれたら他は閉じるような動きの時に活躍します。

siblings( )からのremoveClass( )やaddClassなんてのはほぼ定型文。

縦書きwebデザインの実現方法と環境を考える

縦書きwebデザインの作り方を試す【CSS編】

本日、唐突に縦書きサイトの話が盛り上がった。

主に和食店、旅館などが「和」を感じさせる為に利用しているに止まっているイメージなのだけど、実際に縦書きのことを考えたことがなかったので考えつつ、まとめてみる。

 

縦書きの実装方法

私は基本的にコードを書く方面の人間なので、まずは実装方法が気になります。

縦書き web などで検索すればいくらでも出てくるので、皆様方にはそのサイトをご覧頂くとして、大雑把にまとめておきます。

主な実装方法とブラウザ状況

縦書きを採用しているサイトがそれなりに有ることから、特に難しいことでは無いようです。主な実装方法はこの二つ。

  • CSSのwriting-modeを使う

フロントエンドの問題なのでこの二つが実装方法なのは当然として、ブラウザの対応状況が気になるところです。

結論から言えば2016年12月現在、opera miniを除く最新ブラウザであれば問題無いらしい。

Can I Useは以下からどうぞ↓

Can I use... Support tables for HTML5, CSS3, etc

縦書きに関して言えば、最も遅れたブラウザはfire-fox。IEに関してはずいぶん前から独自対応していたという、珍しい展開。

では現実路線、どの程度まで対応するのがいいのか?というのをはっきりさせておきたいですね。

 

PCブラウザ対応状況

IE     6〜 

EDGE   12〜

fire-fox       41〜

chrome      8〜

safari         5.1〜

opera        15〜

バイルブラウザ対応状況

safari&chrome on iOS    5.1〜

opera on andoroid         37〜

chrome on android        55〜

fire-fox on android         50〜

 

現状、今からサイトを作るので有ればレスポンシブ対応したい!というのが多くなってくるでしょうから、その辺も併せて実験してみたいと思います。

まずはただ単純に縦書きにするCSSを書き加えてみます。

CSS:writing-modeの基本挙動

writing-modeをcssに書き込めば簡単に縦書きにはなります。

こちらの練習用htmlを使って挙動を確認します。

 

こんな状態ですね。

 

f:id:pochiweb:20161228082349p:plain

 

 

それでは、class="article" に対して以下の様にwriting-modeを書き加えてみます。

writing-mode: tb-rl;/*IE用の記述*/

-webkit-writing-mode : vertical-rl ; /*それ以外*/

値のvertical-rl、tb-rlの「rl」の部分はright to leftの指定です。

文章が右から左に流れていきます。

今回writing-modeを書き加えた対象は id="article"です。

こうなります。

簡単に縦書きになりました。

 

f:id:pochiweb:20161228082633p:plain

 

writng-modeの値のrlは、文章を右上開始で左に流れる指定ですね。

lrにするとこう。

左上が開始になり、文章が右に流れていきます。

 

f:id:pochiweb:20161228082952p:plain

writing-modeは親要素にかけるもの

次に、#article子要素である.sectionに対して同じCSSを書き込むとどうなるかを試してみます。

私は今回初めて縦書きを試すに当たってこの部分で少しだけハマってしまいました。親要素に指定するものだと知らずに手を動かしてしまったので、子要素にまずかけてみたんです。仕様書を読めばこんなことにはならないのでしょうが、まず動かす!が好きなんですよね。

すると、こうなりました!

 

f:id:pochiweb:20161228084149p:plain

横書きが縦に積み上がっていく(笑)

(heightはブログ上で見辛いので変更しています。)

 

ちなみに、この「子要素にwriting-mode」方法でなんとかならないか?を考えているうちにこんな面白い状況にもなりました。

なぜか、見出しにインデントがかかった様な感じに。

f:id:pochiweb:20161228085133p:plain

やったことは、

 #articleにflexをかけ、row-reverceで右詰めにして、directionにrtlを指定。

右詰めの文章が縦になるとこうなるのでしょうか?試しにltrに変更してみると行頭に戻ったのでそうゆう事な様です。

シンプルなパララックスサイト構築のためのメモ帳 | 「webで何か」作るブログ

f:id:pochiweb:20161225221041j:plain

シンプルなパララックスサイト構築のためのメモ帳

先日、ごくシンプルなパララックスを利用したサイトを作成しました。

 

どのくらいシンプルかというと、

というこの上ないシンプルさです。

それでも、意外と見栄えが変わりますし、使い勝手もいいので残しておきます。

なお、以下の2つのサイトに非常にお世話になりました。

 

webdesignmagazine.net

webdrawer.net

webにおけるパララックスとは?

パララックスとは、視差効果と訳されています。

複数の物体の距離や速度の違いなどで生じる視覚的な効果全般を言うのでしょう。

 ただし、webにおいて限定するならばそんな難しいことは無く、

要素の動くスピードを変えることによる演出、効果全般という理解になるでしょうか。

それはさておき。

まずはHTMLから。

HTML

縦に並んだ3つのセクションを用意しました。

この中央、id="move"の背景画像を動かしてみたいと思います。

 

 

CSS

続いてCSSです。

各要素の高さや背景色を指定して、id="move"の背景画像も指定しました。

この状態では当然ですが動きません。

 

 

 

f:id:pochiweb:20161225205940p:plain

JS

基本のHTMLlとCSSができたところで、Javascriptを追加します。

追加するのは全部で3つです。

  • jQueryの読み込み
  • スクロール量を取得する処理
  • 指定したものの移動速度を変更する処理

 

これで、背景画像が別の速度で動くようになりました。

ロジック

理屈としては、

  • スクロール量を取得し、変数yに格納
  • yに任意の数値を掛ける
  • 算出された数値をCSSのbackground-positionに反映させる

ことで任意の速度設定を行なっています。

 

あとは、任意の位置からのイベント発火ができればかなり実践的な使い方が可能になると思います。

 

 

 

 

 

勉強ってやっぱり、手を動かさないと効果が出ない。

「webで何かを作る」ブログと言っても、

今は主にwebサイトを作るのだけど、そこには様々な技術があって、年齢のせいもあり、とても眺めただけでは覚えることが出来ない状態。

 

技術情報に触れるたびに、一つ一つ実際に手を動かして覚えるのが遠回りな様で一番いいのではないかなあと。

 

HTMLは5.1が始まり、CSS3も上辺だけ使える程度の状態なのにすでに4の足音が聞こえるこの状況は結構厳しいけど、少しづつ確実に伸びていこう。

 

 

 

このブログについて

基本的に、記録と実験のためのブログです。

日々の仕事について忘れたくないことや次に活かしたいことなどを綴っていきます。