- 投稿日：2019-12-19T23:41:21+09:00
長すぎる文字列をCSSで...表示にする方法
長すぎる文字列をCSSで...表示にする方法
使用言語
cssのみ！
こんな時に使えます！
アプリ作成を際にとても長い文章を表示しなければならず、ビューが崩れてしまったことはありませんか？
ビューが崩れてしまうくらいなら一部だけ文章を表示するだけにしたい...そんな時に使います試しに使ってみましょう！
以下のような文章があったとします
例では真っ白な画面に文字を表示させているだけですが、凝ったビューを作る際はこのような長い文章が邪魔になってしまうことがあります
しかし、この文章を以下のように表示させることができます！
やりかた
とても簡単です！
...の表示に変えたいクラスに対して以下のcssを設定するだけ！（.targetです）
この４つの記述を組み合わせることで...表示を実現できます
widthの値を変えることでどこから...表示にするかも変えられます試しにwidthを70pxにしてみると...
仕組み
なぜこの記述で非表示にできるのでしょうか？
１つずつ順番に見ていきましょう①
overflow: hidden;
これで、はみ出した文字を非表示にできます
しかし、はみ出したorはみ出してないはどこで判断するのでしょうか？②
width:;
横幅を指定します widthで指定した値よりもはみ出てしまうとoverflow: hidden;が適用します③
text-overflow: ellipsis;
はみ出てしまった要素の表示方法を指定します ellipsisにするとはみ出た要素を...で表示するようになります！④
white-space: nowrap;
改行を半角スペースに置き換えます
一見...表示には関係ないように思えますね
①〜③だけで...表示は実現できるように思うかもしれません なぜwhite-space: nowrap;が必要なのでしょうか？
試しにwhite-space: nowrap;を削除した表示を見てみましょう
そうなんです！
widthの幅で勝手に改行されてしまいます
はみ出るよりも改行が優先されてしまうので...表示に出来なくなってしまいます これを防ぐためのwhite-space: nowrap;です！フィードバックをください！
私はプログラミングの勉強を始めたばかりでアウトプットのために記事を書いています
この記事で分かりにくかったところや今回紹介した方法よりももっと良い方法があれば教えてください！
- 投稿日：2019-12-19T20:51:07+09:00
初心者によるプログラミング学習ログ 188日目
100日チャレンジ188日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
188日目は
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) December 18, 2019
188日目
udemyでwebサイトコーディング
同じく、bootstrapもちょっとやった#100DaysOfCode #早起きチャレンジ#駆け出しエンジニアと繋がりたい
- 投稿日：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アプリケーションを簡単に開発できるようにする骨組みのこと。
- 投稿日：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 開始時と終了時は、かなり緩やかに変化します。
- 投稿日：2019-12-19T16:28:06+09:00
box-sizingで表示崩れを解決
- 投稿日：2019-12-19T14:48:53+09:00
backgroundの詳細設定
app.cssbackground { 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背景画像全体が見える
- 投稿日：2019-12-19T14:48:53+09:00
backgroundの詳細設定とショートハンドの使用
app.cssbackground { 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背景画像全体が見える
- 投稿日：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 による要素の固定
absoluteによる要素の固定は赤い丸の点
左上を起点としているので、left: 50%Top:50%ではこの位置になる。
これではBox要素に対して上下中央ではないので、app.csstransform: translate(-50%, -50%);
translate(X方向の距離, Y方向の距離)
translate()関数では、X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。[tx, ty]
translateX(X方向の距離)
translateX()関数では、X方向の距離で移動を指定します。
**`translateY(Y方向の距離)
translateY()関数では、Y方向の距離で移動を指定します。
- 投稿日：2019-12-19T13:53:26+09:00
Google Fonts を使ってみよう
はじめに
font-family、習いました。
でも、習ったところでfont-familyに何が指定できるのかわからないし、どうしたらそれを調べられるかわからないぞ！そんな人のためにまずGoogle Fontsを紹介したいと思います。
Google Fontsのサイト
使い方
①サイトを開きます
こんな画面が出てくるよ
さてここからフォントを探す！と言ってもどっからどう探せばいいか分からない…。
②まずは日本語フォントを調べてみる！
タイトルが日本語なら、そこ変えたいよね？！
左上にある「Language」から「Japanese」を探して選択します。
すると…日本語出てきたーーーーー！
まだ8種類と少ないですが、それでもデフォルトよりはいいはず！！！
ということで、左上の「Noto Sans JP」を使ってみましょう。③フォントを選ぶ
使いたいフォントのフォント名が書いてある右に赤い「＋」のボタンがあります。
そこをクリック！すると右下にこんなものが現れた！！！
「1 Family Selected」という黒いやつ。
さてここをクリックすると。
なんか出てきた。
でもこれが出ればもうあとは少しだけ。④フォントを導入するための魔法の式
赤く「STANDARD」と書いてある下に色々コードが書いてあります。
この<link hraf〜〜から始まるコードをコピーします！！これね
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
そして自分が作っているWebサイトの<head></head>の中に貼り付ける。
これに
こう！
これで導入は完了。
⑤最後にCSSを変えるよ
さっきのコピーしたコードの下にある「Specify in CSS」の下にあるコードをコピー！
font-familyってついてるからどこにこれを貼り付ければいいかはもうわかるよね？h1のフォントを変えたかったらこう！！！
⑥完成ーーー！確認しよう！
これが
こう！
全然違う！！！
終わりに
みんないろんなフォントを調べてみてね。
英語だけならとにかくいろんなフォントがあるので試してみて欲しいーーーー！
- 投稿日：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.
- 投稿日：2019-12-19T12:44:25+09:00
CSSにおけるシャドウ効果の影
対象読者
- 「このシャドウはCSSで再現可能かな？」とお悩みのデザイナーの方
- 「このシャドウどうやってCSSで再現しよう、、」とお悩みのフロントエンドの方
注意
- Sass芸(Sassの@for等を利用して、複雑な形を再現したりする行為)ではなく、無理なく使える範囲を狙います
- IEには疲れたのでこの記事中では存在しないことにします
- 作例はPug + Stylusで作成しています
htmlの要素にシャドウをつけたいという欲求
に対する一番シンプルな答えは、CSSのbox-shadowプロパティですね。
これを利用することで、要素のフレームの周囲にシャドウ効果を追加できます。ただ、これはCSSの中でも扱いが難しいプロパティかと思います。
苦い顔をしてしまう方も多いのではないでしょうか？box-shadowの憂鬱
というのも、Adobe XDなど、デザインツールは矩形でなくとも様々な効果を設定することができるためです。
一方のCSSはボックスモデルに基づき、矩形の領域をベースにスタイリングを行いますから、デザインの再現に無理が発生してきます。
その際、box-shadowは、同じくボックスモデルの周囲を装飾するborderと比べ、左右上下での調整が効きにくく、綺麗に表現するには工夫が必要な場面が出てきがちです。
CSSにおけるシャドウ効果は一筋縄ではいかない、、、そう、
影があるということです。
※個人の感想ですこの記事では、そんなシャドウ効果の一端をご紹介します。
Lv.1 矩形の要素
box-shadowを設定するのみです。See the Pen Lv1.box-shadow by haradabox (@haradabox) on CodePen.
問題ないですね。
Lv.2 凸形の要素（タブ風UI）
タブ選択で表示するコンテンツの切り替えができるUIを考えます。
選択しているタブと、コンテンツの周囲をシャドウで囲いたい、、、という欲求です。ここからややこしくなってきます。
まず下記をご覧ください。
無邪気に
See the Pen Lv2.box-shadow--faild by haradabox (@haradabox) on CodePen.
タブ要素、コンテンツ要素共に周囲にシャドウを付けていますが、タブ要素にコンテンツ要素のシャドウが被ってしまっています。
これではいけませんね。
少し考えて
擬似要素とz-indexを利用し、被っているシャドウを消しました。
.box position: relative; z-index: 0; &__tab-item &.--current position: relative; box-shadow: 0 1px 3px 0 #333; background-color: #fff; // コンテンツのシャドウを隠す &::after { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; content: ""; background-color: #fff; z-index: 3; } &__body position: relative; z-index: 2; background-color: #fff; box-shadow: 0 1px 3px 0 #333;See the Pen Lv2.box-shadow by haradabox (@haradabox) on CodePen.
よろしそうですね。
Lv.3 凹形の要素（チケット風UI）
お次は凹形の要素です。
チケットのような、切り欠きのある形を再現します。惜しい
See the Pen Lv3.box-shadow--failed by haradabox (@haradabox) on CodePen.
丸い切り欠きの表現に、before擬似要素 + borderを使いました。
それっぽくはありますが、もうちょいいけそうですね？それなりに
before擬似要素ではinsetのbox-shadowで円形のシャドウを作成します。
そして、背景色のbox-shadowを加えた、after擬似要素で、不要な箇所をマスクします。See the Pen Lv3.box-shadow by haradabox (@haradabox) on CodePen.
よりそれっぽくなりました。
Lv.4 ギザギザ形の要素（アイコンと一体に）
Sass芸縛りプレイなので、rotateとskewを駆使して、、、という案は無視します。
となればSVGなんですが、、、どうやってシャドウをつければいいのだっけ？
drop-shadowはボックスモデルに対して影がつくので、、、
See the Pen Lv4.box-shadow--svg-fail by haradabox (@haradabox) on CodePen.
まあこうなりますよね。
filterを使う
SVGには強い味方、filter: drop-shadowがあります。
表示したいSVGを前面に、シャドウ用のSVGを背面に配置し、シャドウで囲みたい部分（コンテンツなど）を挟み込みます。
また、filter: drop-shadowのプロパティはbox-shadowとは異なるため、数値は微調整します。.box position: relative; z-index: 0; // シャドウが親要素の後ろに入り込まないように付与 &__inner position: relative; border-radius: 8px; padding: 50px; background: #fff; box-shadow: 0 1px 3px 0 #333; z-index: auto; // 指定なしでもOKですが、回り込ませる対象としてわかりやすいかなーということで付与 &__icon width: 100px; position: absolute; top: 0; left: 0; transform: translate(-30px, -30px); &.--shadow z-index: -1; // シャドウ用のSVG画像を.box__innerの後ろに回り込ませる .svg-icon.--shadow filter: drop-shadow( 0 1px 1px #444); // filterでSVG画像に沿ったシャドウを付与See the Pen Lv4.box-shadow--svg by haradabox (@haradabox) on CodePen.
私は満足です。
おまけ: ロングシャドウ
完璧ではないのですが、お蔵にするには勿体無いので、記載しておきます。
それがこちらです
.box position: relative; z-index: 0; &__inner position: relative; background: #fff; z-index: auto; &::before content: ""; position: absolute; top: -1px; left: 0; width: 300px; height: 100%; transform: skew(0, 45deg); transform-origin: 0 0; background: linear-gradient(90deg, rgba(200,200,200,1) 0%, rgba(255,255,255,1) 100%); z-index: -1; &::after content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 300px; box-sizing: border-box; transform: skew(45deg); transform-origin: 0 0; background: linear-gradient(180deg, rgba(200,200,200,1) 0%, rgba(255,255,255,1) 100%); z-index: -1;See the Pen extra.long-shadow by haradabox (@haradabox) on CodePen.
before擬似要素/after擬似要素でシャドウを作成します。
それぞれがシャドウを付与したい要素のheight/widthに依存し、skewで歪めることで汎用性のあるシャドウにしています。グラデーションの角度調整（グラデーションの終端が要素の形になってしまう)が課題ですね。
まとめ
シャドウ効果はこんな感じで工夫が求められることが多いです。
しかしながら、裏を返せば工夫の発揮しどころ、実装を楽しめるポイントでもあります。「他にもこんなシャドウ再現できまっせ」、ありましたら是非コメントをば！
- 投稿日：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; }
overflow: hiddenで非表示に
app.css.example { width: 50px; height: 50px; overflow: hidden; background: skyblue; }
- 投稿日：2019-12-19T12:10:33+09:00
最高のFormを探せ!! ? CSSフレームワークのFormコンポーネントを比較してみる
Misoca+弥生 Advent Calendar 2019 の20日目の記事です
EFO（フォーム最適化）という領域もあるとおりwebデザインにおいてFormはコンバージョンに直結する重要な要素です。そのフォームを手軽にデザインする上欠かせないのがCSSフレームワークだと思います。
今回は主要cssフレームワーク7選をフォームの視点で比べてみました! ?
Bootstrap4
たぶん誰しも一度は触ったことあるCSSフレームワークの王様。
これぞBootstrapというフォーム。めっちゃ見たことある感じです。See the Pen WNbRPMY by ryo (@kawamataryo) on CodePen.
Foundation
bootstrapと双璧をなす人気のフレームワーク。EmailのCSSフレームワークもあります。
スタイルの指定はbootstrapよりわかりやすく、タグも深くならず快適だなとは思いました。
デザイン的にもノーマルですね。See the Pen GBYbBy by ryo (@kawamataryo) on CodePen.
Tailwind CSS
良い!!
他とは全く違うUtility Firstの思想で作られたCSSフレームワーク。
Utilクラスを組み合わせて書くのでどうしてもクラス指定は大量になりますが、とても自由にデザイン出来て最高です。
Formの見た目もこれが一番好きですね。See the Pen PowWLMo by ryo (@kawamataryo) on CodePen.
Semantic UI
セマンティックなマークアップでページを作成できるCSSフレームワーク。
クラス指定が意味合いなので、直感的に指定できます。ただネストが深くなりがちな気もしました。
デザインはとてもバランス良いなと思いました。See the Pen semantic ui Form by ryo (@kawamataryo) on CodePen.
Bulma
Flexboxが秀逸なフレームワークです。
こちらもclass名がコンポーネント単位で直感的に指定できて書き味はすごく好きです。See the Pen jpeOdg by ryo (@kawamataryo) on CodePen.
Materialize
マテリアルデザインのCSSフレームワーク。
他と比べるとかなり異色ですね。若干構成複雑で、余白も微妙なところあるのですが、ちゃんと作ればGoogleぽい良い感じのFormが出来そうです。See the Pen material by ryo (@kawamataryo) on CodePen.
UIKit
かなり機能豊富なCSSフレームワーク。
こちら今回始めて使ったのですが、Documentも充実していて分かりやすいですし、デザインぱりっと決まるので良いですね。See the Pen UIKit form sample by ryo (@kawamataryo) on CodePen.
最後に
以上「最高のFormを探せ！cssフレームワークのFormコンポーネントを比較してみる」でした。
記事を書く前はもっと各フォームの見た目違いがあると思ったのですが、割と同じようなデザインでしたね。
ただ細かい点やマークアップの書き味は大分違うので、好み分かれそうです。
CSSフレームワーク選定の一助になれば幸いです!明日21日の Misoca+弥生 Advent Calendar 2019はshoko_yokoyama さんです！
- 投稿日：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]
こんな感じで、現在表示されているページの見出し構造が表示され、簡単にチェックできる。ワンクリックでチェックできるので、使わない手はない。
なお、Title、Descriptionなどページの情報を一括でチェックできるので、とりあえずこれで一気にチェックするといいかも。下記のブックマークレットでもチェックが可能。
タイトルや見出しの確認など、SEOに便利なブックマークレットTitle,Description,Keywords
TDKと言われる3つですが、SEOに重要とされており、簡単に言うと下記の情報を検索エンジンに教える。
- ページタイトル
- ページの内容
- ページが含むキーワード
これがしっかり入っているかを確認する。
参考サイト
TDK(title,description,keyword)とは？SEO・サイト制作基本のキこれも先ほどの拡張機能で確認できる。
こんな感じ。
SEO周りを調べるChrome拡張機能 [SEO META in 1 CLICK]
alt属性
- alt属性が入っているか
- 英語サイトの場合、英語で入力されているか
これのつけ忘れで、クライアントから怒られることがしばしば。。。
細かい所なのでチェックが漏れがち。これも実はSEO META in 1 CLICKで確認できる！便利！
こんな感じで、画像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でしょ！」という気持ちで納品すると、後で修正の嵐になるので注意。
「納期が許す限りは」ピクセルパーフェクトで作り、まずは完成度８０％くらいで納品し、ピクセルパーフェクトに仕上げていくのもありかなと思う。
レスポンシブ（水平スクロール）
- スムーズにレスポンシブ対応できているか
- 水平スクロールがでないか
レスポンシブはコーディングしながら気をつけているポイントだと思うので多分大丈夫なはず。
でも、納品前には必ずチェックしよう。できれば実機で確認したい。
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
こんな感じで、拡張機能のアイコンをクリックするだけで、IEでの表示イメージを見ることができる。
JavaScriptの挙動（コンソールエラー）
- 色々と実装しているJavaScriptの動きは正しいか？
- コンソールにエラーが出てないか？
マルチブラウザで確認する。
ライブラリを入れている場合は、それらが正しく動作しているか確認しよう。特にIEでJSが動いてない！！ってことがよくあったので注意。
HTML閉じタグ忘れチェック
HTMLコーダーがHTMlタグを正しく書けてないって、どうなの？
後述するW3Cでもチェックしてくれるかもですが、Chrome拡張機能でサクッとチェックが可能なので、これだけでも最低限はやっておきたい。
W3Cチェック
W3CはHTMLやCSSの標準規格。規格にあった正しい書き方ができているかをチェックする。
僕としては、こっちを使ってます。
英語ですが、おかしい部分はエラーで教えてくれるので、その部分を見ていけばオッケー
※この規格に沿って書いたからと言ってSEO的に有利なのかどうかは不明。
まとめ
とりあえず思いつくままにまとめてみると１5項目ありました。
納期に迫られている中で、品質の高い成果物を納品するのは大変ですが、それが信頼につながって、また新たな仕事を運んでくれます。
プロの仕事ならしっかりと自分の仕事をやるべきで、コーダーであってもプログラマーのようなCSS設計の意識と、納品前のチェック体制を整えることが理想だと考えました。
他にも「これはやっておくべきだろ！！」ってのがあれば教えてください。
今回紹介したツール
- テキストの差異を調べるdiff
- フォント周りの設定を調べるChrome拡張機能 [What Font]
- カラーの設定を調べるChrome拡張機能 [ColorPick Eyedropper]
- SEO周りを調べるChrome拡張機能 [SEO META in 1 CLICK]
- alt属性の一覧を表示するブックマークレット
- デザインとサイトの整合性を調べるChrome拡張機能[PerfectPixel]
- HTML閉じタグをチェックするChrome拡張機能[HTMLエラーチェッカー]
- W3C規格チェック｜HTML
- W3C規格チェック｜CSS
参考リンク
- 投稿日：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を入れてクラスを変更するようにします。
めちゃ簡単ですね?
- 投稿日：2019-12-19T00:33:04+09:00
当番管理アプリで使ったドラッグ＆ドロップでテーブルの要素並び替え
この記事はニフティグループ Advent Calendar 2019の19日目の記事です。
昨日は @yukiex@githubさんのARMベースのEC2インスタンスを利用するでした。
私はAWSはまだまだ勉強中ですが、最近チームでもAWSを積極的に使おうという流れがきてます。AWSはサービス多すぎて、どんどん追加されて追いつけなくなりそうなので、今のうちに勉強しようと思います。（今からワンピースを追うようなものだな）はじめに
Qiita初投稿! & ニフティグループ Advent Calendar 2019に参加します。
今年新卒入社したものですが、チーム内で新人含めたミニスクラムチームを作って、勉強も兼ねて、社内向けツールを開発していました。
そこで使ったjQuery UIを使ったドラッグ&ドロップについて紹介したいと思います。
こんなかんじのもの
社内向けの当番管理アプリです。Django + AWS Elastic Beanstalkで開発しました。
このアプリができる前はExcelで管理していたので、いろいろと面倒でした。
機能としては、web上で確認、管理できる他に、当番が近づいた日と交代したときにSlackに通知してくれます。上のgifのようにドラッグ&ドロップで要素を動かして交代するのも個人的には売りなのですが、当番の交代はほぼないので、みんな使わないだろうな・・・。なので、ドラッグ&ドロップについて共有したいと思います。
他にも、スケジュール自動生成機能を現在開発中です。
jQuery UI ~動かすのは簡単~
最初はドラッグ&ドロップで実装したらかっこいいだろうなー、でも難しそうだなーと考えていたときに、先輩がjQuery UIを使えばできるのではないかと教えてくれました。
jQuery UIを使うと予想より簡単に要素を動かせることがわかったので、このツールを使うことにしました。
jQuery UI
https://jqueryui.com/
公式ページでは、実際に動かせるデモがついていて、ソースもみれるので、見てるだけでおもしろいです。ただ単に要素を動かしてみるだけなら簡単です。
CDNを読み込ませて、要素に名前をつけて、その名前の要素は動くよって指定するだけです。下は簡単なサンプルです。図形を動かします。
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の調整を省いているので若干デザインがずれてます。
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すら研修で触った程度でしたが、ある程度理解できるようになってきたので、テーブルでも使えるようチャレンジして、結果的にできたのでよかったです。
交換型のサンプル
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で確認できるところまでです。
大まかな流れとしては、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さんです。
