複数のgoogledriveを一緒に開きたくてodrive（https://www.odrive.com/）とか使ってたんですけど
たまに共有に落ちてこないファイルがあったりして使うの辞めました。
とはいえgoogle driveアプリは共有アイテムを拾ってくれなくて困ったなーって思ってたら
マイドライブに移せばローカルでも開けるんですね。
マイドライブに移したいファイルを選択して、右上のマイドライブに移すアイコンをクリックです
web
今まで使ってこなかったんですが、CodeKitにはKit languageという簡易テンプレート機能があるみたいなんです。
https://incident57.com/codekit/help.html#kit
参考
CodeKitの新機能「Kit Language」（2012年12月19日）
CodeKitの隠れた秀才「Kit Language」で効率化を図る（2013年03月27日）
CodeKitのKit Language（2014年12月11日）
（随分昔からある機能なんだな…
if文は使えないけど変数は使えて
拡張子.kitの中に.kitファイル（.htmlも可）をimport(include)して保存すれば
合体した.htmlファイルを書き出してくれます。
使いこなせたら便利そうなんだけど、
困ったことに拡張子.kitのファイル中ではemmetがうまいこと展開されない( ´・_・｀)
例えば
1 | ul+ |
をexpand abbreviationすると
1 2 3 | <ul> <li></li> </ul> |
とならずに
1 | <ul+></ul+> |
となってしまい、このままでは使い物にならない。
.kitでもemmetを有効にする
わりと簡単に対応させられました。
1 | /Library/Application Support/Coda2/Plug-ins/Emmet.codaplugin |
を右クリックして[パッケージの内容を表示]
その中の
1 | /Contents/Resources/snippets.json |
を開く
下の方に
1 2 3 | "kit":{ "extends":"html" }, |
を追加
これでおk
ul+を展開して動作確認してみよう。
ついでに.kitに.htmlのカラースキームを適用させる
こちらはcoda2の環境設定から[エディタ＞カスタム言語モード]
テンプレ使えるようになると、作業ファイルが見やすくなっていいですな。
なんで入力する内容の説明をプレースホルダーだけで賄おうって思ったんだって話。
こんなの全然スタイリッシュでもなんでもないですから。くっそ使いづらい。
さらにここは、よくある並びの
[姓 名]
[セイ メイ]
じゃなく
[姓 セイ]
[名 メイ]
が1列になってる点もポイント高いんじゃないかって思います。
CodeKitなら、Autoprefixerを簡単に使えるようなので試してみることにした。
Autoprefixerは、Can I use…の結果を元にベンダープレフィックスを補ってくれる機能
display:flexみたいな仕様がころころ変わってきたプロパティを使う時など、とても便利。
例えば次の記述は
1 2 3 | div{ display:flex; } |
こんな風に変換される。
1 2 3 4 5 6 | div{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; } |
今まではgulpを使ってしていたんだけど
それだと、compass準備して、gulpインストールして、package.jsonを用意するか使いまわして、モジュールをインストールして、gulpfile.js書いて、、、とさっと始めるには労力がかかっていたけど
CodeKit2には基本機能としてAutoprefixerが組み込まれてるから、起動したらほぼいきなり書き始められるもんで超絶楽な予感。
ただcompassの追加プラグインなんてのはCodeKitからは追加できたりしないのかしら？
そうなると結局config.rbは自分で編集してターミナルも使う事になりそうだ。
[追記 / 2015-10-05]
OSX 10.11 El Capitanにアップデートしたら
1 2 | sudo gem install sass sudo gem install compass |
なんていつもみたいに風にsassやcompassをインストールしようとすると
1 2 3 4 | Ignoring psych-2.0.8because its extensions are notbuilt. Try:gem pristine psych--version2.0.8 Ignoring json-1.8.1because its extensions are notbuilt. Try:gem pristine json--version1.8.1 ERROR: Whileexecuting gem...(Errno::EPERM) Operation notpermitted-/usr/bin/sass |
みたいなこと言われてインストール出来なくなってた。
どうやらRootlessってやつが働いてるからだそうな
OS X 10.11 El CapitanではOS Xの新たなセキュリティ整合性保護機能（SIP: System Integrity Protection）通称”Rootless”が導入されており、例え管理者権限(root)であっても”/System”, “/bin”, “/usr”, “/sbin”ディレクトリにファイルの作成が出来なくなっていますが、Appleは開発者向けにこのRootlessを操作するコマンド”csrutil”を提供しています
OS X 10.11 El Capitanのシステム保護機能「Rootless」を無効にするcsrutilコマンドの使い方。
とりあえず
1 2 | sudo gem install-n/usr/local/bin sass sudo gem install-n/usr/local/bin compass |
と書いてインストール出来た。
[追記 / ここまで]
聞きかじったものをがっちゃんこなので間違えてたりおかしい事してるかも。
sass（scss）だけならプラグイン入れちゃえばすぐ使えるんだけど、まぁ手段が増えるのはいいことです。
Coda2からターミナルをlocalhostで開く
sassを使いたいディレクトリに移動しておく（ちゃんとサイト設定してれば不要
1 | cd"scssとcssフォルダを作成した場所をドラッグ＆ドロップ" |
アップデート
Rubygemsをアップデート
1 | sudo gem update--system |
sassをアップデート
1 | sudo gem update sass |
compassをアップデート
1 | sudo gem update compass |
バージョン確認
Rubygemsのバージョン確認
1 | gem-v |
sassのバージョン確認
1 | sass-v |
compassのバージョン確認
1 | compass-v |
sassだけで使う
1 | sass--watch input元のパス:output先のパス |
compassを使う準備
プロジェクトを作成する。
config.rb（compassの設定ファイル）が無ければ最初に作る
1 | compass create--bare |
とりあえずconfig.rbとsassフォルダだけが作られます。
これが基本
1 | compass create |
あとはウォッチさせておけばいい
1 | compassw |
もしくは
1 | compass watch |
参考
CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。
Compassを使用する準備 | Web制作者のためのSassの教科書 – 公式サポートサイト
Sassコマンドの使い方を覚えよう | Web制作者のためのSassの教科書 – 公式サポートサイト
CSS – 全容をざっくり理解するために、Sass+Compassの覚え書き – Qiita
CSSの常識が変わる！「Compass」の基礎から応用まで！ | 株式会社LIG
cjk-ideographicてば
css2で実装されて、
2.1で一時削除されたけど
3で復活したもんだと思っていたらIEが対応してなかった。
firefox（やその他のブラウザー）での表示
IE11での表示
appstoreのアプリにリンク貼ろうと
App Store マーケティングガイドライン – Apple Developer
からダウンロードバッジをダウンロードしてみたところ中身は.svgでした。
お恥ずかしながら.svgて使った事なかったのですが、現在は普通にimgタグに指定すれば表示される様子。
1 | <img src="Download_on_the_App_Store_JP_135x40.svg"alt="ダウンロード"> |
確かにローカルではこれで大丈夫でした。
で、目的のサーバーにアップロードしてモバイル端末で確認してみると、svgが正方形の枠だけで中身が表示されていない…
.svgの中身を貼り付けたら表示されるけど、cssでのサイズ指定が無視されるようで使いづらい。
どうやらサーバーの設定が原因みたいで、.htaccessに
[text]
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
[/text]
を追加したら無事表示されました。
めでたしめでたし。
ちなみにgoogleplayのダウンロードアイコンはここから作れます。
Google Play Badge Generator | Android Developers
