webサイト制作の勉強|2022年5月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

Photoshopで写真をポラロイド風にする(メゾティント加工)


元画像





Photoshopの加工で一番大事なのはレイヤー構造です。レイヤー構造を理解する事で幅の広い加工が出来るようになり、バナー作成などにも役に立つので、様々な加工方法を覚える事がPhotoshop上達の一番の近道です。
まずはレイアー構造をしっかりと把握してから作業を始めましょう。




メゾティント加工

メゾチント(Mezzotint )とはもともとは版画の凹版技法のひとつ。
金属凹版にロッカーという櫛のような刃がついた器具で版全体に無数の刻みを入れたり、ささくれ状態の線をつくったりする。さらにその上をバーニッシャーやスクレーパーという金属のヘラのような器具でささくれを削ったりならしたりして絵を描き、刷る際にはインクを細かな刻みに擦り込んだ後に、刻みのない部分からは拭い落とす。これにより、刻みが残っている部分はインクの色が濃く現れ、刻みが削られたりならされたりした部分は白く浮き出るという効果が得られる。

  1. 任意の画像を色相・彩度の色相の統一を使って、セピア色にする
  2. 新規レイヤーを作り、「塗りつぶし→50%グレー」、「フィルター」→「ピクセレート」→「メドティント:長いライン」、「ぼかし移動(角度0、距離100〜200px)」、描画モード:比較(明)
  3. 新規レイヤーを作り、描画色:黒、背景色:白にしてく「雲模様1」、描画モード:焼き込みカラー
  4. 新規レイヤーを作り、複数のブラシサイズで濃い茶色で画像の四隅に影をつけ、描画モードを乗算にする







画像を加工して時間軸をコントロールする

Dateオブジェクトで時間の取得

「 new Date()」を使う事で、現在の時間を取得することが出来ます。


<script>
var date = new Date();
document.write(date);
</script>

実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。
このままでは使いづらいので「 new Date()」の中から必要な情報だけを引っ張って来ます。


var myYear = date.getFullYear(); // 年
var myMonth = date.getMonth()+1; // 月
var myDate = date.getDate(); // 日
var myDay = date.getDay(); // 曜日
var myHours = date.getHours(); // 時
var myMinutes = date.getMinutes(); // 分
var mySeconds = date.getSeconds(); // 秒


プログラミングでは0(ゼロ)を数える

「10mの道路に1m置きに植木を植えて行きます。植木は何本必要ですか?」
始点のゼロを数えるというひとつの例です。



月の取得の際に注意が必要で、月は 1月から 12月ですが、getMonth() の値は 0月から 11月になっています。なので+1を追加し、1月~12月に直します。
また曜日の取得は0から6の数値が セットされていて 配列を使って、「×曜日」に置き換えます。




配列の使い方

<script>
var date = new Date();
var myDay = date.getDay();
var days = new Array('日','月','火','水','木','金','土');
document.write(days[myDay]);
</script>

1秒毎に処理をする

まずは簡単なmeta refreshを使ってみましょう

<meta http-equiv="refresh" content="秒数">

関数を使って処理をする

次に関数を使った処理に変えてみましょう。

function clock() {

ここにプログラムを記述

}
setInterval('clock()',1000);
関数とは?

関数とは変数などを使った計算式などをまるごと保存しておけるものです。
kitsune.blog

JavaScriptの基礎

JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当しているスクリプト言語です。
Webサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで使用場面は多岐にわたっています。

それどころか、今やJavaScriptは宇宙船のUIにも使用されています。
note.com


JavaScriptと似た名前のプログラミング言語に「Java」というものがありますが、まったく関係がありません。なので混同しないようにしましょう。

スクリプト言語

JavaScriptスクリプト言語です。ではスクリプト言語とはどういうものか?
簡単に言うとスクリプト言語とは簡易版のプログラミング言語で、特に実行環境を整える必要も無く、ソースコードをその場で順を追って解釈する「インタープリタ方式」の言語です。

プログラム初学者にとっては特に難しい設定をしなくて済み、手軽に使えるのがこのJavaScriptです。


なぜJavaScript?

主なJavaScriptフレームワークやライブラリー

AngularJS

React

Vue.js

jQuery


また、サーバーサイドでJavascriptを動かす事が出来る「node.js」やSNSとの通信で使用する「JSON」などjavascriptはとにかく汎用性が高く、便利な言語です。

JavaScriptで出来る事

演算処理

プログラミングの基本である演算処理。単純な四則演算のほか、三角関数や円周率等を使用したり、年齢を算出したり、日数を割り出したりなど、さまざまな用途で使用します

ドキュメント操作

Webページに文字を表示したり、非表示にする。文字や背景の色を指定する。 Webページを切り替える、など、html内のドキュメントを操作する事が出来ます。

マウス等のイベント処理

クリックやマウスオーバー、Webページそのものロード時など、その他様々なタイミングで処理を行わせることができます。
サムネイル画像をクリックすると大きい画像が表示されるようなものから、メニュー項目をクリックすると下の階層のメニューが開くようなナビゲーションまで、このようなイベント処理を行っています。

DOMを使用した処理

DOM(Document Object Model)を使用することで、HTML文をツリー構造のように扱うことができます。
これを上記のイベント処理等と組み合わせて使用することで、サイト内に新しいコンテンツを挿入したり、書き換えたり、削除することが出来ます。

実際にJavaScriptを入力してみる

ブラウザに文字を表示させてみましょう。ブラウザに文字を表示させたい場合はbodyタグの中にscriptタグを使ってJavaScriptの記述をしましょう。
JavaScriptで文字列を表示するには、「window.document.write(' ')」を使います。
ただし、「window.document.write(' ')」は「document.write(' ')」に省略する事が可能です。



JavaScriptの場合、コーテーションはシングルでもダブルでも使用可能ですが、シングルコーテーションが推奨されているので、授業では必ずシングルコーテーションを使用しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<script>
  document.write( 'Hellow World!!' );
</script>
</body>
</html>


プログラムの勉強はweb学習にも向いていて、様々なサービスがありますが、その中でも「progate」は初学者にも向いているので、ぜひ進めておきましょう。

prog-8.com

プログラムとは

プログラムとは?

いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。
プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解しましょう。

プログラム

コンピュータプログラム(英:computer programs)とは、コンピュータに対する命令(処理)を記述したものである。コンピュータが機能を実現するためには、CPUで実行するプログラムの命令が必要である。プログラミング言語と呼ばれるコンピューターのための言語。

要はコンピューターに命令し、動かす為に使う物(言語)です。


機械語


本来、コンピューターは機械語と呼ばれる、0と1のみで構成されている言葉で動くように設定されています。しかし、人間が機械語を使ってコンピューターに命令するのは人間側に負担が多いので、人にとって比較的使い易い「プログラム言語」を使ってコンピューターに命令していきます。


プログラム学習

2020年以降、プログラミング教育が小学校で必修化されます。現在IT業界が抱えている問題として、今後さらにIT化していく社会に対しWebエンジニアをはじめとするIT人材の不足があります。
しかし、小学校のプログラミング教育は「プログラマーの育成」が目的ではありません。小学校段階におけるプログラミング教育の目的は、プログラミング言語の使い方を覚えることで無く、文部科学省は、プログラミング教育を通じて育成すべき資質・能力を「プログラミング的思考」という言葉で表現しています。

この事は初学者にとってのこのクラスでのプログラム授業と同じで、まずは「プログラミング的思考」を理解する事を目標にしましょう。

IT人材の需給に関する推計
http://www.meti.go.jp/press/2016/06/20160610002/20160610002.pdf



webで学ぼう|FIFkids(エフアイエフキッズ)


http://www.mext.go.jp/programin/www.mext.go.jp



code.org


www.nikkei.com



ダイアログボックス


ダイアローグ

二人以上の人の取りかわす問答。対話。会話。
対義語:モノローグ

<body>
<script>
  alert('初めてのJavascript!');
</script>
</body>

SVGとCSSを使ったアニメーション


See the Pen
q-chan
by yachin29 (@yachin29)
on CodePen.



See the Pen
svg-animation
by yachin29 (@yachin29)
on CodePen.




tympanus.net

gardenstudio.com.br

jakearchibald.com

SVGとは?

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。

SVGに対応しているブラウザー


blog.codecamp.jp

svgで使用するタグの分類


svgで使用するタグは大きく分けると3種類に分ける事が出来ます。

  • 基本図形(rect, circle, ellipse, line, polyline, polygon)
  • パス(path)
  • テキスト(text)


今回の授業ではSVGを単独で使用するだけでなく、HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。


変化させる方法は主に以下の3つがあります。

CSSプロパティ(transitionやanimation)を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います(ちなみにjQuerySVGの要素を扱えないので使えません)。


SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。

stroke:線の色
stroke-width:線の太さ
fill:塗りつぶしの色
stroke-dasharray:破線の間隔
stroke-dashoffset:破線の開始位置






今回は破線のプロパティである、stroke-dasharraystroke-dashoffsetを使い、線を引くアニメーションを作成します。





また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。
none(初期値)

キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。

forwards

アニメーションの実行後にキーフレームの最後の指定が適用されます。

backwards

アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。

both

forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。



参考サイト
https://qiita.com/a-ide/items/107c9044d0f4e0354112qiita.com