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

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

<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>

とします

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

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

camera_btn

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

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

結婚式招待状の印刷

結婚式招待状の印刷

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

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

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

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

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

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

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

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

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

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

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

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

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

招待状用付箋(無地)

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

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

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

MacbookAir にEPSON プリンタ設定

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
をダウンロードし
インストールします

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

スクリーンショット 2015-08-19 20.57.08

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

スクリーンショット 2015-08-19 20.57.17

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

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

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

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

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

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

をみて

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

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

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

スクリーンショット 2015-08-18 21.01.54

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

スクリーンショット 2015-08-18 21.02.30

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

スクリーンショット 2015-08-18 21.03.28

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

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

スクリーンショット 2015-08-18 21.04.22

次にPrint Magic のインストール

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

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

スクリーンショット 2015-08-18 21.05.58

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

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

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

スクリーンショット 2015-08-18 21.08.18

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

スクリーンショット 2015-08-18 21.09.44

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

スクリーンショット 2015-08-18 21.11.16

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

mac へ git 環境インストール

mac へ git 環境インストール

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

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

スクリーンショット 2015-08-17 6.51.13

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

スクリーンショット 2015-08-17 6.55.23

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

スクリーンショット 2015-08-17 6.57.43

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

スクリーンショット 2015-08-17 6.58.33

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

git2

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

git3

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

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

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

git4

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

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

twitter web intents でつぶやく

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をメモ

mapc

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

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

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

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

ということなので

vim page-43.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 のお店一覧の固定ページになってしまうので
これを
ID43の地図の固定ページになるように変更します

<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>

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

mapc2

mapc3

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

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;?>

とします

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

cshop

なお
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>

を追加します

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

cshop2

これでフッターのソース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】標準入力から生成したコマンドラインを実行する

を参考に

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

例えば

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

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