プログラミング?なにそれおいしいの?(・・;)

アラサーSEの備忘録(プログラミングとデザイン)

Macの起動音(ジャーン)をAutomaterを使って解決(?)した方法(._.)φ

ずいぶん昔から、Macの起動音に関して困ってました。
特に外で起動したときにジャーンって鳴って、「うわ、あいつのMacアピールまじうぜぇ(`Д´)」って思われないかという被害妄想に陥ることがあり、おちおちスタバマック(造語)もできません。

確か記憶ではSnow Leopardくらいまでは、起動音を消すアプリが正常に動いていて問題なかったんですがLionくらいからそのアプリも使えなくなってしまった。。。

ちょっとググるとターミナルコマンドを使って消す方法があるみたいです。

gogohack.com


これやってみたんですが、起動音消せなかった。
環境問題ですかね。。。

なので今はAutomaterを使った、別の方法で対応してます。

※もしTerminalでやるのが怖いって人がいれば是非参考にしてください。

Automaterを使った解決法

手順は大きく2つ

  • ①シャットダウンするときにMute(音量消去)する
  • ②起動時にMuteを解除する

以下解説

①シャットダウンするときにMute(音量消去)する

Automaterで以下の内容のアプリケーションを作成します。

  1. コンピュータの音量を調整する
  2. すべてのアプリケーションを終了する
  3. シャットダウンする(AppleScript)

以下が完成版のイメージ

f:id:origami03:20150926234911p:plain

AppleScriptのソースは以下の内容

on run
	
	tell application "System Events"
		shut down
	end tell
	
end run

ちなみにこの方法だと、シャットダウン前の確認ダイアログは出ないのでダイアログを出したければ、音量調整の前に以下のApplescriptを入れてあげればOK
(Automaterの「確認を求める」でもいいんだけど、ダイアログボックスのOKボタンが活性にならない。。。)

on run
	
	display dialog "シャットダウンしますか?" with icon note --buttons {"キャンセル", "OK"} default button "OK" cancel button "キャンセル"
	
end run

上記のアプリケーションを作ったら、あとはシャットダウンしたいときにこのアプリケーションを起動すればOK
自分はキーボードショートカットからアプリケーションを起動できるようにBetterTouchToolを使ってます。

Control + 電源ボタンが通常の終了方法でなのでキーは以下を指定。
「Control + F12」

※ShutDownMuteがアプリケーション名
f:id:origami03:20150927000112p:plain

②起動時にMuteを解除する

Muteを解除するのは単純でAutomaterで以下の内容だけのアプリを作る

f:id:origami03:20150927000420p:plain

後は、ログインオプションとして作ったアプリを指定するだけ

※MUTEOFFがアプリケーション名
f:id:origami03:20150927000718p:plain



以上の手順で、なんとか力業で解決した感じです。。。

本当は通常のシステム終了時に音量をMuteにする方法があればベストなんですが、
今のところやり方はわからないですね。。。

早く対応アプリが無料で出ることを臨む。。。

Alfredの背景色の変更方法(._.)φ

MacBook Airのアプリケーションの中で最も起動回数の高いアプリはなにか。
Safari  → x(・ェ・)NO(・ェ・)x
Chrome → x(・ェ・)NO(・ェ・)x
Atom  → x(・ェ・)NO(・ェ・)x

では何か?そう

Alfred

www.alfredapp.com

Alfredの説明

AlfredはMacのアプリケーションランチャー
(ワークフローとか使えたりそれだけじゃないんだけど)

百聞は一見にしかずということで、以下のGif参照
(まだ何も説明してないけど)

f:id:origami03:20150926004046g:plain

キー入力に併せてアプリの候補を出し、その中から選択して起動することができる。
しかもよく起動するアプリが自動的に上にくるので起動すればするほど短いキーで起動できる

自分はこんな感じの使い方が多い
"sys" → システム環境設定
"c" → Google Chrome

これを知ってからはLaunchpadなんて使うことなくなったな。。。

まあAlfredの説明はこれくらいに。

たくさんの紹介サイトがでてるので
まだ使ったことない人は別のサイトを参照してみてください。

Macユーザーが恋する必須の神アプリAlfredを120%使いこなすための手引 – OTTAN.XYZ

余談ですが、自分はAlfredはアプリ起動。Spotlightはファイル検索用として利用してます。

【本題】Alfredのテーマを変更する

前に、Alfredのテーマを探しててこのサイトをみつけまして

m.designbits.jp

Blurの感じいいな〜と思ってワークフローをいれてみたんだけどAlfredが全く半透明にならない。。。
バージョンがYoshemiteにあがったから?と思ってていったんあきらめかけたんだけど、
よく見たら、Blurってぼやかすだけで、半透明にするのは別でやる必要があると。

色々調べててよくわからなかったので、備忘録として残すことに。

①独自テーマの作成

f:id:origami03:20150926010122p:plain

アルフレッドの環境設定の中でAppearanceを選択
右下のHelpの隣の"+"ボタンを押下

f:id:origami03:20150926010721p:plain

"tomei"って名前で作ってみる

②背景色の変更

ここからが少しわかりにくいので動画をって見ました。

www.youtube.com

・背景をクリックすると背景色を変更できます。(テーマの変更とは関係ない)
・Alfredの中をマウスオーバーすると下の小さな小さな白い文字が変わっているのがおわかりいただけるだろうか。そこに説明があるがクリックしてAlfredのバーの中の背景色を変更できます。
・動画では説明しませんでしたが、フォントやWindowの幅、余白なんかも変更可能

こんな感じでAlfredの背景色ができます。

ちょっと雑でしたが、あしからずm(_ _)m

ブログにソースコードをシンタックス付きで載せたい(._.)φ

よくブログ内にソースコードシンタックス付きで載せているのを見かけます。

ブログにソースコードを載せるときに、せっかくなら綺麗に載せたいなってことからはてなブログでもそれができるのか調べることに。

スーパーpre記法

どうやらはてなブログではスーパーpre記法という方法で記載できるらしい

help.hatenablog.com

ふむふむ(._.)φ
なるほどね。じゃあ早速やってみよう。

と思って、入れてみたけど全然できねー(-.-#)って思ったらどうやら、「HTML編集」や「編集みたまま」にぶちこんでもダメらしい。。。
そりゃそうか。。。HTMLの書き方じゃないもんね(赤面)

「編集はてな記法」で記載する必要があるそう。



以下手順

①「編集はてな記法」の設定

f:id:origami03:20150926082910p:plain

はてなブログのダッシュボードの「設定」から編集モードで「はてな記法モード」を選択するだけ

スーパーpre記法

ブログ中のソースを「>||」 ~ 「 ||<」で挟む。
ちなみに「>||」の部分は「>|ruby|」って記載することで、言語を指定してシンタックス付きにできるらしい。


以下 ruby のソースから貼り付け

def stopwatch(time)
  start = Time.now.to_f
  time.times{ |i| yield i}
  Time.now.to_f - start
end

secs = stopwatch(10000) {|i| Math.sqrt(i)}

puts "#{secs}秒かかりました。"


はてな記法 恐ろしいこ子
f:id:origami03:20150926084651j:plain

デザイン未経験のSEがデスクトップ用の壁紙を自作してみた(後半)

前回に続き壁紙自作の後半です。

前回の内容
・参考になるデザインを探す
・Pixelmatorで加工

origami03.hatenablog.com


今回は後半戦ということで、デザイン寄りではなく、
ちょっとだけプログラミングよりの内容(たいしたことないけど...)

レイヤー説明

前回、Pixelmatorで画像を加工するときにレイヤーの説明を一切していなかったので、そもそもこの画像どこからどこまで自作?っていう疑問が(自問自答)
まずは今回作った壁紙がどんな構成になっているのか

百聞は一見にしかずということで、以下のGifをご覧ください。
f:id:origami03:20150925205933g:plain

だいたいの雰囲気は掴めるかかな?
ちなみに背景の写真は自分で撮影したものではなく拾い物です(´・ω・`)
いつか自分で取った写真を使ってみたい。

もっと詳細なオブジェクト単位の配置など興味があれば以下のリンク先参照
(要Pixelmator)

Dropbox - Background01.pxm

GeekToolで日付と天気を出す

Macのヘビーユーザー御用達のGeekTool 。デスクトップ上に、日付、時間、天気、CPUの使用率、OSのバージョン、その他諸々を出すことができるツール

f:id:origami03:20150923225340p:plain


昔から、GeekToolは少し使ってて、デスクトップに日付と時間は出していたけど天気は初めてだったのでちょっと手間取った。
やり方はこの辺のブログがわかりやすかったかな。興味ある人はお試しあれ。

loumo.jp loumo.jp


天気のGeekTooのコマンドに書くのは以下の内容
JAXX0085の部分は都道府県別なので自分が表示したい地域のやつを調べる必要があります。ちなみに”JAXX0085”は東京。

curl --silent "http://xml.weather.yahoo.com/forecastrss?p=JAXX0085&u=c" | grep -E '(Current Conditions:|C//' -e 's///' -e 's/<\/b>//' -e 's/
//' -e 's///' -e 's/<\/description>//'

以下のサイトから探せるので、カスタマイズするときの参考に。

Weather on AOL - local, regional and national weather forecasts, news, stories and photos

Autometorを作成

あんまりかっこよくないのですが、曜日に合わせてヘッダ部分を動的にしたかったので画像を7枚用意。7枚の画像を曜日に合わせて入れ替えることでしたのような動きをさせています。

普通のWEBサイトやアプリなら、タップとかシステム日付に合わせて文字の背景色とアンダーバーの配置だけ切り替える方式なんだろうけど、ただの壁紙という性質上どうしようもなかった。(完全に言い訳)

超絶ダサいですが、大事なのはどんな方法であれ実現すること...(-_-;)

普通曜日毎に切り替えようと思ったら、Macのシステム環境設定で、デスクトップの背景を毎日変更することができそうなんだが。。。

f:id:origami03:20150923231513p:plain

再起動毎に壁紙が変わってしまう。。。
Macにとって毎日って起動毎なの...?

仕方が無いので、デスクトップを時間を設定して変更できそうなフリーウェアを探してみたけどちょうどいいのがない。
ということで、Automatorで作ることに。

色々やってみたけど一番簡単だったのが以下の手順


以下の通りにAutomaterを作成すればOK
f:id:origami03:20150925214116p:plain

以下解説

①変数の値を取得

Automaterの変数の中に"現在の曜日”があります
取得結果をlogとかで見ればわかるんだけど曜日に合わせて曜日の英字が取得できるようですね。

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

②Applescrptを実行

①から変数として"曜日"が渡されるので
画像を配置しているパスを結合します。
以下がApplescriptのソース

on run {input}
	set fileName to input as text
	set filePath to "/Users/user/Dropbox/02_Image/02_Wallpaper(Mac)/03_Week/"
	#display dialog filePath & input & ".jpg"
	return filePath & input & ".jpg"
end run

・inputに"曜日"が入っている
・filePathの部分は壁紙を配置するフォルダ
・".jpg"を結合してreturn

③デスクトップピクチャを設定

②で受け取ったファイル名を壁紙に設定します。

画像のファイル名を以下の通りにすることを忘れずに!(´Д`)
「曜日名」 + .jpg

あとは上で作ったアプリケーションを起動時のアプリケーションに設定することで
毎回Mac起動時に壁紙が変わります。

終わり

以上をもって壁紙の作成手順は終了。
f:id:origami03:20150923210133p:plain


また何か作って備忘録をブログに書こうっと。

読んでくださった方ありがとうございましたm(_ _)m

デザイン未経験のSEがデスクトップ用の壁紙を自作してみた(前半)

※もしデザイン未経験で、プログラム開発しかしたことないけど、デザイン興味あるな〜って人がいて、その人の踏み台になれれば幸い(>_<。)

 

生まれて初めてブログを書いてみた。

シルバーウィークの最終日だからなんとなく現実逃避に。。。??(×_×) 

 

Twitterは頻繁に(?)呟いているけど、ブログを書くってなんか億劫になるのでアカウント作ってから一度も書いてなかった。。。

 

まずは軽く前提条件を書いておくと 

・仕事は業務SE(SIer)で、基本的には管理がメインです。

もともとはJavaの技術者ですが、最近は、仕事ではほとんどプログラムを書かなくなったので、焦ってRuby on Railsとか勉強中。。。

 ・デザインは仕事上未経験。でも結婚式の余興とかのために画像の加工とかは少し。レイヤーとか、ブラシとか少しはわかる程度。pixelmatorとiDrawが友達。

・29歳で結婚はしてますが、まだ子どもはいません。(これ関係ないな。。。)

 

ちなみにこの壁紙作ったあとの嫁とのやりとり

自分「見て!壁紙自分で作ったよ!すごいでしょ!褒めて!」

嫁 「すごいね!おしゃれ!」

自分「どこがどうすごい?ねえ?どこがすごい?」

嫁 「は?なんか言った? (-.-#)イライラ」

自分「ごめんなさい。。。」

 

さてさて、当ブログの初回投稿は壁紙作りとしての備忘録。

備忘録とはいえ、こんなに作るの頑張ったのだから、誰かに見てもらえたら嬉しいってことでブログを書いてみることに。

 

壁紙を集めるのがめっちゃ好きで、普段からPinterestでよく壁紙を探しており、壁紙探しには余念がないのだが、納得のいく壁紙がみつからないので、作ることにした。

 

結局使った時間はおそらく8時間くらい?

ただ壁紙を作るだけでなく、GeekToolで日付出したり、最終的に7枚の壁紙を日替わりで変更するAutomatorまで作ったのでこんなにかかってしまった。

 

現在のデスクトップはこんな感じ

f:id:origami03:20150923210133p:plain

 

自分で作ると可愛さは1億倍くらいになるなぁ(T^T)

 

とりあえず備忘録なので手順を残しておこう

ざっくりいうと以下の4つ

  • 参考になるデザインを探す
  • pixelmatorで加工
  • GeekToolで日付と天気を出す
  • Autometorを作成

参考になるデザインを探す

前に、Twitterのアイコン作った時もPinterestから参考になるデザインを探してきてそこから自作した感じだったので、今回もその手順で。

 

自分はFlatデザインか、Materialデザインが好き。

今回はなんとなく、Materialデザイン

Pinterestで「Material」「Design」「UI」って検索したかな。

Materialっていれたら、検索候補にでたのでそのまま検索

デザインの参考にさせていただいたのはこのデザイン

jp.pinterest.com

やっぱり最近のMaterialデザインがかっこいい。

PinterestでMaterialって検索して一番上に出てきたやつ。

まさにスマホアプリのデザインって感じ。

こんなアプリがあれば使ってみたい。。。

 

あと今回採用したフォントはFutura

フォルクスワーゲンLOUIS VUITTONで使われていることで有名。

 

matome.naver.jp

そういえば、昔GUのロゴがFuturaに似てるとか似てないとか。。。

まあいいかそんなことは。 

 

 pixelmatorで加工

まあ有名だから説明するまでも無いと思うけど

 pixelmatorMacの写真・画像編集ツールPhotoshopは高くて買えないけど写真と画像の編集はしたいと思っていた人向けのツール

最近はiPadiPhone用も出てるみたい。使ったことないけど。。。

 

 pixelmatorで苦戦したポイントは以下の4つ

f:id:origami03:20150923214036p:plain

 

 ①曜日毎に文字の明るさを変える

作りとしては、7パターン曜日毎に画像を作って日替わりで差し替える。。。

本当はこんな日替わりで差し替えるなんてアホみたいなこせず、フォントの明るさや赤いバーをGeekToolで動的に切り替えたかったが、自分の力量ではできませんでした。。。いい方法を知っていれば教えて欲しい。

f:id:origami03:20150923220123g:plain

 

Futuraとアイコンを湖に移ったように反転させる

 これは意外と簡単で、文字を水平方向に180度反転させて、不透明度を25%くらいにするだけ。やり方はpixelmatorの神が知っている。。。いや〜いつもお世話になります。

Pixelmatorで立体的なテキストロゴを作る方法 - YouTube

 ちなみにロゴは、pixelmatorのデフォルトで入っている時計のシェイプを4つ90度毎に回転させながら組み合わせるだけ。Futuraとはなんの関係もございません( ´▽`)

こんなやつ。

f:id:origami03:20150923221520j:plain

 

③アイコンを作る

基本的にはpixelmatorのCircleと何かの組み合わせ

一番面倒だったのが、以外にも雲。。。

シェイプとシェイプを組み合わせて重なってる部分をくり抜くことができない。。。

調べても説明ないしな〜って思ったら、公式のチュートリアルにあった!

灯台下暗し。

Pixelmator Tutorials – Custom Shapes

 

④画像に白みがかったボケを作る

実は背景の写真自体はもともとそこまで白くなっていない。

Materialっぽい感じを出そうと思ったら、色がはっきりしない方が全体のデザインとして美しいかなって思ったので。。。

やったことは、写真の上のレイヤーに白い背景を不透明度50%にして載せるだけ。。。たぶん本当は画像自体にエフェクトをかけるとか、もっといいやり方があるんだろうけど、独学なので許して欲しい。もっと本職のデザイナーさんならうまくやるんだろうな。

 

残りの以下のプログラマー的なのは次回に。

・GeekToolで日付と天気を出す
・Autometorを作成

 

 はじめてのブログで2500字か。

こんなもんなのかな。。。次はもっとうまく書こう。

 

では次回。