What's New Qiita

20191219のHTMLに関する記事は20件です。

  • 投稿日：2019-12-19T21:01:42+09:00

Flask/Pythonからhtmlの埋め込み変数にリストを渡す

htmlの埋め込み変数｛｛hogehoge｝｝にPython/Flaskからリストを渡して表示させる際に［　］が表示されてしまいます。
［　］を非表示にすることが出来るようでしたら方法を教えて頂きたく。
よろしくお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T20:51:07+09:00

初心者によるプログラミング学習ログ 188日目

100日チャレンジ188日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

188日目は

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T20:44:08+09:00

これから学ぶ言語についてのまとめ

これから学ぶ言語について

これからプログラミングを学ぶにあたり、HTML,CSS,Javascript,Ruby,Ruby on Railsの５つの言語について調べてみました。
（間違いがございましたらご指摘頂けますと幸いです！）

HTML

Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）

  • Webページを作るための最も基本的なマークアップ言語のひとつです。

  • Webページの文書構造を形作るための言語で、普段観ているWebページのほとんどが、HTMLで作られています。

  • Hyper Text（ハイパーテキスト）とは、ハイパーリンクを埋め込むことができる高機能なテキストです。　

  • HTMLにはハイパーリンク機能で関連する情報同士を結びつけて情報を整理するという特徴があります。

  • Markup（マークアップ）とは文書の各部分が、どのような役割を持っているのかを示すということです。

  • コンピュータに理解できるように文書の構造を定義することが、HTMLの最も重要な役割で、
    この際目印をつけるための記号として使用されるのがHTMLタグです。

  • HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があります。

CSS

“Cascading Style Sheets” （カスケーディング・スタイル・シート）スタイルシート

  • スタイルシート言語の1つで、文書構造にデザインを施し見栄えを整える役割を担っています。

  • CSSは、HTMLと組み合わせて使用する言語です。
    　WEBページ＝HTML（文書構造）＋CSS（見栄え）で構成されています。

  • ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。

JavaScript

JavaScript（ジャバスクリプト）

  • JavaScriptとは、現在、世界中のデベロッパーの間で最も人気のあるプログラミング言語の1つ。私たちはみんなJavaScriptのヘビーユーザー。普段から1日に何十回も使用しています。

特徴

  • JavaScriptはスプリクト言語のためJavaやC言語と違いコンパイルする必要がありません。

  • JavaScriptとは、動的にコンテンツを更新したり、マルチメディアを管理したり、その他多くのことができるプログラミング言語

  • JavaScriptはユーザー側のWebブラウザとWebサイト・ウェブサービスの相互間のやりとりを円滑にします。

  • JavaScriptのコードはブラウザがWebページにアクセスしたときにダウンロードされ、画面上に表示されるとJavaScriptのコードが実行されて次に実行するべき動作がもしあればブラウザに指示します。

Javascriptで出来ること

  • フォームのチェック
    フォームに入力されたテキストデータをサーバに送る前にチェックできます

  • イベント処理
    キーボードやマウスによる操作によってWebページの動的な動きを実現できます。

  • テキストの処理・加工
    テキストのスタイルを変化させたり、文字を抜き出したり、テキスト回りの加工も可能です。

  • Cookieの処理
    Cookieを作ったり、逆にユーザーのCookieデータを読み込んだりできます

  • ウインドウの操作
    出現するウィンドウの位置やサイズ、スクロールさせるなど、さまざまな動きを指定できます。

  • ほかにも、JavaScriptでできることはたくさんあります。

Ruby

Ruby（ルビー）

  • Rubyは、『まつもとゆきひろ』により開発されたオブジェクト指向のスクリプト言語。 日本で開発されたプログラミング言語として初めて国際規格に認証されました。
  • 「書くのが楽しい」「気持ちよくかける」とよく言われます。

主な特徴

  • Rubyは他の言語と比べると記述量が少なくて済みます。

  • JavaやPHPといった他の言語同様、Rubyはオブジェクト指向なプログラミング言語です。

  • Rubyはスクリプト言語であり、JavaやC言語と違いコンパイルする必要がありません。　

Rubyで出来ること

  • Webアプリ開発
    Ruby on RailsというWebアプリ開発用のフレームワークを利用することで、比較的簡単にオリジナルのアプリケーションを制作することができます。

  • スマホアプリ開発
    Webアプリケーションだけでなく、RUBYMOTIONを利用することで、スマホアプリ開発をすることが可能です。

  • スクレイピング
    Webサイトから情報を取得し加工するという意味です。 

Ruby on Rails

Ruby on Rails（ルビーオンレイルズ）RoR　又は　Rails

  • Ruby on RailsはオープンソースのWebアプリケーションフレームワークである。

  • Railsの基本理念は「同じことを繰り返さない」（DRY:Don't Repeat Yourself）と「設定より規約」（CoC:Convention over Configuration）である。

  • Ruby on Railsとは、Rubyで構築された、Webアプリケーション開発のための「フレームワーク」です。

  • Ruby on Railsでは、MVCアーキテクチャ（MVCモデル）という設計法に基づいて開発を行います。

気になった調べた言葉

５つの言語を調べているうちに気になって調べた言葉です。

マークアップ言語

組版指定に使われる言語で視覚表現や文章構造などを記述するための形式言語。（HTML、XML、SGML）

スタイルシート言語

構造化文書の見た目を記述するコンピュータ言語。見栄えと構造を分離するという目的で提唱された。スタイルシートとはCSSのことを指す。

コンパイラ言語

高速で動作する代わりに記述が面倒。
ソースコードを事前にコンパイルして、先に機械語に変換しておく。(C、C++、Java、C#など)

スクリプト言語


低速で動作する代わりに短い記述で処理を実現。
ソースコードを逐次機械語に翻訳しながら実行する。
(Python、Perl、PHP、Ruby、JavaScriptなど）

コンパイラ方式とインタープリタ方式

プログラミング言語を変換するタイミングによって，インタープリタ方式とコンパイル方式の2つの型に分類できます。

インタープリタ方式

ソースコードをその場で順を追って解釈する形式をいいます。(Javascript,Ruby)メリットは作成したソースプログラムをただちに実行できるという点。

コンパイラ方式

ソースプログラムをいったん機械語に翻訳し，その機械語になったプログラムを実行する方式です。メリットは実行速度が速い点。

オブジェクト指向プログラミング

「モノ」を組み立てるように表現して、コンピュータに動作をさせること。

Cookie

Web閲覧時に生成されるCookieデータは、サイトで登録したIDやパスワード、ページを見たときの日時や回数を記録するデータです。

MVCとは

Model（データを扱う）の頭文字Mと、View（ページの見た目）の頭文字V、Controller（ModelとViewとの連携を行う）の頭文字Cを取ってMVCと呼ばれています。

フレームワークとは

Webアプリケーションを簡単に開発できるようにする骨組みのこと。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T20:33:48+09:00

UiPath カスタム入力の使い方

UiPath カスタム入力について

UiPathでユーザーにIDやパスワードなどを入力させてから処理を開始したいときに、入力ダイアログ１つずつしか入力が出来ないため、複数項目がある際に入力が少しめんどうになる。

しかし、カスタム入力だとHTMLファイルを表示し、入力フォームの項目などを自分で設定出来るため一括で入力できるようになり結構便利になる。

（不特定多数の人が利用するもので、毎回読み込むファイルを書き換えるのがめんどくさいときに凄い便利だったから自分用のメモとして。）

UiPathカスタム入力作成方法

カスタム入力用HTMLファイルの作成

CustomForm.html
<!DOCTYPE html>
<html lang="ja">

<head>
   
  <meta charset="utf-8">
   
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title>UiPath CustomForm</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
   <div class="form-wrapper w-50" style="margin-left: auto; margin-right: auto; margin-top: 5%;">
         <div class="form-group">
             <label for="exampleInputName">氏名</label>
             <input type="text" class="form-control" id="Name">
           </div>
         <div class="form-group">
             <label for="exampleInputID">ID</label>
             <input type="text" class="form-control" id="Id">
           </div>
         <div class="form-group">
             <label for="exampleInputPassword">Password</label>
             <input type="password" class="form-control" id="Password">
           </div>
         <button type="submit" class="btn btn-primary" onclick="SubmitValues()">OK</button>
  </div>

   <script type="text/javascript">
    function SubmitValues() {
      var Name = document.getElementById("Name").value;
      var Id = document.getElementById("Id").value;
      var Password = document.getElementById("Password").value;
      window.external.setResult(Name + "," + Id + "," + Password);
      return true;
    }
  </script>

</body>
</html>

上記の内容でCustomForm.htmlファイルを作成する。
CSSはBootstrapを使っています。（見ればわかるかもしれないですが一応。。。）
https://docs.uipath.com/activities/lang-ja/docs/custom-input
こちらを参考に作っています。

UiPathでカスタム入力アクティビティを配置する

UiPathのアクティビティ内の システム -> ダイアログ -> カスタム入力を利用します。
アクティビティ検索（Ctrl + Alt +F)でカスタム入力で検索するとすぐに出てきます。

activity.png

URI（URLの間違いじゃないのかな・・・）に先ほど作成したCustomForm.htmlを指定します。
右側の...をクリックするとファイル選択画面が出てきます。
結果にはString型の変数を指定します。画像ではinput_dataとしてまいす。

Main.jpg

上記の画像のように代入と繰り返し（コレクションの各要素）と１行を書き込みアクティビティを配置します。
変数のinput_arrayはString配列です。

' 代入アクティビティ
input_array = Split(input_data, ",")
' もしくは
input_array = input_data.Split(","c)

実行する

kekka.png

セキュリティソフトやIEの設定で画像上側のポップアップが出るかもしれませんが、クリックして許可をすれば動きます。（ポップアップが出ない何か対策法があればどなたか教えてくれるとありがたいです。）

kekka2.png

  • 氏名：user
  • id：id
  • Password：pass

と入力してOKを押します。（OKボタンがなんかショボい）

出力結果

output.png

input_dataには入力した内容が","(コンマ)区切りで出力されます。
そのため、代入でString配列にし、 繰り返し（コレクションの各要素）で値を全て出力するようにします。
もう少しフォームはきれいに表示したいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T19:00:15+09:00

simple_formのhtmlエスケープを制御する方法

文字列としてviewファイルに書かれないsimpl_formのhtmlエスケープを制御して改行を反映させたい

Rails 5.2.0
ruby 2.5.1

やりたかったこと

simple_formのチェックボックス、ラジオボックス、セレクトボックスなどのラベルの表示に、改行を反映させたかった

「文字列としてviewファイルに書かれない」とは、以下のようなものです

<%= f.input :value, as: :check_boxes, collection: recruitment_field_options, label_method: :label, value_method: :code, checked: f.object.check_boxes_value, label: '' %>

この場合、チェックボックスのラベルとして表示されるのは、recruitment_field_optionsテーブルのlabelカラムです。

詰まったこと

Rails3以降は、ビューで表示される変数は全てデフォルトでエスケープ処理されます

◆文字列に対してhtmlエスケープを解除する方法は多岐に渡ります

・simple_format(文字列)
・<%== 文字列 %>
・(文字列).html_safe

など

しかし上記のコードの場合、label_methodでカラムを指定しているだけなので、文字列ではありません
◆で挙げた方法ではhtmlエスケープを解除できませんでした

解決策

Rubyの無名関数であるlambdaを使用することで解決できました

:labelの部分を以下のコードに置き換えます

lambda { |option| simple_format(option.label).html_safe }

全体のコードを以下に示します

<%= f.input :value, as: :check_boxes, collection: recruitment_field_options, label_method: lambda { |option| simple_format(option.label).html_safe }, value_method: :code, checked: f.object.check_boxes_value, label: '' %>

lambdaで文字列を取り出しそれぞれにsimple_formatを付けて有効な改行タグ(この場合は<br />)に変換し、html_safeでエスケープを解除していますね

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T17:19:26+09:00

Transition まとめ

transition とは

直訳すると変化や移り変わりという意味で、変化するまでの時間を設定するプロパティのこと。
transitionは、ショートハンドプロパティを含め5つのプロパティがある。

プロパティ名 説明
transition-duration 変化が始まって終わるまでの時間を指定。
transition-property 変化が適用されるCSSのプロパティを指定。
transition-timing-function 変化の度合いを指定。
transition-delay 変化が始まる時間を指定。
transition 上記の4つのプロパティを一括で指定できる、ショートハンド・プロパティ。

これをショートハンドプロパティ にて書くと下記。

app.css
.sample {
  transition: all 3s ease
}

all : transition対象のcssプロパティ allの場合は全て
3s : 変化の始まりから終わりまでの時間
ease : 変化の仕方
    ease :（初期値）開始時と終了時は緩やかに変化
    linear :開始から終了まで一定に変化
    ease-in :開始時は緩やかに変化、終了に近づくと早く変化
     ease-out :開始時は早く変化し、終了時は穏やかに。

app.css
/* 1つのプロパティへの適用 */
/* プロパティ名 | 時間 */
transition: margin-right 4s;

/* 2つのプロパティへの適用 */
transition: margin-right 4s, color 1s;

transition-duration プロパティ

値は、秒数またはミリ秒数で指定します。

指定できる単位 日本語 秒で換算
s 秒 1sは1秒
ms ミリ秒 1msは1000分の1秒

transition-property プロパティ

値 説明
all（初期値） トランジションの効果を適用できる全てのプロパティを指定します。
none どのプロパティも変化しません。
プロパティ名 トランジションを適用するプロパティ名を指定します。カンマ区切りで複数指定すること可能です。

transition-timing-function プロパティ

値 説明
ease（初期値） 開始時と終了時は緩やかに変化します。
linear 開始から終了まで一定に変化します。
ease-in 開始時は緩やかに変化、終了に近づくと早く変化します。
ease-out 開始時は早く変化し、終了時は緩やかに変化します。
ease-in-out 開始時と終了時は、かなり緩やかに変化します。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T16:28:06+09:00

box-sizingで表示崩れを解決

box-sizingは簡単に言うと「外に広げるか(content-box)」「中に狭めるか(border-box)」

padding や線を大きさに含めない：content-box

paddingや線は幅や高さに含まれない状態になる

スクリーンショット 2019-12-19 16.27.39.png

padding や線を大きさに含める：border-box

paddingや線は幅や高さに含まれる状態になる
スクリーンショット 2019-12-19 16.26.52.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T14:48:53+09:00

backgroundの詳細設定

app.css
background {
background: url(/assets/img/picture/xxx.jpg) no-repeat center/cover;
}

background-repeat 背景画像を繰り返して表示する

指定 説明
repeat 全面にリピートして表示します。デフォルトはこの状態です。
repeat-x X方向、つまり横方向にリピートして表示します。
repeat-y Y方向、つまり縦方向にリピートして表示します。
no-repeat 名前の通り、リピートはしません。

background-size 背景画像のサイズを調整する

画像が大きすぎて要素からはみ出してしまう時

指定 説明
auto 自動算出します。基本は元画像の大きさそのままです。
contain 元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。
cover 元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。
数値(px) 明示的にpxで大きさを調整します。
数値(%) 要素に対しての割合で指定します。

背景画像の位置を調整することができるプロパティ

指定 説明
キーワードで指定 center、left、right、top、bottomという風に、位置を言葉で指定します。
数値(%) 要素の左上からの位置を、要素を基準にしたパーセンテージで指定します。
数値(px) 要素の左上からの位置を、明示的にpxで指定します。

background-size

： auto 基本そのままの大きさ
： cover 要素を埋める
: contain 背景画像全体が見える

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T14:48:53+09:00

backgroundの詳細設定とショートハンドの使用

app.css
background {
background: url(/assets/img/picture/xxx.jpg) no-repeat center/cover;
}

一行のスタイルシートで記述

上記はすべて「background」の指定のため、ショートハンド（複数指定）を使って短く記述できます。
ショートハンドでは/coverとすることで background-size: cover を指定することができます。

background-repeat 背景画像を繰り返して表示する

指定 説明
repeat 全面にリピートして表示します。デフォルトはこの状態です。
repeat-x X方向、つまり横方向にリピートして表示します。
repeat-y Y方向、つまり縦方向にリピートして表示します。
no-repeat 名前の通り、リピートはしません。

background-size 背景画像のサイズを調整する

画像が大きすぎて要素からはみ出してしまう時

指定 説明
auto 自動算出します。基本は元画像の大きさそのままです。
contain 元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。
cover 元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。
数値(px) 明示的にpxで大きさを調整します。
数値(%) 要素に対しての割合で指定します。

背景画像の位置を調整することができるプロパティ

指定 説明
キーワードで指定 center、left、right、top、bottomという風に、位置を言葉で指定します。
数値(%) 要素の左上からの位置を、要素を基準にしたパーセンテージで指定します。
数値(px) 要素の左上からの位置を、明示的にpxで指定します。

background-size

： auto 基本そのままの大きさ
： cover 要素を埋める
: contain 背景画像全体が見える

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T14:08:20+09:00

transformプロパティを使って要素を上下中央に配置する

HTML

index.html
<div class="box>
  <img src="dummy.png" alt="" width="24" height="24" class="img" >
</div>

CSS

app.css
.box {
   position:relative;
   height:300px;
}
.img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

absolute による要素の固定

IMG_4833.jpg

absolute による要素の固定は赤い丸の点
左上を起点としているので、left: 50% Top:50%ではこの位置になる。
これではBox要素に対して上下中央ではないので、

app.css
transform: translate(-50%, -50%);

IMG_4834.jpg

translate(X方向の距離, Y方向の距離)
translate()関数では、X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。[tx, ty]
translateX(X方向の距離)
translateX()関数では、X方向の距離で移動を指定します。
**`translateY(Y方向の距離)
translateY()関数では、Y方向の距離で移動を指定します。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T13:53:26+09:00

Google Fonts を使ってみよう

はじめに

font-family、習いました。
でも、習ったところでfont-familyに何が指定できるのかわからないし、どうしたらそれを調べられるかわからないぞ！

そんな人のためにまずGoogle Fontsを紹介したいと思います。

Google Fontsのサイト

https://fonts.google.com/

使い方

①サイトを開きます

こんな画面が出てくるよ
スクリーンショット 2019-12-19 12.56.53.png

さてここからフォントを探す！と言ってもどっからどう探せばいいか分からない…。

②まずは日本語フォントを調べてみる！

タイトルが日本語なら、そこ変えたいよね？！
左上にある「Language」から「Japanese」を探して選択します。

スクリーンショット 2019-12-19 13.01.53.png

すると…日本語出てきたーーーーー！
スクリーンショット 2019-12-19 13.02.59.png

まだ8種類と少ないですが、それでもデフォルトよりはいいはず！！！
ということで、左上の「Noto Sans JP」を使ってみましょう。

③フォントを選ぶ

使いたいフォントのフォント名が書いてある右に赤い「＋」のボタンがあります。
そこをクリック！

すると右下にこんなものが現れた！！！
スクリーンショット 2019-12-19 13.08.37.png

「1 Family Selected」という黒いやつ。
さてここをクリックすると。

スクリーンショット 2019-12-19 13.10.10.png

なんか出てきた。
でもこれが出ればもうあとは少しだけ。

④フォントを導入するための魔法の式

赤く「STANDARD」と書いてある下に色々コードが書いてあります。
この<link hraf〜〜から始まるコードをコピーします！！

これね

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">

そして自分が作っているWebサイトの<head></head>の中に貼り付ける。
これに
スクリーンショット 2019-12-19 13.17.42.png

こう！
スクリーンショット 2019-12-19 13.19.41.png

これで導入は完了。

⑤最後にCSSを変えるよ

さっきのコピーしたコードの下にある「Specify in CSS」の下にあるコードをコピー！
font-familyってついてるからどこにこれを貼り付ければいいかはもうわかるよね？

h1のフォントを変えたかったらこう！！！
スクリーンショット 2019-12-19 13.49.36.png

⑥完成ーーー！確認しよう！

これが
スクリーンショット 2019-12-19 13.51.04.png
こう！
スクリーンショット 2019-12-19 13.51.11.png

全然違う！！！

終わりに

みんないろんなフォントを調べてみてね。
英語だけならとにかくいろんなフォントがあるので試してみて欲しいーーーー！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T13:01:40+09:00

疑似要素を使ったチェックボックスとラジオボタン

フォーム作成で若干苦労したのでメモ。

  • 疑似要素を使用してスタイル当て
  • タブキーで選択可能
  • スペースキーで選択可能

なチェックボックス＆ラジオボタン。

ポイントとしては

  • inputはopacity:0;にする(display: none;とかだとタブキー選択できない)
  • inputをdisplay: block;にする(デフォルトはinlineなんだけど、それだと3pxくらいinputが幅を取ってしまってデザインがずれてしまう)

あたり。

サンプル

See the Pen Styled Checkbox & Radiobutton Sample by urchin2x (@Torixai) on CodePen.

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T12:32:14+09:00

Overflow: hiddenではみ出した部分を隠す

CSS の overflow

overflowとはCSSのプロパティの１つで「要素のボックスからはみ出た部分をどう扱うか」を指定する。

example.css
セレクタ {
  overflow: 値;
}

visible：初期値。はみ出た部分が、はみ出たままの状態で表示される場合あり
hidden：はみ出た部分が隠れる
scroll：はみ出た部分が隠れてスクロールできる状態に
auto：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）

overflow: visibleでそのまま表示

index.html
<p class="example">あいうえおあいうえおあいうえお</p>
app.css
.example {
  width: 50px;
  height: 50px;
  overflow: visible;
  background: skyblue;
}

スクリーンショット 2019-12-19 12.28.23.png

overflow: hiddenで非表示に

app.css
.example {
  width: 50px;
  height: 50px;
  overflow: hidden;
  background: skyblue;
}

スクリーンショット 2019-12-19 12.29.43.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T11:20:02+09:00

コーダーとして信頼されるための、納品前チェック１５項目

納期が迫っている中で高品質なコードを書いて納品するのはすごい能力だなと感じています。
ただ、プロとして仕事をしている以上、特定のチェックを通してから納品するのがプロの仕事。

PSD通りにコーディングできたからといって、コードの中身に問題があればそれは本当に良い仕事をしたのだろうか？

誤字脱字や、デザイン通りにコーディングされていないのは論外。
クライアントに送る前にしっかりチェックしよう！

とはいえ、弊社には定められたチェック項目というのものがないので、

「高品質な成果物を納品するためのチェック項目」というものを自分なりに作ってみた。

コメント

今納品するコードは、ブーメランのように自分に返って来ます。半年後、もしかしたら1年後かもしれない。そんな時、書いてあるコードの意味から理解し始めたら効率が悪い。

具体的にチェックするポイントは下記

  • 書き方に統一性があるか
  • 擬似要素など（第三者が見てわかりにくい所）にコメントがあるか
  • !importantの理由を説明しているか

など、「自分が忘れた頃に見ても理解できるか？」という視点でコメントを書いてみる

[参考リンク]ダメすぎる6つの事例に学ぶ、半年後に炎上しないCSSコメントの書き方

誤字脱字

  • デザインとテキストの差異はないか

誤字脱字って以外にも結構あるものです。
頂いたデザインや、テキストデータからコピペしているはずなのですが、コピペするときにスペースが入ってしまったり、なぜか一文字消えてたり。。

コピペだからといって問題ないと思うのは危険だということ。

クライアントからのテキストデータと、表示されているテキストを比較して差異を見てみるのが確実。

[参考リンク]diff

フォント

  • フォントはデザイン通りか（サイズ、カラー、font-family）

「ヒラギノ角ゴシック」とかがよく使われている印象ですが、Macでは表示されるようにしておいて、Windowsでは似たようなフォントにする。

「デザイナーが凝って選んだっぽいフォント」については、Webフォントや、画像にする。
→これは、クライアントに必ず確認する
（できればデザイナーさんが仕様書にまとめてくれるといいのですが、ほとんどの場合は無いので、色々確認する必要がある。。。）

最終的には、「Macで”ヒラギノ角ゴシックW3″で、Windowsで”Noto Sans Japanese”を設定してます〜」みたいに伝えておくとベター

font-familyの例

cssでfont-familyを指定する例を書いておく

MacでもWindowsでも「游ゴシック」がベース
もし游ゴシックがなければMacでは「ヒラギノ」、Windowsで「メイリオ」になる

font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo",sans-serif;

ヒラギノ角ゴシックを最優先とする設定。
MacやiPhoneでは「ヒラギノ」、Windowsでは「メイリオ+英字はSegoe UI」

   font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Segoe UI", "メイリオ", "Meiryo",sans-serif;

フォント周りの設定を調べるならChrome拡張機能のWhat Fontがおすすめ。

フォント周りの設定を調べるChrome拡張機能 [What Font]

カラー

  • カラーはデザイン通りか

PSDで指定されているカラーと、表示されているカラーが合っているかを確認します。簡単に確認できるのが、Chrome拡張機能のColorPick Eyedropper。
フォントやカラーはデザインを見れば確実にわかるものなので、間違いが内容にしておきたい。

フォントカラーであれば、What Fontでもついでにみることが可能。

カラーの設定を調べるChrome拡張機能 [ColorPick Eyedropper]

見出し構造

  • 見出し構造は適切か

稀に仕様書で見出し指定されていることもありますが、ほとんどの場合はコーダーが見出し構造を決める。sectionの中に見出しがあって、ちゃんと構造化されているかを確認する。

見出し構造って何なの？って人は下記のリンクを見てみてください。
[参考リンク]【見出しタグの使い方】h1～h6の正しい使い分けについて

こちらもChrome拡張機能が便利。

SEO周りを調べるChrome拡張機能 [SEO META in 1 CLICK]

スクリーンショット 2019-12-18 13.34.13.png

こんな感じで、現在表示されているページの見出し構造が表示され、簡単にチェックできる。ワンクリックでチェックできるので、使わない手はない。
なお、Title、Descriptionなどページの情報を一括でチェックできるので、とりあえずこれで一気にチェックするといいかも。

下記のブックマークレットでもチェックが可能。
タイトルや見出しの確認など、SEOに便利なブックマークレット

Title,Description,Keywords

TDKと言われる3つですが、SEOに重要とされており、簡単に言うと下記の情報を検索エンジンに教える。

  • ページタイトル
  • ページの内容
  • ページが含むキーワード

これがしっかり入っているかを確認する。

参考サイト
TDK(title,description,keyword)とは？SEO・サイト制作基本のキ

これも先ほどの拡張機能で確認できる。

スクリーンショット 2019-12-18 13.43.25.png

こんな感じ。

SEO周りを調べるChrome拡張機能 [SEO META in 1 CLICK]

alt属性

  • alt属性が入っているか
  • 英語サイトの場合、英語で入力されているか

これのつけ忘れで、クライアントから怒られることがしばしば。。。
細かい所なのでチェックが漏れがち。

これも実はSEO META in 1 CLICKで確認できる！便利！

スクリーンショット 2019-12-18 13.47.59.png

こんな感じで、画像15個中、7個はaltが入ってないよ！と教えてくれる。

SEO周りを調べるChrome拡張機能 [SEO META in 1 CLICK]

これでも可能↓
alt属性の一覧を表示するブックマークレット

href属性

  • リンクが正しく入っているか
  • target="_blank"は適切か
  • リンク切れになっていないか
<a href="#">hogehoge</a>

クライアントからリンク先の指定が遅れてくる場合があり、「とりあえず#入れとくかー」がそのままになっている場合があ流ので注意！

また、target="_blank"も抜けやすいので、外部ページに飛ばす場合はブランクと覚えよう

これは、一つ一つクリックしてチェックしていくのが無難。

デザインカンプとの整合性（PerfectPixel）

デザインカンプと比較して、違いはないか？

細かい部分で言うと、デザインで付けられている「レイヤー効果」が抜けていることがあるので注意。
例えば

  • border
  • box-shadow
  • border-radius　など

あとは納期が許す限り、「PerfectPixel」を使い、ピクセルパーフェクトに近づけて制作する。

コーダーはデザイナーの作成したカンプにしたがってサイトコーディングするのが仕事。
つまり、デザイン通りに仕上げるのが本来の役割なはず。

「とりあえず、微妙にずれてるけど、見た目は完璧だしOKでしょ！」という気持ちで納品すると、後で修正の嵐になるので注意。

「納期が許す限りは」ピクセルパーフェクトで作り、まずは完成度８０％くらいで納品し、ピクセルパーフェクトに仕上げていくのもありかなと思う。

PerfectPixel

レスポンシブ（水平スクロール）

  • スムーズにレスポンシブ対応できているか
  • 水平スクロールがでないか

レスポンシブはコーディングしながら気をつけているポイントだと思うので多分大丈夫なはず。
でも、納品前には必ずチェックしよう。

できれば実機で確認したい。

hoverの設定

  • hover時の設定はできているか？（SPは除く）
  • 透過度は統一されているか

クライアントから指定されていれば、そのhoverアクションを各所に当てる必要があるし、

特に指定がなければ、opacityの透過度を統一して当てること。
よくよく見ると透過度が違う！みたいにならないように注意。

Sassなら変数で管理しておこう。

マルチブラウザ

どのブラウザで見ても、問題なく動くかどうか
できれば、下記のブラウザはチェックしておきたい。

  • IE11
  • IE Edge（最新バージョン）
  • FireFox（最新バージョン）
  • Google Chrome（最新バージョン）
  • Mac Safari（最新バージョン）
  • iPhone（Safari最新バージョン）
  • iPad（Safari最新バージョン）
  • Android（Chrome最新バージョン）

IEが曲者。

MacならvirtualBoxで環境構築するか、Chrome拡張機能でサクッと確認する方法もある。
- MacでVirtualBoxを使ったIEの表示確認環境を構築する

Chrome拡張機能なら、「IETab」
IE Tab

スクリーンショット 2019-12-18 21.58.56.png

こんな感じで、拡張機能のアイコンをクリックするだけで、IEでの表示イメージを見ることができる。

JavaScriptの挙動（コンソールエラー）

  • 色々と実装しているJavaScriptの動きは正しいか？
  • コンソールにエラーが出てないか？

マルチブラウザで確認する。
ライブラリを入れている場合は、それらが正しく動作しているか確認しよう。

特にIEでJSが動いてない！！ってことがよくあったので注意。

HTML閉じタグ忘れチェック

HTMLコーダーがHTMlタグを正しく書けてないって、どうなの？

後述するW3Cでもチェックしてくれるかもですが、Chrome拡張機能でサクッとチェックが可能なので、これだけでも最低限はやっておきたい。

HTMLエラーチェッカー

W3Cチェック

W3CはHTMLやCSSの標準規格。規格にあった正しい書き方ができているかをチェックする。

僕としては、こっちを使ってます。

英語ですが、おかしい部分はエラーで教えてくれるので、その部分を見ていけばオッケー

※この規格に沿って書いたからと言ってSEO的に有利なのかどうかは不明。

まとめ

とりあえず思いつくままにまとめてみると１5項目ありました。

納期に迫られている中で、品質の高い成果物を納品するのは大変ですが、それが信頼につながって、また新たな仕事を運んでくれます。

プロの仕事ならしっかりと自分の仕事をやるべきで、コーダーであってもプログラマーのようなCSS設計の意識と、納品前のチェック体制を整えることが理想だと考えました。

他にも「これはやっておくべきだろ！！」ってのがあれば教えてください。

今回紹介したツール

参考リンク

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T10:35:54+09:00

?【HTML】廃止になったXHTMLからHTML5への移行

内容

古いテンプレートファイルを確認したらいろいろと修正すべき部分があったので
まずはXHTML 1.0をHTML5に移行させる

?XHTML 1.0は正式に廃止されている模様
https://www.marguerite.jp/Nihongo/WWW/RefHTML/Appendix/About_XHTML_1.0.html

?これもSEO的に無意味

hoge.html
<html lang="ja">

https://seopack.jp/seoblog/20161111-use-hreflang/

やったこと

宣言等のタグをHTML5の記述に変更
以上！！

hoge_xhtml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

↓

hoge_html5.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T10:35:54+09:00

【HTML】廃止になったXHTMLからHTML5への移行

内容

古いテンプレートファイルを確認したらいろいろと修正すべき部分があったので
まずはXHTML 1.0をHTML5に移行させる

XHTML 1.0は正式に廃止されている模様
https://www.marguerite.jp/Nihongo/WWW/RefHTML/Appendix/About_XHTML_1.0.html

下記もSEO的に無意味
hoge.html
<html lang="ja">

https://seopack.jp/seoblog/20161111-use-hreflang/

やったこと

宣言等のタグをHTML5の記述に変更
以上！！

hoge_xhtml.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

↓

hoge_html5.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T02:05:54+09:00

あの日見た言語の名前を僕はまだ知らない。~XMPPでローカルDB(初歩)~

初カキコ･･･ども･･･

俺みたいな専1でいきなりPHP触る、腐れ野郎他に、いますかって･･････いるでしょう。

なぜ僕がPHPをやることになったのか、聞かれてはぐらかしていましたが、恥ずかしさを捨て去り此処に記します。
※前置きが長くなります｡

過去編

当時、僕は小学生でした。
毎日niconicoをニコニコしながら見ていた10年前のある時、ふと目に留まった動画がありました。それは･･･

｢絶対バグらないR〇G制作勉強会｣

当時、小学生高学年だった僕は｢ウヒョー、ゲームだー｣と飛びつきました。
長々と淡々に作り上げた、今は亡き制作したゲームの数々は古いPCと一緒に封印されました。

~10年後~

実際にプログラミングでゲームを制作したことを覚えているものの、一体どうやって作っていたのか、なんの言語を使っていたのか。全て忘れてしまった僕｢確か･･･HPS･･･?SPH･･･?PHP･･･?なら触ったことあるわいな･･･｣等とコークハイを飲みながら友人と話した訳ですよ。

冬も訪れ寒くなってきたこの時期。私はPHPという2種3文字を見て、｢へ、チョロいぜ！！｣と内心思うわけですよ。そして懐かしくなってしまった僕は、久しぶりにniconicoを開きました。

お分かりでしょうか？

｢絶対バグらないR〇G制作勉強会｣

ここで取り扱っている言語がHSPという3種3文字のスクリプト言語なのです。

もうお分かりでしょうか？

そう、僕はechoではなく、mesを書いていたのです。

本題

まずは･･･

HSPとPHPを勘違いしていた腐れヤローな僕は、急いでパソコン叩きます。
webのスクリプト言語と聞いて、JavaScriptとPHPの違いの認知すらしていなかった哀れな僕は、恥ずかしさを捨て去り、Pr〇gateで吐きそうになりながら、〇ECH〇CADEMYとか侍〇ンジニアとかで0.5mm程PHPに対して理解を深めたわけです。

そして、目標を立てました。
それは、日々commitしている(PHPのせいで数日止まっている)ブラウザにローカルDBからデータを引っ張ってくる事を今回の最終目標としました。

XAMPP

いくら理解を深めても環境を用意しなければ、話は始まりません。SQLの成績だけは悪かった僕は、GUIにお助けを求めてザンプに頼りmarinaDBを立ち上げます。(楽)

まずは、XAMPPをダウンロードします。
1ce4f6a5bc04be582b2f277c74d21665.png

日本語サイト:https://www.apachefriends.org/jp/index.html

あとはまぁインストールして立ち上げていきます。
a935a872f04f6b1dd175a1865ca849d5.png

セットアップ

本来ならポート番号の確認とかやらなきゃいけないそうなんですが、思いつきでPHP触っている僕に死角はないので確認しません。

そしたら、ApacheとMySQLのStartボタンを押します。その後、
C:\xampp\htdocs
☝ファイルにアクセスして、ファイル内にPHPファイルを作成します。
a2239115483a2fe5d34362ded0a63d54.png
このファイルに適当なコードを書きます。
0c2c2c4a2eee23c8dfe74ca315854b4b.png

http://localhost/aho.php
ブラウザで開きます。
3a8563af5cd977a0a83731a47bfde65b.png

そういえば、XAMPPのアイコンを右クリックして、管理者として実行をしてください。ApacheとMySQLはチェックボックスにチェックを入れておいてください。9791f35f03f3bddda9b3d689dc8f3dbb.png

これでとりあえず、PHPを書ける環境は構築できました。

DBとの接続

XAMPPのShell(黒いとこ)をクリックします。

ターミナルが立ち上がりますので、mysqladmin -u root passwordを打ち込んでください。

したらば、登録するパスワードを聞かれるので、適当に打ち込む。
p2-4.png

そしたら、MarinaDB君と繋げてみます。mysql -h localhost -u root -pを打ち込むとパスワードを求められるので、さっき登録したパスワードを入れると

5011ff1c24955dcf18418f5604ef3a04.png

こんな画面がでたらOK。quitを打ち込んでMarinaDBとbyebyeしましょう。

パスワードの設定注意

このままだとPhpMyAdminからはぶりを食らいます。
C:\xampp\phpMyAdminにアクセスして、config.inc.phpの中身をちょっと変えます。
/* Authentication type and info */ってとこの$cfg['Servers'][$i]['password'] = '';
に設定したパスワードを入れます。
$cfg['Servers'][$i]['password'] = 'ここですよここ';

DBを利用する

利用するデータベースを立てる

ここまでくれば早いです。
まずは、利用するデータベースを立てましょう。XAMPPのMySQL欄の所にあるAdminをクリックすると、phpmyadminのページが開きます。
多分そのまま開くと思いますが、名前とパスワードを求められたら、名前の欄はrootと打ち込んでパスワードはさっき設定したものをいれてください。
その後、データベースのタブをクリックして以下を開きます。
b836313d6fddd9ba25f0df65934d35b1.png

とりあえずgomikuzuというデータベースを立てます。
299f05fd94cc7a85e6bb9a7e6aad1f6d.png
gomikuzunameと名付けます。カラムは2。

そうすると
241c02e0635ed9bf7ef17b86030ae70b.png

こーんな感じに立ち上がるので名前の所を上から順にsyuzinIDとnameと名付けます。syuzinIDのカラムには右にスクロールすると出てくるA_Iにチェックを入れましょう。そしたら実行ボタンを押して保存します。

これでテーブルは完成しました。

左側のデータベース一覧から(表示がない場合は左上のマークをクリック）
これね32f2732148db8520ca7b071c783bee1f.png

さっき作ったデータベースのテーブルgomikasunameをクリックする。
db74d5d174d7440c3255f8ed0453e946.png

こんな画面になるので、この上のタブの挿入の所をクリックしてデータを入れていきましょう。
24472c7b44df5614b9e46ceec97522fd.png

nameの値に好きな人の名前を入れましょう！
c6ab34954b7cba2482e220f1a14f51ce.png
おっと、データ型を変えるの忘れてました。
構造のタブからnameのカラムだけを選択して編集することで、変えられます。Intからvarcharに変更しましょう。
0d48bd0be0c14b0eb5723ff807c3cead.png
今度は文句を言われませんでした。
そしたら、名前を入れて実行をします。
7b8932b8dfc6ae6c7deaa8390bec2f33.png

そうしたら、あとは同じ手順で好きなだけデータを入れてください。僕は友達の名前を3人入れました。
acb0c67d9bd9cf95af9b5590c8bd0c07.png
(↑は表示タブから確認できます。)

PHPファイルでデータベースからデータを読み出す

さっきのaho.phpを使うので、エディタで開きましょう｡
2e5359e2ab47f13e982cc24b468f6b74.png

パスワードの所は自分の設定したパスワードですので、このまま写していただければ問題ありません。(画像で申し訳ない)
そうしたら後はaho.phpを開けば・・・(http://localhost/aho.php)

f36a869aba935afbc933f6848ac120c1.png

ブラウザで表示できました。
多分細かな所はすごく省かれています。もし試して動かなかったら申し訳ありません。そういった苦情を見かけたら、やがて復讐にきれいな記事を書きます。
MakeITのadvent-calendar19日目にして内容が弱いのは申し訳ございません。破門は辞めてください、お願いします。正直PHP苦痛で・・・もう打ちたくないですよ・・・。

・・・あれ？PHPまともに打ってなくね？？

ここまでお読み頂きありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T02:05:54+09:00

あの日見た言語の名前を僕はまだ知らない。~XAMPPでローカルDB(初歩)~

初カキコ･･･ども･･･

俺みたいな専1でいきなりPHP触る、腐れ野郎他に、いますかって･･････いるでしょう。

なぜ僕がPHPをやることになったのか、聞かれてはぐらかしていましたが、恥ずかしさを捨て去り此処に記します。
※前置きが長くなります｡

過去編

当時、僕は小学生でした。
毎日niconicoをニコニコしながら見ていた10年前のある時、ふと目に留まった動画がありました。それは･･･

｢絶対バグらないR〇G制作勉強会｣

当時、小学生高学年だった僕は｢ウヒョー、ゲームだー｣と飛びつきました。
長々と淡々に作り上げた、今は亡き制作したゲームの数々は古いPCと一緒に封印されました。

~10年後~

実際にプログラミングでゲームを制作したことを覚えているものの、一体どうやって作っていたのか、なんの言語を使っていたのか。全て忘れてしまった僕｢確か･･･HPS･･･?SPH･･･?PHP･･･?なら触ったことあるわいな･･･｣等とコークハイを飲みながら友人と話した訳ですよ。

冬も訪れ寒くなってきたこの時期。私はPHPという2種3文字を見て、｢へ、チョロいぜ！！｣と内心思うわけですよ。そして懐かしくなってしまった僕は、久しぶりにniconicoを開きました。

お分かりでしょうか？

｢絶対バグらないR〇G制作勉強会｣

ここで取り扱っている言語がHSPという3種3文字のスクリプト言語なのです。

もうお分かりでしょうか？

そう、僕はechoではなく、mesを書いていたのです。

本題

まずは･･･

HSPとPHPを勘違いしていた腐れヤローな僕は、急いでパソコン叩きます。
webのスクリプト言語と聞いて、JavaScriptとPHPの違いの認知すらしていなかった哀れな僕は、恥ずかしさを捨て去り、Pr〇gateで吐きそうになりながら、〇ECH〇CADEMYとか侍〇ンジニアとかで0.5mm程PHPに対して理解を深めたわけです。

そして、目標を立てました。
それは、日々commitしている(PHPのせいで数日止まっている)ブラウザにローカルDBからデータを引っ張ってくる事を今回の最終目標としました。

XAMPP

いくら理解を深めても環境を用意しなければ、話は始まりません。SQLの成績だけは悪かった僕は、GUIにお助けを求めてザンプに頼りmarinaDBを立ち上げます。(楽)

まずは、XAMPPをダウンロードします。
1ce4f6a5bc04be582b2f277c74d21665.png

日本語サイト:https://www.apachefriends.org/jp/index.html

あとはまぁインストールして立ち上げていきます。
a935a872f04f6b1dd175a1865ca849d5.png

セットアップ

本来ならポート番号の確認とかやらなきゃいけないそうなんですが、思いつきでPHP触っている僕に死角はないので確認しません。

そしたら、ApacheとMySQLのStartボタンを押します。その後、
C:\xampp\htdocs
☝ファイルにアクセスして、ファイル内にPHPファイルを作成します。
a2239115483a2fe5d34362ded0a63d54.png
このファイルに適当なコードを書きます。
0c2c2c4a2eee23c8dfe74ca315854b4b.png

http://localhost/aho.php
ブラウザで開きます。
3a8563af5cd977a0a83731a47bfde65b.png

そういえば、XAMPPのアイコンを右クリックして、管理者として実行をしてください。ApacheとMySQLはチェックボックスにチェックを入れておいてください。9791f35f03f3bddda9b3d689dc8f3dbb.png

これでとりあえず、PHPを書ける環境は構築できました。

DBとの接続

XAMPPのShell(黒いとこ)をクリックします。

ターミナルが立ち上がりますので、mysqladmin -u root passwordを打ち込んでください。

したらば、登録するパスワードを聞かれるので、適当に打ち込む。
p2-4.png

そしたら、MarinaDB君と繋げてみます。mysql -h localhost -u root -pを打ち込むとパスワードを求められるので、さっき登録したパスワードを入れると

5011ff1c24955dcf18418f5604ef3a04.png

こんな画面がでたらOK。quitを打ち込んでMarinaDBとbyebyeしましょう。

パスワードの設定注意

このままだとPhpMyAdminからはぶりを食らいます。
C:\xampp\phpMyAdminにアクセスして、config.inc.phpの中身をちょっと変えます。
/* Authentication type and info */ってとこの$cfg['Servers'][$i]['password'] = '';
に設定したパスワードを入れます。
$cfg['Servers'][$i]['password'] = 'ここですよここ';

DBを利用する

利用するデータベースを立てる

ここまでくれば早いです。
まずは、利用するデータベースを立てましょう。XAMPPのMySQL欄の所にあるAdminをクリックすると、phpmyadminのページが開きます。
多分そのまま開くと思いますが、名前とパスワードを求められたら、名前の欄はrootと打ち込んでパスワードはさっき設定したものをいれてください。
その後、データベースのタブをクリックして以下を開きます。
b836313d6fddd9ba25f0df65934d35b1.png

とりあえずgomikuzuというデータベースを立てます。
299f05fd94cc7a85e6bb9a7e6aad1f6d.png
gomikuzunameと名付けます。カラムは2。

そうすると
241c02e0635ed9bf7ef17b86030ae70b.png

こーんな感じに立ち上がるので名前の所を上から順にIDとnameと名付けます。IDのカラムには右にスクロールすると出てくるA_Iにチェックを入れましょう。そしたら実行ボタンを押して保存します。

これでテーブルは完成しました。

左側のデータベース一覧から(表示がない場合は左上のマークをクリック）
これね32f2732148db8520ca7b071c783bee1f.png

さっき作ったデータベースのテーブルgomikasunameをクリックする。

こんな画面になるので、この上のタブの挿入の所をクリックしてデータを入れていきましょう。
e29aba188b17fda4ac7cc9aa418f4dba.png

nameの値に好きな人の名前を入れましょう！
(データ型を変えるの忘れてました。構造のタブからnameのカラムだけを選択して編集することで、変えられます。Intからvarcharに変更しておきましょう）

そしたら、名前を入れて実行をします。

そうしたら、あとは同じ手順で好きなだけデータを入れてください。僕は友達の名前を3人入れました。
272dbcdc9fc24702fbb9d62f6db27d5d.png

(↑は表示タブから確認できます。)

PHPファイルでデータベースからデータを読み出す

さっきのaho.phpを使うので、エディタで開きましょう｡

707fbc1757be967ebd44518195d7f068.png

パスワードの所は自分の設定したパスワードですので、このまま写していただければ問題ありません。(画像で申し訳ない)
そうしたら後はaho.phpを開けば・・・(http://localhost/aho.php)

6f74280589efdf77684151a6efcce106.png

ブラウザで表示できました。
多分細かな所はすごく省かれています。もし試して動かなかったら申し訳ありません。そういった苦情を見かけたら、やがて復讐にきれいな記事を書きます。
MakeITのadvent-calendar19日目にして内容が弱いのは申し訳ございません。破門は辞めてください、お願いします。正直PHP苦痛で・・・もう打ちたくないですよ・・・。

・・・あれ？PHPまともに打ってなくね？？

ここまでお読み頂きありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T01:06:21+09:00

stylusのsin,cos関数を使ってうんちたちをウェーブさせてみた

sinとcos

stylusではビルドイン関数が用意されている。
そのなかで、これ使い所ある？みたいなものもありますね?
その代表がsin(),cos()じゃないでしょうか。
sin(),cos()って聞くと波が思いつくので、波の形を作りたい時に使えそうです。
というわけでやってみます！

Let's Try!

今回はちょっとコードが長くなるのでhtmlはpugを使います。
上のボタンを押してもらうとうんちたちが波の形に動きます?
ボタンを押した時クラスを付けたかったので、そこはjsも書きました。
普通に書くとめんどくさいのでvueでサクッと書いてます。

See the Pen sin by petapetapeta (@petapetapeta) on CodePen.

ポイント

pug

pug(html)ではいっぱい同じような要素を作り、連番のクラスを振ります。
ここはvueでループさせてクラス振るように組んでも良かったですが、今回はpugのループで組みました。

stylus

こちらもループを使い、連番のクラスのpositionを計算して波の形にします。
横軸（left）は単純にループの数値にXpx掛ける。
縦軸（top）はループの数値とsinやcos使って-1~1の数値を計算しそこにオフセットを掛けたり足したりするとOKです。

vue

ulについたクラスによって、波の形を変えたいので、ここをバインドにして
buttonに@clickを入れてクラスを変更するようにします。
めちゃ簡単ですね?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-12-19T00:33:04+09:00

当番管理アプリで使ったドラッグ＆ドロップでテーブルの要素並び替え

この記事はニフティグループ Advent Calendar 2019の19日目の記事です。
昨日は @yukiex@githubさんのARMベースのEC2インスタンスを利用するでした。
私はAWSはまだまだ勉強中ですが、最近チームでもAWSを積極的に使おうという流れがきてます。AWSはサービス多すぎて、どんどん追加されて追いつけなくなりそうなので、今のうちに勉強しようと思います。（今からワンピースを追うようなものだな）

はじめに

Qiita初投稿! & ニフティグループ Advent Calendar 2019に参加します。

今年新卒入社したものですが、チーム内で新人含めたミニスクラムチームを作って、勉強も兼ねて、社内向けツールを開発していました。

そこで使ったjQuery UIを使ったドラッグ&ドロップについて紹介したいと思います。

こんなかんじのもの

qiita_prod.gif

社内向けの当番管理アプリです。Django + AWS Elastic Beanstalkで開発しました。
このアプリができる前はExcelで管理していたので、いろいろと面倒でした。
機能としては、web上で確認、管理できる他に、当番が近づいた日と交代したときにSlackに通知してくれます。

上のgifのようにドラッグ&ドロップで要素を動かして交代するのも個人的には売りなのですが、当番の交代はほぼないので、みんな使わないだろうな・・・。なので、ドラッグ&ドロップについて共有したいと思います。

他にも、スケジュール自動生成機能を現在開発中です。

jQuery UI ~動かすのは簡単~

最初はドラッグ&ドロップで実装したらかっこいいだろうなー、でも難しそうだなーと考えていたときに、先輩がjQuery UIを使えばできるのではないかと教えてくれました。

jQuery UIを使うと予想より簡単に要素を動かせることがわかったので、このツールを使うことにしました。

jQuery UI
https://jqueryui.com/
公式ページでは、実際に動かせるデモがついていて、ソースもみれるので、見てるだけでおもしろいです。

ただ単に要素を動かしてみるだけなら簡単です。
CDNを読み込ませて、要素に名前をつけて、その名前の要素は動くよって指定するだけです。

下は簡単なサンプルです。図形を動かします。
動く.gif

draggable.html
<head>
    <style>
        .draggable {
            width: 100px;
            height: 100px;
            background-color:green;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $(".draggable").draggable();
        });
    </script>
</head>
<body>
    <div class="draggable"></div>
</body>
</html>

その他いろいろあるので、気になる方は公式ページを見てみてください。

テーブルで要素並び替え sortable

上ではdraggableを使っていましたが、sortableというものを使うと、要素の並び替えなどもできます。

当初はsortableを使って一人ずつ要素を動かして、交代するように開発していました。しかし結果的に、バリデーションが複雑になりすぎて、後に紹介する交換型に乗り換えました。

sortableを使った、テーブルで要素並び替えの簡単なサンプルがこちらです。CSSの調整を省いているので若干デザインがずれてます。

一個ずつ.gif

sortable.html
<head>
    <style>
        .member span {
            border-width: thin;
            border-style: solid;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $('.connectedSortable').sortable({
                // このクラス間だけ相互移動できる。
                connectWith: '.connectedSortable',
            }).disableSelection();
        });
    </script>
</head>

<body>
    <div class="container">
        <table border="1" class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Area</th>
                    <th scope="col">Member</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td scope="row">今日</td>
                    <td>A</td>
                    <td class="member connectedSortable">
                        <span>いわかみ</span>
                        <span>はしうち</span>
                        <span>そりまち</span>
                    </td>
                </tr>
                <tr>
                    <td scope="row">明日</td>
                    <td>B</td>
                    <td class="member connectedSortable">
                        <span>みやさか</span>
                        <span>むらやま</span>
                        <span>たかさき</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

.connectedSortableというクラス名がある要素間で移動できます。

tdタグでなく、spanタグなのは、CSSで見た目を整える時に、枠線などいろいろずれてしまうので、結果的にspanタグを使うことになりました。bootstrapなどを使うならspanタグを使うほうがいいかも知れません。

交換型の移動に乗り換えるまで

とりあえず、一人ずつ移動して、交代する方向で進んでました。ただバリデーション&テストで新たなパターンがどんどん見つかり、チームのみんなも一番大変だったと言っていたくらいです。
また開発に携わっていない人に試してもらうと、やはり一人ずつ移動させて交代するのは分かりづらいとのことでした。

やはり、強制的にひゅっと交換できればいいなあと色々調べていると、ある記事を見つけました。
https://qiita.com/NickelCreate/items/8dd804279ea1eab75abe
まさにこれだ！というものでした。

開発当初はJSすら研修で触った程度でしたが、ある程度理解できるようになってきたので、テーブルでも使えるようチャレンジして、結果的にできたのでよかったです。

交換型のサンプル

交換.gif
sortableのサンプルで使ったテーブルを交換型の並び替えにしてみると、このようになります。
基本的には上の記事を参考にしていますが、そのまま流用できず、テーブルの要素を動かす用に変更する必要がありました。

できる限りコメントで説明しています。今の$(this)が何なのか意識しながらだと理解しやすいです。

大まかな説明では、ドラッグするときに交換元の要素の、位置と隣や親要素をもっておいて、ドロップするときに、その位置に合った要素と入れ替える感じです。

色や移動スピードは変えられます。jQueryUIのコツは要素のclassがアクションごとに変わることです。ドラッグしているとき、ドラッグしている要素を他の要素の上に来た時、他の要素がドラッグされたときなどいろいろ変化するので、アクションごとデザインなど変えたいときはclassを見てみるとわかりやすいです。

koukan.html
<head>
    <style>
        .member span {
            border-width: thin;
            border-style: solid;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        // メンバーの交代
        $(function () {
            // ドラッグ中のオブジェクト情報
            var $dragObj;
            var $prevObj;
            var $dragDefPosition;
            var $dragStartPosition;
            var $revert = true;

            $('.draggable span').draggable({
                // 画面外に要素を持っていったときにスクロールする
                scroll: true,
                // ドラッグ中の不透明度
                opacity: 0.8,
                // 要素の重ね合わせの順序。値が大きいほど全面
                zIndex: 10,
                // 交換せず要素が元の位置に戻るまでの時間 単位:ミリ秒
                revertDuration: 1,
                start: function () {
                    //ドラッグ開始時に座標保存
                    // $(this)はイベントが発生した要素
                    $dragObj = $(this);
                    // 移動始めの縦と横の位置
                    $dragDefPosition = $(this).position();
                    // prev()は今の要素の隣の要素を取得する　今持っている要素の隣
                    $prevObj = $(this).prev();
                    // trueを指定すると、ドラッグ終了時に、ドラッグ開始位置に要素が戻ります。
                    $revert = true;
                    // .parent()は親要素をとる ここでは$(this)を含むtdタグ
                    $dragStartPosition = $(this).parent();
                },
                revert: function () {
                    // droppableの後に実行されるので、droppable()内でfalseにして無効化
                    return $revert;
                },
            });

            $('.draggable span').droppable({
                drop: function (event, ui) {
                    // ドラッグ無効
                    $('.draggable span').draggable('disable');
                    // 元に戻さない
                    $revert = false;
                    // dropされた位置に元々いた要素をdropObjとする
                    $dropObj = $(this);
                    // 今持っている要素の位置をdropPosition
                    $dropPosition = $dropObj.position();
                    $dragObj.animate({
                        top: $dropPosition.top - $dragDefPosition.top,
                        left: $dropPosition.left - $dragDefPosition.left,
                    }, 200// 要素の移動の速さ 単位:ミリ秒
                        , function () {
                            $dropObj.animate({
                                top: $dragDefPosition.top - $dropPosition.top,
                                left: $dragDefPosition.left - $dropPosition.left,
                            }, 200// 要素の移動の速さ 単位:ミリ秒
                                , function () {
                                    //ドロップした時に元々いた要素の手前にドラッグしてきた要素を移動
                                    // .before 要素の前に()内の要素を挿入
                                    $dropObj.before($dragObj);
                                    // 交換時に位置調整と、色をつけて何が移動したかわかるようにする
                                    $dragObj.css({ 'top': 0, 'left': 0, 'background-color': '#FEE8E9' });

                                    // ドラッグ要素の元位置にドロップ要素を移動
                                    // $prevObj.lengthは要素の隣の要素の数
                                    // 移動元に要素があれば、その要素の後ろに追加
                                    if ($prevObj.length != 0) {//
                                        // .after() 要素の後に()内の要素を挿入
                                        $prevObj.after($dropObj);
                                    }
                                    // 移動元に要素が無ければ、移動元のtdタグに要素を追加
                                    else {
                                        // .prepends() 先頭に要素を追加する
                                        $dragStartPosition.prepend($dropObj);
                                    }
                                    // 交換時に位置調整と、色をつけて何が移動したかわかるようにする
                                    $dropObj.css({ 'top': 0, 'left': 0, 'background-color': '#FEE8E9' });
                                    //ドラッグ有効
                                    $('.draggable span').draggable('enable');
                                });
                        });
                },
            });
        });
    </script>
</head>

<body>
    <div class="container">
        <table border="1" class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">Date</th>
                    <th scope="col">Area</th>
                    <th scope="col">Member</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td scope="row">今日</td>
                    <td>A</td>
                    <td class="member draggable">
                        <span>いわかみ</span>
                        <span>はしうち</span>
                        <span>そりまち</span>
                    </td>
                </tr>
                <tr>
                    <td scope="row">明日</td>
                    <td>B</td>
                    <td class="member draggable">
                        <span>みやさか</span>
                        <span>むらやま</span>
                        <span>たかさき</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

【おまけ】テーブルのデータ取得

ドラッグ&ドロップで動かすだけでも楽しいのですが、
もちろんテーブルを入れ替えただけでは、管理はできません。入れ替えた後のデータを取得して、DB等で管理しなければいけません。

実際のアプリでは、JSONデータにまとめてPOSTして、受け取った側でDBに反映をしてました。

入れ替え後のデータの取得法のサンプルも紹介します。ここでは、ブラウザのconsoleで確認できるところまでです。

json.gif

大まかな流れとしては、find()を使ってテーブルの情報を１行ごと取得して、最後の状態がわかるように保持します。
データとして必要なのは、変更後の最後の状態です。
よって、行ごとの最新の状態を配列に入れていきます。
取得したデータは扱いやすいようにJSONに変換します。

取得するタイミングについては、ドラッグ&ドロップで入れ替わった後のドラッグ時とドロップ時の行を取得します。文で書くと分かりづらい（言い訳）のですが、とにかく細分化して動作を順に追っていくとわかると思います。

正直正しいやり方かわからないですが、一応共有します。

先程のサンプルに３箇所追加するとできます。

1. テーブルのデータを取得する関数を追加する。

<script> タグの中に１つ関数を追加します。

var get_data = {};
var latest_data = [];
var post_data = {};

// 変化した行のデータを取得し、json形式で保持
/* 大まかな流れ
- メンバーが変化した行のデータをget_dataに入れる
- latest_dataに各行の最新の状態のデータを入れる（同じ日付とエリアがある場合は上書きしていき、
ない場合は新規に追加)
- post_dataにlatest_dataをJSON形式にしたデータを入れる
*/
function createPostDate (row_data){
    var schedule_day = $(row_data).find(".schedule").text();
    var schedule_area = $(row_data).find(".area").text();
    // メンバーだけは配列に入れてからテキストにする
    var schedule_member = [];
    $(row_data).find(".member").children("span").each(function(i) {
        schedule_member.push($(this).text());
    });
    // latest_dataに入れるためのデータを連想配列（辞書型）に
    get_data = {date:schedule_day, member:schedule_member, area:schedule_area};
    // 同日かつ同エリアの場合(true)は上書きする（行の最新のデータを保持）
    var update_flg = false;
    for (var i=0; i<latest_data.length; i++) {
        if (latest_data[i]['date'] == get_data['date'] && latest_data[i]['area'] == get_data['area']){
            update_flg = true;
            latest_data[i] = get_data;
        }
    }
    // 同日かつ同エリアではない場合はlatest_dataに新しく追加
    if (!update_flg){
        latest_data.push(get_data);
        // post_dataをjson形式に変換
        post_data = {data: latest_data}
    }
}

2.次に要素の交換時にこの関数が呼べるようにします。

以下のように追加してください。
droppableの下の方です。

$('.draggable span').droppable({
〜〜〜
〜〜〜
〜〜〜
//ドラッグ有効
$('.draggable span').draggable('enable');
// この下に追加!!!!!!!!
// 変化があった行のデータを作成
// 移動先（ドロップした場所の行）
createPostDate($dragObj.closest('tr')[0])
// 移動元(ドラッグし始めた場所の行)
createPostDate($dropObj.closest('tr')[0])
// consoleで確認用
console.log(JSON.stringify(post_data,undefined,1));

3. 最後にtdタグに名前をつけます。

関数でclassの名前から、どのカラムの情報なのか判別して取得しているため、追加が必要です。
下のような感じで、classにscheduleとmemberを入れてください。
他にもある場合は同じように追加してください。

<td class="schedule" scope="row">今日</td>
<td class="area">A</td>
<td class="member draggable">
これでコンソールに出力されるはずです。

あとはPOSTするなりして、データを管理します。
ちなみにDjangoでAjaxでPOSTしましたが、結構癖がありました。トークンをつけてあげたり、JSの方でリダイレクトしたりと大変でした。

終わりに

ドラッグ&ドロップは意外に簡単にできることがわかりました。ちょっと動かせるだけでいい気分になります。
またそれぞれオプションでいろいろできるので、気になる方は見てみてください。
このアプリ開発で多く学べたので、協力してくださった方々には感謝します。

明日は@shin27さんです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧