canvasを回転させる

canvasに正方形を描画して、その後、座標系を45傾け
た上で、もとの正方形を新しい座標系で書きなおしてみました。







Rotation








<script>

  var canvas = document.getElementById("canvas");

  var context = canvas.getContext("2d");

  context.strokeStyle = "rgb(00,00,255)";

  context.fillStyle = "rgb(255,0,0)";

  context.strokeRect(100,100,50,50);
  context.translate(125,125);

  context.rotate( 45 * 3.14 * 2 / 360);

  context.translate(-124,-125);
  context.drawImage(canvas,99,99,52,52,99,99,52,52);

サインインにはapple id確認コードが必要です

Macをクリーンインストールして、Yosemite状態になってから、App Storeにサインインしようとしたら、「サインインにはapple id確認コードが必要です」と表示された。

そして、「パスワードを入力し、その後に続けて他のデバイスに表示される確認コードを入力してください。」
と表示されるのだが、、、。
iPhone側に確認コードが通知されるのはいいものの、Mac側には確認コードを入力するフォームが出ない。
Yosemiteだから？


これでしばらく悩み続けていたが、ようやく解決。

なんと、パスワードのフォームに、そのままパスワードと確認コードをくっつけて入力すればサインインできた。

これはわかりにくい、、。

[補足]

つまり、自分のパスワードが「mypassword」で、確認コードが「123456」だとすると、パスワードのフォームに「mypassword123456」と入力するということです。

Monaca/Cordovaでプラットフォームの判定する

Monaca

MonacaやCordovaでは、マルチプラットフォームを唄っているのですが、実際にアプリを開発していくと、
プラットフォームごとに別々の処理を行いたいことがあります。

例えば、iOSでは画像ファイルをDocumentsに保存したいが、Androidでは、/sdcard/の下に保存したいなど。

devicereadyイベント発火後であれば、次のコードでプラットフォームごとに異なる処理を実行出来ます。

if (cordova) {
  if (cordova.platformId == 'android') {
    // Androidの処理
  } else if (cordova.platformId == 'ios') {
    // iOSの処理
  } else if (cordova.windowsId == 'windows') {
    // Windowsの処理
  }
} else {
  // Cordova以外での処理
  // 例：MonacaのプレビューやChromeAppなど
}


なお、それぞれの定義は、各プラットフォームごとにのcordova.jsでなされています。

Android

https://github.com/apache/cordova-android/blob/master/bin/templates/project/assets/www/cordova.js

define("cordova/platform", function(require, exports, module) {

// The last resume event that was received that had the result of a plugin call.
var lastResumeEvent = null;

module.exports = {
    id: 'android',
    ...
iOS

https://github.com/apache/cordova-ios/blob/0f34d79a60883a4774e74d6f14481a997a5c9bad/CordovaLib/cordova.js

define("cordova/platform", function(require, exports, module) {

module.exports = {
    id: 'ios',
    ....
Windows

https://github.com/apache/cordova-windows/blob/master/template/www/cordova.js

define("cordova/platform", function(require, exports, module) {

module.exports = {
    id: 'windows',
    ...

デザイン変更とタイトル変更

このブログのデザインを変えてみました。
前から思っていたのですが、ちょっと今的にはページの横幅が狭いし、文字のフォントも小さい。
それに、色合いももう少し明るい方が良いかなと思い、まずはデザインをPure-melonに変更

そして、デベロッパーツールでcssを変更しました。

こんな感じです。

@media screen and (min-width:1200px) {

h1 {
  background: #B2DE00 url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/knight_9999/20160708/20160708194029_original.png) left top no-repeat;
  width: 1130px;
}

.hatena-body {
  font-size: 100%;
  width: 1130px;
}

.main div.day, .main div.calendar {
  width: 900px;
}

.entry-content {
  font-size:20px;
}

 
}

これで、もともとコンテンツ領域の横730ピクセル、ブログ記事領域の横500ピクセルを、それぞれ1130ピクセル、
900ピクセルになりました。また、タイトル画像の横幅が足りなかったので、自分でアップしたものを指定して
います。

なんか結構、いい感じになったようで嬉しい（o^_^o）!

[追伸]　さらに、変更を加えて次のようにしました。

.body .section pre {
  background: #F2F2FF;
} 

.body .section p a {
  text-decoration-color: #BFBFFF;
  border-bottom: #BFBFFF 1px solid;
  color: #BFBFFF;
}

@media screen and (min-width:1200px) {

h1 {
  background: #B2DE00 url(http://cdn-ak.f.st-hatena.com/images/fotolife/k/knight_9999/20160708/20160708194029_original.png) left top no-repeat;
  width: 1130px;
}

.hatena-body {
  font-size: 100%;
  width: 1130px;
}

.sidebar {
  font-size: 80%;
}


.main div.day, .main div.calendar {
  width: 900px;
}

.entry-content {
  font-size:20px;
}

 
}