iOS APNs証明書 更新手順

iOS APNs 更新

1. キーチェーンでCSR作成

  1. キーチェーンアクセスを起動
  2. キーチェーンアクセス > 証明書アシスタント > 認証局に証明書を要求 を選択
  3. ユーザーのメールアドレス、通称を入力してディスクに保存
    ※1. 通称は秘密鍵の名前になる
    ※2. CertificateSigningRequest.certSigningRequestが作成される

2. Apple DeveloperでCertificatesを作成

https://developer.apple.com/jp/

  1. メンバーセンターへアクセス
  2. Certificates, Identifiers & Profilesへアクセス
  3. Certificatesへアクセス
  4. Production 「+」追加ボタン
  5. Apple Push Notification service SSL (Production) ✓ してContinue
  6. App IDを選択してContinue
  7. 1.で作成したCSRをアップロード
  8. 作成したCertificatesをダウンロード(aps_production.cer)してキーチェーンに登録

3. SSLサーバ証明書を作成

  1. 2.でキーチェーンに登録されたCertificatesを選択して右クリック「個人情報交換(.p12)」で書きだす
  2. 書き出したp12ファイルをpemに変換
  • 証明書変換
openssl pkcs12 -clcerts -nokeys -out apns-prd-cert.pem -in 証明書.p12
  • 鍵の変換
openssl pkcs12 -nocerts -out apns-prd-key.pem -in 証明書.p12
  • 鍵を復号化して、パスワードを入力しなくても秘密鍵を使用できるようする
openssl rsa -in apns-prd-key.pem -out apns-prd-key-noenc.pem
  • apns-prd-cert.pem と apns-prd-key-noenc.pemを連結してapns-production-cert.pemに書き出す
cat apns-prd-cert.pem apns-prd-key-noenc.pem > apns-production-cert.pem

生成したapns-production-cert.pemを適宜サーバーにアップロード

参考

Canvasで画像縮小をやってみた

canvas javascript html

カメラ解像度アップにより、画像サイズがメガ超えしていることからアップロードへの影響があるため、 Canvasを使ってクライアントサイドで画像縮小をやってみた。

Canvasって？
ざっくりいうとjavascriptで画像を書けたり、画像を操作したりできます。
Canvasとは - Canvas - HTML5.JP

今回は、画像縮小を実際にやってみてどれくらいファイルサイズが削減できるのかためしてみた。
なんと、2MBくらいの画像が260KB程度まで落ちた！ 読み込み速度もはやい！！
これならラクラクアップロードできそうやね ♪

サンプルコード
html

<div id="contents" style="margin:20px; border-top:solid 1px #000;">
  <h3>canvasTest</h3>
  <input id="inputFile" name="photo" type="file" accept="image/*" capture><br>
</div>

javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  $('input[name=photo]').change(function(e) {
    var file = e.target.files[0];
    if (file.type.match(/image.*/)) {
      var canvas = document.createElement("canvas"),
          ctx = canvas.getContext('2d'),
          image = new Image(),
          size = 1200;
      canvas.width = canvas.height = 0;
      image.src = URL.createObjectURL(file);
      image.onload = function() {
        var w = size, h = image.height * (size/image.width);
        canvas.width = w;
        canvas.height = h;
        ctx.drawImage(image, 0, 0, w, h);

        var img = document.createElement('img');
        img.src = canvas.toDataURL(file.type);

        var head = 'data:' + file.type + ';base64,';
        var imgFileSize = Math.round((img.src.length - head.length)*3/4);
        $('#contents').append("<div><span>" + "元画像サイズ" + (file.size/1024).toFixed(1) + "kb" + " => " + "変換後サイズ" + (imgFileSize/1024).toFixed(1) + "kb" + "</span></div>")

        $("#contents").append(img);
      }
    }
  });
</script>

デモ

参考