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

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

WebP(ウェッピー)をphotoshopで書き出す

WebP(ウェッピー)は、圧縮率の高い非可逆圧縮で、透過した画像も書き出せるうえ、GIF同様にアニメーションにも対応している画像フォーマットで、言わば、jpgとpngとgifの良いとこ取りの画像形式です。
対応するブラウザが少ないというデメリットから普及が限定的でしたが、少しづつ状況は改善されてきました。

2021年5月現在、今まで対応が遅れていたsafariiOSでも対応出来るようになったので、選択肢の1つとしては十分使用可能です。


caniuse.com


Photoshopで書き出す場合

photoshopでwebpを書き出す場合、プラグインが必要です。


github.com



macの人は
Applications/Adobe Photoshop/Plug-insにWebPShop.pluginをコピー。
※「システム環境設定」→「セキュリティとプライバシー」でWebP用のアプリの使用を許可する必要があります。



windowsの人は
C:\Program Files\Adobe\Adobe Photoshop\Plug-insにWebPShop_0_3_2_Win_x64.8biをコピー。

webpとjpgの比較

http://felica29.starfree.jp/webp/

actionを使ってPhotoshopの作業を自動化する

Photoshopには、作業を記憶して再利用できる『アクション』という機能があります。普段繰り返し行う手順、複雑な写真加工の手順など、Photoshopに覚えさせて実行ボタンを押すだけで、一連の作業を自動で行ってくれるとても便利な機能です。
Photoshopのアクションは作業の効率アップだけでなく、配布されてるアクションを入手して手軽に加工ができるようになります。



f:id:yachin29:20210510004607j:plain


f:id:yachin29:20210510004616j:plain

creativecloud.adobe.com



design-trekker.jp


自身でドロップレットを作成する

画像のリサイズなど単純な反復作業はアクションに作業内容を登録して自動化してしまうと、すごく効率よく作業を進める事が出来ます。
ドロップレットとはPhotoshopの“アクション”をアプリケーション化したものです。 大量の画像データでも、ドロップレットのアイコンにドラッグ&ドロップするだけで、登録されたアクションを行ってくれるという、とても便利な機能です。


正方形(400x400)にトリミングするアクションの作成
  1. アクションを作成し、記録スタート
  2. 画像を開く
  3. 画像解像度の高さを400pxに(縦長画像の場合は別にアクションを作って幅を400pxに)
  4. カンパスサイズを400x400にトリミング
  5. 別名で保存(保存場所は後で別で指定するので適当でok)
  6. [ファイル]>[自動処理]>[ドロップレットを作成]をクリックして、ドロップレットを作成

ライティングの課題「webの今後」

今回のテーマは

webの今後-利便性と開放性

以下の記事を読み、今後のwebがどうなるか、自らの考えを述べよ。

死にゆくウェブ、犯人はアプリ-便利さの裏で消える開放性

jp.wsj.com


今回の課題では

Counter argument(カウンター・アーギュメント)

というものを意識して書いてみましょう。


Counter argumentとは、簡単に訳すと「反論」「反対意見」といった感じです。
あまり馴染みの無い単語かもしれませんが、英文での論文やアカデミックエッセイと書くときには必須のテクニックです。勿論webライティングにも必要とされます。
「反論」「反対意見」と言っても、ある意見に対しての「反論」「反対意見」を書くのではなくて、自身の主張する意見に対して予め予期出来る「反論」や「反対意見」を敢えて自ら例に挙げ、その問題に対して説得力のある答えを自ら述べる事で自身の主張をより強固にする、といった手法です。一見とても難しそうに思えますが、普段皆が良く目にしているものにもこのカウンター・アーギュメントは使われています。


よく通販番組で商品の性能や品質の良さをこれでもか!という具合に説明し、最後にアシスタントが「でも…、お高いんでしょ?」という質問に対して「通常であれば〇〇円ですが、今なら特別割引で〇〇円です!」
というよくあるやつです。
商品を紹介する際に一方的に良い点ばかりを挙げていると、多くの視聴者は「そんなに良くて便利な物なら、どうせ値段が高いに決まっている」と思ってしまいます。そこをツッコまれる前に敢えて自ら値段が高いという「問題点」を挙げ、さらにその問題点を解決する事で、視聴者に高品質で高性能というメリットと高価格というデメリットが混在する商品のデメリットの部分を取り除き、あたかもメリットしかない商品というイメージを植え付ける、という手法です。

webライティングでもメリットをただひたすら羅列するのでは無く、デメリットも自ら挙げて、さらにそのデメリットの解決方法も加える事でよりメリットが強調される訳です。


Canvasを使ってグラフが作れる「Chart.js」

f:id:yachin29:20210429235627j:plain


Chart.js

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが描けるJavascriptのライブラリです。
HTML5Canvasを使って描画され、誰でも簡単に編集ができるようになっています。

www.chartjs.org


今回はCDNにあるバンドルファイルを使用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>




qiita.com






作例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
 <title>円グラフ</title> 
<style>
h1 {
text-align: center;
}
#box {
width: 800px;
margin: 50px auto 0;
}
</style>
</head>
<body>
  <h1>円グラフ</h1>
  <div id="box">
  <canvas id="myChart"></canvas>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myChart");
  var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["A型", "O型", "B型", "AB型"],
      datasets: [{
          backgroundColor: [
              "#BB5179",
              "#EBB350",
              "#6ABB77",
              "#29A3D5"
          ],
          data: [38, 31, 21, 10]
      }]
    },
    options: {
      title: {
        display: true,
        text: '血液型 割合'
      }
    }
  });
  </script>
</body>
</html>


See the Pen
radar-chart
by yachin29 (@yachin29)
on CodePen.





chartscss.org

DXを加速する日本製ヘッドレスCMS microCMS

f:id:yachin29:20210428033539j:plain


microcms.io


ヘッドレスCMSとは

ヘッドレスの「ヘッド」は、ビュー(コンテンツを表示する画面)を指します。ヘッドレスとはこのビュー機能が無いCMSの事です。
そもそもCMSとはContent Management Systemの略で、つまりはコンテンツ管理システムを指します。従来のCMSはコンテンツを入稿するシステムとコンテンツを表示するビューが合わさったものでした。最も代表的な例としてはWordPressが挙げられます。


ヘッドレスCMSの場合、ビュー機能は付いていない為、自作する必要があります。ヘッドレスCMSは入稿したコンテンツをAPIから取得することが出来るので、このAPIを使って必要なコンテンツを取得しHTMLなどに表示させます。

代表的なヘッドレスCMS

www.contentful.com






メリット
  • 自由度が高い
  • HTML・CSSで作成した静的ページの1部を動的に出来る
デメリット

HTMLやCSSJavascriptの基本知識が必要



JSON

APIは通常JSON形式で書き出されるので、JSON形式のデータをJavascriptPHP等のデータに変換する必要があります。

JSONとは?

JSONとは「JavaScriptのオブジェクト記法を用いたデータ交換フォーマット」です。 PythonPHPJavaScriptC++Javaなど様々な言語でサポートされており、JSONを間に挟むことで各プログラミング言語間のデータの受け渡しがとても簡単にできます

JSONデータをjavascriptに変換

fetch("自身のエンドポイント", {
headers: {
"X-API-KEY": "自身のAPIキー"
}
})
.then(function(res) {
  return res.json();
})

.then(function(json) {
var fragment = document.createDocumentFragment();
for (var i = 0; i < json.contents.length; i++) {

// titleの取得
var title = document.createElement('h2');
title.textContent = json.contents[i].title;
 
// contentの取得
var content = document.createElement('p');
content.className = 'txt';
content.innerHTML = json.contents[i].content;

// imagesの取得
var img = document.createElement('p')
img.className = 'phpto';
var photo = json.contents[i].images['url'];
img.innerHTML = '<img src="'+ photo +'" alt="">'

//dateの取得
var date = document.createElement('time');
var postDate = new Date(json.contents[i].date);
var postY=postDate.getFullYear();
var postM=postDate.getMonth()+1;
var postD=postDate.getDate();
date.innerHTML = postY+'年'+postM+'月'+postD+'日';


var item = document.createElement('div');
item.className = 'content-box';

item.appendChild(title);
item.appendChild(content);
item.appendChild(date);
fragment.appendChild(item);
}

document.getElementById('content-wrapper').appendChild(fragment);
})