Salesforce1用ページの勉強－カメラ機能－

Salesforce1でつかえるページを勉強しようと思ってとりあえずカメラ機能を試してみた。inputFileのカスタマイズが思うようにできてないけど今回はここまで。

<img src="https://qiita-image-store.s3.amazonaws.com/0/8407/4ddd1de0-e259-6b35-46e7-21ea84a8b6bd.png" width="150" />

```visualforce:CameraApp.page
<apex:page showHeader="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>
            <apex:outputText value="Salesforce1 Camera App" />
        </title>
        <apex:include pageName="CameraAppCss" />
        <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
    </head>
    <body>
        <div id="vf-page">
            <div class="pageheader">
                <apex:outputText value="Salesforce1 Camera App" />
            </div>
            <div class="pageBody">
                <apex:form >
                    <apex:outputText value="下のボタンをタップして、写真を撮影しよう" />
                    <canvas id="mycanvas" style="max-width: 100%; display: block;"></canvas>
                    <div class="file linkBtn">
                            <apex:outputText value="写真を撮る" />
                            <input type="file" accept="image/**;cpature=camera" id="input-file" />
                    </div>
                </apex:form>
            </div>
        </div>
        <script>
            $(function() {
                // カメラを起動するinputを取得する
                var $inputFile = $('#input-file');
                
                // 内容が変更されたら、以下の処理を実行
                $inputFile.on('change', function() {
                    // input-fileが持っているファイルの一覧を取得
                    var files = this.files;
                    // 今回は0番目のファイルのみ扱う
                    var file= files[0];
                    
                    if (!file) {
                        // 持っているファイルが0番目だったら、処理を中止する
                        // 撮影がキャンセルされた場合など
                        return;
                    }
                    
                    // fileReaderを新規作成
                    var fileReader= new FileReader();
                    
                    // fileReaderの機能を使ってファイルをDataURLに変換
                    fileReader.readAsDataURL(file);
                    
                    // 変換が終了するまで待つ
                    fileReader.onload = function(e) {
                        // 変換後のDataURLを取得・画像のsrcに指定
                        var image = new Image();
                        image.src= fileReader.result;
                        
                        // canvasを用意、その(0,0)の位置へ画像を描画
                        var canvas = document.getElementById('mycanvas');
                        var ctx = canvas.getContext('2d');
                        //一旦キャンバスをクリア
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        // 描画
                        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                    }
                });
            }); 
        </script>
    </body>
</html>
</apex:page>
```

```visualforce:CameraAppCss.page
<apex:page >
    <style type="text/css">
        body {
            background-color: #F0F1F2;
        }
        body * {
            font-family: 'メイリオ', sans-serif;
            color: #293f54;
            font-size: 14px;
        }
        
        #vf-page .pageheader {
            background-color: #344A5F;
            color: #FFFFFF;
            font-size: 16px;
            font-weight:bold;
            width: 100%;
            padding: 5px;
        }
        #vf-page .pageBody {
            padding: 5px;
        }
        
        #vf-page .file {
            display: inline-block;
            overflow: hidden;
            position: relative;
            padding: .5em;
            background-color: #eee;
        }
        
        #vf-page .file input[type="file"] {
            opacity: 0;
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
            position: absolute;
            right: 0;
            top: 0;
            margin: 0;
            cursor: pointer;
            height: 50px;
        }
        
        #vf-page .linkBtn {
            -webkit-border-radius: 2px; 
            -moz-border-radius: 2px; 
            border-radius: 2px;
            color: #FFFFFF;
            font-size: 18px;
            font-weight:bold;
            background-color: #2A94D6;
            text-align:center;
            display: inline-block;
            padding: 10px 20px;
        }
        
        #mycanvas {
            margin: 30px 0;
            max-width: 100%;
            display: block;
        }
    </style>
</apex:page>
```