tshinobu.com http://tshinobu.com/blog Wed, 12 Oct 2011 01:14:58 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 Dreamweaver CS4 の Shift+Enter で改行がおかしい http://tshinobu.com/blog/archives/600 http://tshinobu.com/blog/archives/600#comments Mon, 08 Aug 2011 02:43:54 +0000 admin http://tshinobu.com/blog/?p=600 Dreamweaver CS4で Shift+Enter で改行して <br /> を挿入していたのですが、ある日から突然、<br /> が挿入されずに、 <!– MENU-LOCATION=NONE –> が入るようになってしまいました。

「表示 ビジュアルエイド 不可視エレメントをチェックしないと、このエレメントを表示できません。また、環境設定の不可視エレメントでもこのエレメントの表示をオンにする必要があります。」という訳のわからないエラー文言も出て、<title>要素も書き換わってしまい、かなり不便をしていました。

<title>改行 (Shift + Enter)</title>
 <!-- Copyright 2000, 2001, 2002, 2003 Macromedia, Inc. All rights reserved. -->

原因は、以下ファイルの<script>が<head>内に入っていないからでした。編集した記憶はないのですが…
調整前 → 調整後 （ソースの表示より、ご確認ください）

C:\Program Files\Adobe\Adobe Dreamweaver CS4\configuration\Objects\Characters\Line Break.htm

似たような現象に遭遇した方がいらっしゃいましたら、問題のあるコマンドに対応するファイルを確認してみるとよさそうです。検索しても、まったく手がかりが見つからず、数日間苦しんだので覚え書きでした。

]]> http://tshinobu.com/blog/archives/600/feed/ 0 swfファイルを解析・デコンパイルするソフトウェア http://tshinobu.com/blog/archives/597 http://tshinobu.com/blog/archives/597#comments Mon, 09 May 2011 13:02:13 +0000 admin http://tshinobu.com/blog/?p=597 swfファイルを解析したり、flaファイルにデコンパイルしたりするソフトウェアを覚え書きしておきます。いずれのソフトウェアも体験版がありますが、バージョンによってActionScriptの解析結果が異なったり、閲覧できるActionScriptファイルが違っていたりするなど、微妙な違いがありますので比較してみると面白いです。

参考：

]]> http://tshinobu.com/blog/archives/597/feed/ 0 特定のディレクトリだけBASIC認証を解除する方法 http://tshinobu.com/blog/archives/575 http://tshinobu.com/blog/archives/575#comments Fri, 06 May 2011 04:14:23 +0000 admin http://tshinobu.com/blog/?p=575 BASIC認証を解除したいディレクトリに、以下を記述した.htaccessを設置します。

Satisfy any
order allow,deny
allow from all

最後の行は改行を忘れないように注意が必要です。たとえば、テストサーバにアップしたページを、いつもの担当者とは別の担当者にご確認いただく場合などに使えますね。

]]> http://tshinobu.com/blog/archives/575/feed/ 0 WordPressの「下書き」を共有するプラグイン「Public Post Preview」 http://tshinobu.com/blog/archives/551 http://tshinobu.com/blog/archives/551#comments Mon, 14 Feb 2011 15:00:18 +0000 admin http://tshinobu.com/blog/?p=551 ブログに記事を投稿する際、「公開」する前に誰かに内容を確認してほしい、ということがよくあります。しかし、WordPressでは「下書き」状態の記事を、第三者が確認するためには、第三者が何らかの権限でWordPressにログインしなければなりません。

そこで、「Public Post Preview」というWordPressのプラグインを使えば、「下書き」状態の記事を、ログインを必要とせずに第三者に確認してもらうことが出来ます。

Public Post Previewのインストール

プラグインのインストールは、WordPressの管理画面「プラグイン」の「新規追加」から行えます。キーワードに「Public Post Preview」を入力して、「プラグインの検索」ボタンをクリックします。

検索結果に表示された「Public Post Preview」の「プラグインのインストール」をクリックします。

インストールが完了したら、「プラグインを有効化」します。

記事の投稿画面に「Public Post Preview」の欄が追加され、“ログインなしで「下書き」状態の記事を確認できるURL”が記載されています。このURLをシェアすることで、「下書き」状態の記事を共有できます。

特に複数人で運営しているウェブサイトでは、独断で公開して炎上してしまう前に、メンバーの承認を得てから公開したいもの。ですが、確認をとるスタッフやクライアントが大勢いる場合、あるいは普段投稿をしない場合、いちいちログインしてもらうのもおっくうです。そんなときに、ログインを必要とせず、「下書き」状態の記事を共有できる「Public Post Preview」は便利ですね。

こんなプラグインないかな？と思って「WordPress 下書き 共有」などのキーワードで探し回っていたのですが全然見つからず、後日「WordPress public」のキーワードで検索してみるとすぐに見つけられました。現時点では日本語の記事がないようです。せっかくですので、覚え書きしておきます。

]]> http://tshinobu.com/blog/archives/551/feed/ 0 WordPressのビジュアルエディタに、テキストエディタから文章を貼り付ける方法 http://tshinobu.com/blog/archives/528 http://tshinobu.com/blog/archives/528#comments Sat, 12 Feb 2011 13:10:56 +0000 admin http://tshinobu.com/blog/?p=528 WordPressの管理画面で、EmEditorやCotEditorなどのテキストエディタから、ビジュアルエディタに文章をコピー＆ペーストすると、なぜかペーストした文章が表示されないことがあります。管理画面のHTMLエディタで本文を見ると、以下のようなタグが入っています。（Google Chrome、Safariなどで再現）

<div id="_mcePaste"></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"></div>

トラブルなくペーストするには、HTMLエディタにペーストするか、ビジュアルエディタで「テキストとして貼り付け」ボタンを押してペーストするとよいようです。

WordPressに詳しい人から教わり、1年間くらい苦しんでいたので、とても助かりました。

参考：

]]> http://tshinobu.com/blog/archives/528/feed/ 1 XHTML+CSSでキャメルケースを使うべきではない7つの理由 http://tshinobu.com/blog/archives/445 http://tshinobu.com/blog/archives/445#comments Wed, 08 Dec 2010 00:00:26 +0000 admin http://tshinobu.com/blog/?p=445 XHTML+CSSのid/class名でキャメルケースを使うべきではない7つの理由を、CSS WIZARDRYの「CSS: CamelCase Seriously Sucks!」から覚え書きします。


CSS: CamelCase Seriously Sucks!

下記はその意訳です（間違っていたらすみません）。

はじめに

今、この記事が何人かの人をいらだたせることは分かっているし、私はふつうコードの書き方は教えません。私はシングルラインCSSがキライです。ただ、明瞭で、道理にかなった、理解しやすく、首尾一貫したコードであるならば、そんなに文句を言うことはありません。私の目から見て最も重要なのは一貫性です。しかしながら、キャメルケースは、本質的に矛盾していることが明らかなのです。

1. CSSはハイフンで区切られた構文

CSSはハイフンで区切られた構文です。どういうことかというと、font-size、line-height、border-bottomのようなものを書きます。別のフォーマットを導入する理由がどこにあるでしょう？

#introPassage{ /* Using one format here */
   font-style:italic; /* And another here */
}

構文を混在させるべきではありません。それは矛盾しています。

2. XHTMLは小文字の言語

小文字の構文に、大文字と小文字を混在させたclass名やid名を混ぜるのは、さらに矛盾しています。

<img src="/img/people/harry-roberts.jpg" alt="A picture of Harry Roberts"  class="userImageAvatar" />

この例では、小文字の構文と、プレーンテキストと、どちらでもない何かが混在しています。

3. キャメルケース自体がもつ矛盾

キャメルケースは独自に定義した規則の中でも、矛盾の範囲を広げています。

#content{ ... }
#subContent{ ... }

この例では、汎用的なコンテンツのコンテナとして使用される2つの要素がありますが、ひとつはcontent（頭が小文字）として、もうひとつはContent（頭が大文字）として、呼び出されています。これはいったいどういうことでしょうか？

4. 読みにくくなっている

キャメルケースは読みにくくなっています。単語間の空白があるだけで、はるかに読みやすくなります。CSSのセレクタではスペースを含むことができないので代わりにハイフンを使っています。

#someIdIMadeEarlier{
  font-size:2em;
}
#some-id-i-made-earlier{
  font-size:2em;
}

2番目の例が読みやすくなっていないと主張するのは難しいのではないでしょうか。

5. 走り読みしやすい

走り読みのしやすさもまた、コードを書く上で重要な要因です。

.navHome a { ... }
.navAbout a{ ... }
.navPortfolio a{ ... }
.navContact a{ ... }
.nav-home a { ... }
.nav-about a{ ... }
.nav-portfolio a{ ... }
.nav-contact a{ ... }

特定の接頭辞のclassを探している場合、個人的には2番目の方がはるかに走り読みしやすいです。

6. ハイフンはテキストエディタでよいはたらきをします

これは私の使っているさまざまなテキストエディタで確認できました。これは奇妙なものですが、確実に、間違いなく、私をいらいらとさせます。キャメルケースの文字列では、Ctrl+Shift+[矢印キー]でひとつの単語を選べません。（訳注：Macの場合は、Option+[矢印キー]？）

.tweetPromoButton
.tweetPromoButton

私はときどき、一文字を選択するよりも、Ctrl+Shift+左キーを使ってテキストのまとまりを選択します。ここでの問題はキャメルケースの場合は、文字列がひとつの単語として扱われることです。もしtweetをfacebookに変えたいときはどうでしょうか？Ctrl+Shift+矢印キーでは変えられません。ハイフンで区切られたバージョンなら可能です。

.tweet-promo-button
.tweet-promo-button
.tweet-promo-button
.tweet-promo-button

こちらは、はるかに簡単に、文字列の個々の部分を選択することができます。ここでtweetをfacebookに変える作業は、これ以上シンプルになるはずがありません。

7. アンダースコアはどうなのか？

アンダースコアも、上記で言及している、矛盾と文字列の個々の部分を選択できない、同様の問題を引き起こします。

おわりに

思い出していただきたいのは一貫性がカギということです。言語の構文はすでに決められているので、それに忠実に従いましょう！

（2010/12/16追記）
@nbomber さんにご指摘いただき、「はじめに」の文を一部修正しました。

]]> http://tshinobu.com/blog/archives/445/feed/ 2 第1回 Webridge Meetingで「Web制作を加速させるAdobeアプリケーションでのJavascript」についてお話ししました。 http://tshinobu.com/blog/archives/426 http://tshinobu.com/blog/archives/426#comments Thu, 22 Apr 2010 03:54:08 +0000 admin http://tshinobu.com/blog/?p=426 2010年4月10日（土）、Web制作者向けの小規模な勉強会「第1回 Webridge Meeting～はじめての勉強会」で、「Web制作を加速させるAdobeアプリケーションでのJavascript」というタイトルで、PhotoshopやFireworks、Dreamweaverなどで動作する、主にHTMLコーディングのスピードを加速させる便利なコマンド機能や拡張機能を、デモを交えながらご紹介しました。

スライドをslideshareにアップしましたので掲載しておきます。また、Webridge Kagawaのウェブサイトのレポートとフォローアップの記事でもごらんいただけます。（SlideShareにアップしたところ、SlideShareのeditorial teamに「Featured Presentations & Documents」に選んでいただき、しばらくトップページに掲載されていたのがうれしかったです！）

まだまだ勉強不足で、特にPhotoshopとDreamweaverが2つのスクリプトしか紹介できなかったので残念ですが、ほかにも便利なコマンドや拡張機能がありましたらコメント欄などで教えていただけますと幸いです。各拡張機能やスクリプトはスライド中のURLからダウンロードできます。（当日動作しなかったものや自作のスクリプトで検証段階のものはcoming soonとしています）

Javascript with Adobe Applications – Acceleration Web Development!

勉強会などでWeb制作技術についてお話しするのは久しぶりでしたが、いかに技術をわかりやすくおもしろくお伝えするか、あらためて考えさせられかなり勉強になりました。勉強会に参加された方は見苦しいところも多々お見せしてしまったかと思いますが、これからもお付き合いいただけると幸いです！

]]> http://tshinobu.com/blog/archives/426/feed/ 0 Fireworksで複数行のテキストを1行にまとめてコピーするコマンド(jsf) http://tshinobu.com/blog/archives/407 http://tshinobu.com/blog/archives/407#comments Sun, 11 Apr 2010 15:00:39 +0000 admin http://tshinobu.com/blog/?p=407 Fireworksで複数行のテキストを1行にまとめてコピーするコマンド(jsf)

Fireworksで複数行のテキスト、複数のテキストオブジェクトのテキストを、1行にまとめてコピーするコマンドを書きましたので覚え書きしておきます。複数のテキストオブジェクトの内容を取得し結合する場合、背面のレイヤーから、前面のレイヤーに向かって結合されます。カーニングなどにより空白が生まれることはありません。

var altText = "";
for(i=fw.selection.length-1;i>=0;i--){
 for(j=0;j<fw.selection[i].textRuns.textRuns.length;j++){
 altText += fw.selection[i].textRuns.textRuns[j].characters;
 }
}
altText = altText.replace(/[\r\n|\n|\r]/g,"");
prompt("you can copy this text.",altText);

jsfファイルのダウンロードはこちらから

上記スクリプトを拡張子「jsf」で保存して、対象のスライスを選択して「コマンド」→「スクリプトの実行」→保存したスクリプトを読み込むことでご利用 いただけます。

CS3をお使いのWindowsユーザの方は「C:\Documents and Settings\～ユーザー名～\Application Data\Adobe\Fireworks CS3\Commands」に、 Macユーザの方は「/Application/Adobe Fireworks CS3/Configuration/Commands/」に入れれば「コマンド」メニューに加わります。

CS4をお使いのWindowsユーザの方は、「C:\Users\～ユーザ名～\AppData\Roaming\Adobe\Fireworks CS4\Commands」に、Macユーザの方は、「/Application/Adobe Fireworks CS4/Configuration/Commands/」に入れれば「コマンド」メニューに加わります。

コマンドメニューに加わればキーボードショート カットとして登録することができるのでとっても便利です！Fireworksで作られたデザインをコーディングするときには、コピーしてアプリケーションを切り替えてペーストして、という繰り返しの作業が不要になり、制作スピードが倍以上になるかと思います！私自身、一ヶ月前から制作して活用していますが本当に便利で欠かせないコマンドになっています。ぜひご活用ください。

see also:
Fireworksでスライス名を一括置換するスクリプト (jsf)
Fireworksでスライス名を簡単に変更するコマンド (jsf)

]]> http://tshinobu.com/blog/archives/407/feed/ 0 4月10日(土)第1回 Webridge Meetingでお話しします。 http://tshinobu.com/blog/archives/404 http://tshinobu.com/blog/archives/404#comments Tue, 06 Apr 2010 16:04:43 +0000 admin http://tshinobu.com/blog/?p=404 今週末の2010年4月10日（土）、Web制作者向けの小規模な勉強会「第 1回 Webridge Meeting～はじめての勉強会」を香川で開催します。地元のWeb制作者がまったり楽しく集まって、自分が作ったものを披露したり、ほかの人の制作環境を知ったり、消化できなかった／知らない知識を知ったり、といった集まりにしたいと思っています。

そこで、「Web制作を加速させるAdobeアプリケーションでのJavascript」として、これまでに覚え書きしてきた、「Fireworksでスライス名を簡単に変更するコマンド (jsf)」や、「Fireworksでスライス名を一括置換するスクリプト (jsf)」、また、そのほか覚え書きれていない便利コマンド（後日公開予定です）や、ほかの方が作ったすばらしい拡張機能やスクリプトの使いどころなどについて、ご紹介したいと思います。

参加お申し込みは以下サイトの「このイベントに参加登録する」から事前登録をお願いします！お時間がありましたらぜひ覗いてみてもらえるとうれしいです。

第１回 Webridge Meeting : ATND

]]> http://tshinobu.com/blog/archives/404/feed/ 0 Fireworksでスライス名を簡単に変更するコマンド(jsf) http://tshinobu.com/blog/archives/398 http://tshinobu.com/blog/archives/398#comments Tue, 06 Apr 2010 01:34:31 +0000 admin http://tshinobu.com/blog/?p=398 Fireworksのスライス名を簡単に変更するエクステンションと同様のことを実現するFireworks用のコマンド（jsf）を書きましたので覚え書きしておきます。使っているPCに管理者権限がなくてエクステンションがインストールできないといったときにお使いいただけます。スライスを選択してこのコマンドを実行すれば、選択したスライス名を変更するダイアログが表示されます（複数のスライス選択変更にも対応しています）。

var dom = fw.getDocumentDOM()
var sliceArray = new Array();

for (var i=0;i<fw.selection.length;i++){
 if(fw.selection[i] =="[object SliceHotspot]") sliceArray.push(i);
}
for (var i=0;i<sliceArray.length;i++){
 var target = sliceArray.length-i-1;
 var newName = prompt('Please input change slice name below.',fw.selection[target].baseName);
 if( newName != null) fw.selection[target].baseName = newName;
}

jsfファイルのダウンロードはこちらから

上記スクリプトを拡張子「jsf」で保存して、対象のスライスを選択して「コマンド」→「スクリプトの実行」→保存したスクリプトを読み込むことでご利用いただけます。jsfファイルをWindowsユーザの方は「C:\Documents and Settings\～ユーザー名～\Application Data\Adobe\Fireworks CS3\Commands」に、Macユーザの方は「/Application/Adobe Fireworks CS3/Configuration/Commands/」に入れれば「コマンド」メニューに加わります。コマンドメニューに加わればキーボードショートカットとして登録することができます！お困りの方はぜひこちらもご利用いただければと思います。

なお、一括してスライス名をふりたいときにはPIXEL LABさん制作のslice_nambering.jsf、一括してスライス名を置換したいときには、拙作Fireworksでスライス名を一括置換するスクリプト(jsf)が便利です！

]]> http://tshinobu.com/blog/archives/398/feed/ 0