TOP > スタッフコラム

スタッフコラム

講師 森コラム
2017年08月14日

Web業界で、気になるアレコレ /Vol.70 「 Photoshopの写真補正で必要なこと 」

こんにちは。 iMedioセミナー講師の森 和恵です。
お盆の時期に、マシンスペックを見直しています。この夏は、モニターの買い換えをする予定です。

パソコン作業の《目》となるモニター選びは、慎重にします。
メーカーは《EIZO》と決めているのですが、今回は4Kを狙っています。
http://www.eizo.co.jp/products/lcd/ev3237/index.html

さて。今回は、“写真の色補正”についてお話します。
(最後にお得セミナーも紹介しますね。)

「写真が綺麗じゃないから、ソフトで補正したいな」と思ったことのある人は多いはず。
実際、写真補正を教えて!と言われることも多いです。

サイトやブログやSNSなど、写真を使わない日はないですよね。たぶん。

私は、写真加工を覚える肝は、3つあると考えています。

1)色相・彩度・明度をコントロールできること
2)補正する範囲を正確に選択できること
3)自分が望む写真の方向性を見極めること

綺麗な写真ではなく、欲しい写真を作るために必要な操作です。
↓の例を見てみてください。

【PhotoshopことはじめStep1:まずはここから「色補正の基本」 | Adobe Photoshop CCチュートリアル】
https://helpx.adobe.com/jp/photoshop/how-to/beginners-tutorial-1.html

黒いソファーを白にする…なんてことも、やろうと思ったらできてしまいます。
補正する範囲を選び、必要な補正を施すという作業を地道に繰り返します。

写真撮影のテクニックがなくても、補正テクニックがあれば、ある程度はカバーできますよ。

例えば、私のプロフィール写真、家の洗面所で鏡に映った写真を加工したものなんです。
https://www.r360studio.com/imedio/img/addetail20170922a.jpg

範囲を広めに撮影しておいて、必要な部分を切り出して、いい感じに補正しています。
やろうと思ったら、表情やサイズなど、もっと補正できちゃうんですが……
さすがにそれは、実物とかけ離れてしまうので、プロフィール写真ではやってません(苦笑)

…ということで、今回はここまで。おすすめしたい関連講座は↓です。

☆9月は、気軽に受講できる講座を2本開催する予定です。

【 自社サイト制作の公開診断&相談会:受講料3000円 】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=24088
※自分のサイト診断が聞けるチャンスです。ページビューUPを目指しましょう。

【ここハジ!仕事に役立つPhotoshopで写真加工テクニック【夜】:受講料1000円】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=24116
※自分のパソコンを持ち込んで、写真補正を気軽に学べます。

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】 https://twitter.com/r360studio
【 担当講座一覧 】 http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】  http://www.imedio.or.jp/column_tax/column_mori

講師 森コラム
2017年07月27日

Web業界で、気になるアレコレ /Vol.69  「 清水寺の英語版サイトは、流行のデザインだった 」

こんにちは。 iMedioセミナー講師の森 和恵です。
夏も本番ですね。天神祭を皮切りに、あちこちで花火大会が華やかに開かれます。
花火はとても好きなので、お天気になることを祈ってます。

さて。今回は、“ウェブデザイン”についてお話します。

先日、ふとした拍子に京都の清水寺の英語版サイトを目にする機会がありました。
http://www.kiyomizudera.or.jp/en/

アクセスすると、画面いっぱいに表示される動画に圧倒されます。
参拝客、本堂の中、座禅を組むお坊さんの姿…清水寺の日常の風景から、息づかいが聞こえてくるようでした。

1分程の動画を見終わると、ふと、控えめに配置されたナビゲーションボタンに気づきます。
ページ下の矢印をクリックすると、そこからはじめて本文が表示されます。

左上のサイトロゴ、右上の基本的なグローバルナビゲーションの他には、記事以外なにも配置されていません。
“ミニマルデザイン”と呼ばれる、流行のデザインです。必要なものを最低限に、控えめに配置させています。
そうすることで、動画・写真・テキストなど、主役である記事が際立ちます。

海外からの旅行者に、日本の京都にあるお寺の雰囲気を十分に感じさせるサイトとしてとてもよく表現されているなと感じました。

このデザインを担当したのは、株式会社ディスカバリー号さん。名古屋の制作会社さんです。
http://discovery-go.jp/projects/kiyomizu-dera-temple-official-english-site/

一方、清水寺の日本のサイトはこちらです。縦書きを用い、和風の雰囲気のあるサイトです。
http://www.kiyomizudera.or.jp/

こちらはミニマムサイトではありませんが、日本の人に向けて、歴史や年中行事、重要文化財としての取り組みなどを知らせるサイトとして機能しています。

よくあるサイトデザインともいえますが、これをミニマムサイトにしてしまうと、情報が多いため整理しきれずかえって読みづらくなるでしょう。

いろんなデザインがありますが、サイトの目的に応じて適材適所ということですね。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。

【ウェブデザイン‘模範解答’の心得】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23804
★サイトのデザインのアドバイス受付中!(先着2名さま)

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】 https://twitter.com/r360studio
【 担当講座一覧 】 http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】 http://www.imedio.or.jp/column_tax/column_mori

講師 森コラム
2017年07月18日

Web業界で、気になるアレコレ /Vol.68  「 WordPress を本気で始めるには…… 」

こんにちは。 iMedioセミナー講師の森 和恵です。
梅雨もあけてないというのに、真夏のような暑さが続きますね。
夏ばて予防には、体温調節が大切だそうですね。
無理せずクーラーをつけ、夜はしっかりお風呂で暖まる毎日を暮らしてます。

さて。今回は、“WordPress”についてお話します。

CMS(コンテンツ・マネジメント・システム)の中で、人気の高いWordPress。
いまや、サイト管理のためのシステムとして欠かせませんね。

6月のはじめに、WordPress4.8へとバージョンアップが行われました。
https://ja.wordpress.org/2017/06/08/evans/

WordPressでは、バージョンごとにコードネームがあり、今回は「Evans(エバンス)」なのだそう。
ジャズ・ピアニストで作曲家のビル・エバンスにちなんで名付けられました。

どんな新機能が加わったのか?を公式ページでみると↓な具合。
……技術者向けに書かれた情報なので、わかりにくいですね。
https://wpdocs.osdn.jp/Version_4.8

バージョンアップ後に少し日が経ってから調べると、関連するブログ記事が見つかりました。

【WordPress 4.8 をチェックしています – IE8,9,10のサポートを終了 – ねんでぶろぐ】
https://nendeb.com/588

【WordPress 4.8 に追加される機能や変更点のまとめ – Capital P】
https://capitalp.jp/2017/05/29/wordpress-4-8-field-guide/

【WordPress 4.8 新機能 | ほぼWebエンジニアリング】
http://munyagu.com/1524/

WordPressがオープンソースということもあり、そのファンの方々もオープンです。
技術を持つ人が得た情報は、ブログ記事などを通してたくさん公開されています。

これらのページを見つかるだけいくつも読み、実際に検証してみて理解を深めます。
と、こんな風に、私もネット情報を利用して日々勉強させていただいています。

このような勉強方法は、人によって向き不向きがあります。

「点で集めた情報を正しく理解し、線としてつなげる能力のある」方は、
私と同じように独学に向いています。

集めた情報を線でつなげないと、物事を曲解してしまう原因になります。
ちょうど、道に迷いながらゴールにたどり着いた童話の主人公のようなイメージです。

私がインストラクターをしていて一番心がけていることが、「最短ルートの道案内」です。
自分が得た知識を正しく最短ルートでご案内できればなと思っています。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。

【インストールから学ぶ WordPress入門】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23803
★始めたいけど、ちょっとめんどくさいなという方に、1日完結でスタート。

【オリジナルテーマを作ろう! WordPress カスタマイズ基礎】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23805
★オリジナルデザインを作ってみたい!と本格的に学びたい方に。

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】 https://twitter.com/r360studio
【 担当講座一覧 】  http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】 http://www.imedio.or.jp/column_tax/column_mori

さとう コラム
2017年07月12日

「セキュリティについて学ぶこと」を考える、の巻

このところイメディオでは、IoT、AI、ロボットなどの分野を対象としたプログラムを実施する機会が増えてきました。

IoTをはじめとして、新たな分野の事業が生み出されることは、もちろん、素晴らしいことなのですが、しかし一方で「事業継続」の視点からみると、セキュリティはどうしても外せないと思うわけです。

そんなこんなで今後、イメディオでセキュリティのプログラムも実施したいなぁ、とぼんやりと思っていたところ、京都産業大学の安田先生に「こんなんあるでぇ」と セキュリティ教育のお話が聞けるイベントをご紹介いただきました。そのイベントのタイトルは「京都産業大学 情報理工学部開設記念シンポジウム」

正直、「か、カタい。ちょっと気になるけど、学部開設のお話は興味ないかなぁ。」と思いましたが、 安田先生はこのシンポジウムの運営スタッフで、「学部説明のイベントっちゅうか、セキュリティ教育についてのディスカッションをしたいんや!(意訳)」 と力強くおっしゃっていたので、その言葉を信じて行くことに。

そしてシンポジウムに参加した結果、セキュリティの考え方についてかなり勉強になったので、今回はそのイベントのレポートをお届けします。

ポイント

  • 一般的な情報システムのセキュリティと制御システムのセキュリティの考え方は別物と心得るべし。
  • システム設計段階でセキュリティリスクを少なくすることが肝心。しかし、安全設計をするにはお金(発注者の要件定義)が必要。
  • セキュリティは例外との戦い。人工知能での解決はまだまだの分野。
  • セキュリティ人材は不足しており「知っている人」「知らない人」の2局化が激しい。上を目指す中間人材の育成が必要。

シンポジウムの内容

京都産業大学情報理工学部の新設
京都産業大学 コンピュータ理工学部 准教授 秋山 豊和 氏

資料はこちらからご覧いただけます。
http://info.cse.kyoto-su.ac.jp/ise/introduction_KSU-ISE.pdf

新しく編成させる情報理工学部のお話。新しい学部では、一人の教員に対して生徒が6人の割合だそうです。恵まれていますね。

一人の教員に対して40人以上の学部出身の自分としては、想像し難い数字。

学生が興味を持った分野を組み合わせて学ぶ科目を選択できるのだとか。良いですね。

基調講演:制御システムセキュリティについて
ファットウェア株式会社  代表取締役 小林 和真 氏

「制御システムのセキュリティ」をテーマとした講演。 小林氏は、企業の代表であるだけでなく、大学での教育、震災復興事業にも携わり、そして、制御システムセキュリティセンターでも活躍なさっている方です。

※以下の画像資料は、こちらの発表資料から抜粋させていただいております。
http://info.cse.kyoto-su.ac.jp/ise/controlsystemsecruity.pdf

10分でビルをハッキングできた件

講演の最初から、パンチの効いたハッキング事例をご紹介いただきました。
ビルのシステムのハッキングテストを過去に試験的に実施したところ(もちろん、ビルのオーナーからの依頼に基づく実験です)、10分でビルを乗っ取れたそうです。

実験は、六本木ヒルズと同じシステムを導入していた、当時竣工して間もないアークヒルズ仙石山森タワー。
ハッキングを実際に行ったのは、小林氏に遠隔で指示を受けた学生さん達であったとか。

ハッキングの起点は、ビルの警備さんが充電するためにパソコンにつないだスマホ。驚きます。

制御システムは、「止めない」「10年以上使用」というコンセプトでつくられている。

ひと口に「セキュリティ」といっても、制御システムと情報システムでは前提条件が違うそうです。いま稼動している制御システムのうち、少なくない数のシステムが「そもそもインターネットにつなぐことを想定していない」時代につくられたシステム=古いシステムで動いており、パッチも当たっていないというケースがあるだけでなく、それらのシステムは業界や業種によってプロトコルや考え方なども違うことから、情報システムで培ったセキュリティ技術がそのまま使え無い、という点は覚えておきたいところ。

「いったん止めて!」「ちょっとココ直して。」が通用しない世界。大変すぎる。

講演の資料では、その他、制御システムの構成例、制御システムネットワークの対策例、制御システム分野の標準化の技術動向についても載っていますので、是非ご覧ください。

世界の制御システムのクラッキング事例の数々

講演のお話を通して、制御システムの管理の大変さを骨の髄まで感じはじめたところで、世界の制御システムのクラッキング事例がバシバシ紹介されました。紹介された事例のなかで、Webの記事にもなっているものについてご紹介します。

原子力発電所で監視制御システムが約5時間停止(2003年)
オープンソースソフトウェアは大規模停電を防げるのか出典:OSDN Magazine
自動車工場のハッキング(2016年)※講義ではダイムラー社の例が取り上げられました。
ホンダが1カ月遅れでサイバー攻撃にあった理由出典:日経ビジネスオンライン
石油パイプラインが爆発(2008年)
【世界のサイバー事件簿 ③】監視カメラから侵入!? トルコのパイプライン爆発事件出典:TIME&SPACE(タイムアンドスペース)
最も有名になった制御システムへのサイバー攻撃:Stuxnet(2010年)
核施設を狙ったサイバー攻撃『Stuxnet』の全貌出典:WIRED.jp
製鉄所の溶鉱炉のコントロールシステムに不正侵入。(2014年)
サイバー攻撃で、ドイツの製鋼所が甚大な被害を被っていた出典:ニューズウィーク日本版

Stuxnetの事例は、インターネットにつながっていない環境なのにサイバー攻撃を受けた案件だそうです。

ネットにつながらずともサイバー攻撃とは、手法が想像の域を超えていますが、こうした攻撃への対応を考えるには、ネットワークだけでなくシステム全体を取り巻く環境から、システマティックにセキュリティを捉えなければならないのだとか。

ちなみに、核施設を狙ったこの事件、ハッキングの技術はプロの目からすると、ある程度のプログラミング能力があればハッキングそのものは実行できるレベルのもの(ハッキングのスペシャリストでなくてもコードが書けるレベルのもの)で、注目するべきポイントは「進入経路のシナリオ」だそうです。

日本の制御システムセキュリティ研究開発施設

制御システムを取り巻く現状をふまえ、国内外問わず、制御システムのセキュリティに取り組まねば!という機運の中、日本では制御システムの研究施設、「技術研究組合制御システムセキュリティセンター(CSSC)」を設立しています。こちら、海外からの視察も多いのだとか。

制御システムセキュリティセンター(CSSC)の入り口。このデザイン、シビれる。

CSSCの「技術研究組合」には、制御システムにゆかりのある企業や大学など32の組織が名を連ねています。
施設内には、各企業が連携してつくった模擬プラント設備などがあり、下記の動画にあるようなサイバーセキュリティの演習を行っているのだとか。

制御システム分野では、複数のセキュリティ対策をうまく組み合わせて防御力を高めることを考えねばならず、日本の設備製品が国際市場で競争力を持つためには、セキュリティが重要となるそうです。そして、そのセキュリティ対策には、「多重防御」「多層防御」という考え方がポイントになるとのこと。

「レイヤーの違う層で守る」「同じレイヤーに対して複数の防御機構を置く」といった組み合わせで守りを構成。

単体で守るのではなく、「セグメントで守る」「システムで守る」といった仕組みから考えないと、制御システムは守れないという発想は、大規模な制御システムだけでなく、ハードウェアを用いてサービスを展開する製品・サービスすべてに当てはまるのではないか、と思いました。

立命館大学が目指す情報セキュリティ
立命館大学 情報理工学部 教授 上原 鉄太郎 氏

資料はこちらからご覧いただけます。
http://info.cse.kyoto-su.ac.jp/ise/rits_networksecuritycourse.pdf

本イベント、京都産業大学のシンポジウムなのですが、そこで立命館大学の学部説明が実施されました。京都産業大学、懐が深いです。

さて、立命館大学は日本で最初に情報理工学部を設立した大学で、1学年の学生数は約500名と大規模。国際化という特色もあるそうです。

英語で実施される授業もあり、英語のみで卒業もできるのだとか。

講演では、同学部のセキュリティ・ネットワークコースをご紹介いただきました。カリキュラムでは「基礎から教える」ことを大切にしており、「長く使える技術」を学生が身に着けることを目指しているそうです。学生さんはプロセッシングを使って「プログラミングとは何か」を学んだり、TCP-IPをベタで書いたり、脆弱性も仕組から学んでいるのだとか。

コンピュータとネットワークの基礎を学ぶだけでなく、数学も重きを置いて学ぶとのこと。

京都産業大学、立命館大学ともに、実社会で活躍できる人材育成のためのプログラムをしっかりと先生方が考えていらっしゃって、すばらしかったです。学生さんたち、うらやましいぞ。

そして、大学教育の現場のお話をふまえ、イメディオで実施するセキュリティのプログラムは、どのような立場の人を対象にし、どのレイヤーで行うべきであるかを整理して考えなければならないことを改めて自覚しました。自分で考えられるのか、不安。。。

パネルディスカッション

パネルディスカッションは、講演なさった先生方が登壇され、「情報セキュリティ教育において、どのように人材を育てていくか」というテーマを軸に展開されました。

セキュリティを学ぶには、基礎が大切!

セキュリティの能力を身に着けるには、「コンピュータがどう動いているか?」といった、コンピュータの基礎がわかっていないといけない。ネットワークについても同じ。
コンピュータの仕組みがわかっていれば、コーディングをするときに何をしなければいけないのかがわかる。ネットワークの基礎がわかっていれば、認証がうまくいかないときに、どんな悪用がされるのかがわかる。
基礎を学習し、どのように技術が応用されるか、イメージできることが大切。

セキュリティエンジニアには「探求する力」が大切!

「なぜうまくいかないか。」「なぜそうなるのか」を探求する力がセキュリティエンジニアには必要。産業システムの現場でも、原因がよくわからないままにしていることもある。制御システムは、エンジニアリング。 プロが書いた悪意のあるコードを、別の人物が入手して実行(※補足※ そういうことをする人を、「スクリプトキディ」というそうです。)できるのがいまの世の中。この背景も理解し、エンジニアリングをするマインドを持った人材育成が必要。

大学で人材を育てた後、学生は社会で活躍できるの?

セキュリティ人材不足と感じている経営者は多いものの、セキュリティ人材を増員するといった積極的な措置をとるケースは少ない。足りないのは人材である以前に予算ともいえる。この現状を踏まえて、セキュリティマインドを持ったITエンジニアに、情報システムをつくらせると、インシデントも減り、後付けで対策をするよりも長い目でみるとコストが低くなる、という観点でアプローチできるのではないか。そもそも、脆弱性のないプログラムをつくる人材が増えることが長期的に見ると重要。

経営者層へセキュリティの理解を深めるためには?

これからは、中小企業からセキュリティに関する問題が浮上するケースが多くなるのではないかと考えられる。大学や行政が中小企業のセキュリティにアプローチする取り組みはあるが、中小企業は、セキュリティに対するコスト意識が厳しいため、時間がかかる。

また、低いレベルでのセキュリティ啓蒙には時間がかかる。いま、セキュリティ人材は実際に不足しており、中間層が非常に少ない。より上のレベルの知識をもつ人材を育てていくことが課題。 大企業ではセキュリティに積極的に取り組む動きがあるため、そこから派生して、大企業からの仕事をうける企業がセキュリティ対策をおこなっていくという流れは生まれつつある。

お金がないとセキュリティ対策はできない

仕事を発注する人が、ちゃんと、「お金を払うからセキュリティ対策をやってほしい」ということをオーダーして予算に計上しない限り、仕事の受注側はセキュリティ対策を実施しない(コストになってしまうため)。こうした構造を変えないといけない。このため、発注者にセキュリティに関わる経済的な損失を理解してもらわないといけない。そもそも文化として日本は「安全をお金で買う」という意識が他国と比べて希薄であることから、セキュリティの意識を育てるのに時間がかかってしまう。

—– そして、ここからは会場の質疑応答 —–

学部教育において、セキュリティ教育も大事だけどAI教育も重要なのでは?

今のAIは特定分野に集中している。セキュリティの分野で見た場合、AIはまだ未成熟。AIは、どういう項目を学習させるのか、どう学習させるかが重要となる。そして、仮に間違ったことを学習したときに、それを打ち消す仕組みがあるかどうかが重要。その点でまだセキュリティと人工知能が融合するには時間がかかると思われる。

いま、ディープラーニングと機械学習が注目されているが、これらは正解と不正解がはっきりしている対象でうまくいっている手法。一方、セキュリティは例外との戦いであることから導入には苦戦する。ただ、将来的には必要であるし、使えるところにはつかえるので、教育現場では導入はしている。

セキュリティについて、学生に適切な倫理観を教えるには?

プライバシー論や、倫理教育を行うクラスはあるが、専門教育を行う大学で、人間としての倫理教育を行うことは難しい。 セキュリティ教育を受けた人材が、今後の人生においてどのような境遇になるのかは未知であるが、セキュリティの能力を高めるには、攻撃の技術の理解も必要となる。つまり、高度なセキュリティ教育の実施には、攻撃方法の学習は避けられない。このため、現状のセキュリティ人材の偏りの構造があるともいえる。どのようにしたらその構造を変えることができるのかを考えることが今後重要となる。

おわりに

以上、講演内容を自分になりに解釈し、お届けしてまいりましたが、シンポジウムに参加させていただいて、セキュリティの奥深さに打ちひしがれつつ、取り組むべき課題の輪郭がぼんやりと見えてきました(ほんとうにボンヤリと)。

現状、イメディオではプログラミングやアプリケーションの利用方法などの技術取得を目的とした学習プログラムがメインとなっていますが、今後、ハードとつながるソフトウェアの「安全なシステム設計」について学習するプログラムやセキュリティインシデントを擬似体験できるような企画を実施できないか、と、考えております。

今回のシンポジウムでは、多くの学びがありました。少しでも気になったら、足を運んでみるものです。イベントにお誘いくださった、京都産業大学の安田先生、そして、最後までお読みいただいたみなさま、ありがとうございました。

講師 森コラム
2017年07月04日

Web業界で、気になるアレコレ /Vol.67  「 いまさら聞けない、ウェブコーデイング(4) “モバイルファーストインデックス”」

こんにちは。 iMedioセミナー講師の森 和恵です。
7月に入り、そろそろ梅雨明け。夏が待ち遠しい季節ですね。

さて。今回は、“モバイルファーストインデックス”についてお話します。

Googleは、検索結果の質を向上するために、その時代にあったルール作りをしています。
 “モバイルファーストインデックス”も、そのひとつです。

スマホやタブレットの普及がすすみ、デスクトップパソコンよりもウェブ閲覧数が増えてきています。
「家に大きなパソコンを置きたくない……」と、デスクトップを所持しない層が一定数いるようです。

そんな中、Googleの検索結果を左右するインデックス収集を「モバイル閲覧サイト」をメインにするのが“モバイルファーストインデックス”と呼ばれるルールです。

【MFI対応ノウハウとオウンドメディアにおけるユーザー体験最適化を徹底解説 | Web担当者Forum】
< http://web-tan.forum.impressrd.jp/e/2017/03/15/25069 >

この変更で注意が必要になるのは、「モバイル向け」と「デスクトップ向け」にサイトを分けているケースです。
これまでは、デスクトップ向けを主としてインデックスされていましたが、それが逆転します。
つまり、モバイル向けサイトが、あなたのサイトの代表になってしまうのです。

モバイルとデスクトップのふたつのサイトに分けずに、ひとつのサイト(同じURLで閲覧)にするべきだと考えられます。

もっともシンプルにひとつのサイトにする方法に、レスポンシブウェブデザインというサイト制作の手法があります。
CMSなどのシステムを組み込まずに、CSSコードの切り替えだけで行います。

“モバイルファーストインデックス”が導入される前に、サイトの一本化が検討が必要になりそうですね。

【別々のURLからレスポンシブデザインに変更するならGoogleのMFI導入前に | 海外SEO情報ブログ】
< https://www.suzukikenichi.com/blog/migrate-from-separate-mobile-to-responsive-before-mobile-first-index/ >

…ということで、今回はここまで。おすすめしたい関連講座は↓です。

ひとつのURLで、画面サイズの小さいスマホにも表示対応させられる、
レスポンシブウェブデザイン用いたウェブページの制作方法を知りたい方は、ぜひ。

【レスポンシブで始める、モバイルフレンドリーなマルチデバイス対応サイト制作】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23684 >

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】<https://twitter.com/r360studio >
【 担当講座一覧 】< http://r360studio.com/seminar/ >
【 iMedioコラムバックナンバー 】< http://www.imedio.or.jp/column_tax/column_mori >

 

講師 森コラム
2017年06月20日

Web業界で、気になるアレコレ /Vol.66  「 いまさら聞けない、ウェブコーデイング(4) “CSS3で追加された表現”」

こんにちは。 iMedioセミナー講師の森 和恵です。
梅雨入り宣言したものの、雨待ちの日が続きましたが、そろそろ雨模様となってきた頃でしょうか。
こんな時期は、部屋でじっくりと何かに取り組むのもよい気がします。

さて。今回は、CSS3についてお話します。

長らく続いていたCSS2.1の仕様を拡張する形で、CSS3がリリースされてからずいぶん時間が経ち、各社デバイスやブラウザーの対応も進みました。

CSS3で追加された表現といえば「グラデーション」や「ボックスの角丸」などがあげられます。これらの表現を使うことで、飾りのためのビットマップ画像が不要となり、結果としてウェブページのデータが軽くなり、閲覧スピードをあげる結果を生みました。

スマートフォンやタブレットなど、外出中に利用するデバイスは、低速な携帯電話のLTE回線を用いることが多く、データが軽くなるのは大歓迎。CSS3の普及は一気に進みました。

では、グラデーションを指定する「CSS Gradients」を確認してみましょう。

Brend < http://colinkeany.com/blend/ >のサイトでは、左・右の2色を選び、グラデーションのソースコードを生成してくれます。

.blend-gradient {
  background: -webkit-linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
  background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90));
}

《 linear-gradient(グラデーションの角度, 開始色, 終了色) 》

という具合にbackgroundプロパティの値をグラデーションに指定しています。
90度(90deg)を指定すると、左から右への直線でグラデーションが作成されます。

コードだけで作られたグラデーションなので、色やグラデーションの変更も文字修正だけで行うことができ、制作者の更新の手間も省くことができてうれしい進化ですよね。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。
CSS3の新しい表現を用いたウェブページの制作方法を知りたい方は、ぜひ。

【レスポンシブで始める、モバイルフレンドリーなマルチデバイス対応サイト制作】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23684 >

【HTML5+CSS3コーデング基礎《ウェブページの品質と表現力をブラッシュアップ!》】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23378 >

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】< https://twitter.com/r360studio >
【 担当講座一覧 】< http://r360studio.com/seminar/ >
【 iMedioコラムバックナンバー 】< http://www.imedio.or.jp/column_tax/column_mori >

講師 森コラム
2017年06月06日

Web業界で、気になるアレコレ /Vol.65「 いまさら聞けない、jQueryのアレコレ」

こんにちは。 iMedioセミナー講師の森 和恵です。
そろそろ梅雨入りですね。暑い季節に向けて、体調管理をしっかりしたい所です。

さて。今回は、jQueryについてのお話です。

ブラウザーで動くプログラミング言語としてポピュラーなJavaScript。
より手軽にプログラムが書けるように生まれたのが、jQueryです。
jQueryは、JavaScriptライブラリとも呼ばれています。

定義的なことはさておき、ここでは「何ができるのか?」から話を進めようと思います。

とりあえず、どんな役割なのかを知りたい時は、短いプログラムを動かしてみるとよくわかります。
 

【超簡単!jQueryでアニメーション付き開閉式ボックスを作成してみた – すずろぐ】
http://www.suzushin7.jp/entry/2017/05/09/retractable-box-by-jquery

のページでは、クリックするとコンテンツが表示される動きをするプログラムが解説されています。
JavaScriptよりも、ぐっと短いプログラムのコードで動くことがわかります。

また、ウェブページで利用頻度の多い動きをするプログラムがいろいろと発表されています。
(しかもフリープログラムなのが驚きです。)
 

【jQueryでオススメのドロワーメニュープラグイン一覧 – Snaplog】
https://blog.mismithportfolio.com/web/jq-drawer-plugin

【画像を遅延読み込みできるjQuery Lazy Loadの仕組み・動作 – 後悔日誌】
http://www.viaggiolog.com/entry/lazyload-behavior

【jqueryを使った360度パノラマビューの実装】
http://www.systemexpress.co.jp/htmlcss/panorama.html

など、あげていけばきりがありません。
「あのサイトでみた動きを自分も使ってみたい」と思えば、大抵探しあてられます。

JavaScriptだけでは実現しない、プログラム導入の手軽さをサポートしてくれるのがjQueryと言えますね。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。
jQueryを用いたプログラムの導入方法を知りたい方は、ぜひ。

【プログラマーでない人のための jQuery入門《ウェブUIへ手軽にアクションを!》 】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23357

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】 https://twitter.com/r360studio
【 担当講座一覧 】  http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】 http://www.imedio.or.jp/column_tax/column_mori

講師 森コラム
2017年05月14日

Web業界で、気になるアレコレ /Vol.64「 いまさら聞けない、ウェブコーデイング(3)  “CSSボックスモデルの仕組み”」

こんにちは。 iMedioセミナー講師の森 和恵です。
5月も後半。GW休みもすっかり遠のき、普段の生活が戻ってましたね。

前回のコラムでお伝えした、GWおまけ動画はいかがでしたか?
GW中に5日連続で動画を撮影し、ウェブ制作を学ぶ記事を公開しています。
たいへん好評で、閲覧期間を延長しました。まだ見れますので、ぜひ。
http://r360studio.com/blog/adobe/dreamweaver/473

さて。今回は《いまさら聞けない、ウェブコーデイング》の第3回。
テーマは“CSSボックスモデルの仕組み”です。

ボックス(Box)とは、HTMLタグ(要素)に囲まれた領域を指します。
モデル(Model)は、ボックスに指定ができる属性を指します。
https://developer.mozilla.org/ja/docs/Web/CSS/box_model

属性には、“width”(幅) “height”(高さ)に加え、“margin”(外側の余白) “padding”(内側の余白) “border”(線)プロパティがあります。ボックスにこれらの属性を指定することで、ウェブページのレイアウトを作っていきます。

“margin”(外側の余白) “padding”(内側の余白)の違いですが、ボックスの背景に色(background-color)をつけ、背景色が塗られた部分に空いた余白が “padding”で、外側にできた余白が“margin”です。

背景色を指定せず、透明のままであれば、余白をどちらでとってもかまいませんが、“margin”には、マージンの相殺やマイナスマージンなどの特例ルールがいくつか存在し、思ったように設定できない場合もあるので注意が必要です。

ボックスモデルにおいて誤解を受けやすいのが、ボックス全体の幅計算です。

“margin”・ “padding”・ “border”を指定は、加算式で考える必要があります。例えば、“width”に100px、“padding-left”に50pxを指定した場合のボックス全体幅は、150pxです。

ついつい、加算するのを忘れて幅の計算が合わなくて、レイアウトがうまく進まないというケースをよくみかけます。CSS3のバージョンになってから、「box-sizing:border-box」を指定しすると、“padding”・ “border”を“width”に含めるという指定ができるようにもなっています。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。
ウェブページのレイアウトの基礎をしっかり学びたい方は、ぜひ。

【 CSSを使いこなす、Webページレイアウト実践 】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23227

ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】https://twitter.com/r360studio
【 担当講座一覧 】http://r360studio.com/seminar/
【 iMedioコラムバックナンバー 】 http://www.imedio.or.jp/column_tax/column_mori

講師 森コラム
2017年05月02日

Web業界で、気になるアレコレ /Vol.63
 「 いまさら聞けない、ウェブコーデイング(2)
 “ページレイアウトの仕組み”」

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Web業界で、気になるアレコレ /Vol.63
「 いまさら聞けない、ウェブコーデイング(2)
  “ページレイアウトの仕組み”」
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こんにちは。 iMedioセミナー講師の森 和恵です。
今日は、GW真っ只中ですね。いかがお過ごしですか?
わたしといえは、仕事と部屋の掃除をする過ごし方になりそうです。

お休みの真っ最中に、読んでくれたあなたにプレゼント。
< https://twitter.com/r360studio >
にて、GW中だけ閲覧できる特別動画の配信を本日お知らせします。
内容は、5・6月の講座から“ちょっとだけ新しいことが学べる”動画を予定してます。
5月10日には、見れなくなってしまうので、閲覧はお早めに。

さてさて。今回は《いまさら聞けない、ウェブコーデイング》の第2回をお届けします。
テーマは“ページレイアウトの仕組み”です。

ウェブページは、HTMLとCSSの組み合わせでできています。

ページレイアウトには枠組みが必要ですが、HTMLを使います。枠にはいろんな要素が使えますが、よく目にするのはdiv要素です。要素に後からデザインを定義するCSSの名前、クラス名を指定します。

<div class="boxstyle">・・・</div>
と書けば、div要素に“boxstyle”というクラス名を指定したことになります。

次は、デザインの定義です。デザイン定義には、CSSを使います。CSSにもいろんな種類がありますが、レイアウトでよく使われるのは、クラスという種類です。クラスセレクターと呼びます。

先のHTMLのdiv要素に指定した“boxstyle”というクラス名を使って、「幅300px、内余白1文字分、画面の中央に配置、背景色を黄色」するレイアウト枠を指定しましょう。

.boxstyle{ width:300px; padding:1em; margin:auto; background-color: yellow; }
と書きます。

この2つのコードをウェブページの適切な場所に記載することで、ページのレイアウト枠が作成されます。
実際に組み込んだサンプルページを下記にアップしています。
< http://r360studio.com/imedio/colum2.html >

このサンプルページを元に、HTMLやCSSを使って、いろいろと試してみてください。
ウェブページレイアウトの基本的な作り方が見えてくると思います。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。

【 出直し再勉強! HTML&CSS読解入門 】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23203 >
※まずはこちらで、ソースコードの基本が学べます。

【 CSSを使いこなす、Webページレイアウト実践 】
< https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23227 >
※ページを自力で作れれば、「今日中に告知ページを作らないと」にも対応できるかも?


ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

【Twitterにて情報配信中】< https://twitter.com/r360studio >
【 担当講座一覧 】< http://r360studio.com/seminar/ >
【 iMedioコラムバックナンバー 】< http://www.imedio.or.jp/column_tax/column_mori >

 

講師 森コラム
2017年04月19日

いまさら聞けない、ウェブコーデイング(1)
“先頭入るあのお決まりのコードの役割は?”

こんにちは。 iMedioセミナー講師の森 和恵です。

担当講座が4月14日から始まりまして、6月までの日程が公開されています。
http://r360studio.com/seminar/

はじまりは、入門・初級の講座から。
『今年こそ、スキルを磨いて新しいことをスタートするぞ!』
と狙っている方は、新年度のタイミングでぜひ。
 

さてさて。今年から、コラムに連載方式を取り入れます。
いつも欠かさず読んでくださっている方のためになるネタをお届けしますね。
継続は力なりといいますし。5分で読めますので、ぜひ。
 

今回は《いまさら聞けない、ウェブコーデイング》の第1回をお届けします。
テーマは“先頭入るあのお決まりのコードの役割は?”です。
 

ウェブページの先頭をみると大抵こう書いてあります。
<!doctype html>

これは、DOCTYPE宣言と呼ばれるコードで、ウェブページ(HTMLファイル)の先頭に忘れずに書く必要のある大事なものです。

そのページが「どのバージョンのどんな種類のHTML言語を使っているか?」を示すものです。
…ものでした、と過去形で言った方がいいかもしれません。

昔、HTMLのバージョンが4の時には、こう書いたりしてました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

これは、HTMLバージョン4で過渡的(Transitional)に書いているという意味です。過渡的とは、「古いバージョンから新しいバージョンへ移行している途中だから、新旧混ぜて書いても許してね」ということです。

昔はこのように、DOCTYPE宣言を使って、使用されているコードについて詳細を示していたのですが、いまのHTML5にバージョンアップしてから、「コードが冗長になるので、詳細書くのを止めときましょう」と方針が変わりました。

結果、DOCTYPE宣言のコードだけが短くなって残り続けているのです。
しかし、『それだったら、いらないよね☆』とDOCTYPE宣言を消してはいけません。

DOCTYPE宣言を書かないと、ブラウザの表示機能が「互換モード」となってしまい、正しくコードを認識できずにレイアウトが崩れる場合もあります。

また、よく「タグは大文字、小文字どちらで書けばいいですか?」と質問がありますが、どちらで記述してもOKです。

…ということで、今回はここまで。おすすめしたい関連講座は↓です。

【 出直し再勉強! HTML&CSS読解入門 】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23203
※『そういえば、タグってちゃんと勉強したことなかった…』という方にも。
実践ですぐ使えるタグとスタイルシートの基本文法をおさえます。

【 CSSを使いこなす、Webページレイアウト実践 】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=23227
※『ウェブページ、自分で一から作ってみたいな』という方に。


ではまた、次回お会いしましょう。
r360studio 森 和恵 (^^)

<追伸>
CSS Nite LP51「Reboot Dreamweaver」大阪版に登壇します。
あと少しだけ、お席があるそうです。
http://cssnite.jp/osaka/vol43/


【Twitterにて情報配信中】< https://twitter.com/r360studio >
【 担当講座一覧 】< http://r360studio.com/seminar/ >
【 iMedioコラムバックナンバー 】< http://www.imedio.or.jp/column_tax/column_mori >