Safariの開発者向けの証明書発行

safari developer page

Safariの拡張などを作るときにはAppleに開発者登録をしなければならないのですが、その手順を紹介します。
iPhoneアプリなどだと実機で動かすには毎年1万円程度を支払わなければならないですが、Safariの場合は無料です。
基本的な手順はiOSアプリの開発者登録と同じです。

Safariの開発者用ページを探す

ここです。

https://developer.apple.com/safari/

safari developer page

https://developer.apple.com/ の下の方にリンクがあります。

Safari Developer 向けの Dev centerに移動

safari dev center

Safari Developer Programに登録

登録についての説明は省略。

safari dev center

既にiOSアプリなど開発している場合はSafari向けのプログラムに申し込むだけで終わります。(無料です。)

初めての方は、新規登録になります。

参考

  • https://developer.apple.com/jp/support/safari/enrollment.html
  • http://d.hatena.ne.jp/kotas/20100608/safariext

証明書の発行

iOS開発者登録などと同様に、キーチェーンアクセスを使って証明書の発行手続きを行います。

まずはMacのキーチェーンアクセスを起動。

「キーチェーンアクセス」→「証明書アシスタント」→「認証局に証明書を要求」を選択。

キーチェーンアクセス

証明書を要求

ユーザーのメールアドレスには開発者登録で指定したApple IDを。通称はなんでもいいです。(たぶん)

証明書を要求

これで「CertificateSigningRequest.certSigningRequest」というファイルを生成できますので、これをSafari Dev Centerにアップロードします。

証明書を発行

スクリーンショット 2013-12-27 9.55.23 スクリーンショット 2013-12-27 9.55.38 スクリーンショット 2013-12-27 10.43.59Choose File… を押して先ほど作成した「CertificateSigningRequest.certSigningRequest」をアップロード。

スクリーンショット 2013-12-27 10.31.03

問題がなければ証明書が発行されます。これをダウンロードすれば、Safariの拡張機能などを自作できるようになります。

Google Chart Toolsのサイズの動的な変更

ブラウザのウィンドウサイズを変更した際に、Google Chart Toolsで描画したグラフを動的にサイズ変更する。

参考にしたページ
まず、グラフのオプションの「幅」の指定を無くす。

[javascript]

var options = {
title: ‘売上高の推移’,
//width: 800,
height: 500
}

[/javascript]

つぎに、<body>に追記

[html]

<body onresize="drawChart()">

[/html]

onresizeにグラフ描画のJavascriptメソッド(今回はdrawChart())を指定するだけ。
これでブラウザの幅に合わせてグラフの幅が変わる。

BootStrap form-horizontalでラジオボタンを設置する

BootStrapで、form-horizontalのときにラジオボタンを設置する方法

[html]

<form class="form-horizontal" style="margin-bottom: 15px;" action="/send" method="post">
<div class="form-group">
<label class="control-label col-sm-2" for="name">名前</label>
<div class="col-sm-4"><input class="form-control" type="text" name="name" placeholder="名前を入力" value="" /></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label>
<input id="radio0" type="radio" checked="checked" name="radio" value="0" />
ラジオ0
</label></div>
<div class="radio">
<label>
<input id="radio1" type="radio" name="radio" value="1" />
ラジオ1
</label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4"><input class="btn btn-primary" type="submit" value="送信" /></div>
</div>
</form>

[/html]

<div class=”form-group”><div class=”radio”>だけでなく、そのふたつのdivの間に<div class=”col-sm-offset-2 col-sm-10″>を入れることでform-horizontalで想定したような並びになります。

年と週番号を受けて、日付を返すJavascript の関数

2013年の第42週の日曜日が何日なのか、Date型で返す。

[javascript]

// 年と週番号を受けて、その週の最初の日にちを返す
function getBeginningOfTheWeekInTheYear(year, weekNumber){
// YYYY年1月1日のDateオブジェクト
var onejan = new Date(year, 0, 1);
// 曜日を取得(日=0, 月=1, 火=2, 水=3, 木=4, 金=5, 土=6)
var offset = onejan.getDay();
// 1月1日から日付を週数分進め、曜日分を引く
return onejan.setDate( onejan.getDate() + (weekNumber * 7) – offset);
}
[/javascript]

↓日付から週番号の取得はこちらを参考に。
Javascriptで年初からの日数/週数を取得する

Bootstrap 3 でdatepickerを使う

Bootstrap ダウンロード

最近、Bootstrapというものを使い始めました。CSSを細かく書かなくてもclassなどを指定するだけでいい感じの見栄えにしてくれるすぐれものです。

プロトタイプなど、そこまで見栄えを気にしなくてもいいけど、でもやっぱカッコイイほうがいいなあ、というときにぴったり。

Bootstrapは周辺UIパーツが充実しています。今回は、日付をカレンダー的なUIで取得するDatePickerを使用したのでその設定方法をメモ。

サンプルページはこちらです。

Bootstrapをテンプレートから導入

BootstrapはHTMLのテンプレートがあるので、コピってきます。今回使っているのはBootstrap v3.0.2。バージョンが2から3になって色々変更があったようです。

テンプレートはここにありますので、コピペしましょう。バージョンに合わせて最新のテンプレートにしたほうが良さげです。

[html]
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!– Bootstrap –>
<link href="css/bootstrap.min.css" rel="stylesheet">

<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]–>
</head>
<body>
<h1>Hello, world!</h1>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src="https://code.jquery.com/jquery.js"></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
[/html]

Bootstrap本体を設置

まずBootstrap本体をサイトからダウンロードします。

Bootstrap ダウンロード

ダウンロードすると以下の様なファイル一式が入ったZIPが確認できると思うので、とりあえず解凍します。
[bash]
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
[/bash]

この解凍してできたフォルダ自体を「bootstrap」という名前にして今書いているHTMLと同じディレクトリに設置しました。というわけでbootstrap.jsや.cssのソースのパスもテンプレートから変更してます。
[html]
↓これを
<link href="css/bootstrap.min.css" rel="stylesheet">
↓こう変えた
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
[/html]
[html]
↓これを
<script type="text/javascript" src="js/bootstrap.min.js"></script>
↓こう変えた
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
[/html]

Datepickerの設置

こちらからソースをダウンロードします。

bootstrap datepicker

こちらも解凍すると「js」「css」「less」という3つのフォルダの入ったフォルダが出来上がるので、「datepicker」というフォルダ名にして先ほど作った「bootstrap」のフォルダに入れます。

さらに、Bootstrap.jsや.css同様にHTMLにタグを追記します。出来上がったテンプレートが以下。
[html]
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!– Bootstrap –>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!– DatePickerを追加 –>
<link href="bootstrap/datepicker/css/datepicker.css" rel="stylesheet">

<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]–>
</head>
<body>
<h1>Hello, world!</h1>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src="https://code.jquery.com/jquery.js"></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src="js/bootstrap.min.js"></script>
<!– DatePickerを追加 –>
<script src="bootstrap/datepicker/js/bootstrap-datepicker.js"></script>
</body>
</html>
[/html]

 

 

DatePicker用のJavascriptを書く

ここはDatePickerのサイトからコピペしました。トップページのソースを見るとサンプルが全て明確に書いてあるので、欲しい機能の部分だけコピーします。
[javascript]
$(function(){
$(‘#dp1’).datepicker({
format: ‘mm-dd-yyyy’
});
});
[/javascript]

これをscriptタグで囲んでさきほどのHTMLにコピペします。

Bootstrap3向けにHTMLを書く

datepickerのサイトはbootstrap2向けっぽいので、微妙に変える必要があります。
以上で設定は終わり。
サンプルページはこちらです。
フォームをクリックするとカレンダーが出てきます。

[html]
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!– Bootstrap –>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!– DatePickerを追加 –>
<link href="bootstrap/datepicker/css/datepicker.css" rel="stylesheet">

<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]–>
</head>
<body>
<div class="col-xs-2">
<h2>Example</h2>
<p>Attached to a field with the format specified via options.</p>
<div class="well">
<input type="text" class="span2 form-control" placeholder=".col-xs-2" value="02-16-2012" id="dp1" >
</div>
</div>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src="https://code.jquery.com/jquery.js"></script>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!– DatePickerを追加 –>
<script src="bootstrap/datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(function(){
$(‘#dp1’).datepicker({
format: ‘mm-dd-yyyy’
});
});
</script>
</body>
</html>
[/html]

サンプルページはこちらです。