2013年10月31日木曜日

Google のロゴがハロウィン仕様に

今日の Google のロゴはハロウィンの魔女でした。
調合ゲームみたいな感じです。



魔女のスプライトはこんなかんじ。
https://www.google.co.jp//logos/2013/halloween13/sprite-reading.jpeg
https://www.google.co.jp/logos/2013/halloween13/sprite-stirring.jpeg

りんごが入ってるから大丈夫?
魔女の調合とか占いの知識・技術を総称してウィッチクラフトっていうらしいです。
http://ja.wikipedia.org/wiki/ウィッチクラフト

2013年10月30日水曜日

無料学習アプリ ShareWiz(シェアーウィズ)

現在 iOSネイティブアプリ、ブラウザWebアプリとして提供されている無料の学習アプリ ShareWiz のご紹介です。開発は株式会社シェアウィズです。



Webブラウザ版
http://share-wis.com

iOS 版
https://itunes.apple.com/jp/app/wu-liao-xue-xi-sharewis-sheau/id585517208?mt=8


知識を地図のように並べたインタフェースが特徴で、プログラミングや英語、スポーツや経営など幅広い分野のコースが揃っています。




コースをクリックすると動画やテキストで学習を開始できます。
学習した後は理解度チェックに進み、クイズ形式で復習できます。



学習が完了すると地図上で学習した単位に緑色のマークが付きます。
地図上を踏破していく感覚で学習をすすめることができます。



2013年10月29日火曜日

Google App Engine SDK for Go がアップデート

久しぶりにサーバのプログラムを書こうと思ったら、Google App Engine の Go SKD がアップデートされていました。Version 1.8 になってだいぶ変わっていました。

まず、ディレクトリ名が google_appengine から go_appengine に変わっていました。
今までは PHP だろうが Go だろうが同じ名前だったのですが、それぞれの言語でディレクトリ名が変わっているようです。

また、こちらは重要なのですが、
ローカルサーバ起動時に IP アドレスを指定するオプションが変わっていました。
これまでは -a オプションで
dev_appserver.py -a 192.168.0.2 myapp

という風に IP アドレスを指定していたのですが、
これが --host オプションに変更されました。
dev_appserver.py --host 192.168.0.2 my app

これまでの -a オプションは使用できなくなっているので要注意です。 またサーバのログ出力フォーマットなど細かいところも色々と変わっていました。

2013年10月28日月曜日

Go で文字列をトリミングする

strings パッケージの Trim 関数を使って両端の文字をトリミングできます。
第2引数に取り除く対象の文字を複数指定できます。

str := "___ABCD___"
result := strings.Trim(str, "_")  // "ABCD"

2013年10月27日日曜日

jQuery 1 系と 2 系の対応ブラウザ

jQuery は現在 1 系と 2 系が存在しています。
現在は jQuery 1.10.2 と 2.0.3 です。
jQuery 2 系は古いブラウザに対応していないことに注意が必要です。
IE 7 や 8 で動作しません。
古いブラウザにも対応する場合は必ず 1 系を選択しましょう。

http://jquery.com - jQuery

2013年10月26日土曜日

iMac のメモリ増設方法

2年前のモデルですが、iMac (Spring 2011) のメモリ増設・交換方法です。

iMac の電源ケーブルを抜きます。

iMac 画面下部分のネジを外して蓋を取ります



メモリを交換する場合は、刺さっているメモリを取り外します。
黒いテープが付いているので、これを引っ張るとメモリが取り外せます。
少し力を入れて引っ張る必要があります。
私の場合は両手でテープを掴んで垂直に引っ張るとうまくいきました。


メモリを差し込む場合は向きに注意してください。
差し込んだ後、上から力を入れてメモリをスロットに押し込みます。
私の場合はここが一番力を使いました。
カチッというよりはズブッという感じでメモリが刺さるので目安にしてください。

全部終わったら黒いテープをもとに戻し、蓋を閉じて Mac を起動すればOKです。
このとき、メモリがうまく刺さっていないと Mac からビープ音がなります。


2013年10月25日金曜日

Safari 7 のデバッグコンソール

Mac OS X Mavericks に付いてくる Safari 7 のデバッグコンソールがガラリと変わってますね。


なんか Xcode の上の方っぽいですね。
ちょっと触ってみましたがログのフィルタ機能は多分前はなかったと思います。
あと、コンソールに入力した JS のシンタックスカラーリングとかしてくれますね。

やっぱり Xcode っぽい。

2013年10月24日木曜日

WavePad で mp3 ファイルのノイズを除去する

Mac の WavePad を使って mp3 ファイルのノイズを除去する方法です。

WavePad をインストールして起動します
http://www.nch.com.au/wavepad/jp/

「開く」ボタンから mp3 ファイルを開きます



「エフェクト > ノイズ除去 > 自動スペクトル減算法」を選びます
音声と音楽それぞれのプリセットが準備されているのでどちらか選びます


ノイズ除去の処理が開始されます
しばらく待つとノイズが除去された音声になります

ファイルを保存して完了です

2013年10月23日水曜日

HTML 要素にマウスを載せた時に表示されるコメント

title 属性を設定すればマウスカーソルを重ねた時に表示されるコメントを設定できます。
<div title="コメント"></div>

2013年10月22日火曜日

すぐに2つの文字列の違いを比較したい時

JavaScriptのデバッグ中に2つの文字列の違いをすぐに比較したい時、
こちらのブラウザで上で比較できるツールがとても便利でした。

http://labs.ceek.jp/diff/index.cgi - Ceek.jp

そのままブラウザで試せるので素早く使えました。

2013年10月21日月曜日

指定した data 属性を持つ HTML 要素を css の属性セレクタで指定する

HTML5 では独自データ属性として data-*** という属性を HTML 要素内に定義してデータを持たせることができます。

CSS から特定の data-*** 属性を持つ要素を選択するには、
属性セレクタを使って普通に
element[data-***="DATA"]

という形で書けばOKです。

2013年10月20日日曜日

IE10 で 7~9 までの表示をチェック

IE10 では IE 7 ~ 9 までの表示や動作を確認することができます。

IE10 を起動して F12 キーを押して開発ツールを出します。
ブラウザモードを変更すると IE7 ~ 9 から動作を選択することができます。
選んだブラウザと同じ動作に変わるため、デバッグには便利です。
ちなみにドキュメントモードはレンダリングエンジンのみ変わるようです。



参考

複数ブラウザでの確認を怠らない〜ブラウザモードとドキュメントモード〜 - トディーブログ

公式ドキュメント
http://msdn.microsoft.com/ja-jp/library/cc848894(v=vs.85).aspx#doccompat

2013年10月19日土曜日

Gmail のユーザアカウント名は替えられない

Gmail 用途に合わせて複数取得できるため便利ですよね。
アカウントを作成する際に名前を間違ってしまったため、
変更しようと思って調べてみたのですが、
どうやら Gmail ではアカウント登録時に使用した名前は変更できないそうです。

https://support.google.com/accounts/answer/19870?hl=ja
Google アカウントで Gmail を使用する場合は、登録後に Gmail のユーザー名を変更することは現段階ではできません。ただし、アカウントから Gmail を削除し、Google アカウントに Gmail でない別のメール アドレスを使用すればユーザー名を変更できます。また、別の Gmail のユーザー名で 新しい Google アカウントを作成することもできます。

2013年10月18日金曜日

JavaScript の正規表現パターン内に文字列変数を使う

JavaScript では正規表現オブジェクトを使って正規表現を扱うことができます。
リテラル形式とnew形式の2種類の方法で定義できます。

リテラル形式では /正規表現/ をという形で、
new 形式では new RegExp('正規表現') という形で書けます。

注意点として、 new で書く場合には正規表現を文字列として書かなくてはならないので、
\ をエスケープしなくてはなりません。
以下に 2 種類の書き方で試したものがあるのでご覧ください。

2013年10月17日木曜日

AirMac で無線規格を変更する方法

Apple の無線 LAN 親機 AirMac Express の無線規格(802.11nなど)を設定する方法です。
802.11b/g 互換にすると 802.11n に対応していないデバイスでも使用できるようになります。

Apple の設定ソフト AirMac ユーティリティを使用します。
http://support.apple.com/kb/DL1664?viewlocale=ja_JP&locale=ja_JP

起動するとこんな感じで AirMac Express が表示されます



クリックすると情報が出てくるので編集ボタンを押します



ワイヤレスオプションタブ内のワイヤレスオプションボタンをクリック



無線モードで規格を変更します



変更したらアップデートボタンを押して完了です

2013年10月16日水曜日

Excel2007 でVBAなどの開発メニューを表示する

Excel 2007 ではデフォルトで開発メニューが表示されていません。
VBA を使うときには開発メニューを表示する必要があります。
オプションで設定すれば表示されるようになります。

メニューのファイルからオプションを選択します。



「リボンのユーザー設定」から開発メニューにチェックを入れます。



これで開発メニューが表示されるようになります。


2013年10月15日火曜日

CSS で背景色をグラデーションにする

CSS の草稿としてグラデーションが定義されています。
Gradients - W3C

ページの背景やボタンなど様々な場所で使用できます。
グラデーションには4種類あります。
  • linear-gradient
  • radial-gradient
  • repeating-linear-gradient
  • repeating-radial-gradient
線形グラデーションのサンプルを作成しました。
http://okanoworld.appspot.com/sample/css/lineargradient/index.html

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>線形グラデーション</title>
        <link rel="stylesheet" href="lineargradient.css"></link>
    </head>
    <body>
        <h1>線形グラデーションサンプル</h1>
        <div id="gradient1" class="box">linear-gradient(bottom, pink, white);</div>
        <div id="gradient2" class="box">linear-gradient(45deg, lightgreen, yellow);</div>
    </body>
</html>

lineargradient.css
.box {
    width: 500px;
    height: 100px;
    margin: 10px;

    border-style: solid;
    border-color: gray;
    line-height: 100px;
    text-align: center;
    font-family: sans-serif;
}

#gradient1 {
    background: linear-gradient(bottom, pink, white);
    background: -webkit-linear-gradient(bottom, pink, white);
    background: -moz-linear-gradient(bottom, pink, white);
}

#gradient2 {
    background: linear-gradient(45deg, lightgreen, yellow);
    background: -webkit-linear-gradient(45deg, lightgreen, yellow);
    background: -moz-linear-gradient(45deg, lightgreen, yellow);
}

2013年10月14日月曜日

Google+ API ではサークルの操作ができない

Google+ は外部アプリからデータを操作するための API を提供しています。
Google+ API - Google Developers

ユーザの情報を検索したり、コメントを投稿することはアプリから可能なのですが、
ユーザをサークルへ加えたり、外したりするような操作は提供されていません。

Google+ API を使ってできることは以下で定義されています。
API リファレンス

ユーザ、アクティビティ、コメントの検索・読み込みと、
モーメントと呼ばれるアクティビティの記録が可能です。
モーメントではコメントや評価、ユーザの場所などを投稿できるのですが、
サークルに関する操作を行うことはできません。

基本的に外部アプリからサークルの操作を行うことは、
今のところできないのでアプリの仕様を決める際には要注意です。

2013年10月13日日曜日

jQuery UI のダウンロードから使用まで

jQuery UI は jQuery と比べると、CSS や画像が含まれるためファイルが多いです。
ライブラリに含まれるファイル数も多いので最初はどれを使ったらいいのかわからなくなりがちです。
ダウンロードから設置までをやってみましょう。

まずは jQuery UI を落とします。
公式サイトの Stable ボタンを押してファイルを落とします。

zip ファイルを解凍します。
できたディレクトリ内の ui/minified/jquery-ui.min.js を取り出します。
このファイル1つで jQuery UI の動作が可能です。

更に UI のデザインを定義している css と画像を取り出します。
themes/base/minified/jquery-ui.min.css
themes/base/minified/images
を取り出します。
css と images/ ディレクトリは同じ階層に配置してください。

最後に、jsと css を html から読み出せば OK です。
jQuery UI の前に jQuery をロードして置くことをお忘れなく。

機能毎にファイルが分割されているためファイルが多い


2013年10月12日土曜日

iPad + iOS7 でスイッチの機能を変える

iOS7 で本体の上部に付いているスイッチの役割を設定から変更できます。



設定 > 一般 > 本体横のスイッチの機能



画面の向きをロック、消音のどちらかを選択できます。
音量を下げるボタンを押しっぱなしにしておけばミュートにできるので、
画面の向きロックで良いと思います。

ちなみに、選ばなかった方の項目は、
コントロールセンターで設定可能です。


2013年10月11日金曜日

jQuery でマウスカーソルのホバー時の処理を書く

HTML 要素にマウスカーソルが乗っている時のスタイルの変化は CSS の :hover で書きます。jQuery では hover() メソッドを使って、スタイルだけではなく独自の処理を行うことができます。

リファレンスはこちら
.hover() - jQuery API Documentation


こちらにサンプルを作成しました
http://okanoworld.appspot.com/sample/jquery/hover/index.html


ソースコードはこちらから落とせます

index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery .hover() のサンプル</title>
  <link rel="stylesheet" href="hover.css"></link>
 </head>
 <body>
  <h1>下の四角形にマウスをのせてください</h1>
  <div id="message">マウスカーソルが乗っていません</div>
  <div id="area"></div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="hover.js"></script>
 </body>
</html>

hover.js
$('#area').hover(function() {
 $('#message').html('マウスカーソルがのりました');
 $(this).css('background-color', 'lightblue');
}, function() {
 $('#message').html('マウスカーソルがはなれました');
 $(this).css('background-color', 'pink');
});

hover.css
#area {
 width: 300px;
 height: 300px;
 background-color: pink;
}

#message {
 color: darkred;
 font-size: large;
}

2013年10月10日木曜日

jQuery で外部 HTML を読み込む方法

外部に準備した HTML を jQuery で取得して表示したい場合があります。
例えば演習問題の結果に合わせて表示するページを変えたい場合や、
端末ごとに表示するページを変えたい場合などです。

こういった場合は jQuery の load() メソッドを使って外部 HTML ファイルを読み込み、
現在表示中のページ内に挿入することができます。

APIドキュメントはこちら
.load() - jQuery


サンプルを作成したのでご覧ください。
サンプルページ - okanoworld


index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery load() sample</title>
 </head>
 <body>
  <h1>ここに外部 HTML ファイルを表示します</h1>
  <div id="page"></div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="load.js"></script>
 </body>
</html>

external.html
<h2>外部ファイル</h2>
<p>この文章は external.html に記載された外部 HTML の文章です</p>

load.js
$(function() {
 $('#page').load('external.html');
});

ソースコードのダウンロードはこちら

.load() を使えば外部 HTML を使ったページ作成が簡単に行えます。
ただし、Ajax を使っているため読み込みに若干時間が掛かることに注意が必要です。

2013年10月9日水曜日

JSON にコメント構文は存在しない

JavaScript で Web アプリを作っているとデータのやり取りに JSON を使う機会がとても多いです。

JSON(JavaScript Object Notation) とは JavaScript のオブジェクトとほぼ同じ形をしたデータ形式で、JavaScript のオブジェクトとしてそのまま扱うことができることが便利で広く使われています。

JSON - Wikipedia
JSON( RFC4627) - The Internet Society
Introducing JSON - json.org

JSON のそれぞれの項目にコメントを入れようとしたのですが、
どうやら JSON にはコメントが存在しないようですね。
JavaScript で使用できる // /*  */ は使えないようです。
コメントは別ファイルで準備しようと思います。


2013年10月8日火曜日

iOS を初期状態に戻す方法

昨日は iPad の音声にノイズが乗る現象について書きましたが、iPadを工場出荷状態に戻すことで元の状態に戻せました。iOS機器は iTunes を使って復元することができます。

以下の環境で行っています。
Mac OS X 10.8.5
iTunes 11

デバイスを Mac へ接続すると自動的に iTunes が起動します。
画面右上のデバイスボタンを押すと接続されているデバイスが表示されます。

リセットしたいデバイスを選択しましょう。


「iPad を復元」を押します



バックアップを押します


復元ボタンを押すと復元が始まります。


復元が完了すると iOS が初期状態に戻ります。

2013年10月7日月曜日

iOS7 を入れた iPad 3 のスピーカーにノイズが入る現象

私は iPad 第3世代に iOS7 を入れて使っているのですが、
強烈な現象が起こりました。

自宅のテレビでニコニコ動画を見ようと、
Apple TV へ iPad の画面をミラーリングようとしたところ、
iPad の動作がとても遅くなりました。

タッチしてもしてもスローモーションになった感じで、
激しく処理落ちしているようでした。
この時、テレビ画面は真っ暗でした。

ミラーリングを切ってみると、
iPad の画面にアプリのアイコンが1瞬だけ拡大されて表示されました。
(画面からはみ出るくらいの大きさ)

その後、iPad のすべての音声にノイズが入るようになりました。
iPad を再起動しても変わらず、動画や音声などすべてノイズが入ります。

すごいのが、ホーム画面でスリープボタンを押した時の効果音です。
ギュイーン!!という未来の電子銃のような、
割れるようなノイズがスリープするたびに鳴り響きます。
あまりにも強烈だったので動画を撮影して Youtube にあげてみました。



結局、iPad を工場出荷状態に復元したら治りました。
iOS7 のバグっぽいですね。
1度ノイズが入るようになると再起動しても治らないので衝撃的でした。

2013年10月6日日曜日

Amazon 大口出品と小口出品の違い

Amazon に商品を出品する場合には
大口出品小口出品のどちらかのサービスに登録する必要があります。
簡単な特徴は以下のとおりです。

大口出品

  • 登録料月額4,900円
  • Amazon で出品されていないオリジナル商品が出品できる
  • 一括出品ツールや注文管理レポートなど便利機能が付く


小口出品

  • 無料で登録できる 
  • Amazon で既に出品されている商品だけ出品できる 
  • 一括出品ツールなどの便利機能は付いていない 

特に出品されている商品の違いに注意が必要です。
小口出品では Amazon に出品されていないオリジナル商品などを出品できません。

参考
大口・小口比較 - amazon services

2013年10月5日土曜日

javascript の getMonth() は 0 からはじまる

JavaScript の getMonth() は 0 から始まるので注意が必要です。
ちなみに getDate() は 1 から始まります。

var date = new Date();
var month = date.getMonth() + 1;  // 1 足す
var day = date.getDate();
console.log('今日は' + month + '月' + day + '日です'); // 今日は10月5日です

2013年10月4日金曜日

画像の背景を透過する Web アプリ

画像の背景を透過したいときに使える Web アプリのご紹介です。

Clipping Magic



※ Safari は非対応です。
まず画像をこのページにドラッグします。
初期化が完了するとこんなかんじになります。


抜き取りたいところを赤で、残したいところを緑で塗ります。
少し塗るだけでもプログラムが判断して自動的に内外判定してくれます。

細かいところは拡大して塗りましょう。

完成したら Donwload をクリックすれば、背景が透過された画像が落とせます。
Web アプリでここまでできるなんてすごいですね。



2013年10月3日木曜日

Humble Mobile Bundle 2 に 3 つのゲームが追加

 以前紹介した Android ゲームを好きな値段で買える Humble Mobile Bundle 2 に新しく 3 つのゲームが追加されました。



3 つとも現在のところ 4.57 ドルを支払った方のみが遊ぶことができます。
4.57 ドルというのは全体で課金された額の平均値で、時間とともに変化するようです。
既に、平均値以上で購入している方は、自動的に新しい 3 本をダウンロード出来るようになっています。

追加されたゲームは以下の3本です。

Karateka Classic (ゲームメイキングの電子ブック付き)


QWOP


God of Blades



最終的にゲームが 9 本になりました。
今のところ 4.57 ドルで 9 本買えるので、1本当たり約50円ですね。
ご購入は以下から可能です。購入方法はこの記事の冒頭のリンクをご覧ください。

Humble Bundle Mobile 2

2013年10月2日水曜日

たった2人で開発中のブラウザ MMO RPG - Project Kyrill

有名なブラウザ RPG 「TRIGLAV」を開発した2人組のインディーズゲームクリエイター「SmorkymonkeyS」によるブラウザ MMO RPG 「Project Kyrill」の動画が続々と上がっています。


彼らが開発中の MMO RPG は Unity を使用しておりブラウザ上で動作するそうです。動画を見てみると、まるで大手のオンラインゲームのようなクオリティです。これを2人で作ってるのだからすごいですね。既に 4 年間も開発し続けているそうですが、完成が楽しみデスね。

Project Kyrill

SmorkymonkeyS



彼らが以前開発した TRIGLAV は 11 年も前に開発されたブラウザゲームで、50階建のタワーを登っていくハクスラRPGです。JavaScript で動作しているのですが、開発当時は IE のバージョンが 4 で、Firefox、Safari、Chrome なんて存在しなかったそうです。ブラウザの性能や JavaScript の API もほとんどない状態で開発したのだからすごいですね。ゲームバランスも素晴らしく、今遊んでも物凄く楽しめるブラウザゲームです。未だに遊んでいるユーザもいるそうで、画面を見るとまた遊びたくなります。



TRIGLAV
http://www.smokymonkeys.com/triglav/


2013年10月1日火曜日

JavaScript で配列をソートする

JavaScrpt の Array プロトタイプには sort() というメソッドが定義されており、
配列の並び替えに使用できます。

var array = ['orange', 'apple', 'banana'];
array.sort();
console.log(array);  // ['apple', 'banana', 'orange']

このように引数なしで使用すると、配列の各要素を文字列に変換した上で、
昇順に並び替えます。
辞書上の出現順番と同じになるので数値の大小とは異なります。
たとえば [300, 350, 1000] は [1000, 300, 350] となります。

数値として並び替えたり、独自のルールで並び替える場合には比較関数を渡します。

var array = [1000, 300, 350, 200, 850];
array.sort(function(a, b) {
    return a < b ? -1 : 1;
});
console.log(array);  // [200, 300, 350, 850, 1000]

配列の要素 a, b が比較関数に与えられた時に、
比較関数が 0 未満を返せば a が b より左に、
 0 より大きい数値を返せば a が b より右に配置されます。
sort() に比較関数を渡した場合はこのルールに従って配列が並び替えられます。