7 月 13日の授業内容


◆ カメラのはなし ◆

    A. スマートフォン(スマホ)
     ・1,200万画素前後のCMOSタイプのイメージセンサを使ったカメラが主流ですが、約2,000万
      画素のものもあります。イメージセンサのサイズは 1/2.3型以下のものが使われていますが、
      デュアルカメラ(カメラが2個)を搭載した高性能なスマフォも普及しつつあります。
      例えば、iPhone 11~6で 1,200万画素、 Xperia 1II で 1,220万画素です。
      画像の記録は、内蔵メモリ(フラッシュメモリ)が基本で、Android系ではマイクロSDカード
      にも記録できますが、クラウドストレージサービスの普及でクラウド上でも保存できるよう
      になってきています。
      価格.com(スマートフォン 人気ランキング)
      ※参考:マイクロSDカードの選び方(SanDiskさん)
       ハイビジョン(HDTV)で、 1,920×1,080 = 2,073,600画素となり約200画素、
       ウルトラHD(4KTV)で、3,840×2160 = 8,294,400画素となり4倍の約800万画素。

    B. コンパクト・デジタルカメラ(コンデジ)
     ・現在、約2,000万画素程度のものが主流であり、イメージセンサのサイズは 1/2.3型や 1.0型
      のCMOSタイプで、記録メディアはSDメモリカードが多い。
      最近では、スマートフォンのカメラ性能が向上してきたのであまり注目されなくなっています。
      価格.com(デジタルカメラ 人気売れ筋ランキング)
      ※参考:よくわかるSDカード(GREEN HOUSEさん)

    C. デジタル一眼レフカメラ(デジイチ)
     ・イメージセンサは、2,400万画素程度のものが主流ですが、1億200万画素のものもあります。
      このジャンルのカメラはレンズが交換できるタイプであり、イメージセンサの大きさが上の
      ものに比べて大きく、 APS-C(23.4×16.7mm)、 35mmフィルム(36×24mm)のサイズ
      で、後者をフルサイズと一般的に呼んでいる。
      また、光学式ファインダーを通じて像を確認するタイプ、光学式ファインダーの代わ
      りに電子ビューファインダーや液晶ディスプレイを通じて像を確認する ミラーレス一眼カメラ
      に分類でき、記録メディアは SD系CF系メモリカードに記録する。
      価格.com(デジタル一眼カメラ 人気売れ筋ランキング)

    D. イメージセンサのサイズについて
     風景などの映像(光)を検知してデジタルデータに変換する部分のことで撮像素子とも言い
    ます。 フィルムカメラのフィルムの部分に相当します。
     このイメージセンサのサイズにはいろんな大きさがあり、大きくなるほど通常は鮮明な画像
    が得られます。 デジタル一眼レフカメラでは、35mmフィルムサイズ(36×24mm)に相当
    するサイズ(フルサイズ)のものや APS フィルムの規格があり APS-C(23.6×15.8mm)
    サイズがあります。コンデジは、1/2.3型(6.2×4.6mm)や1.0型(13.2×8.8mm)のものが
    主流であるが、スマフォでも1/2.3型のものがあります。
    参考ページ(ガバサク談義さん)

    E. CCDイメージセンサCMOSイメージセンサについて
     2004年の後半までは、CCD イメージセンサの方が出荷個数が多かったのですが、その後安価で
    消費電力の少ない CMOS イメージセンサが中心になっています。

    F. 画素とピクセル
     画素=ピクセル です。表現方法として、12Mピクセル(12MP)という表現がスマホやデジカメ
    などで使用されますが 1,200万画素と同等です。

    私の iPhone8(古いです) で写真撮影すると、4,032 x 3,024 ピクセルの画像になります。
      4,032 x 3,024 = 12,192,768 ≒ 1,200万画素 ≒ 12Mピクセル ということですね!
      コンピュータの単位で言うと、
      4,032 x 3,024 = 12,192,768 ÷ 1,024 = 11,907Kピクセル ≒ 12Mピクセル となります。

★ Webページ制作の最近の動向について

 1. CMSContents Management System 】 コンテンツマネジメントシステムがよく使われています。
  ・代表的なシステム: WordPress(ワードプレス)Movable Type(ムーバブル・タイプ)
  ・特徴: サイト内のカテゴリーごとに担当者を設定し、分業体制でタイムリーな情報発信ができます。

 2. マルチデバイス( PC、タブレット、スマートフォン、携帯などの端末 )への対応
  ・キーワード: レスポンシブデザイン (IT用語事典 e-Words)
  ・特徴: 機器や画面サイズに応じて、Webサイトを見やすく表示できるようにすることを言います。


★ Webページで扱える画像のファイル形式について

 → 参照ページ (クイックリファレンス様)

 1. JPEG形式 (ジェイペグと呼ぶ)(***.jpg, ***.jpeg)
   写真画像の一般的な保存形式で、デジタルカメラや携帯・スマフォの写真は殆どがこの形式です。
  フルカラー画像(1677万色)を扱いますが、不可逆圧縮(情報量を減らす圧縮、元に戻らない)なので、
  保存時に圧縮率を上げれば画像の鮮明さが低下します。

 2. PNG形式 (ピングと呼ぶ)(***.png)
   この画像形式は、8ビットまたは24ビットで表現できるので、GIF形式とJPEG形式の長所を持って
  います。ただし、可逆圧縮形式なのでフルカラー画像ではJPEG形式に比べてファイルサイズが大きく
  なること、アニメーション表現はできません。

 3. GIF形式 (ジフと呼ぶ)(***.gif)
   256色以内で表現する可逆性圧縮(元通り戻る)画像の形式です。ロゴやアイコン、リンクボタン、
  イラスト等の画像として使用されます。
   この形式では、透明色の指定や簡単なアニメーションの表現も可能です。



今日の課題: ホームページの作成 -各自のトップページ作成-


※ 写真撮影がまだの人は、「4.各自の最終的なトップページの作成」に進んでください。

1. Webページに用いる画像ファイルの準備(パソコン利用者用

  1-1. メールによる画像ファイルの取り出し(パソコン利用者用
   (1). スマートフォンの Gmail を使い、メールに画像を添付して自分宛に送る。
     ( 例: s20m999@ge.osaka-sandai.ac.jp )
   (2). パソコンで Gmail にログインし、届いたメールの添付画像をデスクトップにダウンロードする。

  1-2. Google ドライブによる画像ファイルの取り出し(パソコン利用者用
   (1). スマートフォンの Google ドライブ を使って必要な画像をアップロードする。
     ( Googleへのサインインは、大学で発行されたメールアドレスを使うこと!)
   (2). パソコンで ドライブ を開き、必要な画像をデスクトップにダウンロードする。

  1-3. エクスプローラの使い方パソコン利用者用


2.画像解像度の変更(リサイズ)練習

    2-1.」は、大学の演習室向けの資料です。
    2-2.」は、主に自宅で作業している人向けの資料です。
      今回も Mac 向けの資料はありませんのでスマホで作業をしてください。

    2-1. PhotoshopElements よる画像サイズの変更方法パソコン利用者

    2-2. ペイントよる画像サイズの変更方法パソコン利用者

    2-3. iOS よる画像サイズの変更方法iPhone 利用者

    2-4. Android よる画像サイズの変更方法Android利用者


3.各自撮影した画像のリサイズとファイル名について

    ※ 注意事項
      ・顔写真以外の風景画像は、全て横構図か縦構図のどちらかで統一してください!(横構図が望ましい)
      ・構図の参考ページ(アイティメディア様)
      ・リサイズの必要性
        Webページで表示できる画面のサイズは、パソコンの場合は横サイズが 1,920ピクセルが主流です。
       最近のスマホで撮影すると、長いサイズが約4,000ピクセルもあるので、ファイルサイズが大きくなり
       表示のための転送にも余分な時間が必要となります。リサイズすれば、ファイルサイズが約1/10程度に
       なるので快適な表示速度が得られるようになります。
        そこで、今回は、以下のサイズにリサイズして画像を準備してください!

    3-1. 顔写真の画像サイズは、幅を 180 ピクセルにリサイズする。(ファイル名は、"face.jpg" にする。)
       電子メールを利用した画像作成 で利用した画像を使ってください。

    3-2. 風景の画像のサイズは、幅を 1,280 ピクセルにリサイズする。
     (ファイル名は、"photo-1.jpg"、"photo-2.jpg"、"photo-3.jpg"、"photo-4.jpg" にする。)

    3-3. 風景サムネイル画像のサイズは、幅を 180 ピクセルにリサイズする。
     (ファイル名は、"s-photo-1.jpg"、"s-photo-2.jpg"、"s-photo-3.jpg"、"s-photo-4.jpg" にする。)


4. 各自の最終的なトップページの作成

 前回までの練習用ページ作成で、ある程度は HTML 文書に馴れてきたので、
 今回と次週で最終的な各自の Web ページ作りを行う。
 ※ サンプルページ内で指定している画像のファイル名は、3-1.3-3. で作成した画像に対応しています。

    4-1 各自のトップページ作成【 PC版 】

    4-2 各自のトップページ作成【 iOS版 】

    4-3 各自のトップページ作成【 Android版 】


5. 必要なファイルのアップロード

    今回、サーバにアップロードしなければならないファイルは、以下のとおりです。
    ① index.html、profile.html
    ② face.jpg、photo-1.jpg、photo-2.jpg、photo-3.jpg、photo-4.jpg
    ③ s-photo-1.jpg、s-photo-2.jpg、s-photo-3.jpg、s-photo-4.jpg

    (1). パソコンを使って作業している人は、"WinSCP"を使ってファイルをアップロードしてください。

    (2). iPhone を使って作業している人は、"LiquidLogic" を使ってファイルをアップロードしてください。

    (3). Android を使って作業している人は、"AndFTP"を使ってファイルをアップロードしてください。



全履修学生のページ


参考ページ

    (1). 表示色サンプル

    (2). アクセスカウンター

    (3). カウンターフォント