Firefox で Placeholder をカスタマイズする時、
:-moz-placeholder ではなく ::-moz-placeholder を利用する

社内のコーディングルールをそろそろ決めなければ、、、

※ この記事はパブリックなメモです。

1 HTMLコーディング

 

HTMLバージョン

基本的にHTML5を使用する。

スペース

コードのインデントはスペース2つで表現する。

 

HTML タグの命名

必ず小文字で記述するものとする。

ID、Class の命名

IDについては、基本的には使用しないものとする。ただし、JavaScript によってなんらかの理由により使用せざる得ない場合は例外とする。

class の命名には、BEM 記法を採用する。

ページに依存する命名 ( .home-banner, .about-contents 等 ) は極力さけ、コンポーネント単位での設計を心がける。

画像の命名

画像の命名については、以下の通りとする。

1. 接頭辞として、Block を利用する
2. 次に、Element を指定する
3. 最後に数字を付与する。10未満の場合は、接頭辞として0をつける。
4. 各単語の接続詞としては、- (ハイフン)を利用する。

例

profile-text-01.jpg

profile-bg-01.png

 

テンプレートエンジンについて

特別な理由がない場合には Jade を採用する。なお、極力HTMLテンプレートエンジンを利用してマークアップすることを心がける。

2. CSS

ファイル命名

基本的に、メインとなるスタイルシートを記述するファイルは style.css と命名する。

ファイル分離について

CSSファイルは一つにまとめること。

@import によるCSSファイルの読み込みは

 

2013/11/11 ~ 14日に読んでおお！と思ったweb関連記事まとめ。

1. ink

レスポンシブなEmailを作成できるフレームワーク

• tool 、Framework

2. Glyphs

アイコンPSD

http://glyphs.bulb9.com/

3. SVGeneration

SVGをGUIで。Data URLでの取得も可能。

http://www.svgeneration.com/

4. OpenNote

Evernote、 MicroSoft OneNoteライクなwebアプリケーションを作成できる。
(ライセンスはどうなのか知らない。)

http://stardrive.us/OpenNote/index.php?folderID=7399&noteID=6936

5. Free vectors icons for download and Icon font | Flaticon

Photoshopのプラグインまで用意してあるフラットなiconセット。

http://www.flaticon.com/

6. Formoid – Beautiful CSS Form Generator

お問い合わせフォームを簡単に作成可能なアプリ。無料版だとformanoidの表記がフッターに入る。

http://formoid.com/

7. Typeform

ダイナミックなお問い合わせフォームの構築ツール。無料プランあり。

https://www.typeform.com

8.Dropzone.js

ドラッグアンドドロップでアップロード出来るエリアを表示するjavascriptライブラリ。

Dropzone.js : http://www.dropzonejs.com/

WordPress 3.9 から追加された「Widget Customizer」でのTips。

「Shift + クリック」 で、ウィジェットをクリックすると、カスタマイザーの方でウィジェットが開く。

ウィジェットにマウスホバーすると、フロントのウィジェット部分がフォーカスされる。

ソースは

wp-includes/class-wp-customize-widgets.php  
wp-includes/js/customize-preview-widgets.js  

あたりを参照。

テーマ関係なく動作するはずですが、テーマによってはバッティングするかも。

それだけ。

---

投稿内の画像を自動で遅延ロード、最適化、リサイズ、キャッシング。
さらには、画面の解像度までみて判断してくれる優れもの。

WordPressでレスポンシブwebデザインを実装するならもはや必須的なプラグインだと思います。

遅延ロードというのは、画像が表示領域に入るまでは別の画像 ( 極端にサイズが小さいもの 、透明の画像とか) を表示しておいて、表示領域に入った際に読み込むというテクニックです。

もちろん、レスポンシブwebデザインでなくても使えますので、ぜひともご参考にー。

BJ Lazy Load

HTML5名古屋 #10で20分程お話しをさせていただきました。

前に軽くまとめていたのですが、今回発表者が少ないということで。

かなり簡素な作りになってますｗ

情報収集に関しては人それぞれ方法があると思うので一概には言えないですが、

僕の場合はこんな感じです。

こもりまさあきさんのSNSフィードも情報がものすごく早いので、
是非！

https://www.facebook.com/proteanim?fref=ts

HTML5名古屋 #11 で「デザインツールのあれこれ」というテーマでLTをしました。

スライド内で紹介できなかったものも多々あったので、
(非常に) 簡単に書き出してみました。

Photoshop Plugin

1. BlendMeIn

ベクター素材をPhotoshop内で表示。ライセンスにはご注意を。

→ BlendMeIn

2. Flat Icon

フラットなアイコン素材をPhotoshop内でクロール・挿入。

→ Flat Icon

3. Ink

幅・高さ。Opacityといったのレイヤー情報を「_Ink」ディレクトリ内に、レイヤーとして書き出し。

→ Ink

4. Socail Kit

FacebookやTwitterなどのPSDテンプレートを用意。

→ Socail Kit

5. Zeick

選択したレイヤー(文字・シェイプなどのベクターに限る)を、ワンクリックでSVG書き出し。

→ Zeick

6. Random user generator

ランダムなユーザー画像・情報を表示・挿入可能に。

→ Random user generator

7. SUBTLE PATTERNS PHOTOSHOP PLUGIN

高品質なパターン素材をPhotoshop内でクロール・挿入。

→ SUBTLE PATTERNS PHOTOSHOP PLUGIN

8. PNG HAT

選択したレイヤーをBase64や、png・2xでの書き出しが一瞬で可能に。

→ PNG HAT

9. LAYER CONTROL

複数のレイヤー・グループのリネームや、使用していないエフェクトの削除

→ LAYER CONTROL

10. render.ly

命名規則に従うことで、一つのPSDファイル内でページを分けて書き出しできるように。

→ render.ly

11. composer

複数のレイヤー・グループ操作が可能に。

→ composer

12. Renamy

先に紹介したLAYER CONTROLより、柔軟なリネームが可能です。
また、よく使われる単語をサジェストで表示してくれます。

→ Renamy

13. Slash

名前・キャラクターの予想通り、スライスのためのphotoshopプラグインです。
しかし、自動で連番をつけたり、ディレクトリ階層を再現したりと他のスライス拡張ツールよりも多機能
。

→ Slash

14. Transform each beta

photoshopの時間がかかる作業の一つである、レイヤーのリサイズがしやすくなるスクリプトです。
各レイヤーの起点はそのままに、大きさだけリサイズできます。

→ Transform each beta

---

For Sketch.

• https://gist.github.com/bomberstudios/7694497 : 先人の方のGistを参考にして下さい。

---

https://gist.github.com/1shiharaT/9368608#file-design-tool-md

---

普段僕はVimかSublime Text 3を主力のエディタとして使用しています。

特にSublime Textでは手軽に拡張できるPackage Control という機能があります。

先日、Package Control – the Sublime Text package managerをしらーと見ていると、おもしろそうなプラグインを発見したので、
感想を書き綴ります。

Sublime TextからEvernoteへ

元々、SublimeText2用にプラグインがあったのですが、
そこからフォークしてフォークして作られたプラグインです。

https://github.com/bordaigorl/sublime-evernote

SublimeText3からEvernoteへマークダウンを保存できるというプラグインなのですが、
なぜエディタは人をそこまで突き進めるのか謎ですねホント。
別に他のでいいんじゃねと。

上記のgifでもちょっとでてますが、タグやノートの設定なども可能です。

まぁでも、便利ですね(ほっこり)。
作成していただいた方に感謝です。

ちなみに

Vimではもっと高機能なevervimがあります。
うーむ。すごい。

metalsmith という静的サイトジェネレーターを見かけたのでメモ。

http://www.metalsmith.io/

EVERYTHING IS A PLUGIN

すべてがプラグインである。

このキャッチフレーズに惹かれてちょっと試してみました。
金物細工師って意味も好きですね。
何よりメタル。
以前メタルにハマっており、slipknotとか、Dragon Forceとかメロメロでした。

そんなmetalsmithですが、
ベースはnode.jsで書かれております。

1. ファイル階層を準備します。

非常にシンプルな静的サイトジェネレーターのため、ファイル構造などは自信で設定します。

今回は下記の階層を想定し、jekyllみたいなことをやってみます。

demo /
    _layouts/
        index.html
    _posts/
        post01.md
    _site/

_layout フォルダにはラップするhtmlをいれ、
_posts フォルダにはマークダウンを記事として保存します。
_site フォルダには構築後のhtmlファイルが入るとします。

2. package.jsonの用意

まずは package.json を書きます。
metalsmith本体と、プラグイン郡を用意します。

{
  "name": "metalishihara",
  "private": true,
  "dependencies": {
    "metalsmith-watch": "0.0.2",
    "metalsmith-sass": "0.1.1",
    "metalsmith-drafts": "0.0.1",
    "metalsmith-templates": "^0.1.0",
    "metalsmith-markdown": "^0.2.1",
    "metalsmith-permalinks": "^0.1.0",
    "swig": "^1.3.2",
    "metalsmith": "^0.2.3",
    "metalsmith-sass": "~0.1.1"
  }
}

そのままコマンドでインストール。

$ npm install 

これで、metalsmithをはじめとするパッケージ郡がインストールされます。

3. metalsmith.jsonの用意

metalsmithでは、javascriptを書いて構築する方法と、
metalsmith.json という設定ファイルを作り、コマンドから構築する方法の２つがあります。
今回はめんどくさいので
同じ階層に metalsmith.json を用意します。

{
  "source": "./_posts",
  "destination": "./site",
  "metadata": {
    "title": "hogehogehoge",
    "description": "hogehogehogehogehogehoge!"
  },
  "plugins": {
    "metalsmith-watch": "*.md",
    "metalsmith-drafts": true,
    "metalsmith-markdown": true,
    "metalsmith-sass": {
        "outputStyle": "expanded"
    },
    "metalsmith-permalinks": {
      "pattern": ":title"
    },
    "metalsmith-templates": {
      "engine": "swig",
      "directory": "_layouts"
    }
  }
}

jsのテンプレートエンジンもswigとかhandlebarsjsとかお好きなのをどうぞ。

まぁ、デモなのでいろいろ適当に書いていきましょう。

_layouts/post.html

<html>
<head>
  <title>これは投稿です。</title>
</head>
<body>
  <h1>{{ title }}</h1>
  <time>{{ date | date('Y-m-d') }}</time>
  {{ contents | safe }}
</body>
</html>

_posts/post01.md

---
title: 最初の投稿
date: 2012-08-20
template: post.html
---

# これは最初の投稿です。

* これはリストですこれはリストです
* これはリストですこれはリストです
* これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです
    * これはリストですこれはリストです

    * マークダウンでかけます。
    * 自動でコンパイルもかけてくれます。

そして、

$ node node_modules/.bin/metalsmith

というコマンドを打つと、
_siteフォルダ内に書き出ししてくれます。

…… 。
上記のほとんどは examples内にまとめられていますので、参考にしてください。

感想

node.jsでのコーディングにおいて参考になるかなと思いました。
( metalsmith.ioのソースも公開されています。 )

バリバリコード書いて、カスタマイズするにはむいているのかなと思いますが、敷居は少し高いのかなと思いました。

これからですかね。

PageLayersとSlicy。

今後の作業が激変しそうなmacアプリを2個も見つけてしまいました…..

僕が知らなかっただけでしょうか。そうだとしたら今まで相当損をしていたような気がします。

そこまで思わせるような作業の短縮には持って来いのアプリを紹介します。

もっと読む

https://github.com/fc2blog/blog

FC2ブログがオープンソースになったなったとのことを聞き、ちょっと触ってみました。
ライセンスはMIT。
下の方にインストールから内部的にどうなっているのかざっくりざっくり書きますが、
まず、触ってみて感じた感想を書き出したいと思います。

触ってみた感想。

• 簡単・シンプル。
• 1つのCMSで、簡単に複数のブログ運営が可能( サブディレクトリ型 )。
• テーマも独自のテンプレートタグで記述。phpは書かなくて平気。
• ドキュメントもそこそこ。
• 管理画面も日本っぽいデザインのため、馴染みやすい。
• スマートフォンの管理画面が使いやすい。
• テンプレートの種類も豊富 ( ださいけど )
• なぜか管理画面も標準で英語に対応している。
• 静的なページの作成は当然だがない。

こんな所ですかね。ブログの作成という目的なのであれば、WordPressより簡単にできると思います。

インストール完了まで

データベースなどの設定は、

public/config.php.sample

を編集します。
丁寧に日本語でコメントがしてあるのでなんなく設定。

その後、config.php.sample をconfig.phpにリネームします。
次に http://example.com/admin/install.php にアクセス。

salt値を変更してくださいとのことで、例をそのままコピペし次へ。

IDやパスワードを入力してインストール完了です。

そして管理画面へ。

…./

おお！スマホのUIは使いやすい。

カテゴリやタグ・コメント機能といった、ブログの機能はだいたいそろっています。

内部的なこと

独自テンプレートエンジン

テンプレートは管理画面から編集・作成することができますが、データベースにまるまる保存し、phpに変換しているようです。

app/config/fc2_template.php

上記のファイルにテンプレートタグと変換するphpのリストがのっています。

コンパイルされたphpファイルは、

app/temp/blog_template/

フォルダの奥深くに保存されています。

基本的に1ページでURLから渡されるパラメーターで分岐しているようです。

プラグインというWordPressでいうウィジェットのような機能もありますが、
おんなじようなことをしているようです。

….ごく普通のブログエンジン

他のファイルもそろっとみてみましたが、いたって普通の？ブログエンジン的な作りになっていました。

まとめ

とにかく軽量！シンプル！なブログウェアです。

wigsygエディタには http://elrte.org/ が使用されています。

ただ、実際に使うかというと…..
その時はFC2ブログ使えばいいかと思いました！

そうか！これが作戦なのか！やるね！FC2！