[hello world 動かない　][検索]

プログラミング関連で自分が調べた事をメモる

form enter submit させない

javascript HTML

formでテキスト入力時のエンター押下でsubmitさせないようにする


<input type="submit"> から
<button type="button"></button> に変更してボタン押下時にjavascriptでsubmitしてやる

<form>
  <input type="text">
  <input type="submit">
</form>

↓

<form id="form-nantoka">
  <input type="text">
  <button id="form-submit" type="button">submit</button>
</form>

$('#form-submit').on('cick', function() {
  $('#form-nantoka').submit();
});

これでOKかと思っていたがエンターキー押下でsubmitするのはいくつか条件があるらしい
自分が確認したのは以下の2点

  1. フォームにsubmitボタンがある
  2. テキスト形式の入力フォームが一つのみのフォーム

2. の場合が解決できていなかったので、もう少し改良

$('#form-nantoka').on('submit', function() {
  return false;
});

$('#form-submit').on('cick', function() {
  $('#form-nantoka').off('submit');
  $('#form-nantoka').submit();
});


他にもtext入力時のkeypressイベントでエンターキー押下時イベントキャンセルする等のやり方がいくつかあるらしい

cakephp トップページ

CakePHP

cakephpのトップページを変更する

cakephp 2.x
/ アクセス時に app/View/Homes/index.ctp が表示されるようにしたい


デフォルトで表示されているページが設定されているのはこのファイル
app/Config/routes.php

Router::connect('/', array('controller' => 'pages', 'action' => 'display', 'home'));

/ にアクセスされたら app/View/Pages/home.ctp が表示されているようになっていたので修正

Router::connect('/', array('controller' => 'homes', 'action' => 'index'));

画像 アップロード 回転 Exif

PHP javascript HTML

画像ファイルの向きを調整する

iPhoneで撮った画像をアップロードし、サーバーに保存後iPhone、PCのfirefoxで表示してみると
画像の向きが異なる。
撮影した画像ファイルにExifが埋め込まれており、ブラウザによってこのExifを元に画像の向きを調整するかしないかの動作が異なるらしい。

ExifのOrientationと言うタグの中に1～8までの数値が設定されており、
この値を元にサーバー側のPHPで反転や回転を行い画像を調整し、画像を保存し直す。

Orientationの値を取得する
$exif = exif_read_data($file_name, 'EXIF');
$exif['Orientation'];

これだけでOK
のはずだったのだけど、今回使う環境ではExifが使えなかったので、
javascriptでOrientationを取得する方法に変更する。

exif-jsと言う便利なライブラリがあったので利用させて頂く。
https://github.com/jseidelin/exif-js

$('#file').change(function() {
  setExifOrientation(this.files[0]);
});

var setExifOrientation = function(imageFile) {
  EXIF.getData(imageFile, function() {
    $('#orientation').val(imageFile.exifdata.Orientation);
  });
};

画像ファイル設定時にFormにOrientationの値を埋め込んで一緒に送信


後は、受け取ったサーバー側で画像を調整。
主に下記のサイトを参考にさせて頂き、ちょこっと修正。php.o0o0.jp

private function imageRotation($file_name, $orientation)
{
    // 存在チェック
    if (! file_exists($file_name)) {
        exit;
    }

    // 読み込み
    $im = imagecreatefromjpeg($file_name);

    $degrees = 0;
    $mode = '';

    switch($orientation) {
        case 1: // 通常
            break;
        case 2: // 水平反転
            $mode = 'IMG_FLIP_VERTICAL';
            break;
        case 3: // 180°回転
            $degrees = 180;
            break;
        case 4: // 垂直反転
            $mode = 'IMG_FLIP_HORIZONTAL';
            break;
        case 5: // 水平反転、 時計回りに90°回転（反時計回りに270°回転）
            $degrees = 270;
            $mode = 'IMG_FLIP_VERTICAL';
            break;
        case 6: // 時計回りに90°回転（反時計回りに270°回転）
            $degrees = 270;
            break;
        case 7: // 時計回りに270°回転（反時計回りに90°回転） 水平反転
            $degrees = 90;
            $mode = 'IMG_FLIP_VERTICAL';
            break;
        case 8: // 時計回りに270°回転（反時計回りに90°回転）
            $degrees = 90;
            break;
    }

    // 反転
    if (! empty($mode)) {
        $im = imageflip($im, $mode);
    }

    // 回転
    if ($degrees > 0) {
        $im = imagerotate($im, $degrees, 0);
    }

    // 保存
    imagejpeg($im, $file_name, 100);

    // メモリの解放
    imagedestroy($im);
}

javascript img クリック イベント 位置 取得

HTML javascript

img要素のクリック地点を画像本来の位置で求める


一行でまとめようとして見出しが意味不明になってしまったが
1200*800 のサイズの画像を 300*200 のimg要素に張り付けた際に
画像の一番右下をクリックしたら
X=300, Y=200 ではなく X=1200, Y=800 と画像のサイズに対してのオフセット位置を取得したい。

$('#imgElement').on('click', function(event) {
  var pos = getPositionOnImage(this, event);
});

var getPositionOnImage = function(imgElem, event) {
  // 画像サイズ
  var rw = imgElem.naturalWidth;
  var rh = imgElem.naturalHeight;

  // 画面上の画像サイズ(img要素のサイズ)
  var w  = imgElem.width;
  var h  = imgElem.height;

  // 比率を求める
  var ratioW = rw / w;
  var ratioH = rh / h;

  // 要素上のクリック地点を取得する
  var elemPos = getPositionOnElement(event);

  // 画像上の位置を求める
  var imageX = Math.round(elemPos.x * ratioW)
  var imageY = Math.round(elemPos.y * ratioH)
  var imagePos = { x: imageX, y: imageY };

  return imagePos;
};

var getPositionOnElement = function(event) {
  var rect = event.target.getBoundingClientRect();
  var x = Math.round(event.clientX - rect.left);
  var y = Math.round(event.clientY - rect.top);

  return {x: x, y: y};
};

cakephp meta viewport view毎

CakePHP PHP

CakePHPでView毎に違うviewportを指定する

バージョン
CakePHP 2.6.4

Layouts/default.ctpの echo $this->fetch('meta'); の所で展開されて欲しい
ページによっては拡大縮小可にさせたいので default.ctp へ記載せず各Viewに記載する

<?php
$this->Html->meta(null, null, array(
  'name' => 'viewport',
  'content' => 'width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no',
  'inline' => false
));
?>


第1引数にname、第2引数に contentを記載するって紹介されてたブログも等もあったけどうまくいかなかった