IT音痴オーバーフォーティーおやじのストック記事倉庫

Vue.jsでかっこいいチュートリアル画面作成 : つべこべ言うのは止めますｗ 表題の通りです！ 以下、手順になります。 VueでProjectを作成（Vue-cliなどで） vue-tour をインストールします。 コード内を修正していきます。 ※ここではVue-cli3で作成した雛形を元に説明を行います。 まずはmain.jsを修正していきます。 main.js import Vue from 'vue' import App from './App.vue' import router from './router' import VueTour from 'vue-tour' //vue-tourをimport Vue.use(VueTour)//useにVueTourを登録 require('vue-tour/dist/vue-tour.css') //↑ここはvue-tourのデフォルトレイアウトが必要ない場合はrequireしなくても大丈夫です。 Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') 次にHelloWorld.vue内を修正していきます。 HelloWorld.vue <template> <div class="hello"> <h1>{{ msg }}</h1> <p> For guide and recipes on how to configure / customize this project,<br> check out the <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation<

[ITmedia ビジネスオンライン] ｢空気を読めない｣高齢者にならないために！ : 内閣府の調べによると、団塊世代が後期高齢者になる2025年には認知症患者数が700万人程度にのぼるという。認知症に至らずとも、60代以降になれば、加齢にともなう認知力の低下は多くの高齢者にみられる。物事の理解･判断が遅くなったり、記憶力が低下したりする上に、空間認識力が衰え始めるのだ。

[ITmedia ビジネスオンライン] ｢空気を読めない｣高齢者にならないために！ : 内閣府の調べによると、団塊世代が後期高齢者になる2025年には認知症患者数が700万人程度にのぼるという。認知症に至らずとも、60代以降になれば、加齢にともなう認知力の低下は多くの高齢者にみられる。物事の理解･判断が遅くなったり、記憶力が低下したりする上に、空間認識力が衰え始めるのだ。

Table の値取得 jquery (jqueryには、jqueryの立場がある) : 他の記事を見ていたら ふとコーディングした。 テーブルに表示したデータの取得 テストデータ data.html <table id='table' class="table table-sm table-bordered table-striped table-responsive-sm table-hover w-100 h-60"> <thead><tr> <th>ID</th> <th>名前</th> <th>名前フリガナ</th> <th>性別</th> <th>血液型</th> <th>生年月日</th> <th>電話番号</th> <th>携帯番号</th> <th>メール</th> </tr></thead> <tr> <td>1</td> <td>関波子</td> <td>セキナミコ</td> <td>女</td> <td>AB</td> <td>1980/07/31</td> <td>03-3060-4716</td> <td>090-7787-3784</td> <td>sk@eaccess.net</td> </tr> <tr> <td>2</td> <td>小倉準司</td> <td>コクラジュンジ</td>

今からでも間に合う！　JavaScriptのWake Lock APIの使い方 : 近頃、PWAに代表されるような、ブラウザアプリのモバイル端末への進出が進んでいることは皆さんご存知かと思います。とはいえ、ネイティブアプリに比べると、ブラウザ上で動くJavaScriptにできることは限られています。現在、それを補うために、JavaScriptから使用することができる様々なAPIが次々と策定されています。この記事で紹介する Wake Lock API もその1つです。 Wake Lockという言葉は、ネイティブアプリ開発をしている方なら知っている言葉かもしれません。これは、要するに ほっといても画面が勝手に消えない機能 です。 スマートフォンのような端末は、一定時間触らないでいると画面が消えてアプリ等の動作も止まるのが普通です。しかし例えば動画を再生するアプリなどは、触らないからといって勝手に消えてもらっては困ります。ですから、この自動画面オフを制御する機能が必要となるのです。そして、このような制御をJavaScriptから行えるのが Wake Lock API なのです。 Wake Lock APIの使用法 では、さっそくWake Lock APIの使用法を解説していきます。まず、 WakeLockオブジェクト というものを取得する必要があります。そのために使うのが navigator.getWakeLock メソッドです。このメソッドの返り値はPromiseであり、成功すればこのPromiseはWakeLockオブジェクトに解決されます。 WakeLockの取得 // スクリーンのWakeLockを取得 nagivator.getWakeLock('screen').then(wakelock => { // WakeLockの取得に成功した }) .catch(err => { // 失敗 console.error(err); }); WakeLockが設定で許可されていないなどの場合はWakeLockの取得に失敗することになります。 そして、実際に画面のWakeLockを有効にするにはWakeLockオブジェクトの createRequest メソッドを呼び出します。 リクエストの取得

早速GAE/Go go1.11の次世代ランタイム試してみた : Betaが公開されたので早速触ってみたのでサラッと書いてみた go1.9ランタイムからgo1.11ランタイム（2nd gen）に移行するためには最低限やることと気をつけること 中身的には このへん の内容です。 app.yamlで go111 ランタイムを指定する 今までは多分 api_version で指定していたと思いますが、 api_version は Deprecated になります。 そのため、 runtime へ指定します。 また、以下のタグも同様に Deprecated になります application_readable builtins login libraries threadsafe skip_files Deprecatedのフィールドを利用している場合、deploy時にエラーになるようです。 サービス単位でmainパッケージが必要 旧世代のランタイムだとinitで初期化できていましたが、今後はmainパッケージが必要になります。 appengine ビルドタグが廃止されます なんだっけ？これ。 依存関係をプロジェクトに取り込む方法が変わって以下の2パターン アプリケーションのコードと依存関係をGOPATHに配置する go.modファイルを利用して定義する Appengine固有のAPIではなく、Google Cloudクライアントライブラリを使って！ GAE/FEやGKEと同様にGoogleCloudクライアントライブラリを利用する必要があります。 このへん にまとまっています。 TQ、Datastore、AppengineMemcacheなどを利用していた方はもれなく移行が必要です。 appengineパッケージが必要な場合には、google.golang.org/appengineパッケージが利用できます。 go1.11ランタイムを利用する場合にはgcloud app deployコマンドを利用する必要があります goapp コマンドはもう卒業できます。 gcloudコマンドでのデプロイも依存をきれいに解決してくれているように見えるので（vendorなど）もうgcloudで特に

Amazon EBS スナップショットライフサイクルが自動化された : こんばんは。 本日はタイトル通りですが、8月16日にEBSスナップショットのライフサイクルの自動化：Amazon データライフサイクルマネージャー (DLM) がリリースされたおりましたので、試してみた所感を残してみようと思います。 リリース記事 Amazon データライフサイクルマネージャーのリージョンでの拡充 https://aws.amazon.com/jp/about-aws/whats-new/2018/08/amazon-data-lifecycle-manager-regional-expansion/ ご覧いただければおわかりいただけますが、すでに定期バックアップと世代管理を実装していらっしゃるユーザにおいては、特筆性がなく、あまり実用性のないものとなっていますが、コーディングに戸惑うユーザ様にとってはかなりありがたいサービスとなっています。 今までは CloudWatch Events やスクリプトで実装しなければならなかった仕組みを完全に GUI のみで簡易的に実装できることとなりました。 さて、ではどのように設定するかは以下の通りです。 設定項目 Description：ライフサイクルポリシーの説明 Target volumes with tags：ターゲットボリュームのタグ指定 Schedule name：スケジュール名 Create snapshots every：スナップショットの取得頻度 Snapshot creation start time：スナップショット取得開始時刻 Retention rule：保管世代数 Tag created snapshots：スナップショットへの付与タグ IAM role：実行権限をデフォルトとカスタムのどちらで実行するか選択 Policy status after creation：スナップショット作成後のポリシーの状態を選択 早速設定完了し、実行してみました。 この結果、確かにスナップショットが取得できました。 これはかなり便利ではないかと思います。 しかしながら、タグ付けルールは一元的にしか付けられないので、AWS の機能拡張を待つなり、自身で自動

AWS Systems Manager ハンズオン : ■AWS Systems Managerとは？ ・EC2インスタンスにSSH・RDPで接続せずにブラウザ上からCLI操作ができる機能です。 ・ブラウザがSSHクライアントとして動作している訳でなく､制御はSSMによって実現されています｡ ・セキュリティグループのインバウンド設定や踏み台ホストを作ること無く安全にEC2インスタンスへ接続できます。 1.SSMエージェントをバージョンアップする バージョンアップをしていないと↓のような画面が表示され、バージョンアップしてくれと表示されてしまいます。 SSM エージェント をインストールし設定する を参考にアップデートしてください。 今回は、Amazon Linux2 の手順を紹介します。 下記コマンドでインストールします。 yum install -y https://amazon-ssm-ap-northeast-1.s3.amazonaws.com/latest/linux_amd64/amazon-ssm-agent.rpm SSM エージェント が実行中であるか確認してください。 sudo systemctl status amazon-ssm-agent 2.EC2インスタンスにIAMロールを設定する EC2インスタンスのIAMロールにAWS管理ポリシー AmazonEC2RoleforSSM を割り当てます。 割り当てていないと、↓感じの画面が出て怒られました。 IAMを開き、「ロール」から「ロールの作成」をクリックします。 「EC2」を選択し、「次のステップ：アクセス権限」に進みます。 「AmazonEC2RoleforSSM」を選択し、「次のステップ：確認」に進みます。 適当なロール名を入力し、「ロールの作成」をします。 EC2を開き、「インスタンスの設定」から「IAMロールの割り当て/置換」を選択します。 先程作成した[IAM ロール]を選択し、「適用」します。 3.セッションの開始 準備ができたので、接続して見ましょう！ Systems Mangerの画面を開き、「セッションマネージャー」から該当のインスタンスを選択し、「セッションの開始」をクリックします｡ はい、こ

Go言語で簡単な電卓を作ってみる : 電卓作成 対話型のプログラムを作ってみたいなーと思いまして。 あと、型確認もできますし！ 流れはこんな感じです。 1. 数字、および演算子の入力(逆ポーランド法で) 2. 数字および演算子を変数に格納 3. 演算子毎に違った計算を実施 4. 計算結果を出力 今回は、+, -, *, / 辺りを実装してみます。 フローチャートは割愛です！ 標準入出力 とりあえずは、C言語でいうscanf的なものを調査しないと。 うーん…… 結構いろんな種類があるみたい。 どれが適しているのだろう…分からぬ…… とりあえず、fmt.Scanf関数を使って…みますか…… …と思ってやってみたコードがこちら。 ※ビルドできません！！！ Calculation.go(失敗例) package main import "fmt" func main() { var x int fmt.Scanf("%d", &x) fmt.Printf("%d\n", x) } おお！ いけました！ 感覚でいけるもんですね。 というわけで、入力フォームおよび出力内容を作ってみます。 作ったコードはこちら！ Calculation.go package main import "fmt" func main() { var a, b int var calc string fmt.Printf("Please enter the calculation formula.\n"); fmt.Printf("ex) 1 + 1 = ? -> 1 1 +\n"); fmt.Scanf("%d %d %s", &a, &b, &calc); fmt.Printf("%d %s %d = ", a, calc, b); } コーディングしていて驚いたのは、Go言語にはchar型は無いん

vue.js-画像ファイルアップロード後の表示 : window上で選択したfileを表示する方法 Vue.jsを使うと簡単に選択したfileを表示することができたので、練習ながらまとめておく。 HTML input要素(type="file")を使って行った。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="style.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app"> <input type="file" @change="change"> <div v-if="preview"> <img :src="preview"> </div> </div> <script src="main.js"></script> </body> </html> Vue.js dataは、previewとし、index.htmlのimg要素内のsrc属性に紐づけしておく。 main.js var app = new Vue(

EC2に構築しているWebサイトにサブドメインなしで接続させる方法 : 背景 EC2インスタンスにてWebシステムが稼働していて、サブドメイン付きのURLを使用していたが、サブドメインなしのURLに変更したい ↓みたいな感じをやりたい（実在しないよ） 変更前： https://www.hiroky.com 変更後： https://hiroky.com 前提 EC2インスタンスでWebシステムが稼働している EC2の前段にはELBが存在して、ELBは生かす Route 53にてドメイン取得済み 完全に変更ではなく、最初のアクセス先だけサブドメインなしで接続させる CloudFront → ELB（www.hiroky.com）にリダイレクトする TOPページはサブドメインなし、以降のページ遷移はwww.hiroky.comで行う すでにELBなどの構築がされていて、既存のネットワーク構成等を変更せずお手軽にやりたかった 手順 S3バケット作成 任意のバケット名でS3バケットを作成 作成後、プロパティの「Static web site hosting」を選択し、リダイレクト先を設定 証明書発行 Certificate managerで証明書を発行 リージョンに「 バージニア北部 」を設定（CloudFrontで使用するためバージニア北部を設定） 「証明書のリクエスト」ボタンを押下 「証明書のリクエスト」ボタンを押下 CloudFrontで使用するドメイン名を追加 （hiroky.comのようにサブドメイン指定なし） DNSの検証を選択 「確認」ボタンを押下 「確定とリクエスト」ボタンを押下 「Route 53でのレコードの作成」ボタンを押下 「作成」ボタンを押下 「続行」ボタンを押下 CloudFront Distribution追加 Distributionを追加 「Create Distribution」ボタンを押下 Webの「Get Started」ボタンを押下 Origin Domain Name：S3の"Static website hosting"のエンドポイントを入力（プルダウンからバケットを選択すると有効にならない） Origin ID：任意

Jenkins による リリース & Git操作 & build 入門 : Jenkins による リリース & Git操作 & build 入門 00. Jenkinsについて Jenkinsとは 準備された仕事を指定されたタイミングで実行する箱 継続的インテグレーション（continuous integration）ツール アジャイル型開発での利用を前提に設計された on-premises（自社運用）型のため企業において一括管理しやすい 日本製で、作者は川口耕介氏 "ジョブ"と呼ばれる用途単位の機能を順次実行していくことで Git操作 や ファイル転送 を実行する 1つのジョブは、対象Gitブランチ設定やGitコマンド、シェルコマンドなどを設定することで1つの機能を担う構造になっている ジョブを一度作成すると実行時に機能の詳細内容を意識することなく反復利用できる 初期状態では、ジョブが何も与えられてない"からっぽのハコ"のようなもの 川口耕介氏 なぜCIツール 機械が得意なことを機械に任せる 差分抽出 反復作業 転送設定 高速リリース テスト ローカルルールの撲滅 本来創意工夫の必要のない作業 属人的な要素の排除 その他のCIサービス Circle CI Travis CI 他多数．．． 01. シェルコマンド Jenkins の Job でよく利用する シェルコマンド を紹介 Jenkins 「シェルの実行」内容の例 #!/bin/bash ### 変数定義 # ホスト HOST_REMOTE=［ホストの名前］ # パス PATH_DIST=${WORKSPACE}/dist/ PATH_REMOTE=［リモートのパス］ # コマンド RSYNC="rsync -rlcv --delete" ### ディレクトリ生成 （2回目の実行以降はコメントアウトする） # echo -e "\n\n*** ディレクトリ生成 開始 ***" # ssh $HOST_REMOTE mkdir -p $PATH_R