2015年8月 – Linux & Android Dialy

ブラウザからのカメラ起動

<input type="file" accept="image/*">

とすることで
クリックしたときに
スマホのカメラを起動することができます

最初は起動する確認だけしたいので

 <a class="ui-btn ui-corner-all" href="<?php echo get_page_link(35);?>"><img class="ic" src="<?php echo get_template_directory_uri(); ?>/img/camera.png" alt="" ><br>カメラ</a>

を

  <div class="ui-block-a">
<input type="file"  class="ui-btn ui-corner-all"accept="image/*" >
  </div>

とします

これで、ファイルを選択というボタンが作成され
これをクリックすると
スマホの場合カメラが起動します

しかし、このままでは見た目がよくないので
他のアイコン同様、画像と文字に変更します

【HTML,CSS】File inputのデザインを変える超簡単な方法！

を参考に、ラベルを使って変更します

input[type="file"] {

 top:0;
    left:0;
  width: 100%;
height:50px;
opacity: 0;
 position:absolute;
}

をstyle.css 追記

ボタンそのものは

  <div class="ui-block-a">
<label class="ui-btn ui-corner-all" >
    <img class="ic" src="<?php echo get_template_directory_uri(); ?>/img/camera.png" alt="" ><br>カメラ         
<input type="file"  class="ui-btn ui-corner-all"accept="image/*" ></label>
  </div>

とします

ただし、これだと下に余分なものがでてしまいます

いくつか試しても消すことができないため
レイアウトを変更し、カメラを中心にしました

これでスマホでアクセスしクリックすれば
カメラが起動します

PCの場合は、ファイルアップロードになります

結婚式招待状の印刷

招待状については
無料テンプレを使うことにしました

「ティアラ」テンプレート

からダウンロードして文章を変えて作成しました

このとき、Mac で作成したので
pages での編集となってしまいました

今回、作成した後に気づいたのですが
Pages は宛名印刷機能がなくなっています

このため、今後作成するにはLibreOffice でつくったほうがよさそうです

今回はつくってしまったので、
結婚式場へ試作品を持っていくこともあり
そのまま入力しました

印刷の注意点として、プリンタが対応しているか？
ということです

また実際に印刷するときには
いきなり印刷すると
実際に印刷したときにずれが生じることがあるため
まずはコピー用紙などで印刷テストして
それから印刷するほうがロスが少なくなります

なお、印刷するにあたって
招待状は
スノークリスタル（シルバー）招待状

を使いました
送料が８００円かかりますが
一度に３０枚購入すれば、1枚あたりはそこまでかかりません

また、今回は追加をしなかったため後々面倒になったのですが
付箋は1シートだけなので、失敗したときのことを考え余分に購入することをおすすめします

以外と１６分割のシールは見つからないので….

招待状用付箋（無地）

なお PIARYで購入した場合
http://www.preani.jp/templatelist/?p=h
から対応テンプレートのダウンロードができます

今回、印刷には古めのプリンターですが
EPSONの　EPー９０２Aを使いました

ハガキについてはA５サイズなので
A４の紙を半分にして使うようにしました

MacbookAir にEPSON プリンタ設定

今回はEPSON のプリンタ EP-902A で印刷できるように
設定をします

http://www.epson.jp/dl_soft/readme_osselfsetup/20904.htm
のマニュアルを参考に行いましたができなかったため

ソフトウェア・アップデートでドライバーが配信されない

を参考に行いました

Apple社のホームページからプリンタードライバーをダウンロードする
の方法を行います
https://support.apple.com/kb/DL1398?locale=ja_JP&viewlocale=ja_JP
から

エプソン・プリンタ・ソフトウェア・アップデート v2.19
をダウンロードし
インストールします

ダウンロードしたファイルをダブルクリックすると
ファイルが表示されるので、これをダブルクリックします

するとインストーラが立ち上がるので
続けるをクリックします

これであとはそのまま指示にしたがって進めればインストールできます

インストールが完了すれば
EP-902A のドライバが使えるようになります

mac へプリントマジックインストール

結婚式の招待状はできたけど
印刷のことまで考えてなくて検索した結果

✳︎✳︎プレ花嫁♪手作り結婚式で幸せいっぱい✳︎✳︎

をみて

プリントマジックでできるらしいので
インストールしてみました

このソフトはAdobe AIR が必要なので
https://get.adobe.com/air/?loc=jp
でダウンロード

ダウンロードしたファイルをダブルクリックすると
インストーラがでるので
これをダブルクリック

セキュリティのため警告がでてくるけど
気にせず開くをクリック

するとインストーラ設定がでるので
同意する
をクリック

Mac のユーザパスワードを求められるので
入力

インストールが終わると表示されるので

次にPrint Magic のインストール

http://www.print-magic.net/
からダウンロード

今回はMac でつかうので
無料ダウンロード for Mac をクリック

ダウンロードできたらダブルクリック

またしても開いてよいか聞いてくるけど
気にせず開くを選択

するとインストールするか訊かれるので
インストールをクリック

次にインストール先を訊かれるけど、デフォルトのままでok

インストールが完了すると、Print Magic が起動します

次はプリンタの設定などになります

mac へ git 環境インストール

今回、MacBookAir に git を入れました

https://www.sourcetreeapp.com/
へアクセスし
Download Source Tree Free
をクリックしてダウンロードします

ダウンロードしたファイルを
ダブルクリックし
SourceTree をApplication にドラッグ＆ドロップ

Application をダブルクリックし
アプリ一覧から
SourceTree を選択

アプリを開いていいか訊かれるけど
気にせず開くをクリックします

すると、利用規約画面になるので
同意するにチェックを入れ
続ける
をクリックします

次にアカウントセットですが
アカウントはまだ取得していないし
あとでもセットできるので
セットアップをスキップ
を選択します

これでインストールは終わりになりますが
使用するには無料のユーザ登録が必要になります

Mac 画面左上のApple アイコンの横に
SourceTree を起動しているとメニューがでるので
登録を選択

ダイアログから今すぐ登録！無料
をクリックします

メールアドレスを入力し
次の画面で名前や会社名などを入力します

なお、会社名はなければ none など
なしでよいと思います

twitter web intents でつぶやく

URLからつぶやく[intentsまとめ]

と
【twitter】つぶやくボタン（Web Intents 方式で）

を参考に
ボタンを押したらツイートできるようにします

この方法のメリットは
twitter APIをつかうときのように
キーの取得などがいらないことです

まずは、home.php の
ツイートリンクができるようにコードを書き換えます

href="<?php echo get_page_link(35);?>”

のままだと、お店一覧画面にとぶので

ツイートするようにリンクを書き換えます


href="https://twitter.com/intent/tweet”

同様に、投稿画面でのツイートも可能にします

投稿画面でのみツイートできるように

footer.php で条件分岐で指定してあるので


<li><a href=“#" data-icon="edit">tweet</a></li>

を


<li><a href="https://twitter.com/intent/tweet" data-icon="edit">tweet</a></li>

というように変更します

これで tweet ボタンをクリックすると

ツイートできるようになります

今回の変更で footer.php のソースは


</div>
<div data-role="footer" <?php if(is_single()):?>data-position="fixed"<?php endif;?>>
<?php if(is_single()):?>
 <div data-role="navbar">
        <ul>
        <li><a href="tel:<?php echo post_custom("tel")?>" data-icon="phone">電
話</a></li>
        <li><a href="http://maps.google.com/maps?q=<?php echo post_custom("Address")?>" data-icon="location">地図</a></li>
          <li><a href="https://twitter.com/intent/tweet" data-icon="edit">tweet</a></li>
        </ul>
      </div>
<?php endif; ?>
</div>
 Copyright　2015 <?php if(date_i18n('Y')!=2015){
   echo '- ';
   echo date_i18n('Y');
 } ?><br>
 <?php bloginfo('name'); ?>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

となります

現在地取得ボタン作成

まず地図を表示するための固定ページを作成

タイトルは地図として
パーマリンクのURLをメモ

http://dev.dotinstall.com/wordpress/?page_id=43

次に、地図を表示する固定ページテンプレート作成

各固定ページのページデザインをテンプレート選択で可能にする方法
によりますと

固定ページを表示する際、
WordPressのテーマの動きとしては
「page-スラッグ名.php」を読みにいき、
もし存在しなければ「page-ID.php」を読みにいく

ということなので

vim page-４３.php で作成

まずは地図を表示する前に
現在地の取得ができるかを実験するため
geolocation api で現在地を取得します

<?php get_header(); ?>


<ul>
  <li>経度：<span id="latitude"></span></li>
  <li>緯度：<span id="longitude"></span></li>
</ul>

<script>

$(function() {

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      function(pos) {
        $('#latitude').html(pos.coords.latitude);
        $('#longitude').html(pos.coords.longitude);
      }
    );
  } else {
    window.alert('Geolocation API対応ブラウザでアクセスしてください。');
  }
});
</script>
<?php get_footer(); ?>

次に、地図アイコンからのリンク先を変更します

 <a class="ui-btn ui-corner-all" href="<?php echo get_page_link(35);?>/current.php"><img src="<?php echo get_template_directory_uri(); ?>/img/map.png" alt="" class="ic"><br>地図</a>

というように
get_page_link(35);
だと
ID35 のお店一覧の固定ページになってしまうので
これを
ID４３の地図の固定ページになるように変更します

<a class="ui-btn ui-corner-all" href="<?php echo get_page_link(43);?>/current.php"><img src="<?php echo get_template_directory_uri(); ?>/img/map.png" alt="" class="ic"><br>地図</a>

これで保存してリロードすると
地図アイコンをクリックすると
現在地の座標が表示されます

footer の電話と地図ボタンの動作設定

まず電話番号から

<?php echo post_custom("tel")?>

で電話番号がでるので

<li><a href="#" data-icon="phone">電話</a></li>

の部分をかえてみます

電話発信用のリンクを設定する

にあるように

<a href="tel:0312345678">電話はこちらへ</a>

というように

href="tel:電話番号"

となるようにすればOK

<li><a href="tel:<?php echo post_custom("tel")?>" data-icon="phone">電話</a></li>

でOK
ただしPCでは確認できないので
ipod touch や　スマホでの確認が必要

次にナビ機能

href="http://maps.google.com/maps?q=クエリ"

で起動するので

地図に関しては

<?php echo post_custom("Address")?>

で取得できるので

<li><a href="#" data-icon="location">地図</a></li>

を

<li><a href="http://maps.google.com/maps?q=<?php echo post_custom("Address")?>" data-icon="location">地図</a></li>

とすることで
google map によるナビが起動します

こちらはPCで動作確認できました

今回の変更で footer.php は以下のようになります

</div>
<div data-role="footer" <?php if(is_single()):?>data-position="fixed"<?php endif;?>>
<?php if(is_single()):?>
 <div data-role="navbar">
        <ul>
          <li><a href="tel:<?php echo post_custom("tel")?>" data-icon="phone">電
話</a></li>
          <li><a href="http://maps.google.com/maps?q=<?php echo post_custom("Address")?>" data-icon="location">地図</a></li>
          <li><a href="#" data-icon="edit">tweet</a></li>
        </ul>
      </div>
<?php endif; ?>
</div>
 Copyright　2015 <?php if(date_i18n('Y')!=2015){
   echo '- ';
   echo date_i18n('Y');
 } ?><br>
 <?php bloginfo('name'); ?>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

お店情報ページのカスタマイズ

まずは、投稿記事にサムネイル画像が表示されるようにソースを書き換えます

なお、サムネイルをダッシュボードで設定するには
functions.php で

add_theme_support('post-thumbnails');

の追記が必要になります

  <img src="image/tee.jpg" alt="" width="300" height="300">

の部分を

<?php if(has_post_thumbnail()): ?>
   <?php the_post_thumbnail('medium'); ?>
<?php else : ?>
        <img src="<?php echo get_template_directory_uri();?>/img/noimage.png" width="300" height="300"/>
<?php endif;?>

とします

これでサムネイル画像が表示されます

なお
post_thumbnail()の
パラメータでサイズ指定ができます

the_post_thumbnail();                 
// パラメータなし -> 'post-thumbnail'サムネイル
 
the_post_thumbnail( 'thumbnail' );      
// サムネイル(デフォルト 150px x 150px ：最大値）

the_post_thumbnail( 'medium' );         
// 中サイズ（デフォルト300px x 300px：最大値）

the_post_thumbnail( 'large' );          
 // 大サイズ（デフォルト640px x 640px：最大値）

the_post_thumbnail( 'full' );            
// フルサイズ　（アップロードした画像の元サイズ）
 
the_post_thumbnail( array(100, 100) );  
// 他のサイズ

詳しくは
テンプレートタグ/the post thumbnail

の解説を参考に

これでサムネイルが表示されるようになったので
次に簡単にお店にアクセスできるように
ボタンを追加していきます

footer.php の最初の div の下へ

 <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="phone">電話</a></li>
          <li><a href="#" data-icon="location">地図</a></li>
          <li><a href="#" data-icon="edit">tweet</a></li>
        </ul>
      </div>
</div>

を追加します

これでフッターにボタンが表示されます

これでフッターのソースfooter.php は

</div>
<div data-role="footer">
 <div data-role="navbar">
        <ul>
          <li><a href="#" data-icon="phone">電話</a></li>
          <li><a href="#" data-icon="location">地図</a></li>
          <li><a href="#" data-icon="edit">tweet</a></li>
        </ul>
      </div>
</div>
 Copyright　2015 <?php if(date_i18n('Y')!=2015){
   echo '- ';
   echo date_i18n('Y');
 } ?><br>
 <?php bloginfo('name'); ?>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

となります

xargs 使い方

xargs コマンドの詳細については

【xargs】標準入力から生成したコマンドラインを実行する

を参考に

xargs コマンドは
-I目印
とすると、この目印に標準入力から読み込んだ文字列を
代入する

例えば

ls testdir | xargs -I{} cp testdir/{} /tmp/{}.bk

だった場合
ls testdir
の結果が {} に代入され
cp testdir/{} /tmp/{}.bk
が実行される
-I変数名と考えるとわかりやすい
{} 以外にも @ でもok