ぬえさぶろうのAnimate放送部

7月の活動記録

【Animate】カメラツールを使ってみた
Animate

【Animate】カメラツールを使ってみました。

  • カメラツールでズームする
  • カメラツールで角度を変更する
  • レイヤー深度でパララックス効果を作れる（ちょっと難しい？）
JavaScriptでできること
memo
JavaScript

JavaScriptでしたいこと

日付や時間の取り扱い
  • 日付・時刻値を加算・減算したい
  • 日付・時刻の差分を計算したい
  • 経過時間を調べたい
  • カウントダウン処理をしたい
  • アナログ時計を表示したい
ブラウザの操作方法
  • アラートを表示
  • コンファームを表示したい
  • 文字入力プロンプトを表示したい
  • ウィンドウサイズを調べたい
  • デバイスピクセル比を調べたい
  • デバイスピクセル比をcanvas要素に適用したい
  • タッチができるかどうか調べたい
  • ページを移動したい
  • ページをリロードしたい
  • 履歴の前後のページに移動したい
  • ハッシュ(#)に応じて処理を検知したい
  • ハッシュ(#)の変更を検知したい
  • 新しいウィンドウを開きたい
  • ウィンドウのスクロール量を調べたい
  • ウィンドウをスクロールさせたい
  • タイトルを書き換えたい
  • ページにフォーカスされているか調べたい
  • 全画面表示したい
  • オンライン/オフラインに応じて処理を分けたい
フォーム
  • テキストボックスの情報を取得したい
  • テキストボックス
  • テキストエリアの情報を取得したい
  • テキストエリアの変更を検知したい
  • テキストエリアの文字数をカウントしたい
  • チェックボックスの情報を取得したい
  • チェックボックスの情報を取得したい
  • ローカルファイルの情報を取得したい
  • ローカルファイルのファイルをDataURLデータとして読み込みたい
  • ラジオボタンの情報を取得したい
  • ラジオボタンの変更を検知したい
  • ドロップダウンメニューの情報を取得した
  • ドロップダウンメニューの変更を検知したい
  • スライダーの情報を取得したい
  • スライダーの変更を検知したい
  • カラーピッカーの情報を取得したい
  • カラーピッカーの変更を検知したい
  • フォームの送信時に処理を行いたい
画像・音声・動画の取扱
  • 画像をスクリプトで読み込みたい
  • 画像の読み込み完了時に処理を行いたい
  • ウェブページ内の画像を遅延読み込みさせる
  • スクリプトからimg要素を追加したい
  • 音声を使いたい
  • 音声をスクリプトで制御したい
  • 音声のボリュームを変更したい
  • 動画を読み込みたい
  • 動画をスクリプトで制御したい
  • カメラを使いたい
ローカルデータの取扱
  • localStageを使ってローカルデータを使いたい
  • Stroge APIからデータを消したい
  • Cookieを使ってローカルデータを使いたい
  • Cookieからデータを読み出したい
サーバーに画像を投稿する方法
php

画像をアップロードする方法

input_picture.php

<form action="../output/output_picture.php" method="post" enctype="multipart/form-data">
      <label for="memo">写真</label>
      <input type="file" name="picture">
      <br>
      <input type="submit" value="登録する">
    </form>

output_picture.php

<?php
    $file = $_FILES['picture'];
    $ext = substr($file['name'], -4);
    if($ext == '.gif' || $ext == '.jpg' || $ext == '.png'):
        $filePath = './user_img' . $file['name'];
        $success = move_uploaded_file($file['tmp_name'], $filePath);
        
        if($success):
?>
    <div class="uploaded_img_list">
        <img src="<?php print($filePath); ?>"  class="uploaded_img">
    <!--/.uploaded_img_list--></div>
    <?php else: ?>
    ※ファイルアップロードに失敗しました
    <?php endif; ?>
        
    <?php else: ?>
     ※拡張子が.gif, .jpg, .pngのいずれかのファイルをアップロードしてください   
    <?php endif; ?>
メモリの増設をしたい
増設メモリ
メモ

増設メモリ（16GB⇒32GB）を設置をしたい。

メモリ速度
2400 MHz
RAM技術
DDR4
ピン数
288
対応端末
デスクトップ

システムを正常に動作させるためのDIMM条件

  • 業界標準の288ピン
  • アンバッファード非ECC PC4-17000 DDR4-2133 MHz 準拠
  • 1.2 ボルトDDR4-SDRAM DIMM
  • CAS レイテンシ15（DDR4/2,133 MHz、15-15-15 タイミング）をサポートしている
  • JEDEC のSPD 情報が含まれている
  • 512 MB、1 GB、および2 GB の非ECC メモリ テクノロジ
  • 片面および両面DIMM
  • x8 およびx16 DDR デバイスで構成されたDIMM。x4 SDRAM で構成されたDIMM はサポートされ ない
SQLコマンド一覧
メモを残したい
PHP
  • データの一覧を表示
    SELECT * FROM items;
  • テーブルを作るSQL
    CREATE TABLE my_items(id INT, item_name Text, price INT);
    • my_itemsテーブル
  • データを挿入するSQL
    INSERT INTO my_items SET id=1, item_name='いちご', price=200;
  • データを変更するSQL
    UPDATE テーブル名 SET カラム名=値, カラム名2＝値...　WHERE　条件文;
//使い方
UPDATE my_items SET price=180 WHERE id=1;
  • データを削除するSQL
    DELETE FROM テーブル名 WHERE 条件文
//使い方
DELETE FROM my_items WHERE id=1;
  • データの並び替えSQL
    SELECT * FROMmy_items ORDER BY id ASC;
    • ASC:昇順（小さい数から大きい数へ）
    • DESC:降順(大きい数から小さい数へ)
データベースにメモを保存する
メモを残したい
メモ

データベースにメモを保存するしくみを作りたい

データベース

データベース名 memos
id オートインクリメント
memo メモの内容
created_at 作成日 
//データベースにメモを保存する
<?php
      try {
        $db = new PDO( 'mysql:dbname=mydb;host=127.0.0.1;charset=utf8', 'root', '' );
      } catch ( PDOException $e ) {
        echo 'DB接続エラー: ' . $e->getMessage();
      }

    $memos = $db->query('SELECT * FROM memos ORDER BY id DESC');
      ?>
    <article>
    <?php while($memo = $memos->fetch()): ?>
    //メモを表示
        <p><a href="#"><?php print($memo['memo']); ?></a></p>
    //日付を表示
        <time><?php print($memo['created_at']); ?></time>
        <hr>
        <?php endwhile; ?>
    </article>
    </pre>
      <form action="../output/output_memo.php" method="post">
    <label for="memo">メモ</label>
        <textarea name="memo" id="memo" placeholder="自由にメモを残してください"></textarea>
        <br>
        <input type="submit" value="登録する">
      </form>

メモをデータベースに保存する

//メモをデータベースに保存する
<?php
try {
  $db = new PDO( 'mysql:dbname=mydb;host=127.0.0.1;charset=utf8', 'root', '' );
} catch ( PDOException $e ) {
  echo 'DB接続エラー: ' . $e->getMessage();
}

$statement = $db->prepare( 'INSERT INTO memos SET memo=? , created_at=NOW() ' );
$statement->execute( array( $_POST[ 'memo' ] ) );
echo 'メッセージが登録されました';
?>
立ち位置による心理描写
メモ

立ち位置による心理描写を踏まえて簡単なアニメーションをつくってみようとおもいます。

  • キャラクターをデザインする

    • ストーリーの原型をつくってからアイデアを出す
    • 最初にラフスケッチを描く
    • 登場人物を構成する
    • キャラクターをデジタルで描く
    • キャラクターの設定表を作成する

  • キャラクターを動かす

    • どういう演技をさせるか考える
    • 表情の演出を考える
    • 喜怒哀楽のアニメーション
    • 歩きのアニメーションに挑戦
    • 予備動作
    • つぶし
    • リアルな動き
    • モーションブラー（ぶれ）
    • カットアウトアニメーションを実践する

  • シーンをデザインする

    • インスピレーションスケッチについて
    • 背景画を描く
    • 背景とキャラクターをミックスする
    • 事前現象を表現する
    • １シーンを作成する
    • 複数のシーンをつなげる
PHPとDBをつなぐ
PHP

PHPとDBのつなげかたをまとめる

入力フォーム
PHP
  • テキスト入力
  • メールアドレス入力
  • チェックボックス
  • プルダウンメニュー
  • テキストエリア
  • 画像ファイル選択
toTop