コーディング規約を見る
飽きっぽいのでいろいろ手をつけては放置しています。
困る。
初心に帰って個人サイトでも作ってみたいなーと思いましたが、運営していた頃からもう10年以上経っているので、htmlの書き方も古臭そう。
で、有名企業のコーディング規約を見てみる。それであっているのかわからないけど。
google翻訳とか拙い読解力なので正確さは微妙です。
Googleのコーディング規約
HTML
- HTML5を使う
XHTMLには使わない。閉じタグは<br />ではな</br>を使う - 有効なHTMLを使う
W3Cが標準化しているタグを使う。 - 用途にあったタグを使用する
pタグは見出し、aタグはアンカーなど。
具体的な例には、div要素に付与したonclickイベントで画面遷移関数を呼ぶ、ではなく、aタグのhrefで遷移先を設定する、というような記述。 - マルチメディアでのアクセスを考慮する
画像や動画、アニメーションオブジェクトなどには、代替の要素を用意しておく。
alt属性を用いるなどアクセシビリティを考慮する。 - 構造とスタイルとスクリプトの分離
構造(マークアップ),スタイル(デザイン),スクリプト(動作)を分離する。
また、できるだけ少ないリンクでスタイルやスクリプトを参照する。 メンテナンスのしやすさを考慮する。 - エンティティ文字を使わない
同じ文字コードで書かれているのだから不要。HTML上で特別な意味を持つ文字<などを除く。 - 省略可能なタグは使用しない(推奨)
html5で省略可能なタグHTML Standard があるのでそれは省略する。(ファイルサイズなどの観点から)
ただし再考の余地がある…みたいなことらしい。 - type属性は使用しない
cssやjavascriptのtype属性は使用しない。HTML5で暗黙で指定されているため。 - 要素ごとに改行しインデントをつける
- 長い行は改行する
継続業はスペース4つ分字下げする。 - シングルクォートではなくダブルクォートを用いる
CSS
- 有効なcssを使う
W3Cが標準化しているものを使う。 - cssのクラスやIDには意味のある名前をつける
- cssのクラスやIDの名前はできるだけ短く、意味がわかるほどには長くする
- タイプセレクタを用いない
ul#exampleとかdiv.errorとかのように要素を指定してスタイルを適用する方法は使わない。 - ショートハンドプロパティで書く
一つの定義でかけるものはまとめて書く。
padding-top: 0;padding-right: 1em;padding-bottom: 2em;padding-left: 1em;とかではなくpadding: 0 1em 2em;みたいな事。 - 0の直後の単位は省略する
- 先頭の0は省略する
0.8emではなく.8em - プレフィックスをつける
競合しないようにアプリケーション固有の接頭辞をつける。
検索や置換にも有用。 - IDやクラス名の区切り文字は「-」
- cssハックの前に別の方法を考える(推奨)
- 定義はアルファベット順で記載する
- ブロック要素はインデントする
- 宣言の終了(;)を忘れない
- プロパティの後ろにスペースを入れる
font-weight:bold;ではなくfont-weight: bold; - ブロック要素の区切り
#hoge{ margin-top: 1em; }
#hoge { margin-top: 1em; }
ではなく#hoge { margin-top: 1em; }
- セレクタ要素の区切り
a:focus,a:active { position: relative; top: 1px; }ではなくa:focus, a:active { position: relative; top: 1px; } - 定義の区切りは一行あける
- ダブルクォートではなくシングルクォートを使用する
つぶやきブックマーク
が、フォルダなりタグなりで分類しつつできたらいいよねそんなツールないかな、みたいなこと言ったら、ハートが数個飛んできたので、最近そのことを考えています。
ツイッターのAPIは規制厳しいし、あまりお近づきになりたくないんだけど、と思いながら調べている最中。
ただ、対象のツイートのurlさえ控えられれば、ツイッターAPIとしても提供されている埋め込みタグを返すメソッドを呼ぶ、あるいはそれすら不要で、ツイッターの提供するjavascriptを読み込むことでurlからよしなに埋め込みっぽく情報を表示可能であるところまでは確認しました。
問題としては、ツイッター認証を行っているわけではないから、鍵アカウントのツイートは表示できないであろうこと。
ツイッター連携を行ってみて、鍵アカウントのurl呼び出しをした場合どうなるか、を確認したいところ。
だけど、ツイッターさん2018年の7月から開発者アカウントの発行のためにより仔細な情報を提示しないといけなくなってるらしい。
もう少し壁の低いapiだったらなあ。
引き続き調べてみます。タグをつけるgemとかも、使ってみようと思って使ったことがないですし、最悪鍵垢は対応できない(urlのみ記録する)アプリケーションになる。
…でもどうせログイン機能作るならツイッター認証したほうが一石二鳥なのか…。英語の壁ｴ
ActiveHashを使う
仕事でActiveYMLを使う、と言われたので、なんのことやら状態から少し調べる。
ActiveHashというgemを用いて、DB及びモデルの拡張を行うようなイメージ？
参考にさせていただいたサイトさんでは、例えば商品マスターデータに種別のidだけ持たせて、種別の情報自体はActiveHashとして(DBにテーブルや列は作らずに)参照可能とするような使い方を紹介されていた。
DBに登録するまでもないような情報だけど、ActiveRecordと一緒に使いたい、みたいな時に有用らしい。
ActiveYMLは、ActiveHashを使ったときに該当のモデル(ActiveHashを継承したモデル)の定義内にデータを書くのではなく、ymlファイルとして別に切り出しましょう、という使い方。
- gemの設定
gem 'active_hash'
- modelの作成
class Hoge < ActiveHash::Base self.data = [ {id: 1, name: 'ほげ'}, {id: 2, name: 'ふが'}, {id: 3, name: 'ぴよ'}, ] end
これで、Hogeに対してActiveRecordと同じように、allとかfirstとかで問い合わせができる。
- self.dataのymlへの切り出し self.dataの部分をymlファイルに切り出すときは以下。
- id: 1 hoge_type: Hoge name: 'ほげ' - id: 2 hoge_type: Fuga name: 'ふが' - id: 3 product_type: Piyo name: 'ぴよ'
Model側は以下
set_root_path "config/master" #=> ymlファイルの配置ディレクトリ set_filename "hoge_type" #=> ymlファイル名
include ActiveHash::Enum self.data = [ {id: 1, hoge_type: 'Hoge', name: 'ほげ'}, {id: 2, hoge_type: 'Fuga', name: 'ふが'}, {id: 3, hoge_type: 'Piyo', name: 'ぴよ'}, ] enum_accessor :hoge_type
呼び出すとき「enum_accessor」で設定した列名を参照すればOK。
ただ、参照時はすべて大文字にする必要がある。
参考にさせていただいたサイト：
ActiveHashを使ってRailsで区分値を扱う方法 - TIM Labs
ほげとかふがとか、やめたいんだけどほかに思いつかない。
聴く曲あれこれ
以前どんな曲聴くのか気になる、みたいなことを伺ったので、変遷含めてつらつらと書いてみます。
(Markdown記法の練習にも)
ざっくりというと、概ねロキノン系が多いのかなと思います。
でもその分類がどういったものか理解していないでいますし、多分違うであろうものも…。
なので、まあ、分類しかねています。
- ASIAN KUNG-FU GENERATION
- nico touch the wall
- 米津玄師
- the pillows
- BUMP OF CHICKEN
- the band apert
- tacica
このへんまでは結構CD持ってます。 以降は１枚~2枚。
- RAD WIMPS
- サカナクション
- DOES
- WAMCADOLE
- LOVE PSYCHEDELICO
- GLIM SPANKY
- KEYTALK
- Mrs.GreenApple
- 星野源
傾向としては、ちょっと後ろ向きで疾走感があるものとか、皮肉が強いものとか、バカを大声で歌ってるやつとかが好きです。
中高生くらいまでは、バンプが一番多かったかな。途中からアジカンになり、大学卒業する頃には、ボカロ系も混在してカオスになりました(苦笑)
インストゥルメンタル、というのか、歌詞が殆ど無いものだと、
- toconoma
- bohemianvoodoo
- Rodrigo y Gabriela
とか好きです。
ロドリーゴ・イ・ガブリエーラは格好いいぞ。おすすめです。
もちろんゲームOSTはめっちゃ持ってます。
通勤時とかに聴いてます。どれもではありますが…作業中とかは民族音楽っぽいなにかとか、それこそサントラみたいなのを探して聴いています。歌詞が響く物があればインストに限らず。
改めて見ると偏っているといえば偏っていますね(苦笑)
routes.rb の書き方
毎回、「routes.rbの書き方っていっぱいあるんだよね…どれが適切なのかわからんね…」ってなるので、ためすすがめつ記録してみます。
■resources
RESTに従ったアクションを一通り作ってくれる記法。
resources :users
設定されるroutesは以下。
Prefix Verb URI Pattern Controller#Action
users GET /users(.:format) users#index
POST /users(.:format) users#create
new_user GET /users/new(.:format) users#new
edit_user GET /users/:id/edit(.:format) users#edit
user GET /users/:id(.:format) users#show
PATCH /users/:id(.:format) users#update
PUT /users/:id(.:format) users#update
DELETE /users/:id(.:format) users#destroy
■resource
resourcesに対してこちらは単数リソースのルーティングを設定する。
resource :user
Prefix Verb URI Pattern Controller#Action
new_user GET /user/new(.:format) users#new
edit_user GET /user/edit(.:format) users#edit
user GET /user(.:format) users#show
PATCH /user(.:format) users#update
PUT /user(.:format) users#update
DELETE /user(.:format) users#destroy
POST /user(.:format) users#create
単数リソースとはなんぞ？
=> 集合を扱うindexアクションはなし。
また、show,edit,update,destroyにはid
の指定がなくなる。
■resourcesのネスト
resourcesに対してネストでの指定が可能。
例えば「学年(glades)」「クラス(classes)」が入れ子の場合
resources :grades do resources :classes end
grade_classes GET /grades/:grade_id/classes(.:format) classes#index
POST /grades/:grade_id/classes(.:format) classes#create
new_grade_class GET /grades/:grade_id/classes/new(.:format) classes#new
edit_grade_class GET /grades/:grade_id/classes/:id/edit(.:format) classes#edit
grade_class GET /grades/:grade_id/classes/:id(.:format) classes#show
PATCH /grades/:grade_id/classes/:id(.:format) classes#update
PUT /grades/:grade_id/classes/:id(.:format) classes#update
DELETE /grades/:grade_id/classes/:id(.:format) classes#destroy
grades GET /grades(.:format) grades#index
POST /grades(.:format) grades#create
new_grade GET /grades/new(.:format) grades#new
edit_grade GET /grades/:id/edit(.:format) grades#edit
grade GET /grades/:id(.:format) grades#show
PATCH /grades/:id(.:format) grades#update
PUT /grades/:id(.:format) grades#update
DELETE /grades/:id(.:format) grades#destroy
親要素のgradesのRESTのアクションに加え、それぞれのgrade(id)の小要素classesのアクションも定義されている。
ネストの構造は、複数リソースの下位に単数リソースの指定も可能。
userは複数いるが、userに対するpasswordは１対１の関係である場合、以下のような定義ができる。
resources :users do resource :password end
new_user_password GET /users/:user_id/password/new(.:format) passwords#new
edit_user_password GET /users/:user_id/password/edit(.:format) passwords#edit
user_password GET /users/:user_id/password(.:format) passwords#show
PATCH /users/:user_id/password(.:format) passwords#update
PUT /users/:user_id/password(.:format) passwords#update
DELETE /users/:user_id/password(.:format) passwords#destroy
POST /users/:user_id/password(.:format) passwords#create
users GET /users(.:format) users#index
POST /users(.:format) users#create
new_user GET /users/new(.:format) users#new
edit_user GET /users/:id/edit(.:format) users#edit
user GET /users/:id(.:format) users#show
PATCH /users/:id(.:format) users#update
PUT /users/:id(.:format) users#update
DELETE /users/:id(.:format) users#destroy
prefixに記載されているusersとかは、ヘルパーとして？users_path,users_urlなどで該当のアクションを呼び出すURLを取得できる。
ネストしている場合も同様。
■resourceベースではないrouteの定義
- get '{呼び出しパス}', to: '呼び出しコントロール#アクション'
get 'users', to: 'users#index'
Prefix Verb URI Pattern Controller#Action users GET /users(.:format) users#index
resouces :users を指定したときのindexと同義。
- get '{呼び出しパス}', :controller => 'コントローラー', :action =>'アクション'
get 'users', :controller => 'users', :action => 'index'
Prefix Verb URI Pattern Controller#Action users GET /users(.:format) users#index
これも結果は同じく。
ついでにこれも…ハッシュの記法？が理解できていないのが否めない。コロンの位置(シンボル？)とアロー演算子の役割が変わっただけ…。
get 'users', controller: 'users', action: 'index'
- idを含める
get 'user/:id', to: 'users#show'
GET /user/:id(.:format) users#show
これにas:をつけるとurlやpathの呼び出しが可能。（同じ名前は不可）
get 'users', controller: 'users', action: 'index', as: 'users_show'
irb(main):003:0> app.user_show_path
ActionController::UrlGenerationError: No route matches {:action=>"show", :controller=>"users"}, missing required keys: [:id]
(該当のコントローラは作っていないのでErrorで正)
- どのhttpメソッドでも呼べるやつ【非推奨】 get/post/put/update/deleteどれでも該当する。
match 'users', to: 'users#someting', via: [:get, :post]
Prefix Verb URI Pattern Controller#Action users GET|POST /users(.:format) users#someting
■namespaceによるパスのグループ
同名の処理のエイリアスのために使うらしい。devise使った時にadminとuser分けたり？した時に使った気もしなくもない。
namespace :admins do resources :sessions end namespace :users do resources :sessions end
Prefix Verb URI Pattern Controller#Action
admins_sessions GET /admins/sessions(.:format) admins/sessions#index
POST /admins/sessions(.:format) admins/sessions#create
new_admins_session GET /admins/sessions/new(.:format) admins/sessions#new
edit_admins_session GET /admins/sessions/:id/edit(.:format) admins/sessions#edit
admins_session GET /admins/sessions/:id(.:format) admins/sessions#show
PATCH /admins/sessions/:id(.:format) admins/sessions#update
PUT /admins/sessions/:id(.:format) admins/sessions#update
DELETE /admins/sessions/:id(.:format) admins/sessions#destroy
users_sessions GET /users/sessions(.:format) users/sessions#index
POST /users/sessions(.:format) users/sessions#create
new_users_session GET /users/sessions/new(.:format) users/sessions#new
edit_users_session GET /users/sessions/:id/edit(.:format) users/sessions#edit
users_session GET /users/sessions/:id(.:format) users/sessions#show
PATCH /users/sessions/:id(.:format) users/sessions#update
PUT /users/sessions/:id(.:format) users/sessions#update
DELETE /users/sessions/:id(.:format) users/sessions#destroy
■moduleによるグループ
scope module: :admins do resources :sessions end または resources :sessions, module: :admin
Prefix Verb URI Pattern Controller#Action
sessions GET /sessions(.:format) admin/sessions#index
POST /sessions(.:format) admin/sessions#create
new_session GET /sessions/new(.:format) admin/sessions#new
edit_session GET /sessions/:id/edit(.:format) admin/sessions#edit
session GET /sessions/:id(.:format) admin/sessions#show
PATCH /sessions/:id(.:format) admin/sessions#update
PUT /sessions/:id(.:format) admin/sessions#update
DELETE /sessions/:id(.:format) admin/sessions#destroy
Controller#Actionはnamespaceと同じくエイリアスを指定しているが、URIはscopeに指定した文字列を含まない。
参考：
あぷりをつくろう
毎回やっては挫折するなんかうれしいあぷりをつくろうチャレンジです。
とりあえず、観点としてやってみたいこととか、機能としてつくってみたいことを上げていく。
- ログイン、ログアウト、パスワード変更、パスワード再発行
- ログインしなくてもみられる画面がある
- SNS連携(twitter) ログイン連携は考える(やったことはあるので後回し)
- タグ付け、タグクラウド
- 機能拡張が容易であること
- テスト駆動な開発
- テストの自動化
- テストに限らず環境として自動化可能な所…sccsとかコンパイルにgulpとかつかうやつ…(うろ覚え)
- お絵かきソフトのような…動的にオブジェクトおいたりする…なにか…(ふわっ
頭悪感じ全開ですが、序盤は多分なんとなくはできると思われる…。 卓ゲーのプレイ履歴管理というかキャラクター管理というかそんな感じのなにかで考えてみたい。(上記の開発技術的な面はいくらか叶う機能が考えられる)
いやもっと良い題材があればそっちにするけど…いま興味関心がそっちに行ってるから…誰かTRPGあそぼ…
