2017-04-02

【ウェブサイトの本質を学ぶレッスン】

f:id:wp-lesson:20170304123413p:plain

個人でホームページを持つことが当たり前の時代ですが、
昔に比べてブログやCMSのサービスが増えたため、
ウェブサイトの本質を知る機会が少なくなっています。
　
本質さえ知っていれば、「ああしたいこうしたい」を
どうやって叶えたらいいのかという正しい道筋を自力で
考え付いたり、ネットでどんな情報を調べたらいいかが
わかるようになります。
　
逆に、「●●の使い方」「△△のやり方」という
ピンポイントなハウツーはいくら学んでも、
使うツールやサービスが変わると通用しないスキルです。
　
他人が用意してくれたレールに乗っかるのは楽ですが、
自分の思い通りにならないこともあります。
　
他人が用意してくれたものを改造するには、
本質を知っておくことがとても重要です。
　
先日のレッスンでは、あらゆるウェブサイトに共通する
本質的な仕組みをお教えさせていただきました。
　
　

PR

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価： 2,400円（税別）出版社：秀和システム
　
▼Amazon購入ページはこちら
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy

2017-04-01

【サイドバーにタブメニューを追加する方法】

WordPress/プログラミングレッスン

f:id:wp-lesson:20170304123314p:plain

事業サイトの構築に取り組んでおられる生徒さん。
　
サイドバーに配置したコンテンツをタブで切り替え
できるようにしたいということで、ピンポイントの
レッスンをさせていただきました。
　
「タブをつけるにはどうすればいいか？」
　
という漠然とした疑問の答えは、２つのステップに
分けることができます。
　
１．タブに見えるものを追加する
２．タブをクリックしたときの動作を追加する
　
まず１では、HTMLとCSSを使います。
　
ウェブページに表示されるものは、画像や動画を除くと
基本的にはHTMLのタグで表現されるからです。
　
そして、タブの配置やデザインを装飾するために
CSSを使います。
　
ここまででタブの外観は作ることができます。
　
２の「動作」は、HTMLやCSSでは表現できないので、
javascriptや、その拡張版であるjQueryを使います。
　
・クリックしたとき何かを動かす
・スクロールに合わせて何かを動かす
　
といった、ユーザーの操作（アクション）に応じて
javascriptでHTMLやCSSを切り替えることによって、
動作を表現できるからです。
　

PR

2017-03-31

【jQueryの本質がわかるレッスン】

WordPress/プログラミングレッスン

f:id:wp-lesson:20170304123140p:plain

レスポンシブサイトの作り方を学んでおられる生徒さん。
先日は、モバイル用メニューの作り方を扱いました。
　
その中で、
　
・イベントの概念
・jQueryとJavascriptの違い（関係）
・jQueryのメソッドの正体
・JavascriptとCSSの関係
　
など、ウェブページで使われるエフェクトの
本質について学んでいただきました。
　

PR

2017-03-31

【ウェブライダー松尾さんの本に迫る「WordPressがわかる本」】

書籍

f:id:wp-lesson:20170331221510j:plain
「WordPressのツボとコツ～～」
　
Amazonの登録３ジャンルで今日も
2位-4位-4位という高ランク。
　
人気の“いちばんやさしい～～”シリーズを押えて、
ウェブライダーの松尾さんの本に迫っています。

f:id:wp-lesson:20170331221533j:plain

出版社様も、連日Amazonで好調なランクを
記録していることに、大変喜んでおられました。
　
そんな中、次の本のタイトルや内容について
打ち合せを進めております。

f:id:wp-lesson:20170331221546j:plain

企画が承認されれば、近々また執筆スタート
となる予定です。
　
１冊目「ホームページ作成のツボとコツ～～」
２冊目「WordPressのツボとコツ～～」
　
順番にステップアップしていけるように考えた
シリーズですが、次の本はさらに次のステップに
つながる１冊にしたいと思っております。
　
ご期待ください。

PR

CODEMYのマンツーマンレッスンでは、WordPressや
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『WordPressのツボとコツがゼッタイにわかる本』
　
▼Amazonで概要を見る
http://amzn.to/2nd7Ia5
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
　
▼Amazonで概要を見る
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/

知りたいことだけ学べる個人レッスンです。

　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
　

HTML/CSS/JavaScriptの基本が身に付くレッスンです。

↓無料体験はこちら
http://bit.ly/2hw7mIy

2017-03-30

【今さら聞けないユーザーエージェントとは？】

WordPress/プログラミングレッスン

f:id:wp-lesson:20170228190729j:plain

モバイルユーザーを視野に入れたウェブサイトや
アプリを作るとき、意識するかしないかに関わらず
触れることになる概念の１つが「UserAgent」。
　
私たちがPCやスマホなどのデバイスを使って
インターネットの向こう側にあるサイトなどに
アクセスするとき、接続先のサーバーに対して
　
「私は誰です」
　
というユーザー側の端末情報がネット回線を介して
伝えられます。それがユーザーエージェントです。
　
いきなり見知らぬ他人がインターホンを鳴らしたら
警戒しますよね？それと同じです。
　
インターネットにおいても、サーバーとブラウザの
どちらがどんな順番でどんな情報を送るのかという
手順（＝ルール）が決まっています。
　
ルールがあるからこそ、プログラムで情報に応じた
動作をさせることが可能になるんですね。
　

ユーザーエージェントの中身

f:id:wp-lesson:20170228190816j:plain

ユーザーエージェントはブラウザによって異なり、
例えば以下のようになっています。
　
↓PCのChrome
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
　
↓iPad
Mozzila/5.0 (iPad;CPU OS 10_2_1 like Mac OS X) AppleWebkit/602.4.6 (KHTML,like Gecko) Version/10.0 Mobile/14D27 Safari/602.1
　
↓iPad Pro
Mozzila/5.0 (iPad;CPU OS 10_0_2 like Mac OS X) AppleWebkit/602.1.50 (KHTML,like Gecko) Version/10.0 Mobile/14A456 Safari/602.1
　

ご覧の通り、ユーザーエージェントは単なる文字の
羅列に過ぎませんが、ブラウザのバージョンやOSの
種類といった情報が載っていることが分かります。
　
これを受け取ったサーバーは、接続相手がPCなのか
スマホなのかタブレットなのかを読み取るので、
各デバイス向けに最適化されたページ（コンテンツ）を
ブラウザに送り返すことができるわけですね。
　
ここでいう「ユーザー」とは、人間のことではなく
サーバーから見た「サーバーの利用者」すなわち
私たちのPCやスマホなどのデバイスを指します。
　

プログラムでユーザーエージェントを読み取るには？

　
プログラミングでは、ユーザーエージェントを
読み取ってデバイスごとに動作を変えるために利用します。
　
ワードプレスのテンプレートファイルのように
サーバー側で動くPHPのプログラムでは、
ブラウザから送られるユーザーエージェントは
　
$_SERVER['HTTP_USER_AGENT']
　
という変数（＝データを保持する入れ物）に
格納されるので、これを読み取ります。
　
「Mobileという文字列が含まれていればスマホ」
「iPadとMobileの両方含まれていればiPad」
「どちらも該当しなければPC」
　
といった処理を、文字を読み取る構文を使って
記述します。
　
一方、Javascriptに代表されるブラウザ側で
動くプログラムでは、ブラウザ自身から
ユーザーエージェントを読み取ります。
　
navigator.userAgent
　
このように、プログラム言語が違うと同じ
データを扱っていても記述が異なりますが、
それはもう関西弁と関東弁のようなもので、
方言の違いでしかありません。
　
大事なのは、
　
「いずれの言語でもユーザーエージェントを
　参照する文法が用意されている」
　
という事実だけです。
　
文法を覚えていなくても、その事実さえ覚えて
いれば、どんなキーワードでネット検索すれば
見つかるかを想像するのは難しくありません。

PR

　
CODEMYのマンツーマンレッスンでは、
ワードプレスを基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価： 2,400円（税別）出版社：秀和システム
　
▼Amazon購入ページはこちら
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy