明日に向かって昇龍拳: Java Script

2014年12月19日金曜日

Google APIs Client Library for JavaScriptを使いながらfieldsを指定するには

Google APIs Client Library for JavaScriptを使っていて、必要ないレスポンスデータを削除する為にfieldsを指定するときの忘備録。

検索やデータ取得などのGET系では、パラメータの一部として指定すればいい。

gapi.client.drive.files.list({
  'fields': 'items(id,title),selfLink',
  'q': "title='" + folderTitle + "' and trashed=false"
}).execute(function(folder) {
  console.debug(folder.selfLink);
});

作成、更新などのPUT系では、Request bodyをresponseフィールドに定義するが、fieldsは、responseの中ではなく、外に指定する。この点が注意ポイント。

gapi.client.drive.files.insert({
  'fields': 'id',
  'resource': {
    mimeType: 'application/vnd.google-apps.folder',
    title: folderTitle
  }
}).execute(function(folder) {
  console.debug(folder.id);
});

2011年7月9日土曜日

画像読み込み完了時に画面幅によって画像をリサイズする

作成した画像を、スマートフォンのブラウザで見るときに、画面幅にあわせてリサイズさせてみた。

ブラウザの画面幅を取得するコードは以下のページを参考にした。
参考：ブラウザの画面サイズの取得(javascript) - Object Design Blog

画像の読み込み完了前に拡大縮小率を計算しないように、img の load 完了イベント時に、画像の幅を取得するのがポイント。以下、コードの一部抜粋。

<head>

<script type="text/javascript">
var imgW = 0;
var imgH = 0;
var paneW = 0;
var scale = 100;

//ブラウザ幅に合わせて拡大縮小率を算出する
//マージンは20px
function calcScale(){
  var paneW_alt = paneW - 20;
  if(imgW > paneW_alt){
    scale= ((paneW_alt/imgW)*100).toFixed(0);
  }else{
    scale = 100;
  }
}

function getBrowserWidth() {  
    if(window.innerWidth) {
        return window.innerWidth; 
    } 
    else if(document.documentElement && document.documentElement.clientWidth != 0){
        return document.documentElement.clientWidth;
    }
    else if(document.body){
        return document.body.clientWidth;
    }
    return 0;
}

</script>

</head>

<body marginheight="0" marginwidth="0">


(中略)


<script type="text/javascript"><!--
var img = document.getElementById("dlImg");

//画像のload完了時に画像の幅と高さを取得する
img.addEventListener('load', getImageSize, false);
function getImageSize(){
    imgW = img.width;
    imgH = img.height;
}

//画像の幅と高さを取得した上で画像をリサイズする
img.addEventListener('load', resize, false);

//端末が回転された際もブラウザ幅に合わせて再度リサイズする
window.addEventListener('orientationchange', resize, false);

function resize(){
    paneW = getBrowserWidth();
    calcScale();
    if(imgW > 0 && imgH > 0){
      img.width=(imgW * (scale/100)).toFixed(0);
      img.height=(imgH * (scale/100)).toFixed(0);
    }
}
//--></script>

</body>