mac

Coda2にzen-codingを入れて、カスタマイズ

Coda2のzen-codingで地味に困る事。を追加。
解決方法をご存知でしたらぜひ教えて下さいませ。
追記ここまで。

日本語化されるまで触らないでおこうと思いつつ
ちょっとしたコーディングをする際にちょこちょこ起動してるCoda2

zen-codingを入れてhtml:5とやるとlang=”en”になっていたり<!DOCTYPE HTML>と少し気持ち悪かったのでカスタマイズする事に。

zen-codingを拾ってくる

Downloads – zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
Zen Coding for Coda v0.7.1 をダウンロードした

/Users/[ユーザー名]/Library/Application Support/Coda 2/Plug-ins/TEA for Coda.codaplugin
右クリックして「パッケージの内容を表示」

Support/Library/zencoding/zen_settings.py
をバックアップしてから
CotEditorで開いた

でもってenをjaに変更

[text]
‘lang’: ‘ja’,
‘locale’: ‘ja-JP’,[/text]
[image]気持ち悪い場所

ついでに

私、気になりますっ!

なんでHTMLが大文字でlangはlocaleなんでしょう?
[image]書き換えます

!DOCTYPE HTMLを
!DOCTYPE htmlにしました。
[image]小文字とjaにしました

ちなみに、W3C(HTML5)の記述はこんな感じだった

lang属性はなんて書くのがいいんだろう?

おまけでjQueryやviewportの記述も追加しておく
[image]色々追加
コンディショナルコメントのところの[]は\でエスケープ。

この段階のhtml:5をzen-codingすると

こうなる。

テンプレ部分の参考サイト

HTML5+CSS3の導入時に役立つ7つの設定 : アシアルブログ
【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis

ちゃんと勉強してテンプレを作りたいなー。

Coda2についてくるオリジナルのフォント(Panic Sans)の格納場所

[image]Panic Sans

App Storeのレビューの「前のバージョンについていたPanic Sans(オリジナルのフォント)がCoda2にはみあたらない」を読んで
みたことないフォントだけど残念過ぎる!本当にないのか?と探してみたらパッケージの中にありました!やった!

Panic Sans 格納場所

/Applications/Coda 2.app/Contents/Resources/Panic Sans.dfont

アプリケーションのCoda 2.appを右クリックして
パッケージの内容を表示から行った。

[image]アプリケーションからCoda2を右クリック

他のフォントと比較

menloとそっくり、でも0が可愛い。
[image]比較

なんで一緒にインストールされなかったんだろう

ForkLiftをインストールしてみたけど自分的にはいまいちだった。

ForkLift(ftpクライアント)
ForkLiftというFTPクライアントを導入しました。
http://binarynights.com/support

Macにスイッチしてからというもの
FTP転送はFileZilla(とsshの時だけcyberduck)を使ってきました。

FileZillaというのは、FFFTPみたいな外見をしていて
windowsからのスイッチ組のうちにとってはCyberDuckよりとっつきやすく
FTPSもSFTPも対応していてなおかつ無料という素敵な奴です。

素敵なやつなんですけど数日前サーバー上のデータのやり取りで手痛いトラブルがありました。
先方がアップしたというデータの一部がmacからは完全に見えなかったのです。

以前も、ファイル名やディレクトリ名に日本語を使われてmacから見えずに
windowsで確認したらファイルが入っていた!という事がありましたが
(その時は文字コードをshift-jisに変換したら表示されるようになった)
今回は機種依存文字が原因でした。

機種依存文字てのは、webで使うなって言われてるけどなんだかんだ表示されて
今はもう関係ないんじゃない?的な雰囲気になってる(株)や◯囲み数字なんかです。
wordやExcelで資料作成する人がやたら好んで使うあれです。

調べてみると文字コードにWindows-31J(Microsoftコードページ932 – Wikipedia)を選べば、macでも機種依存文字のファイルも扱えるようになるそうで
その文字コードを選択出来るFTPクライアントは手持ちではCyberDuckだけでした。

よしわかった、じゃあ解決!とは簡単に言えないほど常用するのは重く辛いCyberDuck。
そんな不満を抱えながら日々忙しく過ごしていると
AppStoreでForkLiftというFTPクライアントがランキング上位に表示されているのを発見。

FTPアプリがなぜランキング上位に?なんて思ったけど理由は直ぐにわかりました
通常2600円のアプリが期間限定で85円だったからです。すげー安いなんで?

でもって、上に書いてあった理由もあって
有料アプリだし、sshも使えるみたいだしこれならいけるんじゃないかな?とよく調べずに導入。

このアプリに期待するのは3つ

  • 機種依存文字が使われているファイルも扱いたい
  • FTPS (File Transfer Protocol over SSL/TLS) で接続したい
  • 秘密鍵を使ったSSHで接続したい

まず1つめ機種依存文字が使われているファイルも扱いたい
これは半分クリア
表示されたけど、文字化けしてたアクセスは不可能。
選べる文字コードは、shift_jis、iso2022-jp、eucでWindows-31Jはなかった。
全く見えなくなるわけじゃない分マシ?
でも、んー、、、。

普通のftp接続はfinderみたいに使えてローカルのファイルを操作してるみたいにサクサク移動出来る。
サイト管理はお気に入りに登録して使うので少々戸惑った。

散々あがいたけど結局機種依存文字ファイルは諦めて
次に最近触る機会の増えたftps(File Transfer Protocol over TLS)で接続しなくちゃならないサーバーの情報を入力していくと、これも接続できない。(FTPS – Wikipedia

あるぇ?
FTP(TLS)って書いてあるけど、なにこれだめなの?
これも散々あがいて結局諦め。

最後に.ppkでsshで接続する必要があるサイトに接続を試みる。
サポートサイトをちらっとみたら

Q: Does ForkLift support public key authentication over SFTP?

A: Yes ForkLift will automatically use public key authentication for SFTP connections if you have the necessary PEM files in a .ssh folder in your home folder (~/.ssh/).

とある、ホームフォルダの.sshに鍵をいれておけば自動で認識するよと、英語が読めない自分は勝手に解釈したんだけど
public key?あれ、これもダメなの?
接続できない。

よくわからないまま
PuTTY Download Pageから
PuTTYgen:をwindowsでダウンロードして.ppkをOpenSSH形式に変換してみるもForkLiftでは接続できませんでした。

日本語で使い方を説明してくれてるサイトを探してみたけれど
「いまだけ85円でお得だよー、自分はとりあえず買いました(まだ使ってないけどね)」とだけ書いてあるblogばかりヒットしやがる。ちぇ。

というわけで、FilezillaとCyberDuckを手放して一本化する事はかないませんでした。

Webサイトにオーディオ / ビデオプレイヤーを設置する

[jplayerダウンロードページ]

jPlayer : HTML5 Audio & Video for jQuery
オーディオだけじゃなくビデオも再生できるjQueryのプラグイン。
htmlとcssがわかればある程度好きなように見栄えをカスタマイズできて
プレイリストっていうのかな、複数の曲の連続再生に対応してる。

.mp3を.oggに変換する

うちの設置方法がよくないのか、firefoxではmp3が再生できなかった。

firefoxのaudioタグがmp3をサポートしていないからなのかな
とりあえず.mp3を.oggに変換する事に。

Audio Sound File Converter Software. Convert wav mp3 dvd midi flac dvf wma etc.というアプリ(無料)が簡単だった。
[image]switch
ファイルをドラッグして形式を選んでコンバート押すだけ。

.ogg以外にも様々な形式に書き出せる。
[image]Switch Audio Converter

こないだ変換に使ったアプリなんだったけな?と忘れちゃったのでメモ投稿。