ゲームエフェクトデザイナーのブログ | A Real-Time VFX Artist's Blog

About Making Materials on UE, Making Tools with C#, etc

CSSとjQueryでヘッダーをスライドアニメさせる

Front-End JavaScript

CSSとjQueryでヘッダーをスライドアニメさせてみました。

こんな風に。

f:id:moko_03_25:20190530015526g:plain


まず、htmlはこちらのような感じです。
※赤字がヘッダー部分＆アニメーションの記述です

<html>
<head>
    <title>URL Library | moko's web application</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <script>
        $(function() {
            $(".click").click(function() {
            $(this).toggleClass("clicked");
            });
        });
    </script>
</head>

<body>
<header>
    <hr size="2" color="#97BE38">
    <div class="box click">
        <hr size="25" color="#5E5C61">
    </div>
</header>

<div class="container">
    <%= yield %>
</div>
</body>
</html>


そしてこちらがCSSの記述です。
クリックした際にプロパティの一部を変化させています。

header {
    text-align: center;
    background: #5E5C61;
    margin: 0;
}

header hr {
    margin: 0;
}

.box {
    height: 200px;
    background-color: #5E5C61;
    padding: 0;
    margin: 0;
    transition: 1s;
    background-image: url(title_logo.png);
    background-size:377px 180px;
    background-repeat: no-repeat;
    background-position: center center;
}

.box.click.clicked {
    height: 25px;
    opacity: 0;
}


こんなシンプルな記述でいけるんですね。

ただ、ページ遷移するとクリックが効かなくなったりなど不具合があるのでさらに手を入れていく必要がある感じでした。

Font AwesomeのアイコンでEditとDestroyを行う方法

Ruby

Font Awesome のアイコンをクリックしたら link_to ヘルパーで投稿を編集・削除する方法がうまくいったのでメモっておきます。

下記のように書けばOKです。

<%= link_to(
    content_tag(:i, nil, class: 'fas fa-edit'),
    edit_website_path(website)) %>

<%= link_to(
    content_tag(:i, nil, class: 'fas fa-times'),
    website_path(website),
    method: :delete,
    data: { confirm: '本当に削除しますか？' }) %>


リスト一番左のアイコンをクリックすると編集・削除できます。

f:id:moko_03_25:20190528015150p:plain

フォームからURLを受け取ってスクレイピングした値をテーブルに追加する

Ruby

Ruby on RailsでURLを登録してリンク集を作成できるウェブアプリを制作中なのですが、データの新規登録ページ（new.html）の form_for ヘルパーでフォームから入力されたURLを受け取って、そのURL先のサイトのページタイトルをデータベースのテーブルに登録して index.html にリダイレクト時にページタイトルを一覧することができたので、メモしておきます。

こんな感じです。

f:id:moko_03_25:20190528010007g:plain

素人丸出しの滅茶苦茶強引な方法ですが、とりあえず実現だけはうまくいきました。

まず「new.html.erb」は下記のような感じです。
form_for でフォームに入力した値を受け取ります。こちらは普通の記述かと思います。

<h2>Add New URL</h2>
<%= form_for :website, url: websites_path do |f| %>
  <p>
    <%= f.text_field :address, placeholder: 'URLを入力してください' %>
    <% if @website.errors.messages[:address].any? %>
      <span class="error">
        <%= @website.errors.messages[:address][0] %>
      </span>
    <% end %>
  </p>
  <p>
    <%= f.text_field :detail, placeholder: 'サイトの説明を入力してください' %>
  </p>
  <p>
    <%= f.submit "登録する" %>
  </p>
<% end %>


コントローラはこんな感じです。
こちらはひどいです。nokogiriでスクレイピングしてタイトルを取得するコードをコントローラのアクション内にまるまる記述しています。
ちゃんとスクレイピング用にrbファイルを作って呼び出すべきなんでしょうね。。

def create
  @website = Website.new(params.require(:website).permit(:address, :detail))
  if @website.save

    require 'nokogiri'
    require 'open-uri'

    charset = nil

    html = open(@website.address) do |f|
      charset = f.charset
      f.read
    end

    doc = Nokogiri::HTML.parse(html, nil, charset)
    @website.title = doc.title
    @website.save

  redirect_to websites_path
  else
    render 'new'
  end
end


参考にさせて頂いたのはこちらの記事です。

とりあえずメモでした！

RailsでWebアプリ制作してみる2（dotinstall）

Ruby Front-End Database

少し前にRuby on Railsでウェブアプリを作成するUdemyのチュートリアルを始めて記事にしましたが、途中で理解が追いつかなくなったので仕切り直しました。

ドットインストールでHTMLとCSSの入門とRubyの入門での再確認をさらっと済ませて、次に『Ruby on Rails 5入門（全28回）』に入りました。

参考までにRubyの基礎構文についてまとめた記事を貼り付けておきます。


ここではドットインストールのRails入門をCloud 9で進める方法、そして環境をドットインストールに合わせる方法についてなどをメモしておきたいと思います。

続きを読む

Pythonのパッケージ管理周りについてのメモ

Python Infrastructure

前回のMayaのスクリプト環境の記事に続いて調べてみました。

メモと言っても、とても丁寧にまとめられた沢山の記事をペタペタ貼り付けただけのものではありますが。。しかし把握しやすいように図も作ってみました。

続きを読む

Mayaのスクリプト環境についてのメモ

Maya Python C++ Infrastructure

MayaのスクリプトについてはMELを少し試したことがあるのみで、未だMayaのスクリプト環境についてよく分かってないため、今更ではありますが調べてまとめてみました。

続きを読む

HTMLとCSSを学習してみた

Front-End JavaScript

ドットインストールのHTMLとCSSのレッスンを進めてみました。

『HTML/CSSの学習環境を整えよう [Windows編] （全4回）』
　こちらは、ブラウザのGoogle ChromeとエディタのATOMのインストールを行います。
　プログラムに適したフォント「RictyDiminished」のインストールも行います。
　ChromeとATOMはインストール済みだったので30分もかからず終わりました。

『はじめてのHTML（全15回）』
　実際にポートフォリオサイトを作成する手順を踏みながら基本を学べます。
　1時間ほどで終えることができます。

『はじめてのCSS （全17回）』
　HTML入門を終えた状態から開始するので、先にHTML入門を終わらせます。
　1時間ほどで終えることができます。

●一通り実践してみて

はじめてのHTMLの第一回の動画で作成するサイトの完成版が確認できます。
シンプルで見栄えが良く、サクサク進むのでモチベーションも保てます。
さくっと2時間ほどでHTMLとCSSの基本が学べたのでとても良い内容と思いました。

UdemyのRuby on Rails入門を進めるにもHTMLやCSSの記述の基本構文を知らないと厳しい印象だったので（例えばHTMLタグ内の class="" で記述するセレクタなど）、先にこちらを一通りやってみるのが良いと思いました。

●次のステップについて

次に『実践！ウェブサイトを作ろう（全16回）』を行いました。

こちらはまた別のウェブサイトを作成しながら、CSSの便利な記述が追加で学べる感じでした。基礎の振り返りにもなって丁度良い感じです。

Font Awesomeのフリーアイコン
https://fontawesome.com/

ウェブサイト内にコードを埋め込んで使用するという提供方法があるんですね。
知らなかったので面白いなと思いました。

Chromeのショートカット

F12　‥　開発者ツールの表示ON/OFF

F5 または Ctrl + R　‥　再読み込み（Ctrl + R が便利）


HTMLやCSSの記述について1つずつ詳しく知りたいような場合は「④ もっと詳しくHTML/CSSを学んでみよう」内のHTMLやCSSのレクチャーに入っていくと良いかと思われます。全部で111個のレッスンにも及ぶため、自分はとりあえずこちらには手は出していないです。

●スマホ向けのウェブサイトについて

スマートフォン向けサイトの作り方については学んでおいた方が良いと思いました。

というのも、自作のウェブアプリを将来的に作成してチェックしたり利用したりする場面は通勤時のようにスマホからが多そうに思ったので。。

という訳で、月額980円のプレミアム会員限定公開のレクチャーになりますが『実践！スマートフォンサイトを作ろう（全22回）』も一通り行いました。

ヘッダに下記のようなタグを入れておくだけでそれらしくなるようです。
あとは画像サイズなどをピクセルではなく％で指定したりする感じでしょうか。

<meta name="viewport" content="width=device-width,initial-scale=1">


それから、開発者ツールを表示して左上に表示されるiPhone＆iPadのようなアイコンをクリックすると、デバイスに応じたプレビューが行えるんですね。めちゃ便利！

他にこのレクチャーで行う要素としては、PC上で閲覧した際なんかにブラウザの幅に合わせてレイアウトを変える対応、Youtube動画の埋め込み時にレイアウトが崩れないようにする対応、ページトップにメニューアイコンを配置してJavaScriptを使ってメニューが開閉するように見せる対応などがあり、JavaScriptに初めて触れるのにも良い導入となっています。

JavaScriptもまたドットインストールで沢山のレクチャーが用意されています。

●Firebaseで公開

こちらもプレミアム会員限定公開のレクチャーになりますが『Firebaseでウェブサイトを公開してみよう（全9回）』を行えば、Firebaseの無料プラン（ウェブ公開のための容量1GB・転送10GB/月まで）で作成したウェブサイトのファイル一式をターミナル（Windowsの場合はPowerShellなど）からアップできます。
Googleが母体だそうで、Googleアカウントでそのままログインできるのが便利。
あと環境構築時にNode.jsもインストール（何に利用されているのか理解しておらず）。

アップしてみたサイトはこちら。

太郎のポートフォリオサイト


ちなみにHTMLのようなマークアップ言語はタグで囲む必要があったりと入力が面倒で好きになれない言語だったのですが、インテリセンス（文字入力補間）でこんなに楽になるんですね。。

f:id:moko_03_25:20190511201038g:plain

ドットインストールに会員登録して7日間で134のレッスンが完了。
全レッスンの1/3なので、休暇が3週間あれば一気に全て終わらせられそう。。

Railsも軽くやりましたが、じゃあRailsとPHPのどちらが良いかというと、PHPも触ってみないことには分からないので本当は両方とも触ってみたいんですよね。でも時間も有限‥

という訳で、次はRailsに戻りますかね。
引き続き学習していきたいと思います。

●参考サイト


●HTML 公式ドキュメント　

RailsでWebアプリ制作してみる1（Udemy）

Ruby Database

Ruby on Railsの入門サイトの記事をざっと試したので、次のステップとして実際に何かしらウェブアプリを作成して公開するところまで進めたいと思いましたが、まだ自由に作成するほどの知識は全く培われていません。。

そこで、UdemyのRails入門のチュートリアルをやっていくことにしました。
同じ作者の「MySQL + SQL入門」にもお世話になりました。

こちらのレクチャーの特徴としては下記のような感じです。

・AWS Cloud9 環境で開発する
・Rubyの基本構文を学べる
・Ruby on Railsの基本を学べる
・ミニQ&Aサービスの開発とネット上への公開を学べる
　新規質問を投稿、質問の編集、削除、詳細表示
　回答の投稿、回答の編集
　Bootstrapでお手軽に見た目を変える
　HerokuとGitを使って公開


印象としては、Railsの章に入ると非エンジニアが入門としていきなり始めるには敷居が高いと思いました。私の場合は事前にSQLを軽く触っていたことと、Rails入門記事を一通り行っていたのでなんとか理解が追いついた感じでした。

環境構築


AWS Cloud9 にて環境構築を進めていく流れになっています。

[Udemyの環境]

Ruby 2.5.1p57
Ruby on Rails 5.2.1
RVM 1.29.3
Gems 2.7.6
SQLite 1.3.13
Bootstrap 4.1.1
JQuery-Rails 4.3.1

[この記事を書いた時点での環境]

Ruby 2.5.1p57
Ruby on Rails 5.2.1
RVM 1.29.7
Gems 2.7.9
SQLite 1.3.13
Bootstrap 4.1.1
JQuery-Rails 4.3.1


Cloud 9 はドットインストールで試したことがあるのでAWSアカウントはすでに作成済みですが、今一度行ったことなども含めてメモしておきたいと思います。

ちなみに「はじめてのRuby入門」のセクションはとりあえずパスして「はじめてのRuby on Rails入門」のセクションは一通りざっと試しました。

・IMAでユーザーを追加、そのユーザーでログイン

・Cloud9の環境を追加
　リージョン選択
　エンヴァイロメント作成
　テキストエディタの設定（タブスペース・不可視文字）
　環境のアップデート「sudo yum update」
　RVMで Ruby 2.5.1 をインストール「rvm install 2.5.1」
　Ruby 2.5.1 を選択「rvm use 2.5.1」
　Ruby 2.5.1 をデフォルトに指定「rvm --default use 2.5.1」
　Ruby on Railsをインストール「gem install rails -v 5.2.1 -N」

・バージョン管理はRVM（Ruby Version Manager）を使用
　Rubyのバージョンをコマンドひとつで切り替えられるの、めちゃ便利ですね。

・BundlerはRubyGemsを管理するツール
　RubyGemsはRubyで書かれたサードパーティ製のライブラリ

Q&Aサイト構築メモ


・Railsプロジェクト「Q＆A」をバージョン指定して作成
　SQLiteのバージョンを指定して「bundle update」で更新
　「rails db:create」でデータベースを作成
　「questions」コントローラを作成
　「question」モデルの作成して、マイグレートする
　ルーティングの設定（resourcesとroot）
　コントローラの設定
　テンプレートの設定
　シードファイルでデータベースの初期データを追加
　Bootstrap と JQuery の導入
　Bootstrap と JQuery を使うよう application.scss と application.js を編集
　ページ共通レイアウト application.html.erb を編集
　フォームヘルパーを使ってフォームをHTMLに実装、データベースとやり取り

データベース操作絡みのメモ

[DBコンソール]
rails dbconsole　‥　SQLiteを操作するDBコンソールの開始
.q　‥　DBコンソールの終了

.tables　‥　テーブル情報を確認
.chema テーブル名　‥　テーブルを指定してカラム情報を確認

[Railsコンソール]
rails c　‥　Railsコンソールの開始
exit　‥　Railsコンソールの終了

User.all　‥　usersテーブルの全てのデータを取り出す


route.rb の設定周りのメモ

# リクエストURLがルートの場合に指定コントローラのindex.htmlを表示
root 'コントローラ名#index'

# 基本的なコントロール＆アクションをまとめて設定してくれる
resources :コントローラ名


フォームを通してデータベースに値を追加したり、ウェブアプリの形を成してきている反面、HTMLとRubyの記述で何をやっているのかが理解し切れず。。

調べるのは「HTML」「フォームヘルパー」あたりですね。
このあたりの必要最低限の部分も、徐々に習得していこうかと思います。

とりあえず「new.html」のフォームを作成した時点で、何をやっているのかなんとなくのイメージで図を作ってみました（こちらから100％サイズで閲覧できます）。

f:id:moko_03_25:20190507001931p:plain

うん。ちょっとだけ理解が進みました。

モデル作成時に自動で生成された「Question」クラスのメソッドを色々と使ってデータベースとやり取りしてるんですね。ローカル変数「@questions」をHTMLの方で使っていたりしていてスコープがどうなってるのか分かっていないため、変数とのやり取り周りも頭に「？」が浮かんでいますが。。

参考にさせていただいた記事のメモ


ペタペタと貼り付けておきます。感謝！

ちなみに Cloud 9 のショートカットをまとめられている記事はこちら。
特に複数行の一括コメントアウト「Ctrl + /」が便利です。


現在Udemy動画の「セクション5  レクチャー113」が終了したところです。

とりあえず今回はここまで！