投稿者: Snowpool

AWSで AmazonLinux の設定

Amazon EC2 でのセットアップ

のチュートリアルを参考に wordpress を入れれるように設定を行っていきます

まずはEC２の設定ですがチュートリアルが去年のものなのでリンクしていないものがあります

サービスタグをクリックし IAM をクリックします

以前と違い、いくつか変更されています

まず、グループの作成を行います

ダッシュボーﾄﾞから
グループをクリックします

新しいグループの作成をクリック

グループ名を
Administrators
として
次のステップをクリックします

次にフィルタリング設定ですが
とりあえず、次のステップをクリックします

これでグループの作成をクリックすれば
Administrators グループができます

ドメインの取得と比較

AWSで webサービスを作ってみよう
ということで、まずはドメインの取得を行います

ブログでは　ドメインを value domain で取得しましたが
今回は、別のものを使ってみようと思います

色々なところがあるので
ドメイン取得サービス比較表

を参考に決めました

今回は お名前.com で取得します

現在ならキャンペーンで安くなっているということ
なので、取得してみました

なお、数年まとめて取得したほうが安いかも
と考えたのですが、
ドメインを .info にして
1年なら480円（税抜き）ですが
2年以上にするとあまり割引になっていないので
今回は1年にしました

これでドメインは取得できたので
次にAWSを設定していきます

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

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

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