投稿者: またわぷ

CSS idやclassの名前の頭は、数字ではなくアルファベット

タイトルのまんまだが、CSSの先頭のが数字だとCSSが無効になって機能しない。久しぶりにCSSをいじっていたので忘れていたことに気付いたいので、エントリー。

NG

#123abc
.123abc

OK

#abc123
.abc123

このように、アルファベットから始めた後に数字が来るのは問題ない。

ここで、一つ提案したいこととして、WEBなどにおけるこのような「小さいこと」に気を取られてしまってはいけないということ。あれもこれも覚えておこうとすると完全に身動きが取れなくなってしまう。性格にもよるところだが、あまりにもWEB的誤作動やバグのようなものは日常茶飯事に起こることというのが前提であれば、気にする必要もなくなってくる。

例えWEBデザイナーの人であっても、このようなCSSの小さなことは忘れも何の問題もない。問題があるとすれば、忘れてしまっていたことに悲しんだり残念がってしまうような無駄にある。

どのみち本当に必要なものは残る。

使われなくなった技術や手法は山ほどあるし、その使われなくなったものまで頭で覚えておく必要は全くないのです。このようにブログにメモしておけば検索で後で拾ったりカテゴリーでまとまって見られたりする訳だからそれでいいし、Evernote何かに突っ込んでおけば事足りてしまうことなのです。

まぁ、何が言いたいかというと、CSSの細かなことなどはむしろ忘れるくらい、大きなことからしっかりと脳に覚えさせておくべきことがあるのではないか？を問いたい訳でした。

Evernote同期の失敗「解消法」

Evernote同期の失敗から元に戻す方法です。

Evernoteのバージョン 3.3.0 (300201)とMacOS10.7.4環境で同期エラーが頻発。特に、複数にタグを付けたりノートブックを移動したりすると同期失敗が起こりやすいように思いますが原因はEvernote側のサーバがおかしいのではく、ローカルのログか何かのバグであることは確かです。

Evernote同期の失敗

このようなダイアログが出ます。Evernote同期が混乱すると、ローカルを全て削除したのがリモートと同期してしまったり最悪なことが起こることもあるので慎重にやりたい作業となります。自己責任でお願いします。

主には、ダウンロードはできるが、ローカル編集したノートをアップロードできないという症状です。同期の失敗と出ても、新しいノートがリモート側にあればダウンロードはされると言った不具合です。

復旧方法１

  1. 表示をメールソフトのようなリスト表示にして項目列に「同期の状態」を表示（「同期の状態」列が表示されていない場合は右クリックで表示可能）
  2. 「同期の状態」でソートして、黒丸印で同期ができてないノートを発見
  3. 削除しても良いノートであれば、削除してしまう
方法１では、おおよそまた同じ同期不調が出るので方法２を。

復旧方法２

  1. 復旧方法１で同期できていないものをエクスポートしておく
  2. Application SupportフォルダからEvernoteを移動する
  3. 初回同期の実行をする
この方法２で、復旧はほとんどできます。が、転送量が増えることは確かです。

復旧方法３

Macでの操作かつ「デスクトップ」「ノート」などで２つ以上でEvernoteを使っていることが前提な方法。

Evernote公式サイトの説明と同じやり方になります。２つ目の健全なMacにあるEvernoteのデータ全部をバグがあったMacにコピーするやり方。

  1. 念のため、全てのノートをエクスポートしておく
  2. 「同期の状態」がおかしいノートだけエクスポート
  3. Application Supportフォルダをローカルの別の場所に移動しておく
  4. 健全なMacにあるApplication SupportフォルダからEvernoteフォルダをコピー
  5. 不具合があるMac側のApplication SupportフォルにEvernoteフォルダをペースト
  6. 「同期の状態」がおかしいノートだけインポート

この操作で健全なMacにあるEvernoteと全く同じ状態になり、「同期の状態」がおかしかったものを追加でき、同期失敗のエラーが出ない状態になります。

iTunes認証エラー解消法（認証情報の保存中にエラーが発生）

iTunesでこのようなStore認証エラーが出た場合の直し方と解決方法です。

このコンピュータへの認証情報の保存中にエラーが発生しました。

このコンピュータへの認証情報の保存中にエラーが発生しました。

必要なディレクトリが見つからないか、アクセス権エラーが発生しました。このアクセス権の問題を修正してからやり直すか、アクセス権の変更できない場合はこのコンピュータの認証を解除してください。

  • 主に、.m4p のiTunes Storeで購入した楽曲などが対象
  • iTunesやiTunes Mediaフォルダのアクセス権をFinderで読み／書きにしても直らない
  • 私の場合Time Machineを使って戻した時に発生した
  • ターミナル（ユーティリティにある）を使って解決できた

基本的には上記４点が現象でした。この買った曲を聞こうとするといちいちエラーウィザードが開くのはどうにも腹立たしいエラーです。

下図のようなエラー（機能拡張を使用できません）も同時に出たりしたので、これらが出る場合も同じ現象かも知れません。

機能拡張を使用できません

どちらも、Application＞ユーティリティ＞にあるターミナルというアプリを使って解消できると思います。それでは手順です。

手順

1. ターミナルを起動

2. Mac OS X v10.6 以降の場合は次のコマンドを入力して、enter

sudo chmod -R 1777 /Users/Shared

3. 次に、Password: と出るので、次のコマンドを入力して、enter
（ログインパスワードはApple IDのパスワードとは違います。また、Macのログインパスワードを空で使っている場合は一時的にパスワードを設定する必要があることが判明。システム環境設定のユーザとグループからパスワード設定できる。）

Macのログインパスワード（入力時ターミナル上では表示されない）

4. ターミナルを終了する

5. iTunesのStore＞このコンピュータを認証…　が実行できるようになった。

このコンピュータを認証

これで認証が出来れば、エラーが出なくなり購入した楽曲やオーディオブックや動画などが無事に再生出来るようになりました。

Appleのサポートページにもこのエラー説明がありますが、Password: のところが別ページで説明されていて、それに気づくまでに四苦八苦しましたので、このページにあるようにターミナルの時のPassword: の入力もあることもまとめてご案内しました。

参考

MacProをSSD（ADATA SX900）にしてみたXbenchスコア

SSD（ADATA SX900）
総合スコア：408.54（だいたい毎回400前後）

以前のHD（WDC WD1002FAEX）
総合スコア：102.86（だいたい毎回100前後）

使ったソフトはXbenchというMacの測定では有名なソフトで100が大体の標準を表すようです。SSDにしてかなり速くなったと思う。スコアも単純に4倍は実感が沸かないが、例えばビックリしたのがMacのMailでローディングアイコンが受信時に今までは「くるくる」していたのに、今は速すぎて出てこない。

MacBook AirでSSDの高速性を感じていたが、MacProでもその恩恵を受けると何だか嬉しくなってしまう。特にAdobeソフトの起動時間に速さを感じることができる。単純に考えて、ディスクアクセス系の動作がキビキビするだけで、かなりの動作は速くなることが多いから、SSDを使ってしまうとHDのガリガリ感には戻れない気がする。

Safari6 ゴシック体・丸ゴシック体 スタイルシート

safari6丸ゴシック体

ゴシック体が普通ですが、丸ゴシックも可読性が良いので追加です。

【ゴシック体のCSS】
gothic.css ←このファイルをダウンロードして設置

* {
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
}

【丸ゴシック体のCSS】
maru-gothic.css ←このファイルをダウンロードして設置

* {
font-family: “ヒラギノ丸ゴシック Pro W4”, “Hiragino Maru Gothic Pro”;
}

ヒラギノ丸ゴシック Pro W4は、ヒラギノ角ゴ Pro W3よりも少し太くなるので、より読み易くなる場合もありますが、太字との違いも分かりづらくなるとも言えます。どちらにしても明朝体よりも、ゴシック体や丸ゴシック体の方が明らかに読みやすくなります。

Safari6へのスタイルシートの設定方法は、以前の記事を参照してください。

Safari6新機能と変更点（右上の検索フォームがない？！）

Safari6がソフトウェアアップデートから更新できるようになりました。Safari6の新機能はAppleのサイトを見るとして、10.7Lion環境でアップデートした時の不具合や変更点などをまとめると、

  • 検索フォームとアドレスバー合体
  • 少し表示が速くなった気がする
  • ソース表示がWebインスペクタ表示に
  • フォントがTimes
  • パスワード管理が環境設定からできる

検索フォームとアドレスバー合体

右上の検索フォームはどこへ？と思ったら、ChromeやFirefoxではおなじみのアドレスバーと検索フォームの統一化に。以前は、aaaと打ち込むとwww.aaa.comにアクセスされるという.netや.jpをもあるのに面白い挙動をしていたSafariでしたが改善。

少し表示が速くなった気がする

Nitro JavaScriptエンジンとCSSの適応型アプローチが新しくなったようで、少しだけ体感的に表示が速くなった気がします。

ソース表示がWebインスペクタ表示に

さてと、ソースを見るかとショートカットをタイプしたらインスペクタが表示された。このインスペクタウィンドウは別ウィンドウ表示のアイコンをクリックすると別として大きく表示できる。

フォントがTimes

フォントが多分Safariお決まりのTimesになっているようだが、環境設定からフォントを選ぶところがなくなっている。どこかにあるはずだが、見当たらない。当然詳細からスタイルシートをカスタマイズすればできるが、しっかりとCSSでフォント指定しておかないと明朝体で制作したサイトが表示されちゃっているなんてことに逆に気付ける。Safariをゴシック体にする説明も書いてあります。

パスワード管理が環境設定からできる

環境設定に登場したパスワード。今までは、Applicationフォルダにあるキーチェーンアクセスから削除したりできたがSafari6からはSafari上でできるのが嬉しい。IDとパスワードを自動で保存するドメインを選択したり、パスワードを表示したりできる。

MacOS10.8のMOUNTAIN LION

新しい機能はほとんどMacOS10.8のMOUNTAIN LIONにしないと出て来ませんね、どうしても使いたい機能がある場合は￥1,700でMOUNTAIN LIONに。タブビューは気になる…。

MacOS10.7では出てこない新機能

  • タブビュー
  • iCloudタブ
  • 共有機能

Safari6表示フォントを明朝体→ゴシック体・サンセリフ体に

Safari6にアップデートしたら、ウェブサイトのフォントが明朝体で表示されるサイトがあって気持ち悪い！と思っている方へ。

Safari6から環境設定にフォント選択が今のところどうやら見当たらないので、環境設定の詳細 にあるスタイルシートを選択する必要があります。

Safari ＞ 環境設定 ＞ 詳細
Safariゴシック体

gothic.css ←このファイルをダウンロード

スタイルシート：未選択　から　その他…でダウンロードしたgothic.cssを適用してください。

そうすると、 明朝体で表示されていたサイトもゴシック体になります。
しかし、意図的に明朝体に指定してあるサイトは明朝体のままです。

（補足）
このCSSファイルは、HTML内をこれらのゴシック体で表示をしてください。という記述がしてあり、先頭の”ヒラギノ角ゴ Pro W3″から順次Mac内にそのフォントがあればそれが適用されます。

以前のSafari5にはあったフォントの【表示】項目
ヒラギノフォント

GALAXY S3 ブラウザ解像度の横幅360px縦幅640px

以前はGalaxy Noteのブラウザ解像度に付いて書いて好評だったが、今度は昨日発売されたばかりのGALAXY S3を店頭でチェックしてきた。

ギャラクシーS3

どうやら

GALAXY S3 ブラウザ解像度　幅360px

Galaxy Noteもそうだったようにブラウザ解像度は実際の本体解像度の丁度半分に設定されている。これで大体半分になるだろうことは目星が付いたので今後はいちいち店頭でチェックする必要もないことだろう。

CSS3のメディアクエリーは本体解像度ではなく、当然ブラウザ解像度を返す仕組みになっているからしっかり縦持ちでの横幅ブラウザ解像度は把握しておきたい。

  • iPhone　320px
  • Galaxy S2　320px
  • Galaxy S3　360px
  • Galaxy Note　400px

標準ブラウザがどうやらChromeになっているようだ。ブラウザ解像度の扱い方の違いは確認できなかったが、同じWebKitなのでメディアクエリーも同じになっていることでしょう。パッと見の違いは上部のアドレスバーがスクロールしてもChromeはずっと残っているってところ。ツールバーを隠すための1px下に移動するJavaScriptもChromeだと意味がなくなる。Androidを設計しているGoogleがなぜに？ブラウザとChromeに分けてChromeを標準にする必要があるのかと少し思うがブランド構築のためだろう。

iPhoneが320pxでスマホも320pxの横幅だけで想定しているスマホサイトがまだまだ多いが、640px以下をスマホサイトとしてレスポンシブに捉えてWeb制作をする必要があると感じた。640pxを超えてくるとPCサイト扱いで今のところいいのではないかと感じている。

ディスプレイはめちゃくちゃキレイになっているので、容量を軽くしたいのはわかるが、作り手としては綺麗に見える２倍の解像度の画像を使いたいところだ。写真は問題ないが、ロゴやテキスト系画像はそのままの解像度だと荒れて見えちゃってしょうがない。SVGとかが威力を発揮してくるのかも知れない。

CSS折りたたみjQueryでアコーディオン

CSSだけで折りたたみってのは実現できていないのが普通らしい。

やっぱりココはjQueryの出番のようで、どのアコーディオンナビゲーションに至ったかの説明をしようかと思います。

検索でよく出てくるこの折りたたみJS
http://wolfrosch.com/works/webdesign/expand

これは欠点として、bodyのonloadを使うので、バッティングしたりコンフリクトするものもある。実際使おうと思ったサイトで、OnLoadを他でも使っていて両方機能しないなんてことになった。なので、結局却下。

次に検討したのが、このjQuery
http://coder.blog.uhuru.co.jp/js/easy_accordion

このスクリプトも凄くシンプルで使いやすいのだが、OnとOffというか開いている時と閉じている時のマークやアイコンがいまいちだったので、辞めた。

次に良さそうなのがあったが、これは試さず。
http://www.geekzshu.com/jquery/975
http://jquery.andreaseberhard.de/toggleElements/

結局このjQueryが一番秀逸だったので、これを使っていこうと思った。
JQUERY COLLAPSE
http://webcloud.se/code/jQuery-Collapse/

divやulの真上に記述するとそのdivやulが折りたたみ状態になるという優れ物になるのが、このjQueryのすごいところ。アイコンで開閉のプラス・マイナスもCSS画像ででてきてる。

一番使いやすいのが、classにactiveの可否を付けられること。サイトの箇所によっては、折りたたみする必要がないところや突然使わなければならない箇所などに便利。

hetemlでCronジョブMTのrun-periodic-tasks予約投稿などに

このブログはエックスサーバーを使っていてCronはちまたにある説明のように、
cd /home/なんてろ/かんてろ　で普通にCron設定できる。

だがhetemlサーバーは、mt.shというファイルを一旦作って、そのファイルに
/home/なんてろ/かんてろ　とCronを宛がうやり方だったのがわからなかったが解決。

ヘテムルはこのワンクッションがあるんだと、知りました。

後はヘテムルの説明通りに設定すれば、MTのrun-periodic-tasks設定が問題なくできます。最初はこのcd /home/…でやろうとしたが、cdの後のスペースからまた/home/が２回続けて保存されたりかなり苦戦しました。

ヘテムル Cron MobableType 設定方法
丁寧に解説されていたものの、このワンクッションが最初理解不能だった。

#!/bin/sh

cd /home/sites/heteml/users/h/o/g/あなた/web/mt/ ←mt設置ディレクトリ例
/usr/bin/perl ./tools/run-periodic-tasks

exit

このファイルをTeraPadとかメモ帳で書いてmt.sh名でファイル保存して、アスキーモードでアップロードして、パーミッション700にして、そのファイルに対するサイトパスをCronに設定すると完了です。これで予約投稿やCron系のMT活用ができます。