わすれた.log

忘れては検索して、そしてまた忘れるその過ちを繰り返さない為に…

ざっくりとした コンポーネント思考の覚書

コンポーネント思考とはパーツのこと。

・ボタンなど小さいパーツを作っていく。
 パズルに似ているかも?
 それをひとつのCSS(SASS)セットでまとめる。

・小→大
 小さいパーツを組み合わせて、大きいものを作る。

・いいこと
 使い回しができる
 わかりやすい

・動き
 クラスを指定すると、スタイルが適用できる。
 Bootstrapとかみたいなもの

・だが
 デザインがそのように作られていないと意味がない。
 使い回しができることが強いのに、使い回しができないとなると、CSSが結局重たくる。

コンポーネントのまとめ方
 どれをパーツとして、どれをパーツとしないかは自由。
 パーツをもうすこしボタンからフォームとボタンなど大きくしていってもよい。
 最近は、ヘッダーを右と左でわけてコンポーネントだとか。

私はそもそも コ ン ポ ー ネ ン ト という単語が覚えられない。
身近な単語にひもずけることにした、梱包ネントと覚えることにした。


以下「続きを読む」は本気のうろおぼえ

続きを読む

主にWEBサイトの情報収集ツールとかのまとめのまとめ

これ知ってる?WEBの人なら押さえておきたいツール&サービス50選 - 死ぬまでWEB屋

この記事の内容が使えそうだったので、自分の使いたいところだけ引き出してメモ
記事主様、ありがとうございます。

主に使うと思ったものは情報収集、サイトをまとめたりするのに利用できそう。
既存ページからリニューアルの案件はとりあえず収集しないと頭で理解できないので…。

ここにメモしてない情報
 ・サーバー情報を得る
 ・WEB集客、コピーライティングツール
まだ自分には使わなそうだ。
それが使いたいというより、使う機会がほしい。

作る

驚くほどカンタン!無料ホームページ作成 | ペライチ
1ページだけHPを作成
何度こんなのあればいいとおもったか・・・

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
エクセル→

作業効率

Pomodoro timer
5分休んで、25分集中タイマー

勉強

Progate | プログラミングの入門なら基礎から学べるProgate\[プロゲート\]


ツールなんて「はぁ?」という感じだったが、時間に追い詰められて初めて大切だということを知るのでした。

Googleの日本語入力を入れた

自分のパソコンに何を入れたか、わからなくなってしまうので、メモックス

・入れ方参考サイト
Mac - Google 日本語入力(IME)のインストール - PC設定のカルマ

コンポーネント思考のBEMとやらをメモ

コンポーネント指向

commpone コンポーネント

直訳:コンポーネントとは、部品、成分、構成要素などの意味を持つ英単語
物、ブロック
<header>,<footer>,<section>,<content>と同じ
大カテゴリー

コンポーネント指向とは部品ごとに分けて、動くCSSのこと。
Classを当てはめるだけで適用される、CSS

参考サイト
これからのWebデザインは、コンポーネント化を意識しよう | Webクリエイターボックス

BEM

Block ブロック

コンポーネントと同じ意味、BEMではブロックという。

Element エレメント

Blockの子要素。複数ある時もある

Modifier

直訳:修飾語句
変形する物だけ使う。
例えば、新規の物はNEWとつけるとか。

参考サイト
BEM記法におけるElement/Modifierの付け方メモ - Qiita
http://qiita.com/usagi-f/items/b4e56e765384c49d5d04


これがわかっても、実際のコーディングでどうするのかが、お空の上です。

CSS3アニメとjQueryによるシンプルなスライドナビ

See the Pen CSS3アニメとjQueryによるスライドナビ by yachiru (@yachiru) on CodePen.

なぜそうなるのかはよくわからない。

css3のtransitionで動きを指定、動きの終わりはjqueryに切り替える。

むーcss3でtransitionで動きを指定して、hoverで動きの終わりを指定したりするのも見たが、jQueryの切り替えでもOK
戻るときも自動でやってくれるなんて
いまいち理解できぬ。

MovableTypeのカスタムフィールドがない

Movable Type version 5.2.13のカスタムフィールドが無いのです。
本当にないです。非常におかしいです。
f:id:yachirulog:20161218211359p:plain

特にレンタルサーバなどで自動インストールサービスを行っている場合は
 要注意。自分でMTOSをダウンロードしてきてインストールしましょう。

引用元
Sys.の小路 システムのあれこれ カスタムフィールドが使えない:MovableType or MTOSのメニューにカスタムフィールドが出てこない初期インストールのテンプレート選択に原因 カスタムフィールドを使うとブログにどんどんブロックを追加できます。
http://sys.rutile.pw/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84/

身に覚えがある…サーバーはminimというレンタルサーバーでサーバー会社が提供するツールでMTをインストール。

すっごく親切にマニュアルがあるし、とても楽にインストールできました。
レンタルサーバー★ミニム MovableTypeオープンソース設置ガイド
https://www.minim.jp/MTOS.php

自分でインストールするのだるいし、失敗したら余計めんどくさいと思って避けていたら、別の罠にはまる
楽をしようとしたら結局大変だったというありがちな落ち。

「Movable Type 5実践テクニック」という本

Movable Type 5実践テクニック
http://www.sbcr.jp/products/4797358834.html
をやっています。
サンプルがなんだか思い通りに動かないです。

chapter2でサンプルでエラー

自分はchapter2をアップロードしてウェブサイトのテーマを適用させようとしたら以下のエラーが出て、適用できませんでした。

テーマ警告

テーマの一部はウェブサイトに適用できません。1要素はスキップされます。
次の項目が適用できません: custom_fields (原因: 次の項目が見つかりません: commercial )

解決

サンプルフォルダの
/mt5bk2/themes/lifeblog_website/theme.yaml
の一部を変更したら適用はできました。
24行目

  commercial: 1.50s

コメントアウトしたら、警告は出ますが、適用はできました。

required_components: 
  actionstreams: 2.1
  # commercial: 1.50s

そのrequired_components: とは…

required_components
このテーマを利用するために、インストールされている必要があるプラグインを指定します。ハッシュ形式で、プラグインのComponent IDと、動作に必要なミニマムバージョンを指定します。プラグインとの依存関係が存在しない場合は省略可能です。

テーマの基本情報 : Movable Type ドキュメント
https://www.movabletype.jp/documentation/developer/theme/registry.html

プラグインということですかね、よくわからないですけど
とりあえずこれで適用はできました。
これで進めて先につまずくかはまだわからない。M

メモ

他の人も思い通りにいかないそうで
MovableType5実践テクニック - 初心者だけどPerlが大好き
http://d.hatena.ne.jp/trinity777/20110211/1297420494

css3のanimaがAndroidで動かない

Androidでのキーフレームアニメーション
一部が以下の内容でないと動かない

×動かない

div.sample {
animation-name: anime1;
animation-duration: 5s;
}

@keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

○動いた

div.sample {
animation-name: anime2;
animation-duration: 5s;
}

@keyframes anime2 {
from% {width: 50px; height: 50px; background-color: aqua;}
99.9%,to {width: 200px; height: 50px; background-color: blue;}
}