2010.09.11.

GarageBandでiPhone着信音を作ってみた

私の中のiPhone着信音進化過程。

  1. iPhoneに入っている標準着信音を使う
    最近はiPhoneを使っている人も増えてきたので呼び出し音が鳴ったと思ったら隣の人だったりする。
  2. iTunesの音楽をiTunesで加工して着信音に変換する
    iTunes内で完結するので楽なんだけど微調整がしづらい。
  3. iTunesの音楽をGarageBandで加工して着信音に変換する
    やってみると意外と簡単。微調整も効く。
  4. GarageBandでオリジナル着信音を作る
    GarageBandに入っているメロディやリズム音を組み合わせて自分だけの着信音を作る。けっこう楽しい。

GarageBandはMacを買ったら付いてくる、おまけの音楽ソフトだ。うちのMac君にも入っているのは知っていたけれど、試しに一度開いたきりで長い間忘れられていたソフトでもある。
そもそも私は、音楽系は全く疎く音楽用語や楽器名もさっぱりチンプンカンプン。
そんな訳で使う機会がなかったんだけど、せっかくタダで付いてきたソフトだ。ネットで色々読んでいたら簡単そうだったので少しくらいは使ってみようかなという気になった。

今回はこのGarageBandでオリジナル着信音を作る方法を簡単に説明しようと思う。ただし、私は音楽に関しては本当に全然わからない。さらにGarageBandの使い方もよくわかっていない。説明書を見なくても使えるからMacなのだと開き直ったりしている。だから「簡単にできそうだね」という雰囲気だけの解説です。こうすればもっと簡単だよ、とかあったら教えてください。


GarageBand01

まず、GarageBandを開いたら左側の「iPhone着信音」を選んで次に「Example Ringtone」をクリック。


GarageBand02

「テンプレートから新規プロジェクトを作成」というウインドウが開くので、適当な名前をつけて「作成」ボタンをクリック。


GarageBand03

新しい画面が開きます。そこにはサンプルの曲が表示されています。試しに曲を聞いてみた後に、メニューバーの「トラック」>「「トラックを削除」で消してしまいましょう。


次は準備段階。

GarageBand04
  1. 目玉みたいなボタンをクリック。画面右側がループブラウザに切り替わります。
  2. ここの三つのボタンでカラム、ボタン、ポッドキャストサウンド表示に切り替えられます。ドラムやリズムパートなどの音源を組み合わせることで曲を作っていきます。
    もちろんサンプル曲のようにひとつの音源だけでも着信音にはなりますが、それじゃおもしろくないよね。
  3. ここで時間表示に切り替えます。
  4. 「C」で時間表示に切り替えたので、ここには秒数が出ています。この黄色いバーをマウスでズズズッと引き伸ばしてループする時間を決めます。長さは40秒以内に設定。バーを移動することで曲の聞かせたい部分だけをピックアップすることができます。
  5. メニューバーから「トラック」>「マスタートラックを表示」をクリックすると、ここにマスター音量が表示されます。これでフェードイン、フェードアウトを操作します。

ここまでで、準備完了。


さっそく着信音を作ろう。

GarageBand05
  1. ループブラウザではサウンド名をクリックすると音が聞けるので、気に入ったメロディや、リズムサウンドがあったら、マウスでズルズルっと中央の作業エリアにドラッグします。
    一番下の再生ボタンで確かめながらいい感じの音を組み合わせていきます。
    今回は、ジャングルの音にメロディパートを組み合わせて、太鼓や鐘の音を加えてみました。
  2. 短いリズム音なんかは、このへんにマウスを当てるとクルリンとしたマウスカーソルに変わるのでそのまま引っ張ってやると、バーが伸びていきます。
  3. マスター音量はグラフのようになっていて、最初から最後まで一定の音量になっています。この上端のラインをマウスで操作してフェードイン、フェードアウトを作ります。着信音は同じサウンドをループするので、繋がりが唐突にならないように調整です。きれいにループさせるやり方が他にあるのかもしれませんが、今のところ勉強不足でわかりません。

以上で音作りは完了。


GarageBand06

最後にメニューバーの「共有」>「iTunesに着信音を送信」でiTunesのライブラリ「着信音」の中に着信音用ファイルとなって取り込まれます。


ちなみにiTunesの中の曲から着うたを作るときは、メニューバーの「コントロール」>「メディアブラウザを表示」でiTunesの中身が表示されるので、曲を選んで同じように中央の作業エリアにドラッグしてサビ部分を40秒以内に加工してあげれば出来上がりです。40秒以内じゃないと着信音と認識してくれないので注意してね。

今回使ったのは、GarageBand’09 バージョン 5.1(398)です。

せっかくだから作ってみた着信音を聞いてもらおうかな。テーマは「南の島の朝」
着信音としてはちょっとおとなしすぎるかな。もう少し修業が必要?

もしあなたのMacの中にも忘れられているGarageBandがあれば、一度は試してみるといいですよ。

参考サイト

2010.06.23.

iOS4

iPhone3GSをiOS4へアップグレードした。

ブルートゥースのキーボードに対応したのがうれしい。この前iMacを買ったときに付いてきたブルートゥースキーボードはテンキーが付いてなかったので、今まで使ってたキーボードを使うことにして押し入れにしまったままだったんだよね。
さっそくそれを引っ張り出してきて設定しようとしたら、ブルートゥースが繋がらない。
どうやら一度iMacで使えるように設定してあったので、それを解除しないとiPhoneで認識してくれないようだ。
iMacのメニューバーでブルートゥースアイコンをクリックして、「Bluetooth環境設定」を開き、キーボードを削除してやったら、iPhoneで認識してくれた。
新品なのに使われていなかったキーボードにやっと活躍の場ができたのでした。
辞書登録も出来るようになったし、入力作業は便利になるね。
あとは、Appleのブルートゥースキーボードを持ち運ぶケース(使用時にはiPhoneスタンドになる)をどこかで出してくれれば、外での作業は完璧でしょう。

他にも色々と便利な機能が増えたんだけど、個人的に期待していて実装されなかったものがひとつある。それは、電話中の会話を録音できる機能。マルチタスクになったらできるようになるのかなと思っていたけどダメみたい。アプリも探してみたけれど、見つからなかったしマルチタスクになっても無理なのかな?

2010.03.13.

WordPlessでページナビゲーションを表示する

WordPlessのプラグイン「WP-PageNavi(バージョン 2.61 )」を入れてみました。例によって自分のブログに合わせてデザインを変更してみます。

まずインストールしたらページナビを表示したい場所に

<?php if(function_exists('wp_pagenavi')) {
wp_pagenavi();
} else {
vicuna_paging_link('next_label=Newer Entries&prev_label=Older Entries&indent=2');
} ?>

を記入。これだけ。

サイトを表示してみると、こんな感じでナビが出てきていると思います。これはページの数が少ないと「« First」が出ないなど、ページ数によって表示のされ方が変わってきます。

さて、今度はまたWordPlessのダッシュボードに戻って、左サイドの下にある設定をクリック。さらにその中に「PageNavi」の設定があるはずです。それを開くと Page Navigation Options が出てきます。

Text For Number Of Pages はページナビの「Page 5 of 14」部分。私はジャマくさいので削除しました。
Text For First Page は「« First」。Text For Last Page は「Last »」。
Text For Next Page とText For Previous Page はそれぞれ「»」「«」です。ここは自由に書き替えられます。
例えば「« First」」を「最初のページへ」などと変えることが出来ます。
私は Text For Number Of Pages のところを削ってしまいましたが、やっぱり全体のページ数はどこかに表示したいと思ったので、Text For First Page に「« First ( P 1 )」、Text For Last Page に「Last ( P %TOTAL_PAGES% ) »」を入れてみました。
「%TOTAL_PAGES%」は全体のページ数を表示するので「Last ( P 14 ) »」などと表示してくれるはずです。Firstの ( P 1 ) は無くてもいいんですが、Lastと一緒に表示されたときにバランスが悪いので入れました。
設定が終わったら下の方にある「Save Changes」を押して設定完了です。
あまり長くなりすぎると途中で折り返されてしまって、表示が崩れることもあります。Page Navigation Options ではさらに、ページ番号をいくつまであらわすかなど細かく設定できるので、表示範囲の横幅寸法に合わせて調整するとよいでしょう。

最後にまたダッシュボード、左サイドバーの「プラグイン」の中の「編集」を開きます。右側に出てくる「編集するプラグイン」で「WP-Pagenavi」を選んで「選択」ボタンをクリック。さらにその下にある「wp-pagenavi/pagenavi-css.css」をクリックするとcssの編集画面になります。cssを変更する前にいつでも元に戻せるように、必ずコピーしてバックアップしておきましょう。後はここで好みに合わせてcssを編集すれば、オリジナルページナビの完成です。
あるいは、- wp-content/plugins/wp-pagenavi/pagenavi-css.css の pagenavi-css.css ファイルを差し替えてしまってもいいです。

私が編集したcssはこんな感じ。ezorisu-webのHomeからずずーっと下の方にスクロールしていくと実物が見えます。

元のcssをそのまま上書きすれば同じように表示されます。そのまま使いたいという方は、どうぞご自由にお使いください。

.wp-pagenavi {
	text-align: center;
	font-size: 95%;
}

.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 3px 4px;
	margin-right: 1px;
	text-decoration: none;
	color: #fff;
	background-color: #999; /* IE 用 */
	background: -moz-linear-gradient(top, #999, #666); /* Firefox 用 */
	background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#666)); /* Safari,Google Chrome用 */
}
.wp-pagenavi a:visited {
	color: #b3b3b3;
}
.wp-pagenavi a:hover {
	background-color: #666; /* IE 用 */
	background: -moz-linear-gradient(top, #777, #444); /* Firefox 用 */
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#444)); /* Safari,Google Chrome用 */
}
.wp-pagenavi a:active {
	color: #ff8000;
	background-color: #e6e6e6;
}
.wp-pagenavi span.current {
	padding: 3px 4px;
	margin-right: 1px;
	color: #555;
	background-color: #e6e6e6;
}
.wp-pagenavi span.extend {
	margin-right: 1px;
	color: #333;
}
.wp-pagenavi a.previouspostslink {
	color: #fff;
}
.wp-pagenavi a.nextpostslink {
	color: #fff;
}
.wp-pagenavi a.first {
	padding: 3px 8px 3px 12px;
	color: #fff;
	-webkit-border-top-left-radius: 50px; /* Safari,Google Chrome用 */
	-webkit-border-bottom-left-radius: 50px; /* Safari,Google Chrome用 */
	-moz-border-radius-topleft: 50px; /* Firefox 用 */
	-moz-border-radius-bottomleft: 50px; /* Firefox 用 */
}
.wp-pagenavi a.last {
	padding: 3px 12px 3px 8px;
	color: #fff;
	-webkit-border-top-right-radius: 50px; /* Safari,Google Chrome用 */
	-webkit-border-bottom-right-radius: 50px; /* Safari,Google Chrome用 */
	-moz-border-radius-topright: 50px; /* Firefox 用 */
	-moz-border-radius-bottomright: 50px; /* Firefox 用 */
}

今回は位置的に区切り線の役割も持たせたかったので、地味めの色を付けてみました。
「First」と「Last」は進行方向に丸みを持たせ、バックカラーには少しグラデーションをかけてあります。これは最近話題のCSS3による新しい機能です。
Firefox、Safari、Chrome の最新バージョンで表示されるはずです。IEは対象外ですが、単純な四角いマス目に表示されるだけで機能的には支障ありません。特に画像ファイルを用意しなくても簡単にそれなりの見せ方が出来るのはいいですね。

CSS3はなかなか素敵な機能が他にもあって、楽しそうですがこの話はまた別の機会に。

【 訂正 】
上記css内で

CSS.wp-pagenavi a:hover {
	background-color: #6898af;
}

部分を

CSS.wp-pagenavi a:hover {
	background: -moz-linear-gradient(top, #777, #444); /* Firefox 用 */
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#444)); /* Safari,Google Chrome用 */
}

に訂正しました。(すでに訂正済み) 2010年3月13日 20時35分
a:linkにグラデーションをかけたらa:hoverもグラデーションにしないと変わらないようです。

【 再訂正 】

申し訳ない、再訂正(上記cssは訂正済み) 2010年3月13日 23時00分。
.wp-pagenavi a, .wp-pagenavi a:link { } に「background-color: #999; /* IE 用 */」追加。
.wp-pagenavi a:hover { } に「background-color: #666; /* IE 用 */」追加。

IEは機能的には支障ありませんと書いてしまいましたが、CSS3でグラデーションを使う場合、background部分の表示が消えてました。IE用には何も指定してないことになるから当然ですね。IE用にbackground-colorを指定しておかなくちゃ。
ボックスの角丸の方は、丸くならず四角く表示されますが一応見られる状態にはなっています。

CSS3は試しながら使っているので、まだまだお試し期間というところです。