« 2007年05月 | メイン | 2007年07月 »

2007年06月 アーカイブ

2007年06月29日

シンプルな音声録音

ちょっとしたボイス・メモやマイクのテストなどに!

X-app.jpg Audio Recorder [フリーウエア]
シンプルな音声録音プログラム。入力源から録音したサウンドデータをAIFF/MP3 ファイルに書きだせます。※MP3 エンコードには要 LAME.framework

audio-recoorder-face.png
録音と停止(保存)ボタンでシンプルです。


OSX では簡単に録音する機能がありません。iMovieGaragebandQuickTime Pro(3,400円)を使用しなければなりません。以前のエディターの「シンプルテキスト」は録音出来ました。

Audacity.gif Audacity [フリーウエア]
さまざまなファイル形式での読み/書きに対応対応した、オーディオ編集ソフト。

続きを読む "シンプルな音声録音" »

2007年06月27日

“ノ・メ・モ・ハ”… の文字化け

半角のノ・メ・モ・ハに文字化けするのはフォント指定が違う為に生じる。
ローマン・フォントから日本語フォントに切り替えすると発生する

(半角のノ)no-3dot.png 3点リーダー
(半角のメ)me-w-quot-l.png  二重引用符【ダブルクオート 左】
(半角のモ)mo-w-quot-r.png  二重引用符【ダブルクオート 右】
(半角のハ)ha-half-space.png   半角の空白【micro-space】

★参考サイト
Sib-Home:素人が書いた「文字コード入門」> 文字化けの体験 Shift JIS
no-me-mo-ha-code.png Sib-Homeさん作成表(表2表3)の一部を抜粋。

2007年06月25日

CSS で作ったフォント

css-font-pointline.png
CSS のみで作られた「フォント」。文字でも画像でもない。ゆえに、アドレス収集ボットに捕獲されません。グッドアイデア賞ですね!

CSSplay:A CSS font さんのソースを見てください。(著作権:私の許可を求めないで、ウェブサイトでこの方法を使用することができます。)※各文字指定のスクリプトはフォネティックコードで記述されています。5段のボックスで1文字を表現しています。

css-font-cell-slash.png slash や colon 、hyphon 、underline を作ってみました。
lw指示、lv指示(勝手に命名)がなかったので追加した。

★ css に赤字スクリプトを追加する
.la, .lz, .lv {width:5px;}
.le, .lf, .lw {width:4px;}
.ld, .lf, .lh, .lk, .li, .lm, .lo, .lp, .lq, .lw {border-right:1px solid #000;}
* html .lw {width:5px; w\idth:4px;}

★表現文字スクリプト
: 【colon】
<div class="outer" title="colon"><div class="lg"></div><div class="lg"></div><div class="lz"></div><div class="lg"></div><div class="lg"></div></div>

/ 【shash】
<div class="outer" title="slash"><div class="lw"></div><div class="lp"></div><div class="lh"></div><div class="lq"></div><div class="le"></div></div>

- 【hyphen】
<div class="outer" title="hyphen"><div class="lz"></div><div class="lz"></div><div class="la"></div><div class="lz"></div><div class="lz"></div></div>

_ 【underline】
<div class="outer" title="underline"><div class="lv"></div><div class="lv"></div><div class="lv"></div><div class="lv"></div><div class="la"></div></div>

これがcss文字表示例


☆GiGAZiNE:CSSで作ったフォント 経由

続きを読む "CSS で作ったフォント" »

2007年06月24日

フォントあれこれ

アップル:Mac OS X 10.4 - フォントリスト

世界中でいちばん有名な書体 Helvetica
intel-helvetica-font.png
Helvetica【ヘルベチカ】1957年にスイスのマックス・ミーディンガーによってデザインされた書体。印刷物・広告などで世代・文化を超えて多用されてきています。町中に溢れている書体

Helvetica A Documentary Film by Gray Hustwit
Helvetica が2007年で誕生50周年になるのを記念してドキュメンタリー映画に!
The Helvetica Book:世界でいちばん有名な欧文書体「ヘルベチカ」のすべて
★JapanDesignNet:ヘルベチカ


LOUIS VUITTON のロゴ書体
louis-vuitton-futura-font.png
Futura【フューチュラ】1928年に独逸のパウル・レナーによってデザインされた書体。非常に簡潔な幾何学的なフォント。ルイ・ヴィトンフォルクスワーゲンのロゴ書体で使用されている。


Google のロゴ書体
google-font-catull.png
Googleのロゴで使われているフォント名は Catull Font

Google Logo Maker:グーグル風書体を作成してくれるサイト


製品ロゴなどに使われているフォント
new-york-times-font.png parry-hotter-font.png
★なじみ深い字体を模したフォントが大量に集められたサイト
SHARKSHOCK:Publication Fonts 印刷物のロゴフォントなど

2007年06月23日

ヒラギノは地名だった

hiiragi_r.png Mac はフォント名に地名がついたものが多くある。OS 8までの英語システムのシステムフォント「Chicago」を初め、「London」「San Francisco」「Los Angeles」「New York」「Monaco」「Venice」「Geneva」「Athens」「Cairo」「Osaka」「Kyoto」など...

macwiki:ヒラギノフォントの名称は京都市の地名である柊野(ひらぎの)に由来。


★ABOUT FONT:[フォントの歴史] 知って楽しいフォント事情
★Orbium - gem in the sky:フォントって声に出さないから調べてみた。

2007年06月23日

OSXのメニューバーに使われているフォント

aquakana-parallel.png

AquaKana【あくあかな】
ひらがな、カタカナだけが入っていて、英数字は Lucida Grande、漢字はヒラギノ角ゴ Pro を組み合わせた特殊な隠し属性のシステムフォント。
場所:システム/ライブラリ/Fonts/AquaKanaRegular.otf と AquaKanaBold.otf

アクアカナはヒラギノ角ゴ Proに比べて若干太く感じられます。特に違いは「こすちふ」などらしい。

参考サイト
coluli.net/blog:AquaKana FAQ
【で】にっき:さんの本文はアクアカナフォント指定です。Mac の Safari でご覧ください。

★ Safariではcss記述で AquaKana が表示可能です。
font-family: "AquaKana";
font-family: "AquaKana-Bold";

2007年06月23日

Safari は予期しない理由で終了

safari-non-raison-down.png

ソフトウェア・アップデート OSX 10.4.10 + Safari 2.0.4 (419.3) にしたら、『アプリケーション"Safari"は、予期しない理由で終了しました。』の警告で落ちてしまった。トラブル案件として調べてみたが一般的に発生していない模様である。個人環境であると推測してSafariのプラグインをチェックしたら、Cookie 管理の SafariPlus がビンゴ。

OS X 10.4.10 対応の SafariPlus 1.5.1がアップされていました。早速 SafariPlus をアップデートしたら問題は解決。Safari 標準の Cookie 管理より便利です。

他に使用している Safari のプラグインは【Safari 機能拡張 SIMBL】を参照

※ブラウザー・トラブル(Safari)に対しては他のブラウザー(Firefox)もインストールしておくとよい。

2007年06月18日

サムネール画像を簡単に作成

画像をドラッグ&ドロップで縮小して化粧額縁を作成してくれるソフト比較

thumbscrew32.png Thumbscrew [フリーウエア]
少し傾き、縁に白い枠が付き、影の付いたお洒落なサムネール画像を作成する。
quince-j_thumbnail.png hydrangea_thumbnail.png

RoundRect-X RoundRect-X [シェアウエア ¥1,000]
画像を指定の大きさにして、角を丸くしたり、影の効果を簡単にできる。
quince-j_r.png hydrangea_r.png

wakuicon.jpg わくわくデジカメ [非商用はフリーウエア ¥500のカンパ]
デジカメでとった画像にスナップ写真風の枠をつける。サイズはメニューから選択。
quince-j-waku.jpg hydrangea-waku.jpg

2007年06月17日

サムネールを影付写真枠にする方法

paul-mccartney-ipod-apple.jpg★影付背景画像の作成
GraphicConverter で「ファイル」メニューから
「新規ファイル」で「イメージ」
幅は:494px (796px) など任意
高さ:494px (796px) など任意
色深度:約1760万色(32ビット)
※にしておかないと「シャドウ」メニューが有効になりません

目的のサイズを500pxでシャドウサイズを6pxにする場合は494px。汎用に使用出来るように大きめのサイズで作成しておく。白紙の画像が作成される。「エフェクト」メニューの「シャドウ」からシャドウサイズを指定する。出来上がった画像を保存する。軽くする為に .jpgより .pngなどに。影付背景画像サンプル

css記述

.shadow
{
background: url(./shadow-bg.png) right bottom;
float: left;
margin: 6px 12px 6px 6px;
}
画像を左に配置したい場合はleft指示。右にしたい場合はright指示

.shadow img
{
position: relative;
left: -5px;
top: -5px;
padding: 6px 6px 24px 6px;
background: #ffffff;
border: 1px solid #999999;
}
全て白枠を均等にするにはpadding: 6px;

.clr {clear: both;}
回り込み文章が短い場合や連続して記述する場合で配置ポジションをクリアするため。

本文記述

<span class="shadow"><img alt="name" src="画像url" width="任意" height="任意" /></span>文章…

必要な場合は<div class="clr"></div>を追加記述する

PiPELiNEぶろぐさんのcssを参考にしました

feuille-leopard.jpg

2007年06月12日

ことえり入力メニューの拡張表示

kotoeri-ex.png
ことえりメニューに「キーボードビューア」、「文字パレット」が表示されていない場合は。

「システム環境設定」から「言語環境」の「入力メニュー」タブを選択して該当項目にチェックを入れる。
langu-input-menu.png

2007年06月12日

特殊文字入力の補助ツール

characterpal.png CharacterPal [カルマウェア(寄付ウェア)]
特殊文字の入力方法を表示するウィジェット。html記述コードも表示されます。

例:middle dot【 · 】を選べば Option - Shift - 9 と表示されます。
日本語モードの中黒は Option - / で・す・
※「キーボードビューア」でいちいち確認するよりも、素早く結果がでます。
characterpal-key.png HTMLのKeyboardではNCRネームを表示

symbol-caddy.png Symbol Caddy [フリーウェア]
HTMLの特殊文字の記述ネームが簡単に分かるウィジェット。文字を選択するとクリップボードにコピーされるので便利である。
symbolcaddy-accent.png à を選べば「&agrave;」と記述ネームを表示。
…html…の助けになります。

2007年06月12日

外国文字入力(ふらんす語)

★アクサンテギュ【accent aigu】  
option keyE keyを押してからE key = key-eacute.png café biére téléphone 

★アクサングラーブ【accent grave】  
option keykey-accent-grave.pngを押してからA key = key-agrave.png à la cate
option keykey-accent-grave.pngを押してからE key = key-egrave.png père
option keykey-accent-grave.pngを押してからU key = key-ugrave.png 

★アクサンシルコンフレックス【accent circonflexe】   
option keyI keyを押してからA key = key-acirc.png château théâtre
option keyI keyを押してからE key = key-ecirc.png raison d'être
option keyI keyを押してからI key = key-icirc.png S'il vous plaît
option keyI keyを押してからO key = key-ocirc.png hôtel hôpital
option keyI keyを押してからU key = key-ucirc.png bien sûr mûr dû

★トレマ【tréma】
option keyU keyを押してからE key = key-euml.png Noël Citroën
option keyU keyを押してからI key = key-iuml.png maïs naïf paranoïa
option keyU keyを押してからU key = key-uuml.png capharnaüm

★セディユ【cédille】
option keyC key = key-ccedil.png ça va garçon français leçon

★合字 œ
option keyQ key = key-oelig.png œuf bœuf sœur

★合字 æ
option keykey-apostrophe.png = key-aelig.png cæcum nævus

2007年06月10日

強調したキーボード表示

escF1F2F3F4F5F6F7F8F9F10F11F12

`1234567890-=delete

tabQWERTYUIOP[]\

caps lockASDFGHJKL;'return

shiftZXCVBNM,./shift

fnctrloption ⌘        ⌘enter

 

~!@#$%^&*()_+

{}|:"<>?    space

 

<kbd>・・・キーボード入力される文字であることを示すタグを使用する。

★cssにkbdの設定を記述する(任意に色やボーダーを変更してみる)以下はサンプル

kbd {
color: #0f0f0f;
background-color: #ffffff;
font-family: "Lucida Grande",monospace;
font-weight: normal;
font-size: 100%;
text-align: center;
border-top: 1px outset #c0c0c0;
border-left: 2px outset #c0c0c0;
border-right: 3px outset #ffffff;
border-bottom: 3px outset #ffffff;
padding-left: 0.4em;
padding-top: 0.1em;
padding-right: 0.4em;
padding-bottom: 0.1em;
line-height: 1.6em;
vertical-align: top;
margin-right:3px;
margin-left:3px;
}

★本文に<kbd>指定文字</kbd>と記述する
特殊文字入力は NCR [numeric character reference](数値文字参照)で指定する

★数値文字参照変換オンラインサイト
☆AOK's JavaScript Sample:数値文字参照(NCR)に変換
☆@Nelii:数値文字参照変換スクリプト
平田@アスカネット:文字列 → 数値実体参照変換

2007年06月09日

キーボードで直接入力できない特殊な文字の入力

数学記号、アクセント記号付き文字、矢印やその他の飾り文字などは、「文字パレット」を使用して書類に挿入できます。

mod-inputmethod.gif入力メニューから「文字パレット」または「編集」メニューの「特殊文字…」を選ぶ。
特殊文字は記号タブの技術用記号。
special-char.png
テキストエディットなどユニコード対応のエディターを開いておいて、入力したい特殊文字をダブルクリックすると入力することが出来ます。

mod-apple.gifは英字モードinput-a.gifoptionshiftK のショートカットキーでも入力できます。
文字コードは:私用領域(私用領域文字)Unicode : F8FF UTF8 : EF A3 BF

apple-command-key.gif「林檎マーク」は私用領域ですので公開は画像にしましょう。

☆AOK's JavaScript Sample:数値文字参照(NCR)に変換の開始コード:8980でのmacとwinの表示比較スクリーンショット

★mac OSX Safari の表示の場合
mac-ncr-8980.png

★win XP Firefox の表示の場合
win-ncr-8980.png

2007年06月06日

キーボードショートカット

操作を迅速にするには「ショートカット」を覚え、利用しよう。

メニューバーのプルダウンメニュー内に表示されているショートカットキーのシンボルの意味は?

finder-help.jpg Finderのヘルプメニューの「Macヘルプ」からキーワード「ショートカット」 または 「特殊キーのシンボル」で検索。

★特殊キーのシンボル

名称画像kbdNCR
コマンド (command)commnad key&#8984;
シフト (shift)shift key&#8679;
オプション (option)option key&#8997;
コントロール (control)control key&#8963;
デリート (delete)delete key&#9003;
リターン (return)return key&#8617;
エンター (enter)enter key&#8996;
イジェクト (eject)eject key&#9167;
エスケープ (esc)esc key&#9099;
上矢印 (up arrow)up arrow key&#8593;
下矢印 (down arrow)down arrow key&#8595;
左矢印 (left arrow)left arrow key&#8592;
右矢印 (right arrow)right arrow key&#8594;
先頭 (Top[Home])Top(Home) key&#8598;
末尾 (end)end key&#8600;
ページアップ (page up)page up key&#8670;
ページダウン (page down)page down key&#8671;
Appleマークapple key&#63743;
タブ (tab)tab key&#8677;
大文字 (caps lock)caps lock key&#8682;

※winの人はkbdの表示は?になります。

☆アップル Mac OS X: キーボードショートカット
☆MacWiki:キーボードショートカット
☆Bridge 1 Software:Mac OS 用のキーボードショートカット