[{"content":"はじめに このブログは2017年の開設からずっと、AWS の EC2 上に立てた WordPress で運用してきました。ただ、ここ数年は更新頻度が落ちる一方で、サーバー代とメンテナンスの手間だけがかかり続ける状態に。\n思い切って WordPress をやめて、Hugo で作る静的サイトに移行しました。この記事はその移行後、最初に書く記事です。先に「移行して何が変わったか」を書いて、そのあとで、なぜ移行したのか、どう移したのか、どこでハマったのかを、これから同じことをする人向けにまとめます。\n移行前と移行後のトップページはこんな感じです。\n先に結論：移行して何が変わったか 記事を書く流れが「エディタで Markdown を書いて push」だけになった。サーバーを起動する儀式が無い サーバーの更新・監視・バックアップが不要になった ページの表示が軽くなった（PHP も DB も無い、ただの HTML） 月額コストは 20 ドル強から、EC2 停止後は数百円程度になる見込み 旧記事の URL と画像はそのまま。被リンクも検索流入も失っていない サイト内検索が使えるようになった 最後の検索は、静的サイトにしてむしろ増えた機能です。WordPress の検索はサーバー上の PHP が DB に問い合わせて結果ページを作る仕組みなので、StaticPress で HTML に書き出したサイトでは動きません。「入力に応じてその場で作るページ」は書き出しようがないからです。なので旧サイトには検索フォーム自体を置いていませんでした。\nHugo では、ビルド時に全記事のタイトル・本文・URL を 1 つの JSON に書き出し、検索ページがそれをブラウザで読み込んで JavaScript で絞り込みます。サーバー側の処理はなく、S3 に置いた静的ファイルだけで完結します。記事 429 本で索引は 2.5MB ほど。記事を足せば再ビルドで勝手に更新されます。\n代わりに、コメント機能や管理画面からの画像アップロードのような「動的なもの」は無くなりました。このブログではどちらも使っていなかったので、失ったものはほぼありません。\nここからは、なぜそうしたのか、どうやったのかの話です。\n移行を決めた理由 お金 EC2（t2.micro）、Elastic IP、EBS、Route53 と積み上がって、月に20ドル強。しかも記事を書いていない月も同じだけかかります。静的サイトなら S3 と CloudFront だけで、このブログのアクセス規模だと月に数百円で収まる見込みです。\n手間とセキュリティ WordPress 本体、PHP、プラグイン、OS のアップデート。放置すると脆弱性が溜まり、更新すると何かが壊れる。書きたいときにサーバーの面倒から始まるのが、更新が遠のく原因になっていました。静的サイトには攻撃される「実行中のもの」がないので、この心配がまるごと消えます。\n書くたびに EC2 を起動して、終わったら止める サーバー代を抑えるために、書かないときは EC2 を停止していました。すると記事を書くたびに、AWS のコンソールにログインして EC2 を起動し、立ち上がるのを待ってから管理画面を開く、という手順から始まります。書き終わったら StaticPress で静的化して、EC2 を止めるのを忘れないようにする。忘れると、次に気づくまで課金が続きます。\n「思いついたときにサッと書く」とは程遠い儀式で、これが地味に一番効いていました。静的サイトには起動も停止もありません。\n書き方を Markdown と git にしたかった 記事は Windows のデスクトップでも Mac のノートでも書きます。WordPress では記事の実体がサーバー上の DB にあるので、どの PC からでも「まずサーバーを起動して管理画面を開く」ことになり、上の儀式が毎回ついて回ります。\nそこで、ブログのデータをひとつのリポジトリに持ち、どの PC からでも同じものを開いて続きを書ける形にしたかった。記事は Markdown のテキストファイル、管理は git。clone すれば手元に全記事がそろい、履歴も残る。エディタで書いて git push するだけ、という流れにしたかったのが最後の一押しです。\n移行後の構成 項目 移行前 移行後 生成 WordPress（PHP + MySQL） Hugo（静的サイトジェネレータ） テーマ 独自カスタマイズ Stack（Hugo テーマ） 配信 EC2 → 静的化プラグイン（StaticPress） → S3 / CloudFront S3 / CloudFront（そのまま流用） 記事 管理画面のエディタ Markdown + git（GitHub のプライベートリポジトリ） 画像 サーバーにアップロード 旧画像は S3 に据え置き、新規は記事フォルダに同梱して git 管理 構成図で並べるとこうなります。移行前は「書く場所」と「配信する場所」の間に EC2 上の WordPress と静的化プラグインの StaticPress が挟まっていて、しかも書く前に EC2 を起動し、書き終わったら止める、という手順がセットでした。移行後は EC2 が丸ごと消えて、手元で書いた Markdown を GitHub に push すると、ビルドと S3 への同期が自動で走る形になります（自動化は準備中）。\nflowchart LR subgraph before[\"移行前\"] direction TB A0[\"AWS にログインして\nEC2 を起動、待つ\"] --\u003e A[\"ブラウザ\n管理画面で執筆\"] A --\u003e B[\"EC2\nWordPress + PHP + MySQL\"] B --\u003e C[\"StaticPress\nHTML に書き出し\"] C --\u003e D[(\"S3\n静的ファイル + 画像\")] D --\u003e E[\"CloudFront\"] --\u003e F[\"読者\"] C --\u003e G[\"EC2 を停止\n忘れると課金が続く\"] G -. 次に書くとき .-\u003e A0 end subgraph after[\"移行後\"] direction TB A2[\"エディタ\nMarkdown + git\"] --\u003e B2[\"GitHub\nプライベートリポジトリ\"] B2 --\u003e C2[\"GitHub Actions\nHugo でビルド → S3 同期\"] C2 --\u003e D2[(\"S3\n静的ファイル + 旧画像\")] D2 --\u003e E2[\"CloudFront\"] --\u003e F2[\"読者\"] end before ~~~ after配信面（S3 + CloudFront）は WordPress 時代から StaticPress で使っていたので、移行後も URL 構造をそのまま維持できました。/2024/03/01/12064/ のような旧 URL も、画像の /wp-content/uploads/... もそのままです。被リンクや検索流入を失わないために、ここは最初から必須条件にしていました。\nリポジトリの中身はこうなっています。テーマ本体は触らず、サイト側のフォルダに設定と少しの上書きだけを置く構成です。\nリポジトリの構成（抜粋） blogenist/ config/_default/ hugo.toml 基本設定・URL の形式・コードハイライト params.toml テーマ（Stack）の表示設定 menu.toml サイドバーのメニューと SNS リンク content/posts/ 記事（Markdown）。旧記事は \u0026lt;記事ID\u0026gt;.md、新記事は \u0026lt;番号\u0026gt;/index.md data/ 商品リスト、動画リスト（TOML） layouts/ テーマの上書きとショートコード（必要最小限） assets/scss/custom.scss 配色などの調整 static/ ads.txt、favicon など themes/stack/ テーマ本体（無改変） 移行の手順 1. WordPress からエクスポート 管理画面の「ツール → エクスポート」で WXR（XML）を出力。記事本文、カテゴリ、タグ、アイキャッチの紐づけ、添付ファイルの情報がすべて入っています。記事512本で 15MB ほどでした。\n2. WXR を Markdown に変換 Python で変換スクリプトを書きました。標準の XML パーサーだと WordPress の出力に含まれる不正な文字で落ちるので、正規表現で \u0026lt;item\u0026gt; を切り出す方式にしています。骨格はこれだけです。\nwxr2hugo.py（骨格） import re, html raw = open(\u0026#34;export.xml\u0026#34;, encoding=\u0026#34;utf-8\u0026#34;).read() items = re.findall(r\u0026#34;\u0026lt;item\u0026gt;(.*?)\u0026lt;/item\u0026gt;\u0026#34;, raw, re.DOTALL) def cdata(block, tag): m = re.search(rf\u0026#34;\u0026lt;{tag}\u0026gt;\\s*\u0026lt;!\\[CDATA\\[(.*?)\\]\\]\u0026gt;\\s*\u0026lt;/{tag}\u0026gt;\u0026#34;, block, re.DOTALL) return m.group(1) if m else \u0026#34;\u0026#34; for block in items: if cdata(block, \u0026#34;wp:post_type\u0026#34;) != \u0026#34;post\u0026#34;: continue if cdata(block, \u0026#34;wp:status\u0026#34;) != \u0026#34;publish\u0026#34;: # 下書き・非公開・ゴミ箱は持ち込まない continue post_id = cdata(block, \u0026#34;wp:post_id\u0026#34;) title = html.unescape(cdata(block, \u0026#34;title\u0026#34;)) body = cdata(block, \u0026#34;content:encoded\u0026#34;) # ... 本文の整形、front matter の組み立て、content/posts/\u0026lt;post_id\u0026gt;.md へ保存 変換後の記事は、こういう front matter を持った Markdown になります。\ncontent/posts/12064.md（先頭） --- title: \u0026#34;記事タイトル\u0026#34; date: 2024-03-01T12:00:00+09:00 url: \u0026#34;/2024/03/01/12064/\u0026#34; # 旧 URL をそのまま固定 image: \u0026#34;/wp-content/uploads/2024/02/eyecatch.jpg\u0026#34; # アイキャッチは S3 の旧画像 categories: - \u0026#34;ガジェット\u0026#34; tags: - \u0026#34;GoPro\u0026#34; words: 2161 # 文字数・所要時間は変換時に前計算（理由は後述） minutes: 5 wpPostId: 12064 --- 変換でやっていることは次のとおりです。\nurl: に旧 URL（/YYYY/MM/DD/\u0026lt;記事ID\u0026gt;/）を書いて、パーマリンクを固定 _thumbnail_id → 添付ファイルのパス、と辿ってアイキャッチを復元 WordPress 時代の独自ショートコード（Amazon 商品リンク、関連記事リンク）を Hugo のショートコードに置き換え 旧テーマ専用の装飾（太字クラスやマーカー）は、Markdown 標準の \u0026lt;strong\u0026gt; や \u0026lt;mark\u0026gt; に変換 ハイライトプラグインのコードブロックを Markdown のコードブロックに変換（これも後述） 最後の2つは地味に大事で、旧テーマの CSS クラスを引きずると、テーマを変えるたびに「旧記事だけ崩れる」ことになります。移行時に標準の書き方へ寄せておくと、後が楽です。\n3. 画像は動かさない 画像は 4,000 枚以上・700MB あります。これを git に入れるのは現実的ではないので、S3 にあるものをそのまま使うことにしました。パスも変えないので、記事本文の画像リンクは一切書き換えていません。ローカルで画像込みの表示を確認したいときだけ S3 から同じフォルダにコピーし、git からは除外しています。\n.gitignore（抜粋） **/public/ **/resources/_gen/ **/static/wp-content/uploads/ # 旧画像は S3 が正。ローカルにコピーしても git には入れない 新しく追加する画像だけ、記事フォルダに同梱して git 管理にしています。\n4. ローカルで確認 hugo server で手元に立ち上げ、トップ・記事・カテゴリ・タグ・検索を一通り確認。\nローカルプレビュー cd blogenist hugo server -D --renderToMemory # -D で下書きも表示、--renderToMemory でディスクに書き出さない 全記事のビルドは 6秒です。WordPress の管理画面を開くより早い。\nビルド結果 │ JA ─────────────────┼────── Pages │ 607 Paginator pages │ 425 Static files │ 4195 Aliases │ 120 Built in 6376 ms ハマったところ 目次が出ない WordPress の本文は HTML なので、見出しも \u0026lt;h2\u0026gt; のままです。Hugo の目次（.TableOfContents）は Markdown の見出しからしか作られないため、変換時に HTML の見出しタグを Markdown の見出しに変換して解決しました。\n変換前（WordPress の本文） \u0026lt;h2\u0026gt;移行を決めた理由\u0026lt;/h2\u0026gt; \u0026lt;h3\u0026gt;お金\u0026lt;/h3\u0026gt; 変換後 ## 移行を決めた理由 ### お金 記事同士を参照するとビルドが止まる 関連記事カードで「リンク先記事の文字数」を出そうとして、テンプレートからリンク先の本文集計を参照したところ、ビルドが数分経っても終わらなくなりました。記事 A が記事 B の本文を要求し、B が A を要求し……と互いに待ち合う形になるためです。\nダメな例（リンク先の本文を集計しに行く） {{ $target := site.GetPage .Params.url }} \u0026lt;span\u0026gt;{{ $target.WordCount }}文字 / 約{{ $target.ReadingTime }}分\u0026lt;/span\u0026gt; 対策は、文字数や読了時間を変換時に前計算して front matter に持たせ、カードはそれだけを読むようにすること。リンク先の front matter（タイトル・画像・日付・文字数）だけで完結させれば、一瞬でビルドが終わります。\nこうした（front matter の値だけ読む） {{ $target := site.GetPage .Params.url }} \u0026lt;span\u0026gt;{{ $target.Params.words }}文字 / 約{{ $target.Params.minutes }}分\u0026lt;/span\u0026gt; コードブロックの色分けが消えた WordPress ではハイライト用のプラグインを使っていたので、本文にはプラグイン独自の \u0026lt;pre\u0026gt; が 1,400 個ほど残っていました。Hugo はこれをただの HTML として素通しするので、色分けもコピー用ボタンも無い状態に。\n変換前（プラグインの形式） \u0026lt;pre class=\u0026#34;lang:sh decode:true\u0026#34; title=\u0026#34;command\u0026#34;\u0026gt;brew install hugo\u0026lt;/pre\u0026gt; これを Markdown のコードブロックに変換したら、Hugo 標準のハイライトがそのまま効きました。ファイル名やコマンド名（title）は、Hugo の render hook でブロックの上に帯として出しています。\n変換後（Markdown） ```bash {title=\u0026#34;command\u0026#34;} brew install hugo ``` OGP の説明文に \\n が混ざる SNS でシェアしたときの説明文に、改行が \\n という文字のまま出ていました。WordPress 由来の本文に Windows 形式の改行や連続空白が含まれていたのが原因で、説明文を作るテンプレートで空白類をまとめて整形するようにして解決。\nlayouts/_partials/data/description.html {{- $d := .Summary | plainify | htmlUnescape -}} {{- $d = replaceRE \u0026#34;[\\\\s\\\\x{3000}]+\u0026#34; \u0026#34; \u0026#34; $d | strings.TrimSpace -}} {{- return $d -}} 移行直後は、実際に投稿したときのカード表示まで確認しておいたほうがよさそうです。\n非公開にした記事が公開されたままだった これは Hugo というより静的化の落とし穴。WordPress で「非公開」や「削除」にした記事が、StaticPress で S3 に書き出したページとしては残っていて、URL を知っていれば普通に見られる状態になっていました。静的化は「追加・更新」はしてくれても「削除」までは面倒を見てくれなかったわけです。\n移行後は、ビルド結果を S3 に同期するときに --delete を付けて、ビルドに含まれないページは S3 からも消えるようにしました。記事を下げたいときは Markdown を消せば終わりです。\nS3 への同期（旧画像のフォルダだけは消さない） aws s3 sync public/ s3://\u0026lt;バケット名\u0026gt;/ --delete --exclude \u0026#34;wp-content/uploads/*\u0026#34; 「ちょっとカスタマイズ」の誘惑 テーマに無い機能を自前の CSS や JS で足し始めると、テーマを更新するたびに直す羽目になります。今回は「テーマ標準の設定で済むならそれを使う。自前で書くなら最小限」を方針にして、途中でテーマも乗り換えました（最初は別のテーマで進めていましたが、左サイドバーや目次の追従など、欲しいものが標準で揃っていた Stack に切り替え）。\nそれでも、記事の前に出す商品カードや動画カードのように、自前で組んだ部品はいくつかあります。何を自前で足したかは README に一覧で残して、テーマ更新のときに見比べられるようにしています。\nこれから GitHub Actions で push → ビルド → S3 同期 → CloudFront キャッシュ無効化まで自動化 旧 EC2 と Elastic IP を削除して、コスト削減を確定させる 商品紹介カードや関連記事カードなど、WordPress 時代に便利だった部品を引き続き整備 移行作業そのものは、休日の作業で2日ほど。エクスポートさえ取ってしまえば、あとは手元で何度でもやり直せるので、思っていたより気楽でした。WordPress の維持に疲れている人には、静的サイトへの移行はかなりおすすめです。\n","date":"2026-09-08T11:00:00+09:00","image":"/2026/09/08/20000/feature.png","permalink":"/2026/09/08/20000/","title":"8年運用したWordPressブログをHugo（静的サイト）に移行した話【EC2卒業】"},{"content":"MACからEC2にSSH接続出来なくなった Permission deniedキターーー(泣) 先日、久しぶりに昔作ったEC2にSSH接続しようとした際に以下のようなエラーが発生して接続が出来なくなっていました。\nssh \u0026lt;エイリアス\u0026gt; sign_and_send_pubkey: no mutual signature supported {ユーザー}@{ホスト}: Permission denied (publickey). むむむ。。。なぜだ。。。\nMACのsshクライアントの更新が原因 これはMACの標準SSHクライアントの更新によって、デフォルトではRSAをサポートしなくなったのが原因らしいです。\n原因が分かれば対策は簡単です！早速解決していきましょう♪\n手順 .ssh/configを修正 解決方法はとても簡単です。\n.ssh/configに以下２行を追記するだけでOKです。\n~/.ssh/config Host {エイリアス} HostName {ホスト} User {ユーザー} IdentityFile {キーファイルパス} PubkeyAcceptedKeyTypes=+ssh-rsa ←追記1 HostKeyAlgorithms=+ssh-rsa ←追記2 たったこれだけです。\n再度確認 では改めてSSHコマンドを実行してみましょう。\nssh \u0026lt;エイリアス\u0026gt; Last login: Fri Jan 03 08:34:46 2024 from {接続元} __| __|_ ) _| ( / Amazon Linux AMI ___|\\___|___| https://aws.amazon.com/amazon-linux-ami/2017.03-release-notes/ 139 package(s) needed for security, out of 189 available Run “sudo yum update” to apply all updates. Amazon Linux version 2018.03 is available. 無事に接続できましたね♪\n終わりに MACを使ってSSH接続をしている方はおそらく発生する可能性が高いであろう事象でした。\n同じ現象でお困りの方は是非参考にしてみてください♪\n","date":"2025-01-05T14:00:23+09:00","image":"/wp-content/uploads/2025/01/macSshErrorEye.png","permalink":"/2025/01/05/12154/","title":"【sign_and_send_pubkey: no mutual signature supported】MACからAWSのEC2にRSA秘密鍵を使ってSSH接続出来ない原因と解決方法【Permission denied (publickey)】"},{"content":"AmazonLinux1には手動で入れる必要がある 最近のEC2インスタンスを作成すると、デフォルトでセッションマネージャーによる接続が可能になっていますが、過去に作成したEC2インスタンスだとSSM Agentがインストールされていないので手動でインストールする必要があります。\nとはいえセッションマネージャーを有効にしておくとブラウザからセキュアにSSH接続をする事が可能になりとても便利なため実際に導入してみたので備忘録としてご紹介しようと思います♪\n手順 SSMエージェント 今回の対象はAmazonLinux1のためyumを使ってインストールします。\nsudo yum install -y https://s3.amazonaws.com/ec2-downloads-windows/SSMAgent/latest/linux_amd64/amazon-ssm-agent.rpmのコマンドを実行しましょう。\nsudo yum install -y https://s3.amazonaws.com/ec2-downloads-windows/SSMAgent/latest/linux_amd64/amazon-ssm-agent.rpm 読み込んだプラグイン:priorities, update-motd, upgrade-helper amazon-ssm-agent.rpm | 24 MB 00:00:04 /var/tmp/yum-root-VatQt8/amazon-ssm-agent.rpm を調べています: amazon-ssm-agent-3.3.1345.0-1.x86_64 /var/tmp/yum-root-VatQt8/amazon-ssm-agent.rpm をインストール済みとして設定しています 依存性の解決をしています amzn-updates/latest | 3.7 kB 00:00:00 --\u0026gt; トランザクションの確認を実行しています。 ---\u0026gt; パッケージ amazon-ssm-agent.x86_64 0:3.3.1345.0-1 を インストール --\u0026gt; 依存性解決を終了しました。 依存性を解決しました ============================================================================================================================================================================================================================================== Package アーキテクチャー バージョン リポジトリー 容量 ============================================================================================================================================================================================================================================== インストール中: amazon-ssm-agent x86_64 3.3.1345.0-1 /amazon-ssm-agent 122 M トランザクションの要約 ============================================================================================================================================================================================================================================== インストール 1 パッケージ 合計容量: 122 M インストール容量: 122 M Downloading packages: Running transaction check Running transaction test Transaction test succeeded Running transaction インストール中 : amazon-ssm-agent-3.3.1345.0-1.x86_64 1/1 amazon-ssm-agent start/running, process 4948 検証中 : amazon-ssm-agent-3.3.1345.0-1.x86_64 1/1 インストール: amazon-ssm-agent.x86_64 0:3.3.1345.0-1 完了しました! これでEC2インスタンスへのセッションマネージャーの導入は完了です。\nIAMロールの作成 次にEC2用のIAMロールを作成します。\nIAMロールの新規作成画面に移動し、エンティティタイプはAWSのサービス、ユースケースはEC2を選択し次へ進みます。\n次の画面ではポリシーでAmazonSSMManagedInstanceCore を選択しましょう。\n次の画面では名称のみを入力し、それ以外はそのままで良いのでIAMを作成しましょう。\nIAMをEC2インスタンスにアタッチ 次に作成したIAMロールをセッションマネージャーで接続したEC2インスタンスにアタッチしましょう。\n対象のインスタンスを選択し、アクション＞セキュリティ＞IAMロールを変更に進みます。\n先ほど作成したIAMロールがプルダウンに表示されると思うのでそれを選択し変更ボタンを押下します。\n確認 これで準備は終わったのでセッションマネージャーを試してみましょう。\nセッションマネージャーは有効化されていました！\n無事にコンソール画面も表示出来ました♪\nSystemManagerで管理も可能 また、リアルタイムでセッションマネージャーを利用しているユーザーの状況を確認する事も出来るので何かに役立つかもしれませんね♪\n終わりに 無事にAmazonLinux1に対してセッションマネージャーで接続することが可能になりました♪\nブラウザ経由でSSH接続が可能になると作業効率が上がり、認証キーなどの管理も不要になるので是非みなさんも導入してみてください♪\n","date":"2025-01-04T19:37:47+09:00","image":"/wp-content/uploads/2025/01/sessionManagerEye.png","permalink":"/2025/01/04/12160/","title":"【踏み台ホストやSSHキーが不要になる】AmazonLinux1にセッションマネージャーで接続するための方法【作業効率アップ】"},{"content":"マウスクリックを分かりやすくしたい 標準機能では不可能 パソコンでアプリの操作などを録画や配信する際に、マウスカーソルがクリックしたところを分かりやすくしたいと思ったことありませんか？\n今まではサードパーティのツールなどを使う必要がありましたが、現在はマイクロソフト公式から可能になるツールが公開されていますので今回はそれをインストールしてみようと思います♪\nPowerToys それがPowerToysというソフトです。\n\"実行可能ファイルまたはパッケージ マネージャーを使用して、Windows のカスタマイズに使用する一連のユーティリティである PowerToys をインストールします (WinGet、Chocolatey、Scoop)。\" PowerToys のインストール | Microsoft Learn\nこちらはMicrosoftが開発しているOSSとなていて、元々はWindowsに標準搭載されるはずだったが搭載出来なかった様々な便利な機能をまとめたものとなります。\n早速導入してみましょう！\n手順 PowerToysをインストール まずは公式ページにアクセスしてインストールしていきましょう。\nインストール方法はいろいろありますのでお好みの方法でインストールしてみてください。\n筆者はScoopを入れているのでそちらでインストールしてみようと思います♪\nScoopでインストール まずはscoop bucket add extrasでバケットを追加しましょう。\nバケットを追加 scoop bucket add extras 次にscoop install powertoysでPowerToys本体をインストールします。\nscoop install powertoys Installing \u0026#39;dark\u0026#39; (3.14) [64bit] from \u0026#39;main\u0026#39; bucket dark-3.14.zip (5.0 MB) [======================================================================================] 100% Checking hash of dark-3.14.zip ... ok. Extracting dark-3.14.zip ... done. Linking ~\\scoop\\apps\\dark\\current =\u0026gt; ~\\scoop\\apps\\dark\\3.14 Creating shim for \u0026#39;dark\u0026#39;. \u0026#39;dark\u0026#39; (3.14) was installed successfully! Installing \u0026#39;powertoys\u0026#39; (0.87.1) [64bit] from \u0026#39;extras\u0026#39; bucket PowerToysUserSetup-0.87.1-x64.exe (274.1 MB) [================================================================] 100% Checking hash of PowerToysUserSetup-0.87.1-x64.exe ... ok. Running installer script...done. Linking ~\\scoop\\apps\\powertoys\\current =\u0026gt; ~\\scoop\\apps\\powertoys\\0.87.1 Creating shortcut for PowerToys (PowerToys.exe) Running post_install script...done. \u0026#39;powertoys\u0026#39; (0.87.1) was installed successfully! Notes ----- Add PowerToys context menu option by running: Invoke-Expression -Command \u0026#34;C:\\Users\\{USER}\\scoop\\apps\\powertoys\\current\\install-context.ps1\u0026#34; If an error occurs when updating or uninstalling, execute the following command then retry: `Stop-Process -Name \u0026#39;explorer\u0026#39;` インストール自体はこれで完了です。\n初期設定 では次に起動をして初期設定をしていきましょう。\nアプリを起動するとこのような画面が表示されます。\nマウス操作の可視化以外にもいろいろな機能がありますが、今回は一旦それ以外は無効化するのでダッシュボードからモジュールの無効化をしておきます。\nマウスユーティリティの設定 次にマウスユーティリティに移動し可視化をONにしていきます。\nマウス蛍光ペンの有効化をオンにして外観及び操作も任意の設定値に変えましょう。\nこれでマウスの可視化が有効になりました。\n確認 では確認してみましょう。\n無事にマウス操作の可視化が有効になりましたね♪\n終わりに 以上のように簡単にマウス操作の可視化を有効にする事が出来ました。\nMicrosoft公式問うのも安心感があるので、是非導入してみてはいかがでしょうか♪\n","date":"2025-01-03T13:23:58+09:00","image":"/wp-content/uploads/2025/01/powerToysEye.png","permalink":"/2025/01/03/12111/","title":"【PowerToys】Windowsでマウスクリックの可視化エフェクトをONにする方法【公式で無料】"},{"content":"Windowsの画面操作を簡単にGif化してSlackとかに貼りたい！ Macなら色々あるのに・・・ 画面操作をほかの人に共有する際に画面操作を録画した動画を送ればよいのですが、そのままMP4などで送ると容量が多くなるため、Gif化して送るケースは多々あると思います。\nただ、その際にMac環境だとGiftedやQuickTimePlayer+ffmpegなどでサクッと作ることができますが、Windows環境では便利なツールがあまり無く手間がかかった記憶がありました。orz\n救世主登場 そんな中、遂にWindows環境でも簡単に画面操作をGif化する事が出来る神ツールが出たとのことなので早速使ってみようと思います！\n\"GIF、ビデオ、その他の形式で記録、編集、保存できる無料のスクリーンレコーダーツールです。\" ScreenToGif - 画面を録画し、編集して GIF、ビデオ、またはその他の形式で保存します。\n手順 インストール まずはscreentogifをインストールしましょう。\n今回もScoopを使ってサクッとインストールしてみます。\nscoop install screentogif Installing \u0026#39;screentogif\u0026#39; (2.41.1) [64bit] from \u0026#39;extras\u0026#39; bucket ScreenToGif.2.41.1.Portable.x64.zip (75.0 MB) [===============================================================] 100% Checking hash of ScreenToGif.2.41.1.Portable.x64.zip ... ok. Extracting ScreenToGif.2.41.1.Portable.x64.zip ... done. Running pre_install script...done. Linking ~\\scoop\\apps\\screentogif\\current =\u0026gt; ~\\scoop\\apps\\screentogif\\2.41.1 Creating shim for \u0026#39;ScreenToGif\u0026#39;. Making C:\\Users\\{USER}\\scoop\\shims\\screentogif.exe a GUI binary. Creating shortcut for ScreenToGif (ScreenToGif.exe) Persisting Settings.xaml \u0026#39;screentogif\u0026#39; (2.41.1) was installed successfully! \u0026#39;screentogif\u0026#39; suggests installing \u0026#39;ffmpeg\u0026#39;. インストールはたったこれだけで終了です♪\nでは早速使ってみましょう！\r使い方 アプリ起動 アプリを起動するとこのようなウィンドウが表示されます。\n画面操作を録画するには左端のレコーダーボタンを押下します。\n画面録画 すると、ウィンドウがこのように変わり録画する範囲を自由に選択できるようになります。\n録画したい範囲を白枠の内側に収まるようにしましょう。\n選択範囲が決まったら右下の録画ボタンを押下し、終了する際はストップボタンを押下します。\nGif書き出し すると、エディター画面が表示されます。\nここで録画した動画の調整が可能ですが、基本的には何もせずに書き出してしまってよいと思います。\nファイル＞名前を付けて保存を押下しましょう。\nすると、GIFの設定項目が表示されますのでお好みの設定にした上で保存をしましょう。\nこれで書き出しは完了です！\n実際に書き出してみた 実際にGif化してみたのがこちらです。\nこちらはブログに挙げる性質上、容量を抑えるために劣化させていますが、実際には動画並みの画質なので細かい部分も見やすいです♪\nその場合もスピードや画質もいい感じでファイルサイズも2MB程度なので軽量です！\n終わりに 以上のようにWidows環境でも簡単に画面操作のGifを作成出来るようになりました♪\n皆さんも是非利用してみてください♪\n","date":"2025-01-01T12:41:21+09:00","image":"/wp-content/uploads/2025/01/windowsScreenToGifEye.png","permalink":"/2025/01/01/12115/","title":"【業務改善神ツール】画面操作をGifに簡単に変換する神ツール「ScreenToGif」が画期的過ぎた【オススメ】"},{"content":"Stable Diffusion ForgeをWindowsのローカルにインストール 今回はWindows環境にStable Diffusion WebUI Forgeをインストールしてみようと思います♪\nstable-diffusion-webui-forge\rForgeはAUTOMATIC 1111版と比較して、VRAMを節約しながら画像生成の速度を向上しているらしいので前から気になっていました。\nAIイラストを勉強するためにも導入してみます♪\n手順 インストーラーをダウンロード まずはGithubページ\u0026nbsp;にアクセスし、下部にある\u0026gt;\u0026gt;\u0026gt; Click Here to Download One-Click Package (CUDA 12.1 + Pytorch 2.3.1) \u0026lt;\u0026lt;\u0026lt;をクリックしましょう。\nダウンロードが完了したら解凍します。\n起動 解凍が済んだらrun.batを実行しましょう。\n初回のみ必要なモジュールのインストール等で時間がかかりますが、数分でブラウザが起動しStable Diffusion WebUIが表示されると思います。\n確認 しっかりとForge版になっていますね♪\n終わりに 以上のようにとても簡単にローカル環境にForge版のStable Diffusion Web UIを起動する事が出来ました♪\nローカルであれば無料でイラストを生成する事が出来るので是非試してみて下さい♪\n","date":"2024-12-03T17:59:38+09:00","image":"/wp-content/uploads/2024/12/stable-forge-eye.png","permalink":"/2024/12/03/12101/","title":"【Windows環境】ローカルにForge版Stable Diffusion Web UIをインストールしてみた【AIイラスト】"},{"content":"Scoopでpyenvをインストールすると3.10.6がインストール出来ない Windows環境にてstable-diffusion-webuiを整えようとして、Scoopを使ってpyenvをインストールし、推奨の3.10.6をインストールしようとすると以下のようなエラーが出てインストールされない場合があります。\npyenv install 3.10.6 :: [Info] :: Mirror: https://www.python.org/ftp/python pyenv-install: definition not found: 3.10.6 See all available versions with `pyenv install --list\u0026#39;. 試しにpyenv install -lでインストール可能なバージョンを確認してみましょう。\npyenv install -l ...略... 3.10.5-win32 3.10.5 3.11.0a1-win32 3.11.0a1 ...略... たしかに3.10.6が存在しませんね。。。\n手順 pyenvをupdateすれば良い 原因は簡単で、Scoopで管理しているpyenvのバージョンに3.10.6のモジュールが含まれていないだけなのでpyenv updateをかけるだけでインストールが可能になります。\npyenv update :: [Info] :: Mirror: https://www.python.org/ftp/python :: [Info] :: Scanned 220 pages and found 679 installers. 確認 pyenv global 3.10.6を実行すると無事に処理が進み、 python --versionでバージョンが表示されるようになると思います♪\npython --version Python 3.10.6 終わりに 以上のようにScoopを使えば全て良しなにやってくれると思いきや、かゆいところに手が届かないことがあります。\n同じような現象でお困りの方は是非試してみてください♪\n","date":"2024-11-01T17:31:52+09:00","image":"/wp-content/uploads/2024/12/scoop-pyenv-eye.png","permalink":"/2024/11/01/12096/","title":"【Scoop】Stable Diffusion推奨の3.10.6がpyenvでインストール出来ない原因と解決方法【バージョン管理】"},{"content":"nodejsのバージョンを管理したい Nodejsを使って開発を行っていると、案件毎に使用しているNodejsのバージョンが異なり切り替えをする必要が出てくると思います。\nMacやLinux環境だとnodenvなどを使って簡単に切り替える事が出来るのですが、Scoopを使ってWindowsのパッケージ管理をしている場合、nodenvが対応していないので導入する事が出来ませんorz\nそこで今回は似たような機能を持つnvmをScoop経由で導入してみましたのでご紹介しようと思います♪\n手順 Scoopでnvmをインストール インストール自体はPowerShellを開いてscoop install nvmで簡単に行う事が出来ます。\nscoop install nvm Installing \u0026#39;nvm\u0026#39; (1.1.12) [64bit] from main bucket ...(略)... \u0026#39;nvm\u0026#39; (1.1.12) was installed successfully! 参考 Scoopを導入していない方は以下の記事を参考にしてみてください♪\n関連記事 【Windows10】アプリ自動導入＆管理ツールの「Scoop」がChocolateyを超えていた件【Homebrew】 2020/12/28 2235文字 約5分で読めます 特定のバージョンをインストール nvmのインストールが完了したら利用したいバージョンをインストールしましょう。\nまずはnvm list availableでインストール可能なバージョン一覧を確認してみましょう。\nnvm list available | CURRENT | LTS | OLD STABLE | OLD UNSTABLE | |--------------|--------------|--------------|--------------| | 21.7.1 | 20.12.0 | 0.12.18 | 0.11.16 | | 21.7.0 | 20.11.1 | 0.12.17 | 0.11.15 | | 21.6.2 | 20.11.0 | 0.12.16 | 0.11.14 | | 21.6.1 | 20.10.0 | 0.12.15 | 0.11.13 | | 21.6.0 | 20.9.0 | 0.12.14 | 0.11.12 | | 21.5.0 | 18.20.0 | 0.12.13 | 0.11.11 | | 21.4.0 | 18.19.1 | 0.12.12 | 0.11.10 | | 21.3.0 | 18.19.0 | 0.12.11 | 0.11.9 | | 21.2.0 | 18.18.2 | 0.12.10 | 0.11.8 | | 21.1.0 | 18.18.1 | 0.12.9 | 0.11.7 | | 21.0.0 | 18.18.0 | 0.12.8 | 0.11.6 | | 20.8.1 | 18.17.1 | 0.12.7 | 0.11.5 | | 20.8.0 | 18.17.0 | 0.12.6 | 0.11.4 | | 20.7.0 | 18.16.1 | 0.12.5 | 0.11.3 | | 20.6.1 | 18.16.0 | 0.12.4 | 0.11.2 | | 20.6.0 | 18.15.0 | 0.12.3 | 0.11.1 | | 20.5.1 | 18.14.2 | 0.12.2 | 0.11.0 | | 20.5.0 | 18.14.1 | 0.12.1 | 0.9.12 | | 20.4.0 | 18.14.0 | 0.12.0 | 0.9.11 | | 20.3.1 | 18.13.0 | 0.10.48 | 0.9.10 | This is a partial list. For a complete list, visit https://nodejs.org/en/download/releases 今回は最新版の21.7.1をインストールしてみましょう！nvm install {バージョン}でインストールする事が出来ます。\nnvm use 21.7.1 Downloading node.js version 21.7.1 (64-bit)... Extracting node and npm... Complete npm v10.5.0 installed successfully. Installation complete. If you want to use this version, type nvm use 21.7.1 インストールはこれで完了です！\n確認 以下のコマンドで確認してみましょう。\nnvm list 21.7.1 利用設定をする インストールしただけではダメなので利用するNodejsのバージョンを指定しましょう。\nnvm use {バージョン}で指定可能です。\nnvm use 21.7.1 Now using node v21.7.1 (64-bit) これで使用準備は完了です！\n確認 改めてnvm listで確認してみましょう。\nnvm list * 21.7.1 (Currently using 64-bit executable) nodeコマンドも確認してみます。\nnode -v v21.7.1 こちらも問題なく動きそうですね♪\nバージョンを切り替えたい場合 バージョンを切り替える際には他のバージョンをインストールしてuseコマンドで使用したいバージョンを指定するだけで切り替えることが可能になります。\nnvm list 21.7.0 * 20.8.1 (Currently using 64-bit executable) 終わりに 以上のようにScoopを導入していればWindows環境でも簡単にNodejsのバージョンを切り替えることが可能になりました。\nJavaScriptはまだまだ発展していく技術だと思いますので、是非参考にしてみてください♪\n","date":"2024-03-22T21:32:11+09:00","image":"/wp-content/uploads/2024/04/win-nvm-eye.png","permalink":"/2024/03/22/12072/","title":"【Scoopで簡単導入】WindowsでNodejsのバージョン管理を可能にしてくれるnvmのインストール方法と使い方"},{"content":"brew install時に権限エラーが発生 Permission deniedキターー！ MacOSをアップデートして新たなアプリケーションをインストールしようとした際にPermission denied @ dir_s_mkdir - /private/tmp/***というエラーが発生するようになりました！\nOS更新によって権限が変わった？ 原因はインストール時に仮置きする/private/tmpディレクトリの権限がrootになっている事です。\nls -la ...略... drwxr-xr-x 46 root wheel 1472 3 15 14:39 tmp ...略... 確かにrootになってますね。ここをユーザーに変えればなんとかなりそうです！\n手順 オーナー変更 やることはsudo chown -R \"{ユーザー名}\" /private/tmp/を実行して権限を付与するだけです！\n以下のように変わっていればOK！\nls -la ...略... drwxr-xr-x 46 {ユーザー名} wheel 1472 3 15 14:39 tmp ...略... エラーも出なくなりました♪\n終わりに 以上のように原因さえわかれば何も手子づることなく対応する事が出来ました！\n同じ現象でお困りの方は是非参考にしてみてください♪\n","date":"2024-03-15T19:03:09+09:00","image":"/wp-content/uploads/2024/03/homebrew-permission-eye.png","permalink":"/2024/03/15/12066/","title":"【Homebrew】「Permission denied @ dir_s_mkdir - /private/tmp/***」が発生した場合の原因と解決方法"},{"content":"Homebrewでエラーが発生 OSアップデートが起因？ MacのOSを久々に更新し、Homebrewコマンドを実行したところ、unknown or unsupported macOS version: :dunnoというエラーが発生するようになりました。\nこの状態になるとUpgradeやInstallが出来なくなってしまいます。\nしかしご安心を。簡単に解決する事が出来るのでやり方をご紹介します。\n手順 brew update-reset やることは一つだけ。brew update-resetコマンドを実行してHomebrewのgit関連を最新化するだけです。\nこのコマンドを実行すると設定が最新化されるので無事にコマンドが通るようになります。\nbrew update-reset From https://github.com/Homebrew/brew * [new branch] analytics_command_run_test_bot -\u0026gt; origin/analytics_command_run_test_bot * [new branch] bump-no-repology -\u0026gt; origin/bump-no-repology * [new branch] cask-fix-app-remove -\u0026gt; origin/cask-fix-app-remove ...略... 終わりに たったこれだけで解決してしまいました!\nただMacOS更新問題は定期的にやってくるので、もし同じ症状が出たからは是非試してみてください♪\n","date":"2024-03-01T19:03:17+09:00","image":"/wp-content/uploads/2024/03/homebrew-unsuported-eye.png","permalink":"/2024/03/01/12064/","title":"【Homebrew】「unknown or unsupported macOS version: :dunno」が出た場合の原因と対処方法【瞬殺】"},{"content":"Docker Desktopのイメージ保存先を変えたい Cドライブ圧迫を回避したい Windows環境でDockerを利用する場合はDockerDesktop for Windowsを使うことが多いと思います。\nしかし、インストール時に保存先を選ぶことが出来ずに自動でCドライブに保存されてしまいますよね。\nまた、デフォルトではエンジンについては%LocalAppData%\\Docker\\wsl\\distro\\ext4.vhdx、Dockerイメージについては%LocalAppData%\\Docker\\wsl\\data\\ext4.vhdxに保存されるのですが、サイズが肥大しすぎでCドライブの圧迫が気になります。。。\nうぎゃああああ！！！\nDドライブに変更可能 しかしご安心を。インストール後に各種データの保存先を任意の場所に変えることが出来るので、今回はDドライブに変更してみようと思います。\n手順 前提 一旦wsl --list --verboseコマンドで今の状態を確認してみましょう。\nwsl --list --verbose NAME STATE VERSION * docker-desktop-data Running 2 docker-desktop Running 2 上記は現状の%LocalAppData%\\Docker\\wsl\\配下にあるディストリビューションとなっています。\n既存のディストリビューションをコピー まずは既存のディストリビューションをwsl --export {ディストリビューション名} {変更先ディレクトリ}/{ディストリビューション名}.tarでコピーしましょう。\nwsl --export docker-desktop D:\\Docker\\distro\\docker-desktop-data.tar エクスポートが進行中です。これには数分かかる場合があります。 この操作を正しく終了しました。 これでtarファイルが生成されると思います。\n今回はdocker-desktopとdocker-desktop-dataの両方をエクスポートしました。\nディストリビューションを開始できませんでした。エラー コード: 2、エラーステップ: 2 ディストリビューションを開始できませんでした。エラー コード: 2、エラーステップ: 2というエラーが出る場合がありますが、この場合はwsl --export {ディストリビューション名} {変更先ディレクトリ}/{ディストリビューション名}.vhdx --vhdのように変更してtarではなくvhdx形式で出力しましょう。\n既存ディストリビューションの削除 エクスポートが完了したら、wsl --unregister {ディストリビューション名}コマンドでWSLから既存のディストリビューションを削除しておきましょう。\nwsl --unregister docker-desktop 登録解除。 この操作を正しく終了しました。 確認 念のためコマンドで確認してみましょう。\nwsl --list --verbose Linux 用 Windows サブシステムにインストールされているディストリビューションはありません。 無事に削除できていますね。\nWSLにインポート 削除が終わったら先ほどエクスポートしたファイルをインポートしましょう。\ntarファイルの場合は wsl --import {ディストリビューション名} {保存先ディレクトリ} {出力したファイルまでのパス}、vhdxファイルの場合は wsl --import {ディストリビューション名} {保存先ディレクトリ} {出力したファイルまでのパス} --vhdです。\nwsl --import docker-desktop-data D:\\Docker\\data\\ D:\\Docker\\data\\docker-desktop-data.vhdx --vhd インポート中です。この処理には数分かかることがあります。 この操作を正しく終了しました。 確認 念のためコマンドで確認してみましょう。\nwsl --list --verbose NAME STATE VERSION * docker-desktop Stopped 2 docker-desktop-data Stopped 2 無事に追加できていますね。\nデフォルトで使用するディストリビューションを変更するには 出力結果を見るとわかるのですが、デフォルトで使用するディストリビューションに違いが出ており、docker-desktop-dataをデフォルトで使用したいので、wsl -s {ディストリビューション名}で変更しておきます。\nwsl -s docker-desktop-data この操作を正しく終了しました。 ことがあります。\rこの操作を正しく終了しました。 確認 念のためコマンドで確認してみましょう。\nwsl --list --verbose NAME STATE VERSION * docker-desktop Stopped 2 docker-desktop-data Stopped 2 無事に変更できていますね。\n終わりに 以上のように簡単にDocker関連の保存先を変える事が出来ました。\nCドライブはなるべく容量を開けておきたいと思うので、是非この方法でディスク圧迫を回避してみてはいかがでしょうか♪\n","date":"2023-12-11T16:04:33+09:00","image":"/wp-content/uploads/2023/12/docker-directory-eye.png","permalink":"/2023/12/11/12051/","title":"【DockerDesktopForWindows】WSLディストリビューションの保存先をCドライブからDドライブの任意の場所に変更する方法【ディスク圧迫回避】"},{"content":"jenvでJavaのバージョンを17に変更する jenvを使っていれば楽に切り替え可能 以前、jenvについてご紹介しました。\n関連記事 【オラクルの呪い】「jenv」を使ってJavaのバージョンをコマンド一つで切り替えよう【Homebrew/anyenv】 2019/06/30 1652文字 約4分で読めます 今回はjenvを使ってJDK17に切り替えるやり方をご紹介しようと思います♪\n手順 現状の確認 まずは現在jenvに追加されているバージョン一覧を見てみましょう。\njenv versions system 1.8 1.8.0.212 11.0 11.0.2 openjdk64-1.8.0.212 * openjdk64-11.0.2 (set by /XXX/.java-version) 有効になっているjavaのバージョンも確認しておきます。\njava -version openjdk version \u0026#34;11.0.2\u0026#34; 2019-01-15 OpenJDK Runtime Environment 18.9 (build 11.0.2+9) OpenJDK 64-Bit Server VM 18.9 (build 11.0.2+9, mixed mode) JDK17をインストール 今回はMAC機で作業するのでダウンロードするインストーラーを判別するために、以下のコマンドでMACの情報を確認しましょう。\nuname -m x86_64 対象のインストーラーをダウンロードしインストールします。\nインストーラーのダウンロードが完了したら実行してJDKをインストールしましょう。\njenvにJDK17を追加 次にjenvに先ほどインストールしたJDK17を以下のコマンドで登録しましょう。\njenv add /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home oracle64-17.0.9 added 17.0.9 added 17.0 added これで無事に追加されました。\n確認 確認のために再度jenvのバージョン一覧を見てみましょう。\njenv versions system 1.8 1.8.0.212 11.0 11.0.2 17.0 17.0.9 openjdk64-1.8.0.212 * openjdk64-11.0.2 (set by /XXX/.java-version) oracle64-17.0.9 無事に追加されていましたね♪\njavaのバージョンをJDK17に変更 後はjenv local 17.0.9でjavaのバージョンを切り替えるだけです。今回はlocalを指定しています。\n確認 では再度javaのバージョンを確認してみましょう。\njava -version java version \u0026#34;17.0.9\u0026#34; 2023-10-17 LTS Java(TM) SE Runtime Environment (build 17.0.9+11-LTS-201) Java HotSpot(TM) 64-Bit Server VM (build 17.0.9+11-LTS-201, mixed mode, sharing) 無事に切り替わっていましたね♪\n終わりに 以上のようにjenvを使う事で簡単にJavaのバージョンを更新する事が出来ました。\nJavaのバージョンは日々上がっているので今のうちにjenvを導入してみてはいかがでしょうか♪\n","date":"2023-11-14T16:12:12+09:00","image":"/wp-content/uploads/2023/11/jenv11217-eye.png","permalink":"/2023/11/14/12037/","title":"【開発環境構築テクニック】jenvでローカルのjavaをJDK17にインストール・更新する方法【Mac・Windows対応】"},{"content":"フォームの入力情報をCookieに保存して手間を省きたい 作業効率化を測る 業務システムを利用している際に、選択項目のCSV出力機能などで「フォームの入力情報をCookieに保存して次回もデフォルトで選択した状態で表示してほしい」、と言う要望がたまにあると思います。\nそんな時に便利なのがjQueryCookie\u0026nbsp;というライブラリです。\nこちらのライブラリを使う事で直感的にCookieへの情報の保存・取得が可能になるため、フォームと組み合わせる事で前述の要望を実現する事が可能となります。\nただ、Cookieへの個人情報の保存はセキュリティ的に危険なため、Cookieに保存する情報は精査してから実装を進めるよう気をつけましょう！\n有効期限やドメイン、JSONでの管理などの細かい設定も可能 今回は説明を省きますが、Cookieの有効期限やドメインの設定、JSON形式での管理も可能なようなので結構カスタマイズが出来そうです♪\n詳しくは前述のGithubを見てもらえればなと思います♪\n現在はJS-Cookieを推奨 ただ、jQueryCookieは現在開発が終了しており、JS Cookie\u0026nbsp;というプロジェクトに引き継がれているのでこちらを使う選択肢もあります。\n手順 導入方法 導入方法はお好きな方法でライブラリを読み込むだけです。\n今回はライブラリをCDN経由で読み込みます。\nCDNによる読み込み ...略... // 必ずjQuery本体より後に読み込んでください。 \u0026lt;script src=\u0026#34;https://code.jquery.com/jquery-3.7.1.min.js\u0026#34; integrity=\u0026#34;sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=\u0026#34; crossorigin=\u0026#34;anonymous\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;script src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js\u0026#34; integrity=\u0026#34;sha512-3j3VU6WC5rPQB4Ld1jnLV7Kd5xr+cq9avvhwqzbH/taCRNURoeEpoPBK9pDyeukwSxwRPJ8fDgvYXd6SkaZ2TA==\u0026#34; crossorigin=\u0026#34;anonymous\u0026#34; referrerpolicy=\u0026#34;no-referrer\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; ...略... Cookieへの保存 では、まずはフォームの情報をCookieに保存してみましょう。\n保存をするには$.cookie(KEY,VALUE);の形式で保存する必要があります。\n試しにSubmitボタンが押下された際に保存する動きにしてみましょう。\nindex.html ...略... \u0026lt;div class=\u0026#34;col-3\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;form-group\u0026#34;\u0026gt; \u0026lt;label for=\u0026#34;firstName\u0026#34;\u0026gt;Firset Name\u0026lt;/label\u0026gt; \u0026lt;input id=\u0026#34;firstName\u0026#34; type=\u0026#34;text\u0026#34; name=\u0026#34;firstName\u0026#34; value=\u0026#34;\u0026#34; class=\u0026#34;form-control\u0026#34;\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;col-3\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;form-group\u0026#34;\u0026gt; \u0026lt;label for=\u0026#34;lastName\u0026#34;\u0026gt;LastName\u0026lt;/label\u0026gt; \u0026lt;input id=\u0026#34;lastName\u0026#34; type=\u0026#34;text\u0026#34; name=\u0026#34;lastName\u0026#34; value=\u0026#34;\u0026#34; class=\u0026#34;form-control\u0026#34;\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ...略... cookie.js ...略... $(\u0026#39;#submit\u0026#39;).click(function() {// Submit時にCookie保存 $(\u0026#34;input[type=text]\u0026#34;).each(function(){// フォームに存在するinput[type=\u0026#34;text\u0026#34;]を全て取得 $.cookie(this.name, this.value);// name属性をキーにvalueを保存 }); }); ...略... 確認 この状態でフォームのSubmitボタンを押下するとこのような形でCookieに保存された事が分かります。\n¥\rCookieの読み込み では次に保存されたCookieの値を取得してフォームの値にセットしてみましょう。\n読み込むには$.cookie(KEY)で取得する事が出来ます。\n以下の形でページ描写時にCookieに値があったらセットする動きを実現してみましょう。\ncookie.js ...略... $(\u0026#34;input[type=text]\u0026#34;).each(function(){ if($.cookie(this.name)){ this.value = $.cookie(this.name); } }); ...略... 確認 無事にリロードしても値がセットされていました。\nラジオの場合 テキストボックスなどの場合は特に気にする必要がありませんが、ラジオの場合は選択されていたもののみチェックをしないといけないので少し工夫する必要があります。\nindex.html ...略... \u0026lt;div class=\u0026#34;col-3\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;form-group \u0026#34;\u0026gt; \u0026lt;label\u0026gt;Gender\u0026lt;/label\u0026gt; \u0026lt;div class=\u0026#34;form-control form-control-radio\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;radio\u0026#34; id=\u0026#34;male\u0026#34; name=\u0026#34;gender\u0026#34; value=\u0026#34;MALE\u0026#34; \u0026gt; \u0026lt;label class=\u0026#34;form-check-label\u0026#34; for=\u0026#34;male\u0026#34;\u0026gt;Male\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#34;radio\u0026#34; id=\u0026#34;female\u0026#34; name=\u0026#34;gender\u0026#34; value=\u0026#34;FEMALE\u0026#34; \u0026gt; \u0026lt;label class=\u0026#34;form-check-label\u0026#34; for=\u0026#34;female\u0026#34;\u0026gt;Female\u0026lt;/label\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ...略... cookie.js ...略... $(\u0026#39;#submit\u0026#39;).click(function() { // 出力時にCookie保存 $(\u0026#34;input[type=radio]:checked\u0026#34;).each(function(){// チェックされたラジオ要素のみ取得 $.cookie(this.name, this.value); }); }); ...略... $(\u0026#34;input[type=radio]\u0026#34;).each(function(){//全ラジオ要素を取得 if($.cookie(this.name)){// Cookieに登録されたラジオ要素の分岐 if(this.value == $.cookie(this.name)){// 登録されていた値と同じだった場合のみチェックをつける this.checked = true; } } }); 確認 では実際に確認してみましょう。\n無事に選択した要素のみチェックが着くようになりました♪\nセレクトボックスの場合 セレクトボックスの場合も同様に選択されたoptionを特定する必要があるので以下のような実装をする必要があります。\nindex.html ...略... \u0026lt;div class=\u0026#34;col-3\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;form-group\u0026#34;\u0026gt; \u0026lt;label for=\u0026#34;prefecture\u0026#34;\u0026gt;Prefecture\u0026lt;/label\u0026gt; \u0026lt;select name=\u0026#34;prefecture\u0026#34; class=\u0026#34;form-control\u0026#34; id=\u0026#34;prefecture\u0026#34;\u0026gt; \u0026lt;option value\u0026gt;Please select\u0026lt;/option\u0026gt; \u0026lt;option value=\u0026#34;1\u0026#34; \u0026gt;北海道\u0026lt;/option\u0026gt; \u0026lt;option value=\u0026#34;2\u0026#34; \u0026gt;青森\u0026lt;/option\u0026gt; ...略... \u0026lt;/select\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ...略... cookie.js ...略... $(\u0026#39;#submit\u0026#39;).click(function() {// 出力時にCookie保存 $(\u0026#34;select\u0026#34;).each(function(){// select要素を取得 $.cookie(this.name, this.value);//valueを指定する事で選択されたoptionのvalueを取得可能 }); }); ...略... $(\u0026#34;select\u0026#34;).each(function(){ if($.cookie(this.name)){ this.value = $.cookie(this.name); } }); ...略... 確認 こちらも無事に選択されるようになりました♪\nチェックボックスの場合 チェックボックスの場合はさらに特殊で選択される要素が可変となるので一工夫が必要となります。\nindex.html ...略... \u0026lt;div class=\u0026#34;col-3\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;form-group \u0026#34;\u0026gt; \u0026lt;label for=\u0026#34;\u0026#34;\u0026gt;Skill\u0026lt;/label\u0026gt; \u0026lt;div\u0026gt; \u0026lt;div class=\u0026#34;form-check d-inline\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;checkbox\u0026#34; name=\u0026#34;skills\u0026#34; value=\u0026#34;HTML\u0026#34; id=\u0026#34;skills-HTML\u0026#34; class=\u0026#34;form-check-input\u0026#34; /\u0026gt; \u0026lt;label for=\u0026#34;skills-HTML\u0026#34; class=\u0026#34;form-check-label\u0026#34;\u0026gt;HTML\u0026lt;/label\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;form-check d-inline\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;checkbox\u0026#34; name=\u0026#34;skills\u0026#34; value=\u0026#34;CSS\u0026#34; id=\u0026#34;skills-CSS\u0026#34; class=\u0026#34;form-check-input\u0026#34; /\u0026gt; \u0026lt;label for=\u0026#34;skills-CSS\u0026#34; class=\u0026#34;form-check-label\u0026#34;\u0026gt;CSS\u0026lt;/label\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;form-check d-inline\u0026#34;\u0026gt; \u0026lt;input type=\u0026#34;checkbox\u0026#34; name=\u0026#34;skills\u0026#34; value=\u0026#34;JS\u0026#34; id=\u0026#34;skills-JS\u0026#34; class=\u0026#34;form-check-input\u0026#34; /\u0026gt; \u0026lt;label for=\u0026#34;skills-JS\u0026#34; class=\u0026#34;form-check-label\u0026#34;\u0026gt;JavaScript\u0026lt;/label\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ...略... cookie.js ...略... $(\u0026#39;#submit\u0026#39;).click(function() {// 出力時にCookie保存 const checkedValues = {}; // 1name属性Ncheckboxのためのオブジェクトを用意 $(\u0026#34;input[type=checkbox]\u0026#34;).each(function(){// 全てのcheckboxをループ処理 if( !(this.name in checkedValues)){// 初登場のname属性の場合 $.removeCookie(this.name);// 一旦過去のCookieを削除 checkedValues[this.name] = [];// name属性に対応する配列を初期化 } if(this.checked){// チェックされている場合 checkedValues[this.name].push(encodeURIComponent(this.value));//name属性をキーに配列に追加 } }); $.each(checkedValues, function(key, value) {// nameをkey、配列をvalueとしてループ処理 $.cookie(key, value);// クッキーにセット }) }); ...略... $(\u0026#34;input[type=checkbox]\u0026#34;).each(function(){ // チェックボックスをループ処理 if($.cookie(this.name)){// クッキーに存在するname属性の場合 if($.cookie(this.name).split(\u0026#34;,\u0026#34;).includes(this.value)){// Cookieに登録されている値の場合 this.checked = true; // checkedを付ける } } }); 確認 それではこちらも確認してみましょう。\nこちらも正常にチェックがつきましたね♪\n終わりに 以上のようにjQueryCookieを使う事で簡単にフォームの情報をCookieに保存して読み込む事が出来ました♪\n細部まで考えると上記のスクリプトだけでは足りなくなるケースもありますが、大まかな動きは上記で実現出来ているかな？と思います♪\n他にも有効期限やドメインなどの細かい設定もあるので、調整しつつ導入してみてはいかがでしょうか♪\n","date":"2023-10-19T21:55:50+09:00","image":"/wp-content/uploads/2023/10/form-cookie-eye.png","permalink":"/2023/10/19/12001/","title":"【簡単実装】Formの入力情報をCookieに保存・読み取りを簡単に行う事が出来る「jQuery Cookie」の使い方まとめ"},{"content":"CSVの日本語がエクセルで文字化けする！ 日本語が見れない JavaでBufferedWriterクラス等を用いてCSVファイルを生成する際、日本語が混じっているとソースコード上でUTF-8の指定をしていたとしてもエクセルで開くと文字化けしてしまうことがあります。\nCsv.java ...略... try { PrintWriter p = new PrintWriter( new BufferedWriter( new OutputStreamWriter(new FileOutputStream(\u0026#34;export.csv\u0026#34;), \u0026#34;UTF-8\u0026#34;))); // １行目 p.print(\u0026#34;test\u0026#34;); p.print(\u0026#34;,\u0026#34;); p.print(\u0026#34;テスト\u0026#34;); p.println(); // ２行目 p.print(\u0026#34;サンプル\u0026#34;); p.print(\u0026#34;,\u0026#34;); p.print(\u0026#34;sample\u0026#34;); // ファイルに書き出し閉じる p.close(); ...略... ちなみにMacのプレビューなどでは正常に表示されます。\n原因はBOMが無いから 結論から言うと、原因としてはCSVファイルにBOMの指定が無いからです！\nBOMとは、Byte Order Markの略となっていて、Microsoft ExcelはこのBOMがあるファイルのみUTF-8として解釈し、それ以外はデフォルトでSJISとして読み取ってしまうため、文字化けしてしまうようです。\nそれでは原因が分かったところで実際にソースコードに手を加えて解決していきましょう！\n￥\r手順 FileOutputStreamにBOMを付与 対応方法はとても簡単で、以下のようにFileOutputStreamを一旦変数に代入し、行を記入する前にBOMの指定をするだけでOKです♪\nCsv.java ...略... try { FileOutputStream fos = new FileOutputStream(\u0026#34;export.csv\u0026#34;); // 変数に代入 PrintWriter p = new PrintWriter( new BufferedWriter( new OutputStreamWriter(fos, \u0026#34;UTF-8\u0026#34;))); // BOM付与 fos.write(0xef); fos.write(0xbb); fos.write(0xbf); // １行目 ...略... 確認 それでは出力したCSVファイルをエクセルで開いてみましょう！\n無事に文字化けしなくなりましたね♪\n終わりに 以上のように業務システムを作る際にはCSV出力機能を実装する事は多いと思いますが、知っていないと意外とハマるポイントです。\nCSVファイルの文字化けにお悩みの方は是非試してみてください♪\n","date":"2023-10-17T13:00:25+09:00","image":"/wp-content/uploads/2023/10/csv-with-bom-eye.png","permalink":"/2023/10/17/11993/","title":"【Java】エクセルでCSVを開いた際に日本語が文字化けする原因と解決方法【BOM付きUTF-8】"},{"content":"Mac(linux)環境で画像の横縦比を自由に変えたい！ jpegoptimだけでは不十分 筆者のように旅行ブログをやっている場合、自分で撮影した画像をブログに貼るのですがその際に画質を落とさずに容量を抑えたい！という場合が多々出てきます。\n以前、画像のサイズはそのままに容量を抑える方法についてはご紹介しました。\n関連記事 【Wordpress】jpegoptimを使ってサーバー上のJPEG画像ファイルをまとめて圧縮する方法【便利】 2020/04/04 2046文字 約5分で読めます ただこの方法だと元の解像度がデカイ写真データなどは容量がまだまだ大きいのでこのままではブログが重くなってしまいます。\n解像度を変えれば一気に軽くなる 今回はMac標準コマンドの「sips」を使って横縦比を固定したまま解像度を変える方法をご紹介しようと思います♪\nこのコマンドを使えばまとめて横縦比を固定したままで10分の1以下のサイズに変える事が出来ます！\n手順 横縦比を固定したまま解像度を変えるコマンド 基本的にはsips -Z {縦及び横の最大解像度数} *.jpgでOKです。\nこれで縦長の画像でも横長の画像でも指定した解像度を超えない範囲で横縦比が固定されたままでフォルダ内のすべてのJPG画像がリサイズされます。\n実行ログとしてはこんな感じ。\nsips -Z 1260 *.jpg /Volumes/XXX/sample-image-1.jpg \u0026lt;CGColor 0x7fdc6f007950\u0026gt; [\u0026lt;CGColorSpace 0x7fdc6f006e10\u0026gt; (kCGColorSpaceDeviceRGB)] ( 0 0 0 1 ) /Volumes/XXX/sample-image-1.jpg ...(略)... 確認 比較するとこんな感じで軽量化されます！\n解像度は約4分の1、画像サイズは約50分の1まで軽量化されました！\nコマンド一発でまとめて出来るのが便利ですね♪\n解像度を下げた後にjpegoptimを使うことでさらに画像のサイズを減らす事も出来ます！\nただ、軽量化しすぎても画像が汚くなるのでバランスは考えましょう♪\n終わりに 以上のように自分で撮影した画像をブログに使う方にとっては覚えておいて損はないテクニックだと思います！\n画像サイズにお悩みの方は是非試してみてください♪\n","date":"2023-04-16T23:41:58+09:00","image":"/wp-content/uploads/2023/04/sipsCommandEye.png","permalink":"/2023/04/16/11960/","title":"【写真家ブロガー歓喜】画質を劣化させずに横縦比を固定しながら画像の解像度をまとめて一括に自由に変えれる「sips」が便利過ぎた【Mac標準コマンド】"},{"content":"別の記事を紹介したい テキストリンクは効果が弱い Wordpressで記事を書いている際、関連する自サイトの記事や参考にさせて頂いた別サイトの記事を紹介したい場合があると思います。\nその場合に、単純にaリンクで紹介するだけではイマイチ読者にクリックしてもらうことが出来ないと思います。\nEmbed機能とは？ そんな時はWordpressのEmbed機能を利用してみましょう。\nEmbed機能とは、外部URLからコンテンツを読み込んで表示してくれる機能です。\nアイキャッチ画像やページタイトル、記事概要まで表示されるので、単純にリンクを貼るよりも読者に伝わりやすくかつクリックしやすいリンクを挿入することが可能になります。\n挿入の仕方はとても簡単なので、手順を紹介致します。\n手順 埋め込みコードの追加 \u0010Wordpressで記事を作っている場合は、以下のようにコードを挿入することで埋め込みが可能です。\ncode [embed]{埋め込みたいページのURL}[/embed] たったこれだけで、いい感じに埋め込みリンクが生成されます。\n確認 試しにツイッターの投稿を埋め込んでみましょう。\nサンプルとして以下を追加してください。\ncode [embed]https://twitter.com/blogenist/status/973568756046749696[/embed] しっかりと埋め込みされていますね♪\n終わりに 埋め込み機能に対応しているサイトであれば、上記のように簡単に埋め込みリンクを生成する事が出来ます。\nまた、埋め込み時のレイアウト等もCSSでお好きなようにカスタマイズ出来ますので、是非お試しください。\n","date":"2023-03-28T16:01:45+09:00","image":"/wp-content/uploads/2018/03/wordpressEmbedEye.png","permalink":"/2023/03/28/2833/","title":"【一工夫が大事】WordpressのEmbed機能でいい感じのリンクを追加する方法"},{"content":"REMOTE HOST IDENTIFICATION HAS CHANGED! が発生 PULLやPUSHが出来なくなった 先日、GithubリポジトリへのPUSHを行おうとした際に以下のようなエラーが表示されました。\ngit push origin master @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdropping on you right now (man-in-the-middle attack)! It is also possible that a host key has just been changed. The fingerprint for the RSA key sent by the remote host is SHA256:XXXXXXXXXXXXXXXXXXX Please contact your system administrator. Add correct host key in /Users/{USER}/.ssh/known_hosts to get rid of this message. Offending RSA key in /Users/{USER}/.ssh/known_hosts:1 RSA host key for github.com has changed and you have requested strict checking. Host key verification failed. fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. なんぞこれ！\nGithub側のIPが変わった 今回に関しては以下の通り2023年3月23日にGithub側でIP変更作業が発生したらしく、ローカルの/Users/{USER}/.ssh/known_hostsに記載されていたgithub.comのIPアドレスが変更後のgithub.comのIPアドレスと異なっていたためエラーが出たようです。\nWe updated our RSA SSH host key\rWe updated our RSA SSH host key | The GitHub Blog\nknown_hostsには以下のように記載されていました。\n.ssh/known_hosts github.com ssh-rsa XXXXXXX== ...略... また、他にも複数のPCでssh -T git@github.comをした際にリモート側のサーバー情報が更新されて同じようなエラーが出てしまうことがあるらしいです。\n解決方法 known_hostsの情報を削除 では、エラーを解決していきましょう。\nやり方は簡単で、ssh-keygen -R {対象ホスト}とコマンドを打ち、一旦known_hostsの情報を削除してから再度更新するというやり方です。\n実行すると以下のようにknown_hostが更新されます。今回は-Rとしているので指定したホストの情報を削除しています。\nssh-keygen -R \u0026lt;HOST\u0026gt; # Host {HOST} found: line 1 /Users/{USER}/.ssh/known_hosts updated. Original contents retained as /Users/{USER}/.ssh/known_hosts.old この状態でpush/pullをすると以下のように表示が出るので再度登録しておきましょう。\n実行ログ The authenticity of host \u0026#39;github.com (XX.XX.XX.XX)\u0026#39; can\u0026#39;t be established. ECDSA key fingerprint is SHA256:XXX/YYY/ZZZ Are you sure you want to continue connecting (yes/no)? yes Warning: Permanently added \u0026#39;github.com\u0026#39; (ECDSA) to the list of known hosts. Warning: the ECDSA host key for \u0026#39;github.com\u0026#39; differs from the key for the IP address \u0026#39;XX.XX.XX.XX\u0026#39; これで無事にpush/pullが出来るようになりました！\n終わりに 以上のように様々な理由で発生するエラーですが、原因がわかれば簡単に対処出来ますので同じように困っている方がいましたら是非参考にしてみてください♪\n","date":"2023-03-27T14:41:33+09:00","image":"/wp-content/uploads/2023/03/remote-host-identification-failed-eye.png","permalink":"/2023/03/27/11697/","title":"【Github】REMOTE HOST IDENTIFICATION HAS CHANGED! の原因と解決方法【PULL/PUSHが出来ない】"},{"content":"α7S3撮影した動画のサムネが出ない 動画編集作業がしづらい 筆者はα7S3を持っており旅行先の動画や普段の動画はそちらで撮影をしています。\nそして、いざPCに取り込み動画編集をする際に、Windowsエクスプローラー上で簡易サムネになってしまいサムネイルが正しく表示されない点にずっと使いづらさを感じていました。\nこんな感じ↓\n分かりづれぇ！！\nこのままだと毎回動画を開いて中身を確認する必要がありとても手間がかかりますorz\n原因 GoProやスマホで撮影したMP4動画は正常にサムネイルが表示されるのですが原因はいったい何なのでしょうか？\nそれは「10Bit」で撮影したMP4動画だからでした！\nWindowsでは10Bitで撮影した動画の取り扱いがまだ弱いらしくその場合にサムネイルが正常に表示されないようです。\n手元のα7S3の設定を確認してみたところ、確かに10Bitで撮影する設定になっていました！\n解決方法 原因が分かったのでサムネイルを出す方法を探してみました。\n調べたところ、「Media Preview」というフリーソフトをインストールすることでWindowsでも10Bitで撮影したMP4動画も正常にサムネイルが表示されるようになるとの事だったので早速導入してみました！\n動画ファイルのアイコン内に、動画の内容がサムネイル表示されるようにする！「Media Preview」。\rMedia Preview のダウンロードと使い方 - ｋ本的に無料ソフト・フリーソフト\nMedia Preview導入手順 前提 今回使用するソフトはフリーソフトとなっています。\n念のためセキュリティソフトを導入したうえで自己責任での作業でお願いします。\nダウンロード まずはコチラ\u0026nbsp;からMedia Previewのインストーラーをダウンロードします。\nインストール インストーラーのダウンロードが完了したら起動してインストールを始めます。\n基本的にはそのままの設定で進めてOKです。\n日本語はないので注意！\nインストールが完了したらサムネイルを表示させたい拡張子を選択します。\n今回はMP4のみにチェックを入れてみました。\nこれで設定は完了です。\n確認 この状態でWindowsエクスプローラーを開くと、、、\n無事にα7S3で10Bit撮影したMP4のサムネイルが表示されるようになっていますね！\nこれで作業が捗る・・・！(きっと)\n終わりに 以上のようにWindows+α7S3を使っている方は意外と多いと思うので同じような悩みを持っている方はこちらの方法で対応してみてはいかがでしょうか♪\n","date":"2023-02-16T16:52:05+09:00","image":"/wp-content/uploads/2023/02/mediaViewerEye.png","permalink":"/2023/02/16/11678/","title":"【Windowsエクスプローラー】一眼で撮影した10BitのMP4動画のサムネが出ない原因(簡易表示)と出す方法【α7S3の動画のサムネを出したい】"},{"content":"GitBashでGithubのリポジトリをクローンしよう 今回はWindows環境においてGitBashを使ってSSH通信をして実際にプライベートリポジトリをクローンするところまでのやり方をまとめてみようと思います♪\n前提 環境 筆者の環境は以下となります。\n環境\rGitBash導入済み\rWindows10\r対象のGithubリポジトリはプライベート\r秘密鍵・公開鍵の生成 まずは初めてGithubに通信するマシンなので秘密鍵・公開鍵の生成を行います。\n以下のコマンドを実行してカギを生成しましょう。\nコマンド ssh-keygen -t rsa -b 4096 -f ~/.ssh/{任意のファイル名} 対話式操作後に以下のようなログが出力されれば生成完了です。\n実行ログ Generating public/private rsa key pair. Created directory \u0026#39;/c/Users/{ユーザー名}/.ssh\u0026#39;. Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in /c/Users/{ユーザー名}/.ssh/{秘密鍵名} Your public key has been saved in /c/Users/{ユーザー名}/.ssh/{公開鍵鍵名} The key fingerprint is: SHA256:XXXXXXXXXXXXXXXXXX {ユーザー名}@{マシン名} The key\u0026#39;s randomart image is: +---[RSA 4096]----+ | ..AoB.. BC+| | . o / E E.B*| | . B Y = @.+| | . + . + e.| | . T . .| | . o . | | . . | | | | | +----[SHA256]-----+ configファイルの作成 次にSSHに関するconfigファイルを生成します。\n~/.ssh配下にtouch configでconfigファイルを生成し、お好きなエディタで開いて以下のように記述して保存してください。\n~/.ssh/config Host github HostName github.com IdentityFile ~/.ssh/{秘密鍵} User git ssh-agentに秘密鍵を登録 Windowsマシンの場合はssh-agentに秘密鍵を登録する必要があるので以下のコマンドを実行して下さい。\nコマンド ssh-agent bash #① ssh-add ~/.ssh/{秘密鍵} #② 以下のような出力がされればssh-agentへの秘密鍵の登録が完了です。\n出力ログ Identity added: /c/Users/{ユーザー}/.ssh/{秘密鍵} ({ユーザー名}@{マシン名}) 念のためssh-add -lで確認してみましょう。\nssh-add -l 4096 SHA256:XXXXXXX/Z/YYYYY {ユーザー名}@{マシン名} (RSA) Githubに公開鍵を登録 次は先ほど作成した公開鍵をGithubに設定しましょう。\nGithubにログインし、右上のアカウントメニューのSettings→SSH and GPG keysと進みましょう。\n右上のNew SSH keyをクリックし任意のタイトルをつけて公開鍵の内容をコピペしてAdd SSH keyボタンをクリックします。\nコピーはclip \u003c ~/.ssh/{公開鍵}で出来ます。\nこれでGithubへの公開鍵の設定は完了です！\nSSH接続の確認 それではいよいよSSH通信が出来るか試してみましょう・・・！ﾄﾞｷﾄﾞｷ\nssh -T git@github.comを実行してみると・・・？\nssh -T git@github.com The authenticity of host \u0026#39;github.com (20.27.177.113)\u0026#39; can\u0026#39;t be established. ECDSA key fingerprint is SHA256:XXX/YYY/ZZZ. Are you sure you want to continue connecting (yes/no/[fingerprint])? yes Warning: Permanently added \u0026#39;github.com,20.27.177.113\u0026#39; (ECDSA) to the list of known hosts. Hi {Githubユーザー名}! You\u0026#39;ve successfully authenticated, but GitHub does not provide shell access. おぉ！\n無事に接続できましたね♪\nGithubからのクローンも可能に これでPrivateリポジトリもクローン出来るようになりました♪\ngit clone git@github.com:\u0026lt;Githubユーザー名\u0026gt;/\u0026lt;リポジトリ名\u0026gt;.git Cloning into \u0026#39;{リポジトリ名}\u0026#39;... remote: Enumerating objects: 17460, done. remote: Counting objects: 100% (291/291), done. remote: Compressing objects: 100% (149/149), done. remote: Total 17460 (delta 174), reused 218 (delta 120), pack-reused 17169 Receiving objects: 100% (17460/17460), 17.64 MiB | 661.00 KiB/s, done. Resolving deltas: 100% (9289/9289), done. Updating files: 100% (1240/1240), done. 完璧や！ﾆﾁｬｱ\n終わりに 以上のようにやる事さえ分かっていれば手こずることなく初期設定からクローンまで行うことが出来ました。\nWindows環境にてSSH接続の部分で困っている方がいましたらこちらの記事を参考にしていただければなと思います♪\n","date":"2023-01-27T20:56:44+09:00","image":"/wp-content/uploads/2023/01/windows-ssh-to-github-thumb.png","permalink":"/2023/01/27/11602/","title":"【WindowsでGitBashを使う】GitBashを使ってSSH通信でGithubのプライベートリポジトリをクローンするやり方まとめ【】"},{"content":"α7S3で撮影したmp4の動画ファイルが開けない 天下のQuickTime Playerで再生出来ないのツライ 先日、Sonyのα7S3で撮影した動画ファイルをMacBookに取り込んで再生しようとしたところ、以下のようなエラーが表示され再生が出来ませんでした。\nなんでやねん！\nmp4ファイルなのに。。。\n軽く調べてみたところ、同じmp4形式でもコーデックなどの違いで再生出来る・出来ないが発生するらしいです。\nなるほど。。。\nせっかくなので他のオススメ動画プレイヤーを調べてみる 何やら、QuickTime Playerにコーデックを追加したりすれば再生出来るようになるらしいのですが、せっかくなのでMacのオススメ動画プレイヤーをググってみると良さげプレイヤーがあったのでそちらをインストールしてみることにしました。\nIINA ネットで「IINA」について調べてみると、「Mac最強の動画プレイヤー」や「最高の動画プレイヤーに出会ってしまった」などのタイトルのブログがヒットします。\nすごい評価ですね！\nそれがこちらです。\nThe modern media player for macOS.IINA - The modern media player for macOS\nぱっと見とてもシンプルな動画プレイヤーぽいですね。\nとりあえず早速インストールしてみましょう！\n導入手順 インストール ダウンロードについては公式サイト\u0026nbsp;からダウンロード出来ます。\nまた、Homebrewにも対応しているので、今回はそちらで導入してみようと思います。\nGUIツールなので以下のように--caskをつけてコマンドを実行します。\nコマンド brew install --cask iina 以下のような実行ログが流れれば無事にインストール完了です。\n実行ログ ==\u0026gt; Downloading https://dl.iina.io/IINA.v1.2.0.dmg ######################################################################## 100.0% ==\u0026gt; Installing Cask iina ==\u0026gt; Moving App \u0026#39;IINA.app\u0026#39; to \u0026#39;/Applications/IINA.app\u0026#39; ==\u0026gt; Linking Binary \u0026#39;iina-cli\u0026#39; to \u0026#39;/usr/local/bin/iina\u0026#39; 🍺 iina was successfully installed! Homebrewの安定の楽さ！\n動作確認 では早速先ほど開けなかったMP4ファイルを再生してみましょう。\n無事に再生されましたね！\n今までありがとうQuickTime Player・・・\n終わりに 以上のように最近の一眼などのmp4ファイルが再生されなくて困っていましたが、良さげな動画プレイヤーを見つける事が出来ました。\nインストール方法も簡単で動作も軽いので、Macユーザーの方は是非試してみてはいかがでしょうか♪\n","date":"2022-06-25T19:41:31+09:00","image":"/wp-content/uploads/2022/06/iineDownloadEye.png","permalink":"/2022/06/25/11586/","title":"【QuickTime Playerを超えた】Macでオススメの最強動画プレイヤーを導入してみたら快適過ぎた【α7S3で撮影したmp4の動画ファイルが開けない場合にも】"},{"content":"AfterEffectとMedia Encoderが動かなくなった 急に発生 先日、いつも通りAfterEffectで動画編集を終えMediaEncoderにキューを追加しMP4ファイルにレンダリングしようとしたところ、謎のエラーが発生するようになり、レンダリングが出来なくなってしまいました。\nなんでやあああぁぁぁ！！\nしかも、AfterEffectでのプロジェクト読み込み時にも謎のエラーダイアログが出るようになりました・・・orz\n状況整理 とりあえず状況を整理するとこんな感じ。\n状況\rWindows10 Ver21H1 (OSビルド19043.1586)\rAfterEffect2022 Ver22.2.2\rMediaEncoder2022 Ver22.2.2\r2,3日前にレンダリングできたAEプロジェクトも動かなくなっている(内容等は変更していない)\r特に環境等は何も変わっていないはずなので、原因が分からず絶望していました。ｗ\nとりあえず、エラーログの内容を見てみても、利用者側がどうこうしたような原因ではなさそうですよね。。。\nエラーレポート内容 ...(略) \u0026lt;crash exception=\u0026#34;EXCEPTION_ACCESS_VIOLATION\u0026#34; exceptionCode=\u0026#34;0xc0000005\u0026#34; instruction=\u0026#34;0x00000000125EF2DC\u0026#34;\u0026gt; ...(略) 原因 Adobeサポートセンターへ問い合わせ お手上げ状態だったのでTwitterなどでエゴサしてみると、直近で同じような症状が出ている方のツイートを発見。\nこれはAdobe側の問題な気もしていたのでサポートセンターに問い合わせてみると、以下の回答を頂きました！\n現在外部プラグイン起因で、After EffectsとMediaEncoderで問題が生じていることが確認されております。\r以下手順で外部プラグインを外した場合の挙動をご確認いただけますようお願いします。\r●サードパーティ製プラグインの削除または無効化\rAfter Effectsは起動時にプラグインを読み込みます。 サードパーティ製のプラグインをインストールしている場合、 互換性の問題などによりAfter Effectsの動作に影響を及ぼす可能性があります。\nプラグインごとにインストール先が異なるため個別のサポートは行っておりませんが、以下の場所に導入されることが多いようです。\nC:\\Program Files\\Adobe\\Common\\Plug-ins\n上記ファイルパスの中身を削除するか、またはデスクトップなどの場所に一時的に移動して、After Effectsが正常に動作するか確認してください。 なるほど、AEJuiceプラグインとの互換性がおかしくなりエラーが発生しているとのことでした。\nたしかに筆者の環境もAEJuiceは導入しているので、ひとまずプラグインを除去して再起動してみましょう。\n解決方法 AEJuiceプラグインを無効化 指示された通り一旦AEJuiceを無効化してみようと思います。\n筆者はAEJuice以外のプラグインは導入していないので、シンプルにC:\\Program Files\\Adobe\\Common\\Plug-ins直下を削除してみましたが、他のプラグインを導入している方は適時AEJuiceのみ削除をしてみてください。\n削除してからAfterEffectを起動すると、例の起動時エラーが表示されなくなっていました！\nAEJuiceも無効化されていますね。\nこの流れでAfterEffectからMediaEncoderにキュー登録すると、無事に追加されプロジェクトへの接続も完了、レンダリングまで問題なく終わることが出来ました！\n結論 Adobeのサポートセンターは有能of有能。\n終わりに 以上のように何をしたわけでもなくても、急に発生する可能性のある症状でした。\nひとまず、AEJuice側の修正を待ちながら、取り急ぎAEJuiceを使っている方は多いと思いますので、お困りの方はぜひ参考にしてもらえればなと思います♪\n","date":"2022-03-16T16:50:15+09:00","image":"/wp-content/uploads/2022/03/aejuice-error-eye.png","permalink":"/2022/03/16/11562/","title":"【AEJuiceが原因】AfterEffectからMedia Encoderにキュー登録・レンダリングが出来ない原因と対処方法【afterFX.exeのエラー】"},{"content":"キーボード掃除したいけど反応されてうざいいぃぃ！ 反応しないでクレメンス 年末恒例の大掃除の時期がやってきました。\n家にあるものの断捨離や大掃除も大事ですが、自分が日々仕事や趣味で使っているパソコンも日頃の感謝の気持ちも込めて綺麗にしてあげたいところですよね♪\n筆者はMacBookProを使っているのですが、キーボードの汚れを吹いて落とす際にいちいちキー入力が反応してしまうため、「今だけ反応しないで！！」と思っている方は少なくないと思います。\n電源落とせばいいじゃん！と思う方もいると思いますが、スリープ状態などでもキー入力によって画面が立ち上がってしまうので、キー入力が発生してしまうのです。。。。\n天文学的な確率でログインが成功し意図せずデータ削除が実行されてしまう恐れもあるので、どうにかして意図的にキー入力をOFFに出来ないかな？と探していたところ、とても良さそうなアプリを見つけました！\nKeyboard Clean Tool KeyboardCleanTool is a super simple little tool which blocks all Keyboard and TouchBar input. Apple rejected the app for the Mac App Store because it's \"not useful\", however I often use it to clean my Macbook Keyboard without producing annoying input.folivora.ai - Great Tools for your Mac!\nこのアプリを使えば、一時的にキーボード入力を無効にしてくれるので拭き掃除が捗ります♪\nそれでは早速インストールして使ってみましょう！\n手順 インストール方法 Keyboard Clean Toolはインストーラー版とHomebrew版があります。\n今回はHomebrewにてインストールしてみようと思います。\nターミナルでbrew install --cask keyboardcleantoolを入力してください。\nbrew install keyboardcleantool --cask ==\u0026gt; Downloading https://folivora.ai/releases/KeyboardCleanTool.zip ######################################################################## 100.0% Warning: No checksum defined for cask \u0026#39;keyboardcleantool\u0026#39;, skipping verification. ==\u0026gt; Installing Cask keyboardcleantool ==\u0026gt; Moving App \u0026#39;KeyboardCleanTool.app\u0026#39; to \u0026#39;/Applications/KeyboardCleanTool.app\u0026#39; 🍺 keyboardcleantool was successfully installed! インストールはこれで完了です！\n初期設定 アプリを使用するためには初期設定が必要になります。\nまずはインストールされたアプリを起動しましょう。\nすると以下のようなダイアログが表示されると思うので、開くボタンをクリックしましょう。\nこれでアプリが立ち上がるので、Click to start cleaning mode / lock the keyboard!!ボタンをクリックしましょう。\nすると、権限の必要を求めてきます。\nなので、セキュリティとプライバシー画面からアクセシビリティへの制御許可をKeyboardCleanToolに追加しましょう。\nこれで設定は完了です。\n動作確認 では、再度アプリを起動し、Click to start cleaning mode / lock the keyboard!!ボタンをクリックしてみましょう。\n以下のように画面がオレンジ色に変わると、正常にアプリが動いてキー入力が無効になるのでガリガリキーボードを拭いても誤入力等が起こらなくなります。\n終わりに 以上のようにキーボード掃除の際にはとても便利でシンプルなアプリでした。\nMacのキーボードをお掃除しようと思っている方は是非導入してみてもらえればなと思います♪\n","date":"2021-12-29T15:45:37+09:00","image":"/wp-content/uploads/2021/12/keyboardCleanEye.png","permalink":"/2021/12/29/11531/","title":"【Macの掃除に最適】キーボードとトラックパッド入力を無効にする「KeyboardCleanTool」が便利過ぎた件【誤入力防止】"},{"content":"Homebrewが使えない！ 先日、とあるアプリを入れようとしてHomebrewCaskのコマンドを打った際に以下のようなエラーが出てインストールが出来ませんでした。\nbrew cask install \u0026lt;アプリ名\u0026gt; Error: homebrew-core is a shallow clone. homebrew-cask is a shallow clone. To `brew update`, first run: git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow This restriction has been made on GitHub\u0026#39;s request because updating shallow clones is an extremely expensive operation due to the tree layout and traffic of Homebrew/homebrew-core and Homebrew/homebrew-cask. We don\u0026#39;t do this for you automatically to avoid repeatedly performing an expensive unshallow operation in CI systems (which should instead be fixed to not use shallow clones). Sorry for the inconvenience! なんぞこれ！！\n原因 シャロークローンが原因 これはHomebrewが以前はシャロークローンと呼ばれる作業コストが高い手法を採用していたのですが、Github様から直々に止めてくれ！！と言われたらしく、そちらを廃止して通常のクローンを採用したため、Homebrewの設定を変えてください、というエラーになります。\nなるほど！Githubからのお願いとあれば従う以外に選択肢はありませんな。。。。\nでは、原因がわかったところで解決をしていきましょう♪\n解決方法 エラー出力にあるコマンドを実行する 解決方法はとても簡単です。\nエラーメッセージが表示された際にご親切に解決するためのコマンドを添えてくれています。\nそちらも実行すれば万事解決でござる。\n今回はHomebrewCaskも使っているので以下の二つのコマンドを実行すればおk。\ngit -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow remote: Enumerating objects: 861589, done. remote: Counting objects: 100% (861541/861541), done. remote: Compressing objects: 100% (281303/281303), done. remote: Total 851905 (delta 580344), reused 839151 (delta 567711), pack-reused 0 Receiving objects: 100% (851905/851905), 330.51 MiB | 533.00 KiB/s, done. Resolving deltas: 100% (580344/580344), completed with 8025 local objects. From https://github.com/Homebrew/homebrew-core 1330abc8a59..a72ca7f033e master -\u0026gt; origin/master git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow remote: Enumerating objects: 108659, done. remote: Counting objects: 100% (104775/104775), done. remote: Compressing objects: 100% (34123/34123), done. remote: Total 97165 (delta 70739), reused 89300 (delta 63005), pack-reused 0 Receiving objects: 100% (97165/97165), 46.50 MiB | 644.00 KiB/s, done. Resolving deltas: 100% (70739/70739), completed with 4122 local objects. From https://github.com/Homebrew/homebrew-cask caf689f840..0f71945fcd master -\u0026gt; origin/master これで正常にbrew updateが成功するようになりました♪\nbrew cask install keyboardcleantool Updating Homebrew... ==\u0026gt; Downloading https://ghcr.io/v2/homebrew/portable-ruby/portable-ruby/blobs/sha256:0cb1cc7af109437fe0e020c9f3b7b95c3c709b140bde9f991ad2c1433496dd42 ######################################################################## 100.0% ==\u0026gt; Pouring portable-ruby-2.6.8.yosemite.bottle.tar.gz ==\u0026gt; Auto-updated Homebrew! 終わりに 以上のように過去に出来ていた環境でもエラーが出ると思います。\n同じ症状でお困りの方は是非試してみてください♪\n","date":"2021-12-28T18:24:56+09:00","image":"/wp-content/uploads/2021/12/homebrew-shallow-clone-eye.png","permalink":"/2021/12/28/11534/","title":"【謎エラー】HomebrewやCaskで「homebrew-core is a shallow clone.」が出てエラーが出ない場合の原因と対処方法"},{"content":"導入が楽チンでFormをWYSIWYG化 先日、フォームのテキストボックスやインプットボックスをリッチなUIにして欲しいというお話を受けました。\nおそらくエクセルやワードのようなツールバーが付いているWYSIWYGエディターの事を指しているようだったので、ライブラリ選定をしていたところ、無料で使いやすそうなやつを見つけたので今回はそちらの導入方法を備忘録として記事にしてみようと思います。\nSuper Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.\rSummernote - Super Simple WYSIWYG editor\n手順 導入 まずはライブラリを用意しましょう。\nソースセットをGithubからダウンロードしてプロジェクトに取り込んでも良いし、CDNで読み込んでも良いです。\n今回はサクッとCDNで読み込んでみます。\nindex.html \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;ja\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;!-- include libraries(jQuery, bootstrap) --\u0026gt; \u0026lt;link href=\u0026#34;https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\u0026#34; rel=\u0026#34;stylesheet\u0026#34;\u0026gt; \u0026lt;script src=\u0026#34;https://code.jquery.com/jquery-3.5.1.min.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;script src=\u0026#34;https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;!-- include summernote css/js --\u0026gt; \u0026lt;link href=\u0026#34;https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css\u0026#34; rel=\u0026#34;stylesheet\u0026#34;\u0026gt; \u0026lt;script src=\u0026#34;https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;/head\u0026gt; 略... \u0026lt;/html\u0026gt; Summernoteと合わせてBootstrap３のライブラリもCDN経由で読み込んでいます。\n次にSummernoteによってWYSIWYG化するパーツを用意しましょう。\n今回はinput[type='text']とtextareaに加え、divもWYSIWYG化出来るようなのでそちらを試してみましょう。\nindex.html 略... \u0026lt;body\u0026gt; \u0026lt;div class=\u0026#34;panel panel-default\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;panel-heading\u0026#34;\u0026gt; # サンプル \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;panel-body\u0026#34;\u0026gt; \u0026lt;form method=\u0026#34;post\u0026#34;\u0026gt; \u0026lt;p\u0026gt;inputボックス\u0026lt;/p\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; /\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; class=\u0026#34;summernote\u0026#34; /\u0026gt; \u0026lt;p\u0026gt;テキストエリア\u0026lt;/p\u0026gt; \u0026lt;textarea \u0026gt;\u0026lt;/textarea\u0026gt; \u0026lt;textarea class=\u0026#34;summernote\u0026#34;\u0026gt;\u0026lt;/textarea\u0026gt; \u0026lt;p\u0026gt;div\u0026lt;/p\u0026gt; \u0026lt;div\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;summernote\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; \u0026lt;/form\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script type=\u0026#34;text/javascript\u0026#34;\u0026gt; $(document).ready(function() { $(\u0026#39;.summernote\u0026#39;).summernote(); }); \u0026lt;/script\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 最後にsummernoteを実行する事を忘れずに。\n確認 ブラウザでアクセスするとこのような形になります。\n無事にそれぞれがWYSIWYG化出来ていますね♪\nボタンの種類と有効無効の設定方法 SummernoteのWYSIWYGエディターに用意されているツールは以下の通りです。\n[adsense-responsive]\nInsert\rpicture: 画像ダイアログ\rlink: リンクダイアログ\rvideo: ビデオダイアログ\rtable: テーブル挿入\rhr: 平行線\rFont Style\rfontname: フォントファミリー\rfontsize: フォントサイズ\rfontsizeunit: フォントサイズユニット\rcolor: 文字色\u0026背景色r\rforecolor: 文字色\rbackcolor: 背景色\rbold: 太文字\ritalic: 斜体\runderline: 下線/li\u003e\rstrikethrough: 取り消し線\rsuperscript: 上付き文字\rsubscript: 添字\rclear: スタイルリセット\rParagraph style\rstyle: スタイルフォーマット\rol: ol追加\rul: ul追加/li\u003e\rparagraph: 段落はいち\rheight: 行高さ\rMisc\rfullscreen: 全画面\rcodeview: コード,HMLトグル\rundo: 戻す\rredo: 進む\rhelp: ヘルプダイアログ\rかなり多くの設定が用意されています。\nツールの有効化・無効化については以下のように起動時に指定する事で変える事が出来ます。\nindex.html var option = { toolbar: [ [\u0026#39;style\u0026#39;, [\u0026#39;style\u0026#39;]], [\u0026#39;font\u0026#39;, [\u0026#39;bold\u0026#39;, \u0026#39;underline\u0026#39;, \u0026#39;clear\u0026#39;]], [\u0026#39;color\u0026#39;, [\u0026#39;color\u0026#39;]], [\u0026#39;view\u0026#39;, [\u0026#39;fullscreen\u0026#39;, \u0026#39;codeview\u0026#39;, \u0026#39;help\u0026#39;]], ] }; $(document).ready(function() { $(\u0026#39;.summernote\u0026#39;).summernote(option); }); 終わりに 以上のとても簡単にWYSIWYGエディターを導入する事が出来ました。\n他にも細かいカスタマイズが用意されているので、気になる方は公式ドキュメントを見ていただければなと思います♪\n","date":"2021-06-21T16:44:57+09:00","image":"/wp-content/uploads/2021/06/summernoteEye.png","permalink":"/2021/06/21/11502/","title":"【おすすめWYSIWYGエディター】Bootstrapベースの「Summernote」でフォームパーツをツールバー付きのリッチなUIにしてみた【無料で爆速】"},{"content":"Sonyの公式からダウンロード可能 初代プレステ1は名作揃い 皆さんは初代プレステ1で遊んだことはありますでしょうか？\nもはや２０年以上前のハードなのでレトロゲームと言っても良いくらい古いゲーム機ですよね。\nそんな初代プレステは家庭用ハード機として数々の名作を生み出してきました。\nエミュレーターはbiosが必要 もちろん今ではPS１エミュレーターも多く開発されていますが、基本的には初代PS1のbiosデータが必要となっています。\nしかし、このbiosデータは吸い出しには実機を用意したり手順が複雑だったりとなかなか大変です。\nかと言ってインターネット上に違法アップロードされているbiosデータをダウンロードすると法律違反となってしまう可能性もあるので絶対にやってはいけません。\nまた、bios不要となっているエミュレーターも実際にはbiosが含まれている状態のエミュレーターとなっており、知らぬまに間接的に違法ダウンロードを犯してしまっている可能性もあります。\nPS3用システムソフトウェアアップデートを解析 いろいろ調べていると、Sony公式から誰でもダウンロード出来るPS3用ソフトウェアアップデートデータファイルの中にPS1のbiosが含まれているとの事。\nこれなら違法アップロードをされているわけでもないので問題なさそうですね。(あくまで個人の判断ですorz)\nなので、今回は調査がてら実際にこちらを試してみようと思います♪\n手順 必要なもの アップデートファイルに含まれたbiosデータで動くかどうかを確認するために以下のものを用意しました。\n必要なもの\rDuckStation\r動作確認するROMデータ\rROMデータについてはbiosデータ同様違法ダウンロードは厳禁なので各自で吸い出して用意してください！\nソニー公式からPS3アップデータファイルをダウンロード まずはコチラ\u0026nbsp;からPS3システムソフトウェアアップデートをダウンロードしましょう。\nちなみに、Chromeでアクセスするとなぜかエラーが発生してダウンロード出来ないのでFireFoxでダウンロードしました。\nすると、PS3UPDAT.PUPというファイルがダウンロード出来ます。\nPUAD GUIのダウンロード 次にPUPファイルを解析するためのPUAD GUIというツールをコチラ\u0026nbsp;からダウンロードしましょう。\n[adsense-responsive]\n注意 こちらのサイトは海外のものかつ、ツール自体も非公式？のものだと思われるので自己責任でお願いします。\nダウンロードが終わったらインストーラーを起動してよしなにインストールを行いましょう。\nPUPファイルを解析 ツールのインストールが完了したら起動してPUPファイルを選択し、DEV_FLASHボタンを押した上でStartボタンをクリックしましょう。\n以下のようにダイアログが出れば解析完了です。\n指定ディレクトリにupdate_files\u0026gt;dev_flash\u0026gt;ps1emuというフォルダが生成されており、その中のps1_rom.binが初代PS1のbiosデータとなっています。\n起動出来ない場合 PUAD GUIの起動が出来ない場合は管理者権限として実行してみましょう。\nただ、管理者権限で実行すると悪意のあるシステムの場合はウィルス感染などの恐れがあるので自己責任でお願いします。\nエミュレーターで動作確認 では、実際にエミュレーターにこちらのbiosデータを指定して動作確認をしてみましょう。\nおぉ！無事に起動しましたね！\n終わりに 以上のように、違法アップロードされたbiosデータを使わなくても公式サイトからダウンロード出来るファイルから初代PS1のbiosデータにて、DuckStationを起動する事が出来ました♪\nとはいえ、エミュレーター界隈は違法アップロードや違法ダウンロードの恐れが大いにあるので皆さんもまずはご自身で調べた上で自己責任で判断をしてから作業するようにしてみてくださいね。\n","date":"2021-05-30T13:04:44+09:00","image":"/wp-content/uploads/2021/05/ps3-rom-eye.png","permalink":"/2021/05/30/11479/","title":"【エミュレーターに使えるか検証】Sonyの公式が公開しているPS3の「PS3UPDAT.PUP」に初代PS1のbiosデータが含まれているらしいので調べてみた【違法ダウンロードダメ絶対】"},{"content":"動作確認でCookieを付けたリクエストを投げたい システム開発等をしている際にCookieが必要なエンドポイントに対してCookie情報を付与してリクエストをしたいケースがあると思います。\nCurlなどでも可能ですが、有名なリクエストツールのポストマンを使っても簡単にCookieを付与したリクエストを投げる事が出来るのでご紹介しようと思います。\n手順 前提 Cookieがリクエストに存在しないとエラーが出るエンドポイントがあるとします。\nドメイン単位のCookieを追加 PostmanのCookieリンクをクリックしCookie管理ダイアログを表示します。\n今回はローカル開発で使用するのでlocalhostを指定します。\nCookieの追加 次にCookieを追加しましょう。\n今回はSESSIONというキー名でdummyCookieという値を設定してみます。\n設定したらSaveボタンを押して保存すればOKです！\nこれでリクエスト時に常にCookieが付与されてサーバーサイドで取得する事が可能になりました♪\n終わりに 以上のようにちょっと取り扱いCookieに関してもPostmanならとても簡単に管理する事が出来ました。\n皆さんも開発ツールとしてPostmanを使ってみてはいかがでしょうか♪\n","date":"2021-05-28T01:16:42+09:00","image":"/wp-content/uploads/2021/05/postman-cookie-eye.png","permalink":"/2021/05/28/11468/","title":"【Postman】ポストマンでCookieを付与してリクエストを投げる方法【クッキー】"},{"content":"自分でromを吸い出そう レトロフリークなら吸い出し可能 以前、姉妹ブログにてレトロフリークを購入したので使い方についてご紹介しました。\n【スーファミ/ゲームボーイアドバンスetc…】レトロフリークがROM吸い出しも出来てエミュレーターとしても使える神ゲームハードだった件【平成ほいほい】\u0026nbsp;\r今回はレトロフリークを用いてカートリッジからロムを吸い出す方法をご紹介しようと思います。\nまた、YouTubeにてレトロゲームを取り扱っている以上、違法ダウンロードの指摘が来そうな気がしたので保身のためと備忘録のためも兼ねておりますので、何卒ご理解を頂ければなと思いますorz\n違法ダウンロードに注意 ロムデータはインターネット上にて配布・ダウンロードされているものもありますが、それらをダウンロードしてしまうと違法行為となってしまう可能性が高いです！\nまた、自前で吸い出す場合も吸い出した後にカートリッジ等は手元に保管しておく必要があります。\n他にも気をつけるべきポイントは多々ありますがこちらで詳しくは説明しませんのでご自身で調べた上で判断をお願いします！\nあくまで私的利用の範囲で楽しみましょう。\nまた、この記事を参考にする場合にも自己責任での作業をお願い致します。\n手順 必要なもの こちらの作業を進めるには以下を用意する必要があります\n[itemlink post_id=\"11644\"]\n[itemlink post_id=\"11645\"]\n[itemlink post_id=\"11647\"]\n準備するもの\rレトロフリーク本体\r16GB以上のmicroSDカード\rmicroSDカードリーダー\rretrofd(後述)\rWin32 Disk Imager(後述)\r前提 今回紹介する方法についてはレトロフリーク本体のバージョンが2.7である必要があります。\nレトロフリークのアップデート方法 購入した時点のままだと1.0だったり1.5だったりする必要があるので各自アップデート作業\u0026nbsp;をお願いします。\nretrofdのダウンロード まずコチラ\u0026nbsp;のサイトからretrofdをダウンロードしましょう。\nこちらには用意したSDカードに合わせてダウンロードするものを選ぶ必要があります。\n64GBの場合はretrofd_v1.0_32GB.zip、32GBの場合はretrofd_v1.0_16GB.zip、16GBの場合はretrofd_v1.0_8GB.zipのように一つ下のサイズにzipファイルをダウンロードする必要があるので注意しましょう。\nダウンロードしたzipを解凍すると以下のようになっています。\nWin32 Disk Imagerのダウンロード 次にWin32 Disk Imagerをコチラ\u0026nbsp;ダウンロードしましょう。\nWin32 Disk Imagerの起動 [adsense-responsive]\rダウンロードが完了したら、exeファイルを起動しImage Fileにrfd.img、DeviceにmicroSDカードを指定しWriteボタンを押下しましょう。\nmicroSDカードのドライブは環境によって異なるので各自確認をお願いします。\n少し時間がかかりますが、以下のようなダイアログが出れば完了です。\nmicroSDカードには以下のようなフォルダとファイルが生成されていればOKです。\nmicroSDカードの容量が減るのは正しい ちなみに作業後はmicroSDカードの容量が減ってるような表記になりますが正しいので慌てないようにしましょう！\nretrofd.cfgファイルの修正 次にretrofd.cfgファイルを修正しましょう。\n6行目のnoをyesに編集して保存します。\nterapadなどのエディターを使おう ファイルを編集する際に文字コード自動変更機能があるエディタで保存すると、正常に動かなくなる場合があります。\n無難にterapad辺りを使うことをお勧めします。\nrfd_logcd.shの編集 次にコチラ\u0026nbsp;からrfd_logcd_20190628.shをダウンロードし、rfd_logcd.shにリネームして配置してください。(同名のファイルがあった場合は上書き保存)\nそして、ファイルの中のsrcd=\u0026#047;mnt\u0026#047;ram\u0026#047;logをsrcd=\u0026#047;mnt\u0026#047;ramに編集して保存します。\nこれで準備は完了です。\nレトロフリークで吸い出し レトロフリークの電源を落とし、microSDカードをレトロフリークに差し込んでから再度電源を入れましょう。\nその状態でカートリッジを差し込みmicroSdカードへのインストールを行い、正常に吸い出しが完了すると画面上部にバグのような帯が表示されます。\nその状態でゲームを数秒プレイしてからmicroSDカードを抜き取り、PC側で確認すると以下のように{ゲーム名}-decrypted.SFCというファイルが生成されます。\nこれが吸い出したロムファイルとなるので、こちらをエミュレーターで読み込むことで無事動作することが出来ました。\nなお、吸い出しに失敗することが多々あり、dump.SFCファイルはその名残のようです。\nその場合は何回か消してインストールを繰り返せば吸い出しが出来ました。\n終わりに 以上のようにレトロフリークを持っていればゲームプレイから吸い出しまで行う事が出来ました。\nとはいえ、エミュレーターで遊ぶ行為は一歩間違えれば違法行為と間違われてしまう可能性がある行為なので、自己責任の上法律を破らない範囲で楽しむようにしましょう！\n","date":"2021-05-25T20:35:29+09:00","image":"/wp-content/uploads/2021/05/retrofreak-rom-Eye.png","permalink":"/2021/05/25/11427/","title":"【違法ダウンロードダメ絶対】スーファミやGBAのロムをレトロフリークで吸い出してみた【エミュレーター】"},{"content":"不要なファイルを削除したい 知らぬ間に圧迫されるCドライブ 皆さんはWindowsPCを使っているとCドライブやDドライブの容量が知らない間に圧迫されて焦ることはありませんか？\nいらないファイルを削除して容量を開けたいけど、具体的にどこのフォルダが肥大化しているのかが分からないので困っている方も多いと思います。\n容量が少ないと作業スピードが遅くなる ドライブの空き容量が少ないと、動画編集やエンコード、その他アプリケーションの使用時のスピードが遅くなったり動かなくなる事があります。\nそこで今回は、Windows１０の標準機能を使って、ある程度の肥大化したディレクトリを見つけ出す方法をご紹介しようと思います♪\n手順 記憶域画面を開く まずはWindowsメニューから設定→システム→記憶域の順番に選びます。\n[adsense-responsive]\rするとこのようにCドライブの大まかなディレクトリカテゴリと使用容量が表示されます。\n何やら一時ファイルが肥大していますね。。。\n一時ファイルはダウンロードファイルやWindowsUpdateの残骸、その他サムネデータなどが対象なので、この辺を一気に削除しましょう！\nCドライブ以外も可能 また、Dドライブなどの容量を整理することも可能です。\n他のドライブの記憶域利用状況を表示するをクリックしましょう。\nすると、認識されているドライブが一覧表示されるので、整理したいドライブを選択すれば同じようにより細かいレベルで確認・管理する事が出来ます♪\n終わりに 以上のようにWindowsの標準機能でかなり詳細な情報を確認しながら容量を増やす事が出来ました。\n一時ファイル等はクリーンしないと残り続けてしまうので、定期的に削除して容量に余裕を持たすようにしましょう♪\n","date":"2021-04-19T16:58:17+09:00","image":"/wp-content/uploads/2021/04/disc-voluimeEye.png","permalink":"/2021/04/19/11399/","title":"【Windows10】CドライブやDドライブのディレクトリの容量を簡単に把握して削除する方法【容量不足確認】"},{"content":"MD形式でシーケンス図を描きたい 専用ツールは使いたくない 皆さんはシステム開発をする際にシーケンス図を書いていますでしょうか？\n様々なシステムと連携する際に、それぞれの処理フローを明確にするためにはシーケンス図を書く事がとても大事ですよね。\nしかし、シーケンス図を書くにはパワポで図形と線を引いたり、エンタープライズアーキテクト(EA)などのツールを使って書いたりと割と手軽に書く事が出来ず、かつ修正や保守のリスクが高いイメージがありました。\n今はMDで簡単にかけてGit管理も可能 しかし、最近ではマークダウンベースの記述で簡単に図に起こす事が可能となっています。\nメジャーなものでPlantUMLとmermaid.jsがありますが、今回は後者のmermaid.jsを使ってみようと思います♪\nMermaid lets you create diagrams using text and code. This simplifies the maintenance of complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.\rmermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.\n様々な図をかける mermaid.jsはシーケンス図だけではなく、様々な図を書く事が出来るので、気になる方は使ってみるといいでしょう♪\n書ける図\rFlowchart(フローチャート)\rSequence diagram(シーケンス図)\rClass Diagram(クラス図)\rState Diagram(状態遷移図)\rEntity Relationship Diagram(実体関係性ダイアグラム)\rUser Journey(ユーザージャーニー)\rGantt(ガントチャート)\rPie Chart(円グラフ)\r使い方 導入方法 導入方法はダウンロード、CDN、npmなどなど色々ありますが、今回は簡単に試したかったので、CDNで読み込んでみようと思います。\nmermaid.jsはHTMLファイルで管理するので、まずはドキュメントを参考に以下のようなHTMLを用意しましょう。\nフローチャート index.html \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;ja\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;https://unpkg.com/mermaid/dist/mermaid.min.css\u0026#34;\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; # mermaid.js Sample \u0026lt;div class=\u0026#34;wrap\u0026#34;\u0026gt; ## Flowchart \u0026lt;div class=\u0026#34;mermaid\u0026#34;\u0026gt; graph TD; A--\u0026gt;B; A--\u0026gt;C; B--\u0026gt;D; C--\u0026gt;D; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;wrap\u0026#34;\u0026gt; ## Sequence diagram \u0026lt;div class=\u0026#34;mermaid\u0026#34;\u0026gt;sequenceDiagram participant Alice participant Bob Alice-\u0026gt;\u0026gt;John: Hello John, how are you? loop Healthcheck John-\u0026gt;\u0026gt;John: Fight against hypochondria end Note right of John: Rational thoughts \u0026lt;br/\u0026gt;prevail! John--\u0026gt;\u0026gt;Alice: Great! John-\u0026gt;\u0026gt;Bob: How about you? Bob--\u0026gt;\u0026gt;John: Jolly good! \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;wrap\u0026#34;\u0026gt; ## Gantt diagram \u0026lt;div class=\u0026#34;mermaid\u0026#34;\u0026gt;gantt dateFormat YYYY-MM-DD title Adding GANTT diagram to mermaid excludes weekdays 2014-01-10 section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;wrap\u0026#34;\u0026gt; ## Class diagram \u0026lt;div class=\u0026#34;mermaid\u0026#34;\u0026gt;classDiagram Class01 \u0026lt;|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --\u0026gt; C2 : Where am i? Class09 --* C3 Class09 --|\u0026gt; Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 \u0026lt;--\u0026gt; C2: Cool label \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;script src=\u0026#34;https://unpkg.com/mermaid/dist/mermaid.min.js\u0026#34; charset=\u0026#34;UTF-8\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;script\u0026gt; mermaid.initialize({ startOnLoad:true }); \u0026lt;/script\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; ブラウザで表示するとこのような形になります。\nおぉ！いい感じですね♪\nそれぞれのUMLの記述の詳細は公式サイトにあるのでそちらで確認してみてもらえればなと思います♪\n終わりに 以上のように手軽にシーケンス図やフローチャート図を書く事が出来るようになりました。\nドキュメント形式でGit管理出来るのも魅力なので、是非導入してみてはいかがでしょうか♪\n","date":"2021-03-29T18:21:49+09:00","image":"/wp-content/uploads/2021/03/mermaidSampleEye.png","permalink":"/2021/03/29/11384/","title":"【ドキュメントをGit管理可能】mermaid.jsでフローチャートやシーケンス図をマークダウン管理しよう【UML】"},{"content":"遂にフルサイズ機をゲット！ APS-Cの上が欲しくなってしまった 筆者は以前からCanonのAPS-Cの一眼レフを使っていました。\nもちろん、十分な画質でしたし軽くて使い勝手も良かったので特に不満はなかったのですが、キャンプや暗所での撮影をする際にややノイズや明るさの面が気になっていました。\nいやぁ、\n人間の欲って恐ろしいですね！\nちょうど良いタイミングでSonyの新機種が発売 そんなこんなで悩んでいた矢先、Sonyの新機種であるα7s3が発売されました！\n広がる、αの映像世界。\rプロフェッショナル×α7S III が創造する、さまざまなコンテンツを公開。α7S III | α Movie Special Contents | α Universe | デジタル一眼カメラα（アルファ） | ソニー\n詳細については専用ページをみてもらいたいのですが、基本的に3年のスパンで新型が出るのが一般的なαシリーズで唯一5年かけて新型が登場したα7S3です。\nこの情報だけでみなさんが待ちわびていたのが分かります！\n今回はこちらを購入したので開封していこうと思います♪\n合わせて買ったほうがいいもの PeakDesign ピークデザイン カフ リストストラップ キャプチャー カメラを片手で簡単に着脱出来るので旅行や街撮りの際には手放せません！\nAmazon 【国内正規品】PeakDesign ピークデザイン カフ リストストラップ ブラック CF-BL-3 Amazon 【国内正規品】PeakDesign ピークデザイン キャプチャー ブラック CP-BK-3 タムロン 28-200mm F/2.8-5.6 人気メーカータムロンの28-200mmの望遠レンズです！\nAmazon タムロン 28-200mm F/2.8-5.6 Di III RXD(Model：A071)※ソニーFEマウント用レンズ（フルサイズミラーレス対応） TA28-200DI3ソニ-A071 F値も2.8スタートで28mmなのでスナップ撮りから景色撮りまで使えるので、旅行ではこれ一本で完結します！\nHAKUBA 67mm レンズフィルター XC-PRO 大事なレンズを守るために必須です！\nAmazon HAKUBA 67mm レンズフィルター XC-PRO 高透過率 撥水防汚 薄枠 日本製 レンズ保護用 CF-XCPRLG67 信頼の日本製なのでこれ買っておけば間違いなしです！\nソニー CFexpress Type Aメモリーカード 高速書き込みや大容量のCFexpressのメモリーカードです！\nAmazon ソニー CFexpress Type Aメモリーカード CEA-G80T ILCE-1対応 TOUGH 80GB とりあえずこれを買っておけばOKでしょう！\nHAKUBA デジタルカメラ液晶保護フィルムMarkII 液晶画面の保護も必須です！\nAmazon HAKUBA デジタルカメラ液晶保護フィルムMarkII SONY α7C/α7S III/II/α9 II/α9 II/α9/α7R IV/III/II/α7R III/II 専用 DGF2-SA7C 開封の儀 パッケージ α7s3のパッケージはこちらです。\n[adsense-responsive]\r黒ベースのシンプルな外装ですね。\n早速中身をみていきましょう。\nパカッ。\n中身 付属品は以下の通りです。\nx 付属品\rα7s3本体\r取扱説明書\r保証書\r充電器\rバッテリー\r転送用コード\rバッテリーはこちらのタイプです。\nホログラムがかっこいい・・・！\n本体 さて、みなさんお待ちかねのα7s3本体をみていきましょう！\n本体はこちらのシートに丁寧に包装されています。\nテンション上がりますね！\n底部 底部はこんな感じです。\n三脚用の穴とバッテリー用の蓋が付いています。\n上部 上部はこんな感じです。\nボタンやダイヤルなどが多く用意されていて操作性がかなり高そうですね！\nただ、その反面操作に慣れるまでに時間がかかるかもしれませんね\u003e\u003c\n横部 横部はこんな感じです。\n両サイドにそれぞれ多くの端子が付いていますね。\n背面 背面はこんな感じです。\nこちらも多くのボタンが用意されているので、カスタマイズする事で使いやすさが上がりそうですね♪\n合わせて買ったアクセサリー タムロン 28-200mm F/2.8-5.6 ソニー CFexpress Type Aメモリーカード HAKUBA 67mm レンズフィルター XC-PRO HAKUBA デジタルカメラ液晶保護フィルムMarkII PeakDesign ピークデザイン カフ リストストラップ キャプチャー 終わりに 以上のように使いこなすのはちょっと大変そうですが、これからたくさん使って良い写真や動画を撮っていこうと思います！\n気になっている方は是非参考してみてください♪\n","date":"2021-02-14T20:51:58+09:00","image":"/wp-content/uploads/2021/02/sonyA7S3ReviewEye.png","permalink":"/2021/02/14/11334/","title":"【最強のYouTuber向け一眼レフ】Sonyのα7s3が暗所もいけちゃうつよつよカメラだった件【キャンパーにもぴったり】"},{"content":"コミュニティタブとメンバーシップが表示されない！ 条件はクリアしているのに出ない 先日、個人で運営しているYouTubeチャンネルがめでたくチャンネル登録者1000人を突破し収益化の申請が通りました♪\n収益化が一つの目標だったのでまずは一安心です。\nしかし、そんな中チャンネル登録者1000人を突破したら解放されると言われているコミュニティ機能とメンバーシップ機能が表示されませんでした。。。\nコミュニティ タブの利用資格要件\rコミュニティ投稿には、1,000 人以上のチャンネル登録者を持つクリエイターがアクセスできます。チャンネル登録者が 1,000 人以上になった後、コミュニティ タブが表示されるまでには 1 週間ほどかかります。なお、YouTube ではこの機能のテストを引き続き行っているため、それ以外のチャンネルでもコミュニティ タブを利用できる場合があります。コミュニティ投稿の詳細 - YouTube ヘルプ\n利用資格の最低要件\rYouTube のチャンネル メンバーシップの対象チャンネルとなるには、最低要件を満たしている必要があります。\rチャンネル登録者数が 1,000 人を超えている チャンネルが YouTube パートナー プログラムに参加している 18 歳以上である チャンネル所有者の居住地が利用可能な地域に含まれている チャンネルが子ども向けとして設定されていない チャンネルにポリシーに違反する相当数の動画がない 子ども向けとして指定されている動画、または音楽に関する申し立てがある動画は、対象外と判断されます チャンネル所有者（MCN も含む）が YouTube の利用規約とポリシー（関連するコマース プロダクトの付録も含む）に同意し、それらを遵守しているチャンネル メンバーシップの利用資格、ポリシー、ガイドライン - YouTube ヘルプ\nふぅむ。。。なぜだろう・・・。\n原因 コミュニティ機能とメンバーシップ機能は時間差で解放される こちら、いろいろ調べているうちに以下のような記載を見つけました。\n[adsense-responsive]\rなお、下記の条件を満たせば自動的にチャンネル メンバーシップの利用資格を取得できるわけではありませんのでご了承ください。YouTube では、この機能を段階的に展開しています。この機能が利用可能な場合、メンバーシップ ページにオプションとしてメンバーシップ機能が表示されます。チャンネル メンバーシップの利用資格、ポリシー、ガイドライン - YouTube ヘルプ\nチャンネル登録者が 1,000 人以上になった後、コミュニティ タブが表示されるまでには 1 週間ほどかかります。なお、YouTube ではこの機能のテストを引き続き行っているため、それ以外のチャンネルでもコミュニティ タブを利用できる場合があります。コミュニティ投稿の詳細 - YouTube ヘルプ\n完全に見落としていました！笑\nどうやら、収益化の申請については1000人突破後すぐに申請・通過が可能ですが、上記の機能についてはYouTube側で自動で処理を進めるので、何もしなくても時間差で解放されるようですね♪\n解決方法 ひたすら待つ これが解決方法のようです。笑\n実際に筆者のYouTubeチャンネルでは、コミュニティ機能については収益化が通過してから約1週間ほど、メンバーシップ機能については約2週間ほどで解放されました。\n収益化後に特にこちらから機能解放の依頼をする必要は全くなかったため、今まで通りYouTube活動をしながら気長に待つのが良いでしょう♪\n終わりに 以上のようにちょっt悩んでしまうような疑問でしたが、無事に解決する事が出来ました。\n即時解放されないのはYouTube側の仕様のようなので、皆さんも気軽に待ってみてください♪\n","date":"2021-02-04T18:59:39+09:00","image":"/wp-content/uploads/2021/02/youtubeAvailableComunityAndMemberEye.png","permalink":"/2021/02/04/11319/","title":"【YouTuber】登録者1000人超えて収益化したのにコミュニティ機能とメンバーシップ機能が有効化されない原因と対策方法【副業】"},{"content":"予測変換を無効にしたい！ 筆者は動画配信などをする際にはWindows10マシンを利用しているのですが、ライブ配信中にふとタイピングをした際に、Microsoft IMEの予測変換リストが表示される事があります。\nその場合、生放送中だと予期せぬ情報やキーワード(本名や住所etc...)が意図せぬ表示され放送事故に繋がる可能性があります。\n今回はそんな事故を起こさないためにMicrosoft IMEの予測変換機能の履歴を削除し、さらに変換履歴を保存しない方法をご紹介しようと思います♪\n手順 変換履歴を削除 現在、「ふ」と打つと「フォートナイト」というキーワードが予測変換に出てくる状態とします。\n[adsense-responsive]\rそれでは過去の予測変換をリセットしてみましょう。\nまずは右下のタスクバーにあるMicrosoft IMEの上で右クリックをし、設定へ進みます。\nMicrosoft IMEの設定画面が開くので学習と辞書を選択します。\nすると、入力履歴の消去ボタンがあるのでこちらをクリックして削除する事が可能です。\nポチっ。\nこれで過去の変換履歴が候補として表示されなくなりました♪\n入力履歴機能をOFFにする しかし、このままだとまた変換をするたびに候補に表示されてしまい、毎回消さないといけなくなってしまいます。\nなので、いっその事入力履歴機能をOFFにすれば毎回変換履歴を削除する手間が省けるのでOFFにしましょう。\nこれで変換履歴が残らなくなるので、予期せぬ入力履歴が表示される恐れが無くなりますね♪\n終わりに 以上のように簡単にWindows10の予測変換機能を無効化する事が出来ました。\n意外と邪魔に思っている方もいると思いますので、OFFにしたい方は是非試してみてはいかがでしょうか♪\n","date":"2021-01-18T20:39:54+09:00","image":"/wp-content/uploads/2021/01/windowsImeResetEye.png","permalink":"/2021/01/18/11309/","title":"【簡単爆速設定】Windows10の予測変換機能をOFFにして過去の変換履歴をリセットする方法【Microsoft IME】"},{"content":"仕事用とプライベート用を切り替えたい 誤コミットを防ぐのが目的 皆さんはGithubを使っているでしょうか？\n筆者ももちろん利用しているのですが、仕事用の有料アカウントとプライベート勉強用の無料アカウントの二つを持っているのですが、\u001f間違えてコミットなどをしたくないのでうまく使い分ける方法を探していたのですが、先日良さげな方法を見つけたので今回はそのやり方をご紹介しようと思います♪\n規約的に複数アカウントは問題無し その前に、Githubのアカウントを一人が複数持つ事が規約違反という記事をよく目にしますが、正しくは無料アカウントを複数持つ事が禁止されています。\n無料の「アカウント」を複数持つことはできません。 GitHub利用規約 - GitHub Docs\n筆者の場合は、仕事用は有料、プライベート勉強用は無料なので特に利用規約に違反していないと思っております！笑\n手順 sshのconfigの設定 まず、今回は以下の設定を.ssh/configに記述してみます。\n.ssh/config Host github-work HostName github.com IdentityFile ~/.ssh/github-work user git Host github-private HostName github.com IdentityFile ~/.ssh/github-private user git また、それぞれのアカウントでGithubへの公開鍵登録及び疎通確認はしている事とします。\n確認 では、それぞれの認証情報を使ってssh -T {名称}コマンドでGithubに接続が出来るか確認してみましょう。\nコマンド ssh -T github-work Hi github-work! You\u0026#39;ve successfully authenticated, but GitHub does not provide shell access. ssh -T github-private Hi github-private! You\u0026#39;ve successfully authenticated, but GitHub does not provide shell access. 正常に接続時のユーザーが区別出来ていますね♪\ngit configの削除 次に作業をする前にGitのグローバル設定を確認してみましょう。\ngit config --global --listを実行して現在の設定を確認してみます。\ngit config --global --list user.name=github-work user.email=XXX@gmail.com 上記のようにuser周りの設定がグローバル設定されている場合、未指定の場合にデフォルトでこのユーザーが利用されてしまうのでgit config --global --unset {キー名}で削除しておきましょう。\nクローン方法 例えば、github-workアカウントがアクセス可能で、github-privateアカウントがアクセス出来ないリポジトリがあった場合に、それぞれsshでクローンしようとしてみましょう。\n[adsense-responsive]\nコマンドはgit clone git@{config名}:{Githubアカウント名}/{リポジトリ名}.gitとなります。\nクローン git clone git@github-work/YYY.git Cloning into \u0026#39;YYY\u0026#39;... remote: Enumerating objects: 585, done. remote: Total 585 (delta 0), reused 0 (delta 0), pack-reused 585 Receiving objects: 100% (585/585), 286.63 KiB | 406.00 KiB/s, done. Resolving deltas: 100% (268/268), done. git clone git@github-private:XXX/YYY.git Cloning into \u0026#39;YYY\u0026#39;... ERROR: Repository not found. fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. このようにそれぞれ正しく指定した認証情報が使われているので、リポジトリへのアクセス権限も問題ないですね♪\nこの状態でクローンしたディレクトリに移動し以下のコマンドをすると、正常にremote URLに使用したユーザー情報がセットされているのが確認出来ます。\ngit config --list credential.helper=osxkeychain core.repositoryformatversion=0 core.filemode=true core.bare=false core.logallrefupdates=true core.ignorecase=true core.precomposeunicode=true remote.origin.url=git@github-work:XXX/YYY.git remote.origin.fetch=+refs/heads/*:refs/remotes/origin/* branch.master.remote=origin branch.master.merge=refs/heads/master 終わりに 以上のように、簡単にGithubへの接続情報を切り替える事が可能になりました♪\n複数アカウントを使い分けてる方は少なくないと思うので、気になった方はぜひ試してみてはいかがでしょうか♪\n","date":"2020-12-31T21:13:38+09:00","image":"/wp-content/uploads/2020/12/githubChangeAccountEye.png","permalink":"/2020/12/31/11288/","title":"【ssh】複数のアカウントを使い分けてGithubのリポジトリにアクセスする方法【切り替え】"},{"content":"Windows版Homebrew 皆さんは管理ツールを使っていますでしょうか？\nMacであればHomebrewがあります\nWindowsには長らく同じようなものがありませんでしたが、Chocolateyというパッケージ管理ツールが登場し、Windowsユーザーを喜ばせました。\n関連記事 【念願のパッケージ管理】Windows10に標準搭載されたPackageManagementを使ってみたらとても便利だった件【Chocolatey】 2018/09/02 3518文字 約8分で読めます 今回は、さらにChocolateyより使いやすくHomebrewライクだと噂のScoopを使ってみましたので、インストール方法をご紹介しようと思います♪\nA command-line installer for WindowsScoop\n手順 有効化 まずはWindows10でスクリプトファイルの実行ポリシーを変更しましょう。\n以下のコマンドを実行してください。\nコマンド PS C:\\Users\\blogenist\u0026gt; Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force このコマンドは、インターネットから取得したスクリプトを利用出来るようにするコマンドです。\n実行ログは特に出ないので出力がなくても気にしなくてOKです。\n次に、Scoopをダウンロードしてきましょう。\n取得には、WindowsのPowerShellに搭載されているiwrコマンドを利用します。\nコマンド PS C:\\Users\\blogenist\u0026gt; iwr -useb get.scoop.sh | iex Initializing... Downloading scoop... Extracting... Creating shim... Downloading main bucket... Extracting... Adding ~\\scoop\\shims to your path. \u0026#39;lastupdate\u0026#39; has been set to \u0026#39;2020-12-27T00:16:04.5448884+09:00\u0026#39; Scoop was installed successfully! Type \u0026#39;scoop help\u0026#39; for instructions. これでScoopのインストールは完了です。\nGitコマンドのインストール Scoopは内部的にGitコマンドを利用しているらしいので、このまま実行しようとしても以下のようなエラーが出力されると思います。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop -v Current Scoop version: git : 用語 \u0026#39;git\u0026#39; は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。 名前が正しく記述されていることを確認し、パスが含まれている場合はそのパスが正しいことを確認してから、再試行してください 。 発生場所 行:1 文字:1 + git --no-pager log --oneline HEAD -n 1 + ~~~ + CategoryInfo : ObjectNotFound: (git:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException なので、まずはScoopを使ってgitをインストールしてみましょう。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop install git Installing \u0026#39;7zip\u0026#39; (19.00) [64bit] 7z1900-x64.msi (1.7 MB) [=====================================================================================] 100% Checking hash of 7z1900-x64.msi ... ok. Extracting 7z1900-x64.msi ... done. Linking ~\\scoop\\apps\\7zip\\current =\u0026gt; ~\\scoop\\apps\\7zip\\19.00 Creating shim for \u0026#39;7z\u0026#39;. Creating shortcut for 7-Zip (7zFM.exe) \u0026#39;7zip\u0026#39; (19.00) was installed successfully! Installing \u0026#39;git\u0026#39; (2.29.2.windows.3) [64bit] PortableGit-2.29.2.3-64-bit.7z.exe (42.6 MB) [================================================================] 100% Checking hash of PortableGit-2.29.2.3-64-bit.7z.exe ... ok. Extracting dl.7z ... done. Linking ~\\scoop\\apps\\git\\current =\u0026gt; ~\\scoop\\apps\\git\\2.29.2.windows.3 Creating shim for \u0026#39;git\u0026#39;. Creating shim for \u0026#39;gitk\u0026#39;. Creating shim for \u0026#39;git-gui\u0026#39;. Creating shim for \u0026#39;tig\u0026#39;. Creating shim for \u0026#39;git-bash\u0026#39;. Creating shortcut for Git Bash (git-bash.exe) Creating shortcut for Git GUI (git-gui.exe) Running post-install script... \u0026#39;git\u0026#39; (2.29.2.windows.3) was installed successfully! これでgitのインストールが完了しましたね。\nScoopのヘルプオプションで使えるコマンドの一覧が確認出来ます。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop --help Usage: scoop \u0026lt;command\u0026gt; [\u0026lt;args\u0026gt;] Some useful commands are: alias Manage scoop aliases bucket Manage Scoop buckets cache Show or clear the download cache checkup Check for potential problems cleanup Cleanup apps by removing old versions config Get or set configuration values create Create a custom app manifest depends List dependencies for an app export Exports (an importable) list of installed apps help Show help for a command hold Hold an app to disable updates home Opens the app homepage info Display information about an app install Install apps list List installed apps prefix Returns the path to the specified app reset Reset an app to resolve conflicts search Search available apps status Show status and check for new app versions unhold Unhold an app to enable updates uninstall Uninstall an app update Update apps, or Scoop itself virustotal Look for app\u0026#39;s hash on virustotal.com which Locate a shim/executable (similar to \u0026#39;which\u0026#39; on Linux) VSCodeをインストール では、試しにVSCodeをインストールしてみましょう。\n[adsense-responsive]\nまずはsearchコマンドでVSCodeが存在するか確認してみます。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop search vscode \u0026#39;main\u0026#39; bucket: llvm (11.0.0) --\u0026gt; includes \u0026#39;lldb-vscode.exe\u0026#39; winpython (3.8.6.0) --\u0026gt; includes \u0026#39;winvscode.bat\u0026#39; むむ、それっぽいものがありませんね。\n試しにinstallしようとしてもやはり存在しないと言われてしまいます。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop install vscode Couldn\u0026#39;t find manifest for \u0026#39;vscode\u0026#39;. extrasバケットを追加 どうやらScoopはリポジトリのようなバケットの概念があり、デフォルトだとmainバケットしか参照しないので、主にGUIを管理しているextrasというバケットを追加する必要があるようです。\n試しに現在参照しているバケットを確認してみましょう。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop bucket list main 確かにmainバケットしか登録されていませんね。\nでは、以下のコマンドでextrasバケットを追加してみましょう。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop bucket add extras Checking repo... ok The extras bucket was added successfully. 確認 以下のコマンドで再度バケット一覧を確認です。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop bucket list extras main 無事に追加されていますね♪\nsearchコマンドにもヒットするようになりました。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop search vscode \u0026#39;extras\u0026#39; bucket: vscode-insiders-portable (nightly) vscode-insiders (nightly) vscode-portable (1.52.1) vscode (1.52.1) \u0026#39;main\u0026#39; bucket: llvm (11.0.0) --\u0026gt; includes \u0026#39;lldb-vscode.exe\u0026#39; winpython (3.8.6.0) --\u0026gt; includes \u0026#39;winvscode.bat\u0026#39; では、再度インストールを試してみましょう。\nコマンド PS C:\\Users\\blogenist\u0026gt; PS C:\\Users\\blogenist\u0026gt; scoop install vscode Installing \u0026#39;vscode\u0026#39; (1.52.1) [64bit] dl.7z (84.1 MB) [=============================================================================================] 100% Checking hash of dl.7z ... ok. vscode-install-context.reg (652 B) [==========================================================================] 100% Checking hash of vscode-install-context.reg ... ok. vscode-uninstall-context.reg (488 B) [========================================================================] 100% Checking hash of vscode-uninstall-context.reg ... ok. Extracting dl.7z ... done. Linking ~\\scoop\\apps\\vscode\\current =\u0026gt; ~\\scoop\\apps\\vscode\\1.52.1 Creating shim for \u0026#39;code\u0026#39;. Creating shortcut for Visual Studio Code (code.exe) Running post-install script... \u0026#39;vscode\u0026#39; (1.52.1) was installed successfully! Notes ----- Add Visual Studio Code as a context menu option by running: \u0026#34;C:\\Users\\blogenist\\scoop\\apps\\vscode\\current\\vscode-install-context.reg\u0026#34; 無事にVSCodeのインストールが完了しました。\nインストールしたツールを一覧表示するlistコマンドでも念のため確認です。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop list Installed apps: 7zip 19.00 [main] git 2.29.2.windows.3 [main] vscode 1.52.1 [extras] こちらも問題なく追加されていますね♪\nこれで、VSCodeを利用する準備が出来ました。\nコマンドだけでGUIアプリの登録を出来るのはやはり便利ですね♪\nアンインストール方法 では、次はVSCodeをアンインストールしてみましょう。\nアンインストールもとても簡単で、scoop uninstall {名称}で簡単に行えます。\nコマンド PS C:\\Users\\blogenist\u0026gt; scoop uninstall vscode Uninstalling \u0026#39;vscode\u0026#39; (1.52.1). Removing shim for \u0026#39;code\u0026#39;. Removing shortcut ~\\AppData\\Roaming\\Microsoft\\Windows\\Start Menu\\Programs\\Scoop Apps\\Visual Studio Code.lnk Unlinking ~\\scoop\\apps\\vscode\\current \u0026#39;vscode\u0026#39; was uninstalled. これでVSCodeのアンインストールが完了しました。\nこれはHomebrewの代わりになりうるぞ！\n終わりに 以上のようにChocorateyを超える管理ツールでしたね。\nWindowsユーザーであれば、是非ともオススメなので是非試してみてはいかがでしょうか♪\n","date":"2020-12-28T21:06:01+09:00","image":"/wp-content/uploads/2020/12/installScoopEye.png","permalink":"/2020/12/28/11268/","title":"【Windows10】アプリ自動導入＆管理ツールの「Scoop」がChocolateyを超えていた件【Homebrew】"},{"content":"SEO対策の一つ「構造化データ」 果てなきSEO対策 2020年12月4日にGoogleコアアップデートが行われ、サイト順位の大幅な変動が発生しパニクっている方も多いのではないでしょうか？\n上記アップデートに対応すべく筆者も色々調べてみたところまだ設定していないSEO対策の一つ「構造化データ」を見つけたので今回ご紹介しようと思います。\nページコンテンツをクローラーに伝える 構造化データとは、そのサイトやページの内容を簡潔に説明するための定義となります。\n構造化データの仕組みについて\rGoogle 検索では、ページのコンテンツを理解するよう取り組んでいます。ページに構造化データを含めて、ページの内容についての明白な判断材料を提供すると、Google でそのページをより正確に理解できるようになります。 構造化データとは、ページに関する情報を提供し、ページ コンテンツ（たとえば、レシピページの場合は材料、加熱時間と加熱温度、カロリーなど）を分類するために使用される、標準化されたデータ形式です。\rGoogle は、ウェブ上で検出した構造化データを使用して、ページのコンテンツを把握するだけでなく、ウェブと世間一般に関する情報も収集します。たとえば、下記の JSON-LD 構造化データ スニペットをレシピページに含めて、レシピのタイトルやレシピの作成者などの詳細情報を記述できます。構造化データの仕組みについて | Google 検索セントラル | Google Developers\nこの設定を正しく利用する事で、Google検索結果にてより具体的な情報を出力する事が可能になります。\nサンプル \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;Apple Pie by Grandma\u0026lt;/title\u0026gt; \u0026lt;script type=\u0026#34;application/ld+json\u0026#34;\u0026gt; { \u0026#34;@context\u0026#34;: \u0026#34;https://schema.org/\u0026#34;, \u0026#34;@type\u0026#34;: \u0026#34;Recipe\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;Apple Pie by Grandma\u0026#34;, \u0026#34;author\u0026#34;: \u0026#34;Elaine Smith\u0026#34;, \u0026#34;image\u0026#34;: \u0026#34;http://images.edge-generalmills.com/56459281-6fe6-4d9d-984f-385c9488d824.jpg\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;A classic apple pie.\u0026#34;, \u0026#34;aggregateRating\u0026#34;: { \u0026#34;@type\u0026#34;: \u0026#34;AggregateRating\u0026#34;, \u0026#34;ratingValue\u0026#34;: \u0026#34;4.8\u0026#34;, \u0026#34;reviewCount\u0026#34;: \u0026#34;7462\u0026#34;, \u0026#34;bestRating\u0026#34;: \u0026#34;5\u0026#34;, \u0026#34;worstRating\u0026#34;: \u0026#34;1\u0026#34; }, \u0026#34;prepTime\u0026#34;: \u0026#34;PT30M\u0026#34;, \u0026#34;totalTime\u0026#34;: \u0026#34;PT1H30M\u0026#34;, \u0026#34;recipeYield\u0026#34;: \u0026#34;8\u0026#34;, \u0026#34;nutrition\u0026#34;: { \u0026#34;@type\u0026#34;: \u0026#34;NutritionInformation\u0026#34;, \u0026#34;calories\u0026#34;: \u0026#34;512 calories\u0026#34; }, \u0026#34;recipeIngredient\u0026#34;: [ \u0026#34;1 box refrigerated pie crusts, softened as directed on box\u0026#34;, \u0026#34;6 cups thinly sliced, peeled apples (6 medium)\u0026#34; ] } \u0026lt;/script\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 構造化データの仕組みについて | Google 検索セントラル | Google Developers\nよく見る検索結果に表示されるカードなどはこの技術を利用して実現していたのですね！納得です。\nWordpressでもプラグインで簡単追加が可能 そこで今回はこのWordpressで構築している本ブログにも構造化データを追加してみようと思います。\nプラグインを使う事で簡単に追加出来たのでとても簡単でした♪\n手順 Markup (JSON-LD)のインストール まずはプラグインをインストールしましょう。\n検索ボックスに「Markup (JSON-LD) 」と入力しヒットした中から以下のプラグインをインストールしましょう。\n[adsense-responsive]\nインストールが完了したら有効化を忘れずに。\nSchema.orgの設定 次に各ページ種別ごとに追加するSchema.orgを設定しましょう。\n今回はブログ記事ページに追加してみるので、Blog Postingを選択してみます。\n多くの設定がありますが、基本的にはEnabledと投稿、固定ページ、投稿(AMP)、Setting Image Urlにチェックを入れて変更を保存すればOKです。\nこれで、HTMLのheadタグ内に以下のJsonLd情報が自動出力されるようになります♪\nとても簡単に構造化データの設定が完了しましたね♪\n確認 では、実際にGoogleのテストツールで確認してみましょう。\n構造化データテストツール構造化データ テストツール\nむむ。エラーが出てますね。。。\npublisherが必須らしい どうやら、publisherという項目が必須のようですが、初期設定のままだと未指定状態となっているため出力されていないようですね。\nPublisherとPublisherロゴを設定して再度確認してみます。\n再度テストしてみましょう。\n無事に設定されましたね♪\n終わりに 以上のように、プラグインを導入する事で簡単に導入する事が出来ました。\nSEO対策として、少なからず効果はあると思うので是非導入してみてはいかがでしょうか♪\n","date":"2020-12-21T21:33:27+09:00","image":"/wp-content/uploads/2020/12/jsonLdWordpressEye.png","permalink":"/2020/12/21/11233/","title":"【SEO】WordpressにJSON-LDを追加設定してくれるプラグイン「Markup (JSON-LD)」の設定方法【構造化データ】"},{"content":"Cannot inline bytecode built with JVM target 1.8 into bytecode that is being built with JVM target 1.6. Please specify proper \u0026lsquo;-jvm-target\u0026rsquo; option JVMバージョンの不一致が原因 VSCodeを使ってKotlinの開発をしようとした際に、以下のようなエラーが発生する事があります。\n調べてみたところ、こちらはJVMのバージョンの不一致が原因のようですね。\nしかしご安心を。\nVSCode自体にも該当の設定をする部分があるのでそちらを修正する事で解決出来そうなので早速解決していきましょう。\n解決方法 KotlinのJVMターゲットを変更 設定画面からKotlinのJVMターゲットを確認してみましょう。\n見たところ、defaultになっていますね。\nこちらを1.8と指定する事でなんとかなるとの事！\n確かに無事に解決されましたね♪\n終わりに 以上のように原因さえ分かれば秒殺出来る問題でした。\nVSCodeを使ってKotlin開発しようと思っている方は是非覚えておくと良いでしょう♪\n","date":"2020-12-19T23:13:00+09:00","image":"/wp-content/uploads/2020/12/vsCodeKotlinJvmErrorEye.png","permalink":"/2020/12/19/11214/","title":"【VSCode】「Cannot inline bytecode built with JVM target 1.8 into bytecode that is being built with JVM target 1.6~ 」の解決方法【Kotlin】"},{"content":"VSCodeで開発しよう 先日、Kotlinの開発環境構築方法をご紹介しました。\n関連記事 【サーバーサイド開発】kotlinの爆速開発環境構築【SpringBoot】 2020/12/18 1019文字 約3分で読めます 今回はVSCodeを使ってKotlinをコーディングするための設定をご紹介しようと思います♪\n手順 コード補完とシンタックスハイライト まず、何も設定していない状態ではktファイルを作成してもVSCode側がKotlinと認識してくれません。\nなので、Extensionsタブから「kotlin」と検索し、VSCodeのKotlin拡張をインストールし有効化しましょう。\nこれでktファイルのシンタックスハイライトが有効になります。\nもちろん、コード補完も有効化されています。\n参照元のクラスに合わせた状態でF3を押す事で関連クラスに飛ぶ事が出来ます。\nまた、fnキーを押しながらホバーする事でダイアログで関連クラスを簡単に確認する事も出来ます。\n効かない場合はVSCodeを再起動してみてください。\nKotlinファイルをVSCodeからコンパイル・実行 では、次にKotlinファイルをVSCode経由でコンパイル及び実行をしてみましょう。\nまずはExtensionsタブから「code runner」と入力しインストールしましょう。\nすると右クリックメニューにRun Codeが追加されているのでそちらを選択するか、Control+Option+Nを押して実行してみましょう。\n実行ログ [Running] cd \u0026#34;/Users/blogenist/demo/\u0026#34; \u0026amp;\u0026amp; kotlinc helloWorld.kt -include-runtime -d helloWorld.jar \u0026amp;\u0026amp; java -jar helloWorld.jar OpenJDK 64-Bit Server VM warning: Options -Xverify:none and -noverify were deprecated in JDK 13 and will likely be removed in a future release. WARNING: An illegal reflective access operation has occurred WARNING: Illegal reflective access by com.intellij.util.ReflectionUtil to method java.util.ResourceBundle.setParent(java.util.ResourceBundle) WARNING: Please consider reporting this to the maintainers of com.intellij.util.ReflectionUtil WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations WARNING: All illegal access operations will be denied in a future release helloWorld.kt:1:10: warning: parameter \u0026#39;args\u0026#39; is never used fun main(args:Array\u0026lt;String\u0026gt;) { ^ Hello World！ [Done] exited with code=0 in 3.083 seconds 無事に実行されていますね♪\n終わりに 以上のようにこれでVSCode上で快適にコーディング出来るようになりましたね。\nVSCodeは開発が活発なIDEなので、是非使い倒してみてはいかがでしょうか♪\n","date":"2020-12-19T00:23:10+09:00","image":"/wp-content/uploads/2020/12/kotlinVsCodeEye.png","permalink":"/2020/12/19/11206/","title":"【グッバイAndroidStudio】VSCodeでKotlinの開発を快適に行うための設定まとめ【コード補完】"},{"content":"遂にkotlinデビュー 先日、新しい案件を始めるにあたりサーバーサイドkotlinをやってみよう！という話になったため、Macのローカル環境にkotlin開発環境を構築してみたので、手順をご紹介しようと思います♪\nUsing Kotlin for Server-side Development\rKotlin is a great fit for developing server-side applications, allowing you to write concise and expressive code while maintaining full compatibility with existing Java-based technology stacks and a smooth learning curve:\rKotlin for Server Side - Kotlin Programming Language\nKotlinはGoogleが開発したAndroid用アプリケーションの言語として開発されましたが、完全なJava言語のサポートがあるためサーバーサイドでも使われる事が多いですね。\nSpringBootなどのメジャーなフレームワークも手厚くサポートしているため使いやすいのも助かります♪\n手順 HomebrewでKotlinをインストール まずはHomebrew経由でKotlinをインストールしましょう。\nbrew install kotlin brew install kotlin ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/openjdk-15.0.1.mojave.bottle.tar.gz ==\u0026gt; Downloading from https://d29vzk4ow07wi7.cloudfront.net/a4f00dc8b4c69bff53828f32c82b0a6be41b23a69a7775a95cdbc9e01d9bdb68?response-content-disposition=attachment%3Bfilename%3D%22openjdk-15.0.1.mojave.bottle.tar.gz%22\u0026amp;Policy=eyJTdGF0ZW1l ######################################################################## 100.0% ==\u0026gt; Downloading https://github.com/JetBrains/kotlin/releases/download/v1.4.21/kotlin-compiler-1.4.21.zip ==\u0026gt; Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/3432266/0a09f880-388a-11eb-927b-08b36198f3e7?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026amp;X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20201218%2Fus-east-1%2Fs3%2Faws4_re ######################################################################## 100.0% ==\u0026gt; Installing dependencies for kotlin: openjdk ==\u0026gt; Installing kotlin dependency: openjdk ==\u0026gt; Pouring openjdk-15.0.1.mojave.bottle.tar.gz ==\u0026gt; Caveats For the system Java wrappers to find this JDK, symlink it with sudo ln -sfn /usr/local/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk openjdk is keg-only, which means it was not symlinked into /usr/local, because it shadows the macOS `java` wrapper. If you need to have openjdk first in your PATH run: echo \u0026#39;set -g fish_user_paths \u0026#34;/usr/local/opt/openjdk/bin\u0026#34; $fish_user_paths\u0026#39; \u0026gt;\u0026gt; ~/.config/fish/config.fish For compilers to find openjdk you may need to set: set -gx CPPFLAGS \u0026#34;-I/usr/local/opt/openjdk/include\u0026#34; ==\u0026gt; Summary 🍺 /usr/local/Cellar/openjdk/15.0.1: 614 files, 323.8MB ==\u0026gt; Installing kotlin 🍺 /usr/local/Cellar/kotlin/1.4.21: 108 files, 64.5MB, built in 5 seconds ==\u0026gt; Upgrading 1 dependent: sbt 1.3.8_1 -\u0026gt; 1.4.4 ==\u0026gt; Upgrading sbt 1.3.8_1 -\u0026gt; 1.4.4 ==\u0026gt; Downloading https://github.com/sbt/sbt/releases/download/v1.4.4/sbt-1.4.4.tgz ==\u0026gt; Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/279553/e41a1b00-2d03-11eb-8ea6-86214345c60c?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026amp;X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20201218%2Fus-east-1%2Fs3%2Faws4_req ######################################################################## 100.0% ==\u0026gt; Caveats You can use $SBT_OPTS to pass additional JVM options to sbt. Project specific options should be placed in .sbtopts in the root of your project. Global settings should be placed in /usr/local/etc/sbtopts ==\u0026gt; Summary 🍺 /usr/local/Cellar/sbt/1.4.4: 13 files, 48MB, built in 4 seconds Removing: /usr/local/Cellar/sbt/1.3.8_1... (801 files, 61MB) ==\u0026gt; Checking for dependents of upgraded formulae... ==\u0026gt; No broken dependents found! ==\u0026gt; Caveats ==\u0026gt; openjdk For the system Java wrappers to find this JDK, symlink it with sudo ln -sfn /usr/local/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk openjdk is keg-only, which means it was not symlinked into /usr/local, because it shadows the macOS `java` wrapper. If you need to have openjdk first in your PATH run: echo \u0026#39;set -g fish_user_paths \u0026#34;/usr/local/opt/openjdk/bin\u0026#34; $fish_user_paths\u0026#39; \u0026gt;\u0026gt; ~/.config/fish/config.fish For compilers to find openjdk you may need to set: set -gx CPPFLAGS \u0026#34;-I/usr/local/opt/openjdk/include\u0026#34; ==\u0026gt; sbt You can use $SBT_OPTS to pass additional JVM options to sbt. Project specific options should be placed in .sbtopts in the root of your project. Global settings should be placed in /usr/local/etc/sbtopts 確認 以下のコマンドで確認しましょう。\nkotlin -version Kotlin version 1.4.21-release-351 (JRE 15.0.1+9) 無事にインストールされましたね♪\nHelloWorldを出力してみよう では、次はプログラミングの定番、HelloWorldを出力してみましょう。\n以下のファイルを用意して、コンパイル後に実行してみます。\nHelloWorld.kt fun main(args:Array\u0026lt;String\u0026gt;) { println(\u0026#34;Hello World！\u0026#34;) } コンパイル kotlinc helloWorld.kt -include-runtime -d helloWorld.jar OpenJDK 64-Bit Server VM warning: Options -Xverify:none and -noverify were deprecated in JDK 13 and will likely be removed in a future release. WARNING: An illegal reflective access operation has occurred WARNING: Illegal reflective access by com.intellij.util.ReflectionUtil to method java.util.ResourceBundle.setParent(java.util.ResourceBundle) WARNING: Please consider reporting this to the maintainers of com.intellij.util.ReflectionUtil WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations WARNING: All illegal access operations will be denied in a future release helloWorld.kt:1:10: warning: parameter \u0026#39;args\u0026#39; is never used fun main(args:Array\u0026lt;String\u0026gt;) { 実行 kotlin helloWorld.jar Hello World！ コンパイルと実行も無事に出来ましたね♪\n終わりに 以上のようにインストールから実行まで確認出来ました。\n次回はVSコードを使ってKotlinを記述するための設定を進めていこうと思います♪\n","date":"2020-12-18T19:12:32+09:00","image":"/wp-content/uploads/2020/12/kotoinDevEye.png","permalink":"/2020/12/18/11194/","title":"【サーバーサイド開発】kotlinの爆速開発環境構築【SpringBoot】"},{"content":"JPAオブジェクトのLombokでStackOverflowErrorが発生 循環参照が発生しメモリリーク JPA+Lombokを組み合わせて利用している際に、以下のようなJPAで取得した親子関係を持つEntityオブジェクトを標準出力や文字列化、エラーログ出力時にそのまま渡してtoString()メソッドを呼び出した際にjava.lang.StackOverflowError: nullが発生する場合があります。\nentities.account.AccountEntity.java package entities.account; import java.time.LocalDateTime; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.OneToOne; import javax.persistence.Table; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; @Entity @Table(name = \u0026#34;accounts\u0026#34;) @NoArgsConstructor @Data @Builder @AllArgsConstructor public class AccountEntity{ @GeneratedValue(strategy = GenerationType.IDENTITY) @Id private Long id; @OneToOne @JoinColumn(name = \u0026#34;id\u0026#34;, referencedColumnName = \u0026#34;accountId\u0026#34;) public AccountStatusEntity accountStatusEntity; @Column private String name; @Column private LocalDateTime createdAt; @Column private LocalDateTime updatedAt; @Column private LocalDateTime deletedAt; } entities.account.AccountStatusEntity; package entities.account; import java.io.Serializable; import java.time.LocalDateTime; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.OneToOne; import javax.persistence.Table; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; @Entity @Table(name = \u0026#34;account_status\u0026#34;) @NoArgsConstructor @Data @Builder @AllArgsConstructor public class AccountStatusEntity implements Serializable { @Id @OneToOne @JoinColumn(name = \u0026#34;accountId\u0026#34;, referencedColumnName = \u0026#34;id\u0026#34;) public AccountEntity accountEntity; @Column private AccountStatusEnum status; @Column private LocalDateTime createdAt; @Column private LocalDateTime updatedAt; } エラーログ Caused by: java.lang.StackOverflowError: null at entities.account.AccountStatusEntity.toString(AccountStatusEntity.java:21) at java.base/java.lang.String.valueOf(String.java:2951) at entities.account.AccountEntity.toString(AccountEntity.java:22) at java.base/java.lang.String.valueOf(String.java:2951) at entities.account.AccountStatusEntity.toString(AccountStatusEntity.java:21) at java.base/java.lang.String.valueOf(String.java:2951) at entities.account.AccountEntity.toString(AccountEntity.java:22) at java.base/java.lang.String.valueOf(String.java:2951) ...(以下無限ループ) ログを見てもらうとわかる通り、toStringを実行した際に依存している子モデルのtoStringが呼ばれ、その中のさらに依存している親モデルのtoStringが呼ばれ・・・という形で無限ループしてしまっています。\n解決方法 @ToString.Excludeを使う この現象を避けるには、子Entity側のtoStringで親EntityのtoStringを呼ばないようにする必要があります。\n幸い、Lombokでは上記を実装するための便利なアノテーションがあるのでそちらを利用しましょう。\ntoStringから除外したいフィールドに以下をつけるだけです。\nentities.account.AccountStatusEntity; package entities.account; import java.io.Serializable; import java.time.LocalDateTime; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.OneToOne; import javax.persistence.Table; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import lombok.ToString; // ★追加 @Entity @Table(name = \u0026#34;account_status\u0026#34;) @NoArgsConstructor @Data @Builder @AllArgsConstructor public class AccountStatusEntity implements Serializable { @ToString.Exclude // ★追加 @Id @OneToOne @JoinColumn(name = \u0026#34;accountId\u0026#34;, referencedColumnName = \u0026#34;id\u0026#34;) public AccountEntity accountEntity; @Column private AccountStatusEnum status; @Column private LocalDateTime createdAt; @Column private LocalDateTime updatedAt; } これで循環参照がされなくなるので、正常にtoStringメソッドを呼び出す事が可能になりました。\n@ToString(exclude = {\u0026ldquo;XXX\u0026rdquo;})は非推奨 ちなみにクラスに対して@ToString(exclude = {\"除外対象の親Entityプロパティ名\"})とする事でも同様の処理をする事が可能だが、こちらの記述方法は非推奨のためいずれ無くなるらしいので使わないことをオススメします。\n終わりに 以上のように循環参照の恐怖を知っていないと、サーバーが落ちてしまう原因の一つとなってしまいます。\nLombokとJPAを組み合わせて利用する可能性がある方は是非覚えておくと良いでしょう♪\n","date":"2020-12-17T20:32:54+09:00","image":"/wp-content/uploads/2020/12/lombokAndJpaToStrinfErroryEye.png","permalink":"/2020/12/17/11185/","title":"【循環参照】Lombokで生成した@Data(@ToString)でjava.lang.StackOverflowError: nullが発生する原因と解決方法【Java】"},{"content":"自動追尾サイドバーを導入しよう プラグインだけで完結 先日、functions.phpやテンプレートファイルに手を入れる事なく、プライグインだけでサイドバーのウィジェットを自動追尾スクロール化する方法を発見したのでご紹介しようと思います♪\n今までは各自でclassやidを降って自前でJavaScriptやPHPを組む必要があったため、敷居が高かったのですが本当に簡単に実装が出来ました！\nGoogleAdsenseが全ユーザーの追尾広告を解禁 そして、以前はGoogleAdsense広告を追尾スクロール部分に利用する事は原則禁止されており、使用許可されたアカウントでのみ使えていました。\n無断で使用した際にはペナルティや最悪アカウント停止などの恐れがあるので、使いたくても使えない方が多かったと思われます。\nしかし、2019年11月に利用規約のポリシー変更により全アカウントにて追尾スクロール部分へのAdsense広告の配置が解禁されたのです！\nGoogle 広告を不必要または不自然にアピールすることは禁止されています。たとえば次のような表示が含まれます。\rユーザーの注目を広告に集める派手なアニメーション 広告を指し示す矢印や記号広告のプレースメントに関するポリシー - AdSense ヘルプ\nそこで本ブログも追尾スクロールバーにアドセンス広告をセットしようと調べていたところ、プラグインによって簡単に導入出来るとの事だったので導入方法と設定方法をご紹介しようと思います♪\n手順 プラグインのインストール まずはプラグインをインストールしましょう。\n新規追加で「Q2W3 Fixed Widget for WordPress」と入力すると、ヒットするのでこちらをインストールしましょう。\nインストールが終わったら有効化するのを忘れずに。\n確認 無事に有効化されサイドバーに設定画面が追加されましたね。\n追尾スクロールウィジェットの追加 次に実際に追尾させるウィジェットを設定しましょう。\n使用しているワードプレステーマによりますが、基本的にはサイドバーに表示するウィジェットエリアがあると思うので、そちらに任意のコンテンツを追加しましょう。\n今回はカスタムHTMLを追加します。\nすると、Fixed widgetというチェックボックスが追加されているのでこちらにチェックを入れることで追尾機能がONになります。\n確認 これでサイドバーのスペース部分に正常に正常に追尾されるようになりましたね♪\nFooterに被ってしまう しかし、フッターコンテンツや追尾するコンテンツ次第ではフッターに重なってしまう場合があります。\n[adsense-responsive]\nその場合は追尾を終了させたいセレクターを設定画面で指定することで追尾をOFFにする事が出来ます。\n今回はfooterというIDセレクターを終了地点をしてみます。\n設定画面の停止 IDにfooterと指定し更新します。\nこれでFooterコンテンツに追尾ウィジェットが重ならなくなりました♪\nあとは、追尾ウィジェットのコンテンツをアドセンス広告やAmazonアフェリエイトなどにする事でスペースをより有効に使った広告表示をする事が可能になります。\n終わりに 以上のように、プラグインを使う事でGoogleアドセンス広告の規約変更により気にする事なく追尾ウィジェット内に広告を貼れるようになりました。\nどのテーマでも簡単に追尾広告を実現出来るので気になっている方は是非試してみてはいかがでしょうか♪\n","date":"2020-12-05T17:48:17+09:00","image":"/wp-content/uploads/2020/12/Q2W3FixedWidgetForWordPressEye.jpg","permalink":"/2020/12/05/11152/","title":"【テーマ・ソース変更必要無し】固定追尾サイドバーをプラグインぽちぽちだけで実装出来ちゃう「Q2W3 Fixed Widget for WordPress」が最強だった件【Wordpress】"},{"content":"小物を無駄なく整理したい キャンプなどをしていると、様々な小物や道具が知らぬ間に増えてしまいますよね。\n部屋の端に無造作に積んでおいたりプラスチックケースにまとめて入れておくのも良いのですが、いざ道具を探しているときにすぐに見つからないのと散らかってしまうのであまりオススメしません。\n今回は、山善のウォールラックを購入したところキャンプ道具が綺麗スッキリ整理する事が出来たのでご紹介しようと思います♪\nAmazon 山善 突っ張り パーテーション (有孔ボード) 幅31・61×奥行5×高さ190-260㎝ 2WAY かんたん突っ張り(実用新案取得) 孔間隔25mm 賃貸 棚 組立品 マットブラック WJP-763RM(MBK) 【Amazon.co.jp限定】 また、専用フックも別で購入しておいたほうがいいでしょう。\nAmazon naissant パンチングボード 有孔ボード 専用 T型 フック 20個 セット メッシュフック 穴 ピッチ25mm こちらのラックは壁面に設置出来るため省スペースで壁に収納ラックを設置する事が可能になります。\nまた、有孔ボードはスチール製のためマグネットにも対応しているのでとても使い勝手良いのでオススメです♪\n開封の儀 パッケージ ウォールラックはこちらのダウンボールに入れて配送されてきました。\n薄くて縦長ですが、そこまで重くはありませんでした。\n早速中身を見ていきましょう♪\nパカっ。\n梱包物 付属品 中身は以下の通りです。\n[adsense-responsive]\r付属品\r固定ポール 2本\r取扱説明書\rポール固定具\r有孔ボード 3枚\r取扱説明書 取扱説明書には組立方法が丁寧に書かれているので、苦戦することはありませんでした。\n有孔ボードは縦にも横にも付けれますが、それにより幅が変わってしまうため補助を行ってくれるためのシートも入ってます！\nこの辺はとても親切ですね♪\n有孔ボード 有孔ボードは質感がとても良い感じです♪\nこちらの有孔ボードは穴径5mm、ピッチが25mmとなっています。\n使用感 組立方法については取扱説明書に書いてあるので割愛しますが、成人男性一人で30分ほどで終わりました♪\n壁面ぴったりまで寄れるのでスペースを圧迫する事もありません♪\n有孔ボードにフックを取り付ければ、こんな感じでギアを引っ掛ける事が出来るので使いたい道具をすぐに探す事が出来ます♪\n終わりに 以上のように、小物を引っ掛けるのに使い勝手の良いウォールラックでした。\nキャンプ道具以外にも日用品や工具を引っ掛ける事で使い勝手が良くなるのできになる方は是非購入してみてはいかがでしょうか♪\n","date":"2020-11-23T16:27:30+09:00","image":"/wp-content/uploads/2020/11/yamazenWallBoardReviewEye.jpg","permalink":"/2020/11/23/11124/","title":"【マグネット対応有孔ボード】山善のウォールラックでオシャレにキャンプギアや工具を保管しよう【省スペース収納】"},{"content":"Dyson掃除機が故障疑惑 数日前までは使えたのに・・・ 先日、ダイソンのコードレスクリーナーを使おうと思ったところ、電源ボタンを押しても反応が無くなってしまいました。\n充電ケーブルはしっかり繋いでつい3日前まで問題なく使えていたので謎です。。。\n電源ボタンを押してみると、普段は残電池量が表示される青いLEDランプ部分が赤く光っており、回数を数えてみると4回点滅していました。\n[adsense-responsive]\r点滅回数によって原因が違う なにやら調べてみると、LEDランプが赤く光っている場合、点滅回数によって不良の原因がなんとなく分かるとの事でした。\nバッテリーに関するご質問\n今回は4回だったのでバッテリーの不具合のようで、オンラインサポートが可能だったのでコールセンターに問い合わせてみたところ、交換で治る可能性が高いとの事でした。\nちなみにこちらのコードレス掃除機です。\n[itemlink post_id=\"11625\"]\n一応ダイソンの会員登録をしていた点と、購入してから2年以内だったので初回は無料でバッテリー交換をしてもらう事が出来ました！\n通常だと8000円ほどかかるらしいので、無料で交換出来たのはかなりデカイです！\nちなみに安価なバッテリーも売っているのでそちらで済ませるのもいいかもしれませんね♪\n[itemlink post_id=\"11626\"]\n型番によって多少違うらしいので、ご使用のダイソンコードレス掃除機に合うものを探してみてください♪\n交換方法 予備バッテリー到着 サポートセンターに電話してから2日ほどでバッテリーが届きました。\n中身は交換バッテリーと取替え方法の説明書のみとなっています。\n取替え方法はとても簡単でした。\n排出カバーを開いて\n取っ手部分と底部のネジを外して\nバッテリーを取り外し、新しいものを差し込んだらネジで止めるだけです。\nこれでLEDランプが青く光り、正常に動くようになりました。\nめでたしめでたし♪\n終わりに 以上のように、LEDランプの以上が発生した場合はサポートセンターに問い合わせる事で、かなり素早くかつ手厚いサポートをしてもらえる事が出来ました！\nこの辺は大手メーカーのダイソンさんだからこそというところだと思うので、せっかくなら良いコードレス掃除機を購入してみてはいかがでしょうか♪\n","date":"2020-11-04T22:01:16+09:00","image":"/wp-content/uploads/2020/11/dysonRepair2020Eye.jpg","permalink":"/2020/11/04/11103/","title":"【コードレスクリーナー】赤いLEDランプが4回点滅して動かない場合の原因と解決方法【ダイソン】"},{"content":"街乗り目的で購入してみた 折り畳みタイプの良さげな電動自転車を発見 筆者は都内在住なので未だに自家用車を持っていないため、ちょっとした買い物やお出かけをする際に歩いていくか電車に乗っていくかしかないのですが、リモートワークによる運動不足の解消も合わせて電動自転車を購入する事にしました！\nドラクエウォークやポケモンGoをやっていると、ちょっとしたレイドバトルにサクッと足を運べるのもでかいですしね♪\nそこで、調べてみたところAmazonの売り上げNo1の電動自転車が良さげだったのでそちらに購入を決めました！\nPELTECH(ペルテック) 折り畳み電動アシスト自転車 20インチ折り畳み外装6段変速 今回購入したのはコチラです！\nAmazon PELTECH(ペルテック) 折り畳み電動アシスト自転車 20インチ折り畳み外装6段変速 【簡易組立必要品】(TDN-206) ペルテック(Peltech) (ブラック) PELTECHの折りたたみ式電動アシスト自転車です！\nコチラは小型の折りたたみ式なので賃貸でも収納スペースを確保するのが簡単で、尚且つ電動です。\nさらに6段変則も搭載しているので、街乗りをする分にはピッタリだったのが決め手でした！\n自転車の詳細は上記リンクから商品リンクを見ていただければなと思います♪\n自転車と合わせて購入すべきアクセサリー 今回は以下のオプションアイテムも購入しました！\n以下については別の記事にて改めて詳細をご紹介しようと思っています♪\nYOUNGDO 自転車低反発クッションサドルクッション 街乗りといえど、1時間以上乗る可能性もあるので、低反発クッション性のサドルを購入しました！\nAmazon YOUNGDO 自転車サドル サドルクッション サドル 超肉厚 低反発クッション 衝撃吸収 お尻痛くない 防塵/防水カバー付き ロードバイク/クロスバイク/マウンテンバイク用 ブラック バイク/自転車 ダイヤルロック式ワイヤーロック 都内は盗難被害が多いと聞くので、頑丈なワイヤーロックを購入必須です！\nAmazon バイク ダイヤルロック ワイヤーロック 自転車ロック 長1200mm 横断面直径12mm 5桁 防盗 (001) バイク/自転車 スマホ(iPhone)ホルダー 自転車も自動車同様ながら運転は非常に危険なので、ハンドルに固定出来るスマホホルダーも購入です\nAmazon Tiakia 自転車 スマホ ホルダー スタンド オートバイ バイク スマートフォン振れ止め 脱落防止 GPSナビ 携帯 固定用 に適用 ロードバイク クロス バイク すまほ ホルダー サイクリング バイク用 スマホ固定 に適用 iPhone 11 11Pro Max X XS Max 8 7 6S 6plus プロ マックス 10 galaxy s8 s9 HUWEI Mate P20 Pro P10 lite Sony Xperia Nexus android 3.5-6.4インチ 多機種対応 角度調整 360度回転 脱着簡単 強力な保護 自転車カバー 勝手なイメージですが、電動自転車は雨風に弱そうなので忘れずに購入しましょう！\nAmazon Yeedoop®自転車カバー 子供乗せ 自転車カバー前後子供乗せ対応 サイクルカバー 風飛び防止 防水 防塵 耐熱 鍵穴盗難防止 厚手 210D 撥水加工 UVカット 29インチまで対応 収納袋付き (ブラック) 自転車用AZチェーンオイル 錆びる前に手入れをしておく事が自転車を長持ちさせる秘訣なので、コチラも最初に購入することをオススメします。\nAmazon 自転車用AZﾁｪｰﾝﾙﾌﾞ ｸﾘｰﾝ110ml （チェーンオイル ・ チェーン潤滑剤 ・ チェーン 油) AZ（エーゼット） 三面ブラシ オイルを満遍なくチェーンに濡れるように専用のブラシもお買い上げをオススメします♪\nAmazon AZ（エーゼット） 三面ブラシ ブラシ幅2㎜ 自転車チェーンの洗浄に最適 KD059 開封の儀 外装 自転車はこんな感じで配送されてきます。\n今回は組立済みではなく簡易組立が必要な物を購入したので、折り畳まれた状態で配送されてきましたが場合によっては完成品が届くのかもしれませんね。\n[adsense-responsive]\r電動チャリということもあり、小型ですがかなりの重さがあるので腰をイワさないように気をつけてくださいね！笑\nそれでは、中身を見ていきましょう！\nパカっ。\n梱包物 内容物 中身は以下の通りです。\n内容物\r自転車本体\r納品書・取扱説明書\rキー(スペア含む)\r充電器\r自転車は折り畳まれた状態で丁寧に梱包されています。\n紐で固定されていたり、衝撃吸収材で守られているのでカッター等があったほうが組立しやすいですね。\nキーはスペア含めて3本入っています。\n無くさないようにしましょう！\n納品書は自転車の防犯登録をする際に必要なので、コチラも無くさないように大切に保管しておきましょう！\n組立方法 では、実際に組み立ててみましょう！\n基本的には説明書を見れば簡単に組み立てれます。\nまずは本体を組み立てていきましょう。\n二つ折りにされている部分を開き、固定レバーをロックしましょう。\nたったこれだけでOKです。\nそこまで硬くもないので、女性や子供でも問題なく組み立てることが出来ると思います。\n折りたたむときはロックを外す事で折りたたむことが可能です。\n[adsense-responsive]\r次にハンドル部分が折り畳まれているので、コチラを立ち上げて固定ロックをかけましょう。\nこれで固定完了です！\nはい完成！\n折りたたむと約半分になります。\nその他細部 ハンドルはまっすぐなフラットで左に電動操作パネル、左に鈴とギア変速機があります。\nエコ/ノーマル/パワーの3段階のアシスト強度の切り替えや残電池の確認が出来ます。\nまた、前輪にはLEDライトがついており、電動操作パネルからON/OFFの操作が可能です。\nカゴも大きめです。\n後輪にはリアキャリア取り付け用のパーツがあります。\n標準ロックと泥除けももちろん完備です。\nサイドスタンドも一応取り換え可能そうですが、ボルトのサイズによってハマらないものもあるので、予めサイズ等を確認してから購入したほうが良さそうですね！\n充電方法と取り外し方法 バッテリーは鍵を使って取り外しが可能です。\nバッテリーにも残量を確認するボタンがついており、押すことで表示がされます。\n充電器は一般的なACアダプタータイプですね。\nバッテリーのコチラに接続する事で充電が始まります。\n終わりに このクオリティの電動自転車がAmazonで7万ちょいで買えることに最初ビックリしました！\n自転車があるのとないとで一気に行動範囲や外出しやすさが変わるので、もし自転車をお持ちでない方は是非購入を検討してみてはいかがでしょうか♪\n","date":"2020-11-01T14:36:41+09:00","image":"/wp-content/uploads/2020/11/peltechTdn206ReviewEye.jpg","permalink":"/2020/11/01/11047/","title":"【コスパ最強の電動自転車】Amazonで人気No.1の「PELTECH 電動アシスト自転車 TDN-206」を購入したのでレビューしていくよ【ポケモンGo/ドラクエウォークに最適】"},{"content":"PCデスク上をスッキリさせたい PC周りは小物やアイテムが増えがち PCデスクで仕事やゲーム、その他作業をしていると思っていう以上に物が増えてデスク上のスペースを圧迫してしまいますよね。\n筆者の場合はメインPC(Windows)とサブPC(Mac)を開きながら仕事をしたりゲームをしたりするので、なおさらです。orz\nBauhutteのアクセサリ収納ツールが便利過ぎた そこで今回は、Bauhutteから発売されているPCデスク周りの小物をスッキリ収納・おまとめをしてくれるアクセサリを複数買ってみましたのでご紹介しようと思います\nコントローラースタンド ヘッドホンハンガー BHP-S100 まずはこちら。\nAmazon Bauhutte (バウヒュッテ) コントローラースタンド ヘッドホンハンガー BHP-S100 ブラック 幅20×奥行き13×高さ28.4cm こちらはPCデスクのサイド部分にかけることでゲーム用のコントローラーやヘッドセットなどを収納する事が可能になるアイテムです。\nもちろん、他のものを収納する事も出来るので用途は様々です♪\n拡張有孔ボード ケーブルオーガナイザー BHP-C500-BK お次はこちら！\nAmazon Bauhutte（バウヒュッテ） ケーブルオーガナイザー BHP-C500-BK こちらは、PCデスクの天板に固定する事で様々なアイテムを収納・おまとめを可能にしてくれる拡張有孔ボードです！\nこちらも幅広く利用する事が出来るので、PCデスク上だけでなくPC周り全体をスッキリする事が可能になります♪\nオススメPC周り商品 PCデスク Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅120cm×奥行55cm) BHD-1200M Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅100cm×奥行60cm) BHD-1000M 関連記事 【ゲーミングPCデスク】Bauhutteの「昇降式式PCデスク」が快適過ぎた【PC作業向け】 2019/05/08 2964文字 約6分で読めます Amazon Bauhutte（バウヒュッテ） 昇降式L字デスク ラージ 木目 幅39×奥行き82㎝ BHD-820H-WD 関連記事 【Bauhutte】開封作業の撮影スペースとしても使えるPC用昇降式L字デスクが使い勝手が良すぎた【PC環境】 2020/02/26 1648文字 約4分で読めます Amazon Bauhutte(バウヒュッテ) ゲーム機収納ラック スライダー式 ブラック BHS-380G-BK 39.5×37×61.5cm Amazon Bauhutte（バウヒュッテ） ケーブルオーガナイザー BHP-C500-BK デスクマット Amazon Bauhutte (バウヒュッテ) デスクごとチェアマット BCM-160BK ブラック 特大サイズ160×130cm 厚さ1.5mm BCM-160BK 関連記事 【PC環境を整えよう】Bauhutteの「デスクごとチェアマット」を購入してみたので紹介してみる【ゲーミングPC/ゲーミングチェア】 2019/03/28 1778文字 約4分で読めます マイク付きヘッドセット Amazon Logicool G ゲーミングヘッドセット ワイヤレス 無線 G533 ブラック Dolby 7.1ch ノイズキャンセリング マイク 付き PC 軽量 国内正規品 2年間メーカー保証 キーボード Amazon Logicool ロジクール G PRO テンキーレス ゲーミング キーボード G-PKB-001ブラック メカニカル Romer-G RGB 着脱式ケーブル プロ仕様 PUBG JAPAN SERIES 2019 推奨モデル 国内正規品 2年間メーカー保証 PCモニター Amazon BenQ ゲーミングモニター ディスプレイ ZOWIE XL2411P 24インチ/フルHD/HDMI,DP,DVI端子/144Hz/1ms/ブルーライト軽減 ゲーミングチェア Amazon AKRACING ゲーミングチェア WOLF-GREY 灰 関連記事 【快適なPC作業を求め】ゲーミングチェア初心者にオススメな「AKRACING ゲーミングチェア WOLF-GREY」を購入したら大正解だった【ゲーミングPC】 2019/03/23 1937文字 約4分で読めます Amazon Bauhutte (バウヒュッテ) ゲル\u0026amp;低反発 ずっと座りたいクッション BC-80G-BK 関連記事 【デスクワーク/テレワーク/在宅】PCゲーマーにもオススメの長時間座ってもお尻が痛くならないクッションを買ったので開封レビューしてみた【快適空間】 2020/10/17 1637文字 約4分で読めます マウス Amazon Logicool ロジクール G502 HERO ゲーミングマウス G502RGBh 【2年間保証付き】 ゲームパッド Amazon ワイヤレスコントローラー (DUALSHOCK 4) マグマ・レッド (CUH-ZCT2J11) 便利小物 Amazon サーモス 真空断熱タンブラー 420ml ステンレス JDE-420 Amazon サーモス 真空断熱タンブラー用フタ (S) ブラック JDA Lid(S) BK Amazon サーモス 真空断熱タンブラー用ソコカバー (S) ブラック JDABottomCover(S) BK Amazon F-KING 飲料 カップ ホルダー クリップ、デスク カップ ホルダー、テーブル エッジ クランプ カップ ホルダー、水 ガラス、コーヒー マグ、飲料、携帯電話。ベスト オフィス アクセサリー。 ブラック Amazon ステンレス氷 アイスキューブ 溶けない氷 ウイスキーロック ワインクーラー ステンレス氷 永久氷 ［8個セット 専用保存箱付き］ 関連記事 【作業効率アップ】タンブラーとドリンクホルダーを使って快適なPCデスク環境を整えてみた【居心地最強】 2020/07/11 2772文字 約6分で読めます 開封の儀 拡張有孔ボード ケーブルオーガナイザー ダンボール ケーブルオーガナイザーはこちらのダンボールに入って配送されてきました。\nダンボールはでかめですが、そこまで重くはありません。\n早速開けていきましょう！\nパカっ。\n内包物 ダンボールの中には以下のものが含まれていました。\n梱包物\rケーブルオーガナイザー本体\r取扱説明書\rアンケート用紙\r取り付け具及びバスケット\rそれではそれぞれを細かくみていきましょう！\n取扱説明書 取扱説明書は例の如く日本語でとても分かりやすく書かれています。\n取り付け具及びバスケット 取り付け具及びバスケットは小さいダンボールにまとめられています。\nパカっ\n中身は以下の通り。\n梱包物\rバスケット x 4個\rフック x 3個\rパンチングパネル x 2個\rボルト類(工具込み)\rバスケットはこんな感じです。\n[adsense-responsive]\r表にはBauhutteのプレート。\n美しい・・・！\n背面にフックがあるので、好きな場所に固定する事が出来ます♪\nフックはこんな感じです。\nこちらも同様に背面にフックがあります。\nパンチングパネルはこんな感じ。\nボルトを締めて天板を挟み込む形で好きな場所に固定する事が出来ます。\nケーブルオーガナイザー本体 こちらはケーブルオーガナイザー本体です。\nボルト類には取り付けるための工具(簡易レンチとL字六角)もあるので、ドライバーいらずで設置出来るのも良いところです♪\nコントローラースタンド ヘッドホンハンガー 梱包 こちらはAmazon公式ダンボールの中に以下のような形で梱包されていました。\n中身もとてもシンプルです！\n付属物 中身は以下の通りです。\n付属物\rホルダー本体\r取扱説明書\rアンケート\rこちらのホルダーは組み立て等は不要です。\nホルダー自体はこんな感じです。\nこちらもBauhutteのプレートがキラリ☆\n背面のフック部分で引っ掛けるだけなので、使い勝手はとても良いです！\n実際の使用感 拡張有孔ボード ケーブルオーガナイザー 組み立て 組み立てもとても簡単です。\n[adsense-responsive]\rケーブルオーガナイザーとパンチングパネルをお好きなところでボルトで固定します。\n取り付け あとはお好きなところに固定するだけです♪\n天板部分の内側に収まるので、壁際でもはみ出る事なく取り付けれるのがポイントです！\nたこ足配線ハブもピッタリ収まるこのサイズ！\n最高です。\nPS4のコントローラーもジャストフィット！\nヘッドセットもフックに引っ掛ける事が出来ます♪\nまた、反対側にもフックやバスケットを取り付ける事が出来るので、かなり省スペースを実現する事が出来ます！\nこのようにノートバソコンも収納出来てしまう神アイテムだったとは・・・！\nBauhutte様最高！\nコントローラースタンド ヘッドホンハンガー お次はホルダーを取り付けてみましょう！\nこちらはBauhutteのPCデスクの脚部分の2箇所に引っ掛けれる事が出来ます。\nこちらも同じようにコントローラーやヘッドセットを無駄なく収納する事が出来ます♪\n終わりに 以上のようにBauhutteシリーズのPCデスクを使っている人も使っていない人も買うべきPCデスク周辺アクセサリでした！\n間違いなくデスク周りがスッキルするので、気になる方は是非購入してみてください♪\n","date":"2020-10-19T16:49:06+09:00","image":"/wp-content/uploads/2020/10/bauhutteDeskAccessoriesHolderEye.jpg","permalink":"/2020/10/19/10990/","title":"【有能省スペース収納】PCデスク周りのアクセサリを無駄無く整理可能なBauhutteサイドラックを開封レビュー【テレワークにもオススメ】"},{"content":"お尻が疲れない神クッション 座り疲れを解消したい 長時間、PC作業などをする方の中には座りっぱなしでお尻が痛くなる方がいると思います。\n筆者も開発やらゲームやらで1日の半分以上ゲーミングチェアに座っているので、座り疲れがよく発生しますorz\nゲル\u0026amp;低反発 ずっと座りたいクッション そこで、今回はBauhutteの低反発クッションを購入したのでご紹介しようと思います♪\nAmazon Bauhutte (バウヒュッテ) ゲル\u0026amp;低反発 ずっと座りたいクッション BC-80G-BK オススメPC周り商品 PCデスク Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅120cm×奥行55cm) BHD-1200M Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅100cm×奥行60cm) BHD-1000M 関連記事 【ゲーミングPCデスク】Bauhutteの「昇降式式PCデスク」が快適過ぎた【PC作業向け】 2019/05/08 2964文字 約6分で読めます Amazon Bauhutte（バウヒュッテ） 昇降式L字デスク ラージ 木目 幅39×奥行き82㎝ BHD-820H-WD 関連記事 【Bauhutte】開封作業の撮影スペースとしても使えるPC用昇降式L字デスクが使い勝手が良すぎた【PC環境】 2020/02/26 1648文字 約4分で読めます Amazon Bauhutte(バウヒュッテ) ゲーム機収納ラック スライダー式 ブラック BHS-380G-BK 39.5×37×61.5cm Amazon Bauhutte (バウヒュッテ) コントローラースタンド ヘッドホンハンガー BHP-S100 ブラック 幅20×奥行き13×高さ 関連記事 【有能省スペース収納】PCデスク周りのアクセサリを無駄無く整理可能なBauhutteサイドラックを開封レビュー【テレワークにもオススメ】 2020/10/19 3249文字 約7分で読めます デスクマット Amazon Bauhutte (バウヒュッテ) デスクごとチェアマット BCM-160BK ブラック 特大サイズ160×130cm 厚さ1.5mm BCM-160BK 関連記事 【PC環境を整えよう】Bauhutteの「デスクごとチェアマット」を購入してみたので紹介してみる【ゲーミングPC/ゲーミングチェア】 2019/03/28 1778文字 約4分で読めます マイク付きヘッドセット Amazon Logicool G ゲーミングヘッドセット ワイヤレス 無線 G533 ブラック Dolby 7.1ch ノイズキャンセリング マイク 付き PC 軽量 国内正規品 2年間メーカー保証 キーボード Amazon Logicool ロジクール G PRO テンキーレス ゲーミング キーボード G-PKB-001ブラック メカニカル Romer-G RGB 着脱式ケーブル プロ仕様 PUBG JAPAN SERIES 2019 推奨モデル 国内正規品 2年間メーカー保証 PCモニター Amazon BenQ ゲーミングモニター ディスプレイ ZOWIE XL2411P 24インチ/フルHD/HDMI,DP,DVI端子/144Hz/1ms/ブルーライト軽減 ゲーミングチェア Amazon AKRACING ゲーミングチェア WOLF-GREY 灰 関連記事 【快適なPC作業を求め】ゲーミングチェア初心者にオススメな「AKRACING ゲーミングチェア WOLF-GREY」を購入したら大正解だった【ゲーミングPC】 2019/03/23 1937文字 約4分で読めます マウス Amazon Logicool ロジクール G502 HERO ゲーミングマウス G502RGBh 【2年間保証付き】 ゲームパッド Amazon ワイヤレスコントローラー (DUALSHOCK 4) マグマ・レッド (CUH-ZCT2J11) 開封の儀 外装箱 クッションはこちらのダンボールにて配送されてきました。\n裏はまっさら。\nでは、早速開けていきましょう！\nパカッ。\n梱包物 クッションはビニールに包まれています。\nペリッ。\n中には以下が入っています。\n梱包物\r低反発クッション\r取扱説明書\rキャンペーン用紙\rクッションの表面はこんな感じです。\n重さを分散させるデコボコの作りになっていて、ゲル層と低反発ウレタンフォーム層の二段構えになっています！\n裏面はこんな感じです。\n弾力がすごいです！\n厚さは7センチほどなので邪魔になりません♪\n[adsense-responsive]\rブランドロゴもバッチリ！\n紐で固定するためのリングがあるので、ズレ落ちないように固定する事が可能です。\nジャストフィット！\nAmazon AKRACING ゲーミングチェア WOLF-GREY 灰 関連記事 【またお前か】Macの日本語入力中に変換ボックスが表示されなくなった場合の対処法 2017/12/04 690文字 約2分で読めます 終わりに 以上のように座り心地抜群のクッションでした！\n車やソファーにも使えるので、気になる方はぜひ購入してみてください♪\n","date":"2020-10-17T19:32:35+09:00","image":"/wp-content/uploads/2020/10/bauhutteMatEye.jpg","permalink":"/2020/10/17/10965/","title":"【デスクワーク/テレワーク/在宅】PCゲーマーにもオススメの長時間座ってもお尻が痛くならないクッションを買ったので開封レビューしてみた【快適空間】"},{"content":"リモートワークにピッタリな収納アイテム 自宅にてPC作業をやる方にぴったり このご時世、自宅でのリモートワークやゲームを趣味にし始めた方は少なくないと思います。\nしかし、任天堂Switchやプレステ4、あるいはPCプリンターやハードディスクなど周辺機器が増え始めるとデスク周りが産卵しがちですよね。\nそんな時に、今回ご紹介するBauhutteのスライダー式収納ラックがオススメです！\nゲーム機収納ラック スライダー式(BHS-380G-BK) そこで、今回はBauhutteの「スライダー式ゲーム機収納ラック」を購入したのでご紹介しようと思います♪\nAmazon Bauhutte(バウヒュッテ) ゲーム機収納ラック スライダー式 ブラック BHS-380G-BK 39.5×37×61.5cm こちらの商品は、標準アクセサリとしてコントローラーラックも2セットついているので、フォートナイトやApexLegend、VALORANTなどのPCゲームをやっている方にもとてもオススメ出来ます♪\nオススメPC周り商品 PCデスク Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅120cm×奥行55cm) BHD-1200M Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅100cm×奥行60cm) BHD-1000M 関連記事 【ゲーミングPCデスク】Bauhutteの「昇降式式PCデスク」が快適過ぎた【PC作業向け】 2019/05/08 2964文字 約6分で読めます Amazon Bauhutte（バウヒュッテ） 昇降式L字デスク ラージ 木目 幅39×奥行き82㎝ BHD-820H-WD 関連記事 【Bauhutte】開封作業の撮影スペースとしても使えるPC用昇降式L字デスクが使い勝手が良すぎた【PC環境】 2020/02/26 1648文字 約4分で読めます Amazon Bauhutte (バウヒュッテ) コントローラースタンド ヘッドホンハンガー BHP-S100 ブラック 幅20×奥行き13×高さ 関連記事 【有能省スペース収納】PCデスク周りのアクセサリを無駄無く整理可能なBauhutteサイドラックを開封レビュー【テレワークにもオススメ】 2020/10/19 3249文字 約7分で読めます デスクマット Amazon Bauhutte (バウヒュッテ) デスクごとチェアマット BCM-160BK ブラック 特大サイズ160×130cm 厚さ1.5mm BCM-160BK 関連記事 【PC環境を整えよう】Bauhutteの「デスクごとチェアマット」を購入してみたので紹介してみる【ゲーミングPC/ゲーミングチェア】 2019/03/28 1778文字 約4分で読めます マイク付きヘッドセット Amazon Logicool G ゲーミングヘッドセット ワイヤレス 無線 G533 ブラック Dolby 7.1ch ノイズキャンセリング マイク 付き PC 軽量 国内正規品 2年間メーカー保証 キーボード Amazon Logicool ロジクール G PRO テンキーレス ゲーミング キーボード G-PKB-001ブラック メカニカル Romer-G RGB 着脱式ケーブル プロ仕様 PUBG JAPAN SERIES 2019 推奨モデル 国内正規品 2年間メーカー保証 PCモニター Amazon BenQ ゲーミングモニター ディスプレイ ZOWIE XL2411P 24インチ/フルHD/HDMI,DP,DVI端子/144Hz/1ms/ブルーライト軽減 ゲーミングチェア Amazon AKRACING ゲーミングチェア WOLF-GREY 灰 関連記事 【快適なPC作業を求め】ゲーミングチェア初心者にオススメな「AKRACING ゲーミングチェア WOLF-GREY」を購入したら大正解だった【ゲーミングPC】 2019/03/23 1937文字 約4分で読めます クッション Amazon Bauhutte (バウヒュッテ) ゲル\u0026amp;低反発 ずっと座りたいクッション BC-80G-BK 関連記事 【デスクワーク/テレワーク/在宅】PCゲーマーにもオススメの長時間座ってもお尻が痛くならないクッションを買ったので開封レビューしてみた【快適空間】 2020/10/17 1637文字 約4分で読めます マウス Amazon Logicool ロジクール G502 HERO ゲーミングマウス G502RGBh 【2年間保証付き】 ゲームパッド Amazon ワイヤレスコントローラー (DUALSHOCK 4) マグマ・レッド (CUH-ZCT2J11) 開封の儀 外装箱 スライダー式収納ラックはこちらのダンボールにて配送されてきました。\n箱は大きめですが、そこまで重くないので一人でも簡単に持ち運びが出来ます♪\n[adsense-responsive]\rでは、早速開けていきましょう！\nパカッ。\n梱包物 ラックはパーツ毎にビニールに包まれています。\n側板はこんな感じです。","date":"2020-10-12T20:14:49+09:00","image":"/wp-content/uploads/2020/10/bauhutteSliderEye.jpg","permalink":"/2020/10/12/10926/","title":"【Bauhutte】複数ゲームハード機やPC用品を収納出来るスライダー式ゲーム機収納ラックを購入してみたのでご紹介【デスクワーク/テレワーク/在宅】"},{"content":"ユニットテストでモック化してみよう ユニットテストはなるべく書こう 開発を行う上でユニットテストはとても大切です。\n実装と並行してユニットテストを組んでおけば、簡単なテストの自動化や保守性・潜在的バグを洗い出せるので出来る限りやっておきたいですね。\n今回はユニットテストを行う際に一部のクラスをモック化するためのライブラリ「Mockito」を使ってみようと思います！\nモックとは？ モックという言葉を初めて聞く方もいるかもしれません。\nモックとは、クラスの動作を意図的に設定し、擬似的シミュレートするためのオブジェクトの事を指します。\n例えば、Service層とRepository層がある場合、Repository層のユニットテストでは実際にDBにアクセスして動作確認を行うテストを記述しますが、Service層のユニットテストを記述する際は、Repositoryクラスの動きはRepository層のユニットテストで担保している前提で行うことが多いので、実際にDBや外部システムへのリクエストは行いたくない場合があると思います。\nその際にRepositoryクラスをモック化する事で、実際にはDBや外部システムへのリクエストは発生していないがService層からすると実際にデータを取得出来るので問題なくService層のテストを行うことが可能です。\nJava製の定番ライブラリ「Mockito」 今回はJunitを使う際にお馴染みのMockitoを使って簡単なモック化の動きについてご紹介しようと思います♪\nTasty mocking framework for unit tests in JavaMockito framework site\n使い方 準備 前提 今回は以下の環境で動かします。\n環境\rGradle 5.6.4\rOpenJDK 11.0.2\rLombok 1.18.12\rJunit 4.12\rMockito 2.28.2\r使用クラス Model層 src/main/java/sample/model/PersonModel.java package sample.model; import lombok.Builder; import lombok.Data; @Data @Builder public class PersonModel { public static final String NAME_PREFIX = \u0026#34;Mr.\u0026#34;; private Integer id; private String name; private Integer age; } Repository層 src/main/java/sample/repository/PersonRepository.java package sample.repository; import java.util.Optional; import sample.model.PersonModel; public class PersonRepository { public Optional\u0026lt;PersonModel\u0026gt; findBy(Integer id) { // DBアクセスや外部APIアクセスetc... // 今回は暫定的にダミーデータを生成 return Optional.ofNullable(PersonModel.builder().id(id).name(String.format(\u0026#34;%s%s\u0026#34;, PersonModel.NAME_PREFIX, id)) .age(id * 10).build()); } } Service層 src/main/javasample/service/PersonService/java package sample.service; import sample.model.PersonModel; import sample.repository.PersonRepository; public class PersonService { private PersonRepository repository;// 本来はAutoWiredやInjectionをするのが正しいが今回は割愛 public PersonService(PersonRepository repository) { this.repository = repository; } public PersonModel findBy(Integer id) { return repository.findBy(id).orElseThrow(() -\u0026gt; new InternalError()); } } Gradleに依存関係の追加 まずは今回使用するライブラリをbuild.gradleに追記しましょう。\n[adsense-responsive]\rbuild.gradle ... (略) ... repositories { jcenter() } dependencies { // https://mvnrepository.com/artifact/org.projectlombok/lombok compileOnly group: \u0026#39;org.projectlombok\u0026#39;, name: \u0026#39;lombok\u0026#39;, version: \u0026#39;1.18.12\u0026#39; annotationProcessor group: \u0026#39;org.projectlombok\u0026#39;, name: \u0026#39;lombok\u0026#39;, version: \u0026#39;1.18.12\u0026#39; // This dependency is used by the application. implementation \u0026#39;com.google.guava:guava:28.0-jre\u0026#39; // Use JUnit test framework testImplementation \u0026#39;junit:junit:4.12\u0026#39; // Use Mockit testImplementation \u0026#34;org.mockito:mockito-core:2.+\u0026#34; } ... (略) ... whenメソッドによるMock作成用のHelperクラスの用意 Mockオブジェクトを生成する方法はstaticメソッドによる生成とアノテーションによる生成の2種類あります。\nまずは前者の方法による生成のためのヘルパークラスを用意しました。\nsrc/test/java/sample/mock/PersonRepositoryMockHelper.java package sample.mock; import static org.mockito.ArgumentMatchers.any; import static org.mockito.Mockito.doReturn; import static org.mockito.Mockito.mock; import static org.mockito.Mockito.spy; import static org.mockito.Mockito.when; import java.util.Optional; import sample.model.PersonModel; import sample.repository.PersonRepository; public class PersonRepositoryMockHelper { public static MockBuilder mockBuilder() { return new MockBuilder(); } public static SpyBuilder spyBuilder() { return new SpyBuilder(); } public static class MockBuilder { private PersonRepository target = mock(PersonRepository.class); public PersonRepository build() { return target; } public MockBuilder findBy(Optional\u0026lt;PersonModel\u0026gt; data) { when(target.findBy(any())).thenReturn(data); return this; } } public static class SpyBuilder { private PersonRepository target = spy(PersonRepository.class); public PersonRepository build() { return target; } public SpyBuilder findBy(Optional\u0026lt;PersonModel\u0026gt; data) { // when(target.findBy(any())).thenReturn(data); これだとエラーになる doReturn(data).when(target).findBy(any()); return this; } } } このクラスは本質的な部分ではない為簡易的に作っているので、よしなに各自カスタマイズしてください！\nService層のテスト mock化しない では、まずはRepository層のfindByメソッドをmock化せずにそのままテストしてみましょう。\nsrc/test/java/sample/service/PersonServiceTest.java package sample.service; import static org.junit.Assert.assertThat; import java.util.Optional; import static org.hamcrest.Matcher.*; import static org.hamcrest.MatcherAssert.*; import static org.hamcrest.core.Is.*; import static org.hamcrest.core.IsNot.*; import org.junit.Test; import sample.mock.PersonRepositoryMockHelper; import sample.model.PersonModel; import sample.repository.PersonRepository; public class PersonServiceTest { private PersonService target; @Test public void そのまま() { // SetUp this.target = new PersonService(new PersonRepository()); // 本来はAutoWiredやInjectionをするのが正しいが今回は割愛 // When Integer ID = 12345; PersonModel expected = this.target.findBy(ID); // Than assertThat(expected.getId(), is(ID)); assertThat(expected.getName(), is(String.format(\u0026#34;%s%s\u0026#34;, PersonModel.NAME_PREFIX, ID))); assertThat(expected.getAge(), is(ID * 10)); } } こちらは問題なく動いています。\nMock化 では、まずはRepository層のfindByメソッドをmock化してみましょう。\na package sample.service; import static org.junit.Assert.assertThat; import java.util.Optional; import static org.hamcrest.Matcher.*; import static org.hamcrest.MatcherAssert.*; import static org.hamcrest.core.Is.*; import static org.hamcrest.core.IsNot.*; import org.junit.Test; import sample.mock.PersonRepositoryMockHelper; import sample.model.PersonModel; import sample.repository.PersonRepository; public class PersonServiceTest { private PersonService target; @Test public void mock化() { // SetUp Integer ID = 12345; String NAME = \u0026#34;Ms.\u0026#34; + ID; Integer AGE = ID * 100; PersonModel PERSON = PersonModel.builder().id(ID).name(NAME).age(AGE).build(); this.target = new PersonService(PersonRepositoryMockHelper.mockBuilder().findBy(Optional.of(PERSON)).build()); // findByメソッドをモック化し戻り値を明示的セット // When PersonModel expected = this.target.findBy(ID); // Than assertThat(expected.getId(), is(ID)); assertThat(expected.getName(), is(not(String.format(\u0026#34;%s%s\u0026#34;, PersonModel.NAME_PREFIX, ID)))); assertThat(expected.getAge(), is(not(ID * 10))); } } このようにfindByメソッドを呼び出した際の戻り値を呼び出し側でセット可能なので、実際に定義されたPersonRepositoryのfindByメソッドは呼ばれないのでDBアクセスや外部APIアクセスを無効化した上でServiceクラスを動かす事が出来ます。\nテストも正常に行えていますね♪\nmock化した際には戻り値をセットする必要がある 対象クラスをmock化すると、全ての実装済メソッドが内部ロジックを持たないインターフェースのようなメソッドに置き換わっているため、実行時に期待通りの動きをしてくれません。\nsrc/test/java/sample/service/PersonServiceTest.java package sample.service; import static org.junit.Assert.assertThat; import java.util.Optional; import static org.hamcrest.Matcher.*; import static org.hamcrest.MatcherAssert.*; import static org.hamcrest.core.Is.*; import static org.hamcrest.core.IsNot.*; import org.junit.Test; import sample.mock.PersonRepositoryMockHelper; import sample.model.PersonModel; import sample.repository.PersonRepository; public class PersonServiceTest { private PersonService target; @Test public void mock化_未指定() { // SetUp Integer ID = 12345; String NAME = \u0026#34;Ms.\u0026#34; + ID; Integer AGE = ID * 100; PersonModel PERSON = PersonModel.builder().id(ID).name(NAME).age(AGE).build(); this.target = new PersonService(PersonRepositoryMockHelper.mockBuilder().build());// mock化したのに戻り値を指定しない場合は実行時にnullなりnullableな値が返ってくるので注意 } } なので、呼び出すメソッドの戻り値を明示的に指定する必要がある点を気をつけましょう。\nSpy化 MockitoにはMock化のほかにSpyという機能もあります。\nSpyとは、対象クラスの実装メソッドをそのままにしながら、任意のメソッドのみをMock化することが出来ます。\n一部のメソッドはそのままのロジックで動かしつつ一部のメソッドのみ制御したい場合にSpyを使う感じですね。\nsrc/test/java/sample/service/PersonServiceTest.java package sample.service; import static org.junit.Assert.assertThat; import java.util.Optional; import static org.hamcrest.Matcher.*; import static org.hamcrest.MatcherAssert.*; import static org.hamcrest.core.Is.*; import static org.hamcrest.core.IsNot.*; import org.junit.Test; import sample.mock.PersonRepositoryMockHelper; import sample.model.PersonModel; import sample.repository.PersonRepository; public class PersonServiceTest { private PersonService target; @Test public void spy化_未指定() { // SetUp Integer ID = 12345; String NAME = \u0026#34;Ms.\u0026#34; + ID; Integer AGE = ID * 100; PersonModel PERSON = PersonModel.builder().id(ID).name(NAME).age(AGE).build(); this.target = new PersonService(PersonRepositoryMockHelper.spyBuilder().build()); // Mockと違い、戻り値を指定しない場合は実装済みのロジックが動く // When PersonModel expected = this.target.findBy(ID); // Than assertThat(expected.getId(), is(ID)); assertThat(expected.getName(), is(String.format(\u0026#34;%s%s\u0026#34;, PersonModel.NAME_PREFIX, ID))); assertThat(expected.getAge(), is(ID * 10)); } @Test public void spy化() { // SetUp Integer ID = 12345; String NAME = \u0026#34;Ms.\u0026#34; + ID; Integer AGE = ID * 100; PersonModel PERSON = PersonModel.builder().id(ID).name(NAME).age(AGE).build(); this.target = new PersonService(PersonRepositoryMockHelper.spyBuilder().findBy(Optional.of(PERSON)).build());// 戻り値を指定した場合は実装済みのロジックが動かずに指定した値を返す // When PersonModel expected = this.target.findBy(ID); // Than assertThat(expected.getId(), is(ID)); assertThat(expected.getName(), is(not(String.format(\u0026#34;%s%s\u0026#34;, PersonModel.NAME_PREFIX, ID)))); assertThat(expected.getAge(), is(not(ID * 10))); } } Spyも正常に動きましたね♪\nアノテーションによる生成方法 次にアノテーションを使ったMockオブジェクト及びSpyオブジェクトの生成方法を試してみましょう。\nMockの生成 [adsense-responsive]\rsrc/test/java/sample/service/PersonServiceTest.java package sample.service; import static org.junit.Assert.assertThat; import static org.mockito.ArgumentMatchers.any; import static org.mockito.Mockito.when; import java.util.Optional; import static org.hamcrest.Matcher.*; import static org.hamcrest.MatcherAssert.*; import static org.hamcrest.core.Is.*; import static org.hamcrest.core.IsNot.*; import org.junit.Before; import org.junit.Test; import org.mockito.Mock; import org.mockito.MockitoAnnotations; import sample.mock.PersonRepositoryMockHelper; import sample.model.PersonModel; import sample.repository.PersonRepository; public class PersonServiceTestWithAnnotaion { private PersonService target; @Mock PersonRepository mockRepository; // Mockとして使うオブジェクトを明示(この時点では何もMock化されていない) @Before public void initMocks() { MockitoAnnotations.initMocks(this);// @Mockが付与されたクラスをMock化する(この時点ではメソッドのStub化はされていない) } @Test public void mock化() { // SetUp Integer ID = 12345; String NAME = \u0026#34;Ms.\u0026#34; + ID; Integer AGE = ID * 100; PersonModel PERSON = PersonModel.builder().id(ID).name(NAME).age(AGE).build(); this.target = new PersonService(mockRepository); when(mockRepository.findBy(any())).thenReturn(Optional.of(PERSON));// ここでセットアップ // When PersonModel expected = this.target.findBy(ID); // Than assertThat(expected.getId(), is(ID)); assertThat(expected.getName(), is(not(String.format(\u0026#34;%s%s\u0026#34;, PersonModel.NAME_PREFIX, ID)))); assertThat(expected.getAge(), is(not(ID * 10))); } } アノテーションで実装した方がスッキリかつTestケース内でStubの内容がはっきり分かるので良いかもしれませんね！\nMockの生成 src/test/java/sample/service/PersonServiceTest.java package sample.service; import static org.junit.Assert.assertThat; import static org.mockito.ArgumentMatchers.any; import static org.mockito.Mockito.doReturn; import static org.mockito.Mockito.when; import java.util.Optional; import static org.hamcrest.Matcher.*; import static org.hamcrest.MatcherAssert.*; import static org.hamcrest.core.Is.*; import static org.hamcrest.core.IsNot.*; import org.junit.Before; import org.junit.Test; import org.mockito.Mock; import org.mockito.MockitoAnnotations; import org.mockito.Spy; import sample.mock.PersonRepositoryMockHelper; import sample.model.PersonModel; import sample.repository.PersonRepository; public class PersonServiceTestWithAnnotaion { private PersonService target; // @Mock PersonRepository mockRepository; // Mockとして使うオブジェクトを明示(この時点では何もMock化されていない) @Spy PersonRepository spyRepository; @Before public void initMocks() { MockitoAnnotations.initMocks(this);// @Mockが付与されたクラスをMock化する(この時点ではメソッドのStub化はされていない) } // @Test public void mock化() { // SetUp Integer ID = 12345; String NAME = \u0026#34;Ms.\u0026#34; + ID; Integer AGE = ID * 100; PersonModel PERSON = PersonModel.builder().id(ID).name(NAME).age(AGE).build(); this.target = new PersonService(mockRepository); when(mockRepository.findBy(any())).thenReturn(Optional.of(PERSON));// ここでセットアップ // When PersonModel expected = this.target.findBy(ID); // Than assertThat(expected.getId(), is(ID)); assertThat(expected.getName(), is(not(String.format(\u0026#34;%s%s\u0026#34;, PersonModel.NAME_PREFIX, ID)))); assertThat(expected.getAge(), is(not(ID * 10))); } @Test public void spy化_そのまま() { // SetUp Integer ID = 12345; this.target = new PersonService(spyRepository); // When PersonModel expected = this.target.findBy(ID); // Than assertThat(expected.getId(), is(ID)); assertThat(expected.getName(), is(String.format(\u0026#34;%s%s\u0026#34;, PersonModel.NAME_PREFIX, ID))); assertThat(expected.getAge(), is(ID * 10)); } @Test public void spy化() { // SetUp Integer ID = 12345; String NAME = \u0026#34;Ms.\u0026#34; + ID; Integer AGE = ID * 100; PersonModel PERSON = PersonModel.builder().id(ID).name(NAME).age(AGE).build(); this.target = new PersonService(spyRepository); doReturn(Optional.of(PERSON)).when(spyRepository).findBy(any()); // When PersonModel expected = this.target.findBy(ID); // Than assertThat(expected.getId(), is(ID)); assertThat(expected.getName(), is(not(String.format(\u0026#34;%s%s\u0026#34;, PersonModel.NAME_PREFIX, ID)))); assertThat(expected.getAge(), is(not(ID * 10))); } } Spyも同様に簡単に生成出来ましたね♪\n終わりに 以上のようにレイヤー単位でのユニットテストを実装するのであれば、必ず必要となってくるMock化をご紹介しました。\nJUnitでモック化するのであれば、覚えていて損はないライブラリなので、皆さんもぜひ試してみてください♪\n","date":"2020-08-21T17:57:08+09:00","image":"/wp-content/uploads/2020/08/useMockitoEye.png","permalink":"/2020/08/21/10904/","title":"【JUnit】Java製のユニットテスト向けフレームワーク「Mockito」でMockとSpyを使いこなそう【簡単スタブ化】"},{"content":"CompletionStage\u0026lt;String\u0026gt;の作り方 Stubの生成やJUnitのケース作成をしている際に、CompletionStage\u0026lt;Void\u0026gt;型の戻り値を生成したいケースがあります。\nしかし、CompletionStage\u0026lt;String\u0026gt;などであれば簡単に記述する事が出来ますが、CompletionStage\u0026lt;Void\u0026gt;のVoidをどうすれば良いのか、やり方を知らない方ではパッと正解を出すことは難しいと思いまうs。\n今回は、CompletionStage\u0026lt;Void\u0026gt;を簡単に生成する方法をご紹介しようと思います♪\nやり方 CompletableFuture#allOf 一番簡単でスッキリした記述はCompletableFuture#allOfメソッドを使う方法です。\n[adsense-responsive]\rCompletableFuture#allOf CompletableFuture\u0026lt;Void\u0026gt; cf = CompletableFuture.allOf(); CompletableFuture#completedFuture 他にもCompletableFuture#completedFutureメソッドを使う事でも可能です。\nCompletableFuture#allOf CompletableFuture\u0026lt;Void\u0026gt; cf = CompletableFuture.completedFuture(null); ただ、ソースコード上にnullが登場してしまうのであまりオススメはしません。\n特に問題がないのであれば前者を使う事をオススメします。\n終わりに 以上の様にやり方さえ知っていれば、簡単に生成する事が出来ます。\nJavaでの非同期処理を実装する上では覚えていて損はないので、是非試してみてください♪\n","date":"2020-08-17T13:12:40+09:00","image":"/wp-content/uploads/2020/08/CompletableFutureVoideEye.png","permalink":"/2020/08/17/10897/","title":"【Java8】CompletionStage\u003cVoid\u003eを意図的に生成する方法【非同期処理】"},{"content":"何も変えてないのに急に商品リンクが無限ロードになった 過去に表示されていたWordpress記事もダメになっているorz 先日、Wordpressの新しい記事を入稿し、プレビュー画面を開いたところAmazonJSを使って追加している商品リンクが無限ロードになり、画像が表示されなくなってしまいました。\nAmazonJSプラグイン自体もPA-API v5対応のために最新版の0.10にアップデートしており、最近は特に変更をした覚えはありません。\n試しに過去に表示出来ていた記事を見てみましたが、Wordpress側の記事は表示出来ていたものが無限ロードになっていました。orz\n※StaticPressで吐き出した記事については大丈夫でした。\n原因はnullの要素が配列に追加されている 開発者ツールを使ってデバッグしてみると、amazonjs.js内の279行目のitems[i].ASINにてぬるポエラーが発生している様でした！\nなぜitems配列の中にnullが含まれる様になってしまったのかはわかりませんが、取り急ぎ原因は分かったのでプラグインを修正して解決してみようと思います！\n直し方 注意 Wordpressのプラグインの修正はサイト全体が動かなくなる可能性があります。\nあくまでも自己責任でお願いします。\namazonjs.jsの179行目にnull判定を追加 直し方はとても簡単です。\namazonjs.jsの279行目に以下の様に配列要素のnull判定を追加するだけです。\namazonjs.js ... (略) ... // 267行目辺り function find(asin, countryCode) { for (var i = 0, length = items.length; i \u0026lt; length; i++) { if(items[i] == null){ // 追加 continue; // 追加 } // 追加 if (items[i].ASIN == asin \u0026amp;\u0026amp; items[i].CountryCode == countryCode) { return items[i]; } } } ... (略) ... 内容としてはitemsの要素がnullだった場合に後続処理を行わずに、スキップする処理を追加しました。\n確認 では、無限ロードになっていた記事を再度表示してみましょう。\n無事に表示されていますね♪\n終わりに 以上の様に、原因不明ですがなんとか暫定的に直すことが出来ました！\nもし同じ様に原因がわからず困っている方の参考になればなと思います♪\n","date":"2020-08-08T18:14:00+09:00","image":"/wp-content/uploads/2020/08/amazonJsInfinitueLoadFixEye.png","permalink":"/2020/08/08/10874/","title":"【Cannot read property 'ASIN' of null】急にAmazonJSが読み込まなくなった原因と解決方法【Wordpress】"},{"content":"オススメのドリンクアクセサリーを導入！ PCデスク周りは快適に越した事がない 筆者は仕事柄、1日の半分以上をPCデスクで過ごします。\nまた、フォートナイトなどのFPSやSwitchもPCモニターでやっているため休日もほとんどPCデスクで過ごしていますねw\nそこで今回はこれからの夏に向けて、せっかくならPCデスク上を広く使いたいですし、冷たい飲み物を飲みたい！という事で、タンブラーとドリンクホルダーを購入してみたので開封レビューしていこうと思います！\nサーモス(THERMOS) 真空断熱タンブラー ステンレス 皆様ご存知のサーモスの真空断熱タンブラーです！\n冷たい飲み物から暑い飲み物まで使えるので一つ持っておけば間違いないアイテムです！\nAmazon サーモス 真空断熱タンブラー 420ml ステンレス JDE-420 サーモス(THERMOS) 真空断熱タンブラー用フタ (S) こぼれ防止や埃などが入らないための専用蓋です！\nせっかくならこちらのアクセサリも買っておく事をオススメします。\nAmazon サーモス 真空断熱タンブラー用フタ (S) ブラック JDA Lid(S) BK サーモス(THERMOS) 真空断熱タンブラー用ソコカバー こちらもサーモス専用のボトムカバーです。\nグリップ力が高く、さらに倒れにくくしてくれるのでこちらも合わせ買いがオススメです！\nAmazon サーモス 真空断熱タンブラー用ソコカバー (S) ブラック JDABottomCover(S) BK F-KING ドリンクホルダー こちらはPCデスクなどに挟み込む形で取り付ける事が可能なドリンクホルダーです。\nグリップ力はかなり強いので、不意に取れたりする事は無さそうです♪\nAmazon F-KING 飲料 カップ ホルダー クリップ、デスク カップ ホルダー、テーブル エッジ クランプ カップ ホルダー、水 ガラス、コーヒー マグ、飲料、携帯電話。ベスト オフィス アクセサリー。 ブラック Miriyon ステンレス氷 アイスキューブ 溶けない氷 ステンレス製のアイスキューブです！\n通常の氷だと、作業やゲームに集中すると氷が溶けて飲み物が薄くなってしまいますが、アイスキューブなら薄くなる心配はないのでオススメです！\nAmazon ステンレス氷 アイスキューブ 溶けない氷 ウイスキーロック ワインクーラー ステンレス氷 永久氷 ［8個セット 専用保存箱付き］ オススメPC周り商品 PCデスク Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅120cm×奥行55cm) BHD-1200M Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅100cm×奥行60cm) BHD-1000M 関連記事 【ゲーミングPCデスク】Bauhutteの「昇降式式PCデスク」が快適過ぎた【PC作業向け】 2019/05/08 2964文字 約6分で読めます Amazon Bauhutte（バウヒュッテ） 昇降式L字デスク ラージ 木目 幅39×奥行き82㎝ BHD-820H-WD 関連記事 【Bauhutte】開封作業の撮影スペースとしても使えるPC用昇降式L字デスクが使い勝手が良すぎた【PC環境】 2020/02/26 1648文字 約4分で読めます Amazon Bauhutte(バウヒュッテ) ゲーム機収納ラック スライダー式 ブラック BHS-380G-BK 39.5×37×61.5cm Amazon Bauhutte (バウヒュッテ) コントローラースタンド ヘッドホンハンガー BHP-S100 ブラック 幅20×奥行き13×高さ 関連記事 【有能省スペース収納】PCデスク周りのアクセサリを無駄無く整理可能なBauhutteサイドラックを開封レビュー【テレワークにもオススメ】 2020/10/19 3249文字 約7分で読めます デスクマット Amazon Bauhutte (バウヒュッテ) デスクごとチェアマット BCM-160BK ブラック 特大サイズ160×130cm 厚さ1.5mm BCM-160BK 関連記事 【PC環境を整えよう】Bauhutteの「デスクごとチェアマット」を購入してみたので紹介してみる【ゲーミングPC/ゲーミングチェア】 2019/03/28 1778文字 約4分で読めます マイク付きヘッドセット Amazon Logicool G ゲーミングヘッドセット ワイヤレス 無線 G533 ブラック Dolby 7.1ch ノイズキャンセリング マイク 付き PC 軽量 国内正規品 2年間メーカー保証 キーボード Amazon Logicool ロジクール G PRO テンキーレス ゲーミング キーボード G-PKB-001ブラック メカニカル Romer-G RGB 着脱式ケーブル プロ仕様 PUBG JAPAN SERIES 2019 推奨モデル 国内正規品 2年間メーカー保証 PCモニター Amazon BenQ ゲーミングモニター ディスプレイ ZOWIE XL2411P 24インチ/フルHD/HDMI,DP,DVI端子/144Hz/1ms/ブルーライト軽減 ゲーミングチェア Amazon AKRACING ゲーミングチェア WOLF-GREY 灰 関連記事 【快適なPC作業を求め】ゲーミングチェア初心者にオススメな「AKRACING ゲーミングチェア WOLF-GREY」を購入したら大正解だった【ゲーミングPC】 2019/03/23 1937文字 約4分で読めます マウス Amazon Logicool ロジクール G502 HERO ゲーミングマウス G502RGBh 【2年間保証付き】 ゲームパッド Amazon ワイヤレスコントローラー (DUALSHOCK 4) マグマ・レッド (CUH-ZCT2J11) 開封の儀 サーモス(THERMOS) 真空断熱タンブラー ステンレス パッケージ タンブラーはこちらの箱に入っています。\n早速中身を見ていきましょう。\nパカッ。\n内容物 内容は以下の通りです。\n[adsense-responsive]\r内容物\rタンブラー本体\r取扱説明書\rアンケート\r取扱説明書にはお手入れ方法なども記載されています。\nタンブラー本体はこちらです。\nサーモスの歴史を教えてくれるプレートが入っています。\nタンブラーはさすがと言わざるを得ない高クオリティです・・・！\n冷たい飲み物も熱い飲み物も対応しているのはさすがですね！\nワンポイントのロゴがかっこいい！\nサーモス(THERMOS) 真空断熱タンブラー用フタ (S) サーモス専用の蓋はこんな感じです。\n取り付け方も簡単でつけるとこんな感じ。\nピッタリ！\n悪くないじゃん・・・！\nサーモス(THERMOS) 真空断熱タンブラー用ソコカバー お次はボトムカバーです。\nアラいいですねぇ〜。\nかなり滑り止めが聞くので謝ってこぼす事も減りそうです！\nまた安定性も増すので必須レベルのアクセサリだと思います！\nF-KING ドリンクホルダー パッケージ では、お次はドリンクホルダーを見ていきましょう。\nサイズは若干デカ目ですね。\nパカッ。\n本体 ドリンクホルダーはこんな感じです。\nグリップはかなり強めなのでグラついたり　抜け落ちたりする事は無さそうですね！\n取り付けるとこんな感じ。\nある程度の厚さのデスクでも挟む事が出来るので使い勝手は良さそうです♪\nサーモスのタンブラーももちろん収まります♪\nMiriyon ステンレス氷 アイスキューブ 溶けない氷 パッケージ お次はアイスキューブです。\nパカッ。\n本体 アイスキューブは専用ケースに梱包されています。\n[adsense-responsive]\r冷やす時にはこのまま入れればいいので楽チンです。\n先端がラバー形状の専用トングがあるのも嬉しいですね♪\nアイスキューブ自体はかなり綺麗な形状です！\n謎の高級感。\n終わりに 以上のようにPC作業を効率化するためのオススメグッズを紹介しました。\n良い環境を作るには良いグッズを整えるのも一つの手段なので、気になった方は是非購入してみてはいかがでしょうか♪\n","date":"2020-07-11T17:40:06+09:00","image":"/wp-content/uploads/2020/07/pcDrinkGoodsEye.jpg","permalink":"/2020/07/11/10811/","title":"【作業効率アップ】タンブラーとドリンクホルダーを使って快適なPCデスク環境を整えてみた【居心地最強】"},{"content":"MkDockのカスタマイズしよう 前回、MarkdownでかけるMkDocsをご紹介しました。\n関連記事 【グッバイエクセル/パワポ/スプレットシート 】ドキュメントをマークダウンでかけるMkDocsが最強過ぎた【Github管理可能】 2020/06/30 2369文字 約5分で読めます 今回は生成されるドキュメントのカスタマイズを試してみようと思います！\nカスタマイズ方法 mkdocs.ymlを変更 MkDocsのテーマを変えるには、mkdocs.ymlを編集することになります。\nデフォルトは以下のようになっていると思います。\nmkdocs.yml site_name: My Docs テーマ変更 MkDosにはテーマ機能があります。\nデフォルトで様々なテーマが用意されており\n試しに、alabasterというテーマを適用してみましょう。\n以下のように、theme: alabasterと追記してください。\nmkdocs.yml site_name: My Docs theme: readthedocs すると、以下のようなレイアウトに変わると思います。\nデフォルトと比べるとこんな感じです。\n海外ライブラリのドキュメントページでよく見るデザインですね！\nMkDocsを使っていたのか・・・！\n他にも様々なライブラリがありますが、物によってはインストールをしないと使えないものもあるので色々試してみてください♪\nThis page contains a list of some external MkDocs themes. All these and more can be installed via pip. You can find additional themes on WheelodexMkDocs Themes · mkdocs/mkdocs Wiki · GitHub\n今回はmkdocs-materialを使ってみようと思います。\n以下のコマンドでインストールをします。\npip install mkdocs-material Collecting mkdocs-material Downloading https://files.pythonhosted.org/packages/fe/fb/3bf826ace83581804207cc06a6be9f6cee34bca801094048c70103ddd16a/mkdocs_material-5.4.0-py2.py3-none-any.whl (3.8MB) 100% |████████████████████████████████| 3.8MB 507kB/s Collecting Pygments\u0026gt;=2.4 (from mkdocs-material) Downloading https://files.pythonhosted.org/packages/2d/68/106af3ae51daf807e9cdcba6a90e518954eb8b70341cee52995540a53ead/Pygments-2.6.1-py3-none-any.whl (914kB) 100% |████████████████████████████████| 921kB 1.3MB/s Requirement already satisfied: mkdocs\u0026gt;=1.1 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from mkdocs-material) Collecting pymdown-extensions\u0026gt;=7.0 (from mkdocs-material) Downloading https://files.pythonhosted.org/packages/fc/7f/fc169385d5ff6ab000597c9ef81e798e9b20ac267f33426dcc89d9f40306/pymdown_extensions-7.1-py2.py3-none-any.whl (205kB) 100% |████████████████████████████████| 215kB 2.9MB/s Collecting mkdocs-material-extensions\u0026gt;=1.0 (from mkdocs-material) Downloading https://files.pythonhosted.org/packages/dd/2a/1ebdd2ddc72d3a886c9161202f3c568fee11685ca3668ae1c77ea6bb8304/mkdocs_material_extensions-1.0-py3-none-any.whl Requirement already satisfied: markdown\u0026gt;=3.2 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from mkdocs-material) Requirement already satisfied: Jinja2\u0026gt;=2.10.1 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: tornado\u0026gt;=5.0 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: livereload\u0026gt;=2.5.1 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Ignoring tornado: markers \u0026#39;python_version == \u0026#34;2.7\u0026#34;\u0026#39; don\u0026#39;t match your environment Requirement already satisfied: PyYAML\u0026gt;=3.10 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: click\u0026gt;=3.3 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: lunr[languages]==0.5.8 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: importlib-metadata; python_version \u0026lt; \u0026#34;3.8\u0026#34; in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from markdown\u0026gt;=3.2-\u0026gt;mkdocs-material) Requirement already satisfied: MarkupSafe\u0026gt;=0.23 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from Jinja2\u0026gt;=2.10.1-\u0026gt;mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: six in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from livereload\u0026gt;=2.5.1-\u0026gt;mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: future\u0026gt;=0.16.0 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from lunr[languages]==0.5.8-\u0026gt;mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: nltk\u0026gt;=3.2.5; python_version \u0026gt; \u0026#34;2.7\u0026#34; and extra == \u0026#34;languages\u0026#34; in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from lunr[languages]==0.5.8-\u0026gt;mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: zipp\u0026gt;=0.5 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from importlib-metadata; python_version \u0026lt; \u0026#34;3.8\u0026#34;-\u0026gt;markdown\u0026gt;=3.2-\u0026gt;mkdocs-material) Requirement already satisfied: joblib in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from nltk\u0026gt;=3.2.5; python_version \u0026gt; \u0026#34;2.7\u0026#34; and extra == \u0026#34;languages\u0026#34;-\u0026gt;lunr[languages]==0.5.8-\u0026gt;mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: regex in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from nltk\u0026gt;=3.2.5; python_version \u0026gt; \u0026#34;2.7\u0026#34; and extra == \u0026#34;languages\u0026#34;-\u0026gt;lunr[languages]==0.5.8-\u0026gt;mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Requirement already satisfied: tqdm in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from nltk\u0026gt;=3.2.5; python_version \u0026gt; \u0026#34;2.7\u0026#34; and extra == \u0026#34;languages\u0026#34;-\u0026gt;lunr[languages]==0.5.8-\u0026gt;mkdocs\u0026gt;=1.1-\u0026gt;mkdocs-material) Installing collected packages: Pygments, pymdown-extensions, mkdocs-material-extensions, mkdocs-material Successfully installed Pygments-2.6.1 mkdocs-material-5.4.0 mkdocs-material-extensions-1.0 pymdown-extensions-7.1 良い感じのマテリアルデザインに変わりました♪\nCSSのカスタマイズ テーマを使用していて、部分的に変えたい場合があると思います。\nMkDocsであれば、簡単に独自CSSを用いて変更することが可能です！\ndocsディレクトリにcssディレクトリを作成し、以下のcssファイルを配置してみましょう。\ndocs/css/custom.css .md-header{ background-color: red; } そして、mkdocs.ymlに以下を追記してCSSを追加読み込みさせましょう。\nmkdocs.yml site_name: My Docs theme: material extra_css: - \u0026#34;css/custom.css\u0026#34; # ←追加 これでCSSが読み込まれデザインが上書きされるようになりました。\nあとは独自でレイアウトをCSSで調整出来ます。\nWebの技術でドキュメントのレイアウトを調整出来るのはとても便利ですね♪\nGoogleFontsなどの外部CSSを利用したい場合 CDNなどの外部CSSを利用したい場合にも対応可能です。\n以下のようにURLを指定することで読み込まれるようになります。\nmkdocs.yml site_name: My Docs theme: material extra_css: - \u0026#34;css/custom.css\u0026#34; - \u0026#34;https://fonts.googleapis.com/earlyaccess/notosansjp.css\u0026#34; #←追加 正しく読み込まれていますね♪\n注釈・警告文 admonitionという拡張機能を使うことで、ドキュメント内にヒントやメモ、警告などを表す事が出来ます。\nmkdocs.yml markdown_extensions: - admonition index.md ## Admonition Sample !!! Note ノート !!! Tip ヒント !!! Warning 警告 !!! Danger 危険 !!! Success 成功 !!! Failure 失敗 !!! Bug バグ !!! summary 概要 とても綺麗に表示されていますね！\n注釈文 ドキュメントには必要不可欠な注釈文ですが、もちろんMkDocsでも表現する事が可能です！\nfootnotesという拡張機能を利用する事で可能になります。\nmkdocs.yml site_name: My Docs theme: material extra_css: - \u0026#34;css/custom.css\u0026#34; #←追加 - \u0026#34;https://fonts.googleapis.com/earlyaccess/notosansjp.css\u0026#34; markdown_extensions: - admonition - footnotes #←追加 docs/index.md ## Note 私は天才です。[^1] 私はお金持ちです。[^2] [^1]: これは嘘です。 [^2]: これも嘘です。 こちらもしっかりと注釈が表現されていますね♪\nさらに文章中の注釈をクリックすると、対応する注釈にフォーカスされるので注釈が多い場合にもとても見やすいです♪\nまた、以下のように注釈のキー名が一致していれば数字じゃなくても良さそうなので、分かりやすい注釈キーを指定するのが良いかもしれませんね♪\ndocs/index.md ## Note 私は天才です。[^note-1] 私はお金持ちです。[^a] [^note-1]: これは嘘です。 [^a]: これも嘘です。 画像の挿入 もちろん画像も埋め込むことが出来ます。\n以下のディレクトリ構造の場合、\nディレクトリ構造 . ├── docs │ ├── css │ │ └── custom.css │ ├── image │ │ └── blogenist_icon.png │ └── image.md └── mkdocs.yml 以下のようにパスを指定することで読み込むことが可能です！\ndocs/image.md ## Image ![Image](image/blogenist_icon.png) 画像も同じリポジトリで管理出来るので便利ですね♪\nFontAwesomeの利用 ドキュメント内にFontAwesomeのアイコンを利用する事も出来ます。\nfontawesome_markdownのインストール まずはfontawesome_markdownというライブラリをインストールします。\npip install fontawesome_markdown Collecting fontawesome_markdown Downloading https://files.pythonhosted.org/packages/c7/29/cbd664c42a119ee14d73a6991e4689beec529313ada5c4586c9c33f72e2b/fontawesome-markdown-0.2.6.tar.gz Requirement already satisfied: markdown in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from fontawesome_markdown) Requirement already satisfied: importlib-metadata; python_version \u0026lt; \u0026#34;3.8\u0026#34; in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from markdown-\u0026gt;fontawesome_markdown) Requirement already satisfied: zipp\u0026gt;=0.5 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from importlib-metadata; python_version \u0026lt; \u0026#34;3.8\u0026#34;-\u0026gt;markdown-\u0026gt;fontawesome_markdown) Installing collected packages: fontawesome-markdown Running setup.py install for fontawesome-markdown ... done Successfully installed fontawesome-markdown-0.2.6 You are using pip version 9.0.1, however version 20.1.1 is available. You should consider upgrading via the \u0026#39;pip install --upgrade pip\u0026#39; command. mkdocs.ymlに追記 次にmkdocs.ymlに以下を追記します。\nmkdocs.yml markdown_extensions: - fontawesome_markdown extra_css: - \u0026#34;https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css\u0026#34; 利用方法 ドキュメント内でFontAwesomeのアイコンを使うには:{FontAwesomeコード}:のように指定します。\n試しにgithubのアイコンを利用してみましょう。\nfontawesome.md ## FontAwesome :fa-github-alt: Github 正常に表示されていますね♪\n指定するコードは公式サイトにあるのでそちらで調べてみてください♪\nコードハイライト codehiliteという拡張機能を利用する事で、コードハイライトを表現する事が可能になります。\nfontawesome_markdownの有効化 次にmkdocs.ymlに以下を追記します。\nmkdocs.yml markdown_extensions: - codehilite 利用方法 ドキュメント内で利用するには、```~```で囲む事で表現可能です。\nまた、その際に```{言語}~```とする事で言語ごとのシンタックスハイライトを適用する事が出来ます。\ncodehilite.md ## CodeHilite ```java public class Main{ public static void main(String args){ System.out.println(args); } } ``` 綺麗にコードハイライトが表示されていますね♪\n行番号を出したい場合 コードハイライトに行番号を出したい場合は以下のようにします。\nmkdocs.yml markdown_extensions: - codehilite: linenums: true テーブル よく使うであろうテーブルについてもMarkdownでの表現が可能になっています。\n利用方法 以下のように記述する事で任意のセル数のテーブルを表現する事が可能です。\ncodehilite.md ## Table No(左寄せ) | 名前(中央寄せ) | 説明(右寄せ) :--|:--:|--: 1 | 犬 | ワンちゃんは飼い主に忠実です。 2 | 猫 | ねこちゃんは気まぐれです。 3 | ハリネズミ | ハリネズミちゃんは小さくてく可愛いです。 テキストの寄せ方についても自由に実現出来るので良いですね♪\nマーカー テキストにマーカーを表現する事も可能です。\npymdownx.markの有効化 mkdocs.ymlに以下を追記します。\nmkdocs.yml markdown_extensions: - pymdownx.mark 使い方 =~=のように囲む事で表現が可能です。\ncodehilite.md ## Maker ==ここ==、テストに出ます。 リンク 外部リンクも簡単に表現する事が可能です。\n使い方 =~=のように囲む事で表現が可能です。\ncodehilite.md ## Link [Blogenist](/) 新しいタブで開きたい場合 このままだとページ遷移になってしまうので、別タブで開くようにするには、mkdocs.ymlにattr_listを追加し、\nmkdocs.yml markdown_extensions: - attr_list 以下のように記述する事で実現出来ます。\ncodehilite.md ## Link [Blogenist](/){target=_blank} 終わりに 以上のように色々とドキュメントをカスタマイズする事が出来ました。\n他にも色々な拡張機能があるようなので、改めて紹介しようと思います♪\n","date":"2020-07-05T22:56:45+09:00","image":"/wp-content/uploads/2020/07/mkDocsCustomEye.png","permalink":"/2020/07/05/10763/","title":"【ドキュメントをMarkdownでGitHub管理】MkDocsで生成されるHTMLのレイアウトをカスタマイズする方法まとめ【グッバイExcel・PowerPoint】"},{"content":"ドキュメントをマークダウンで書ける時代がやってきた オフィスソフトでのドキュメント管理はもう嫌だ！ システム開発やサイト制作をしている際、必ず仕様書や設計書を作成し場合によっては納品する必要がありますよね。\n昨今では、基本的にExcelやPowerPoint、GoogleスプレットシートやGooleスライドで作成や保守をする事が多いと思いますが、\nこれがまた悪い文化\n何ですよねorz\n何が悪いって、シート毎にレイアウトがバラバラになるので統一感が持てない点や修正差分が分かりにくい点に不満を感じます。\nもちろん、ある程度の履歴機能やテンプレートはありますが、それでもまだ使いにくい感は否めません。。。orz\nMarkdownで書けるドキュメントツールを発見 そんな最中、マークダウンでドキュメントを書けるという神ツールを見つけました！\nOverview\rMkDocs is a fast, simple and downright gorgeous static site generator that's geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file. Start by reading the introduction below, then check the User Guide for more info.MkDocs\nこのツールを使えば、Markdownベースでドキュメントを記述出来るため、git管理対象として保守する事が可能になります。\nまたHTML形式やPDF形式にも出力する事が可能なようなので、納品対応にも対応出来るため期待が出来るツールとなっています！\nそして何より、デザインやレイアウトのカスタマイズ性が高いのもMkDocsの魅力とも言えるでしょう。\n今回は早速インストールをして基本的な部分の使い方を試してみようと思います♪\n細かい機能やレイアウト調整については以下の記事にてご紹介しているので、興味のある方はそちらも読んでいただければなと思います♪\n関連記事 【ドキュメントをMarkdownでGitHub管理】MkDocsで生成されるHTMLのレイアウトをカスタマイズする方法まとめ【グッバイExcel・PowerPoint】 2020/07/05 2832文字 約6分で読めます 使い方 前提 MkDocsはPythonを利用して動かすツールとなっています。\n今回は以下の環境にて動作を確認しています。\nPoint\rPython 3.6.3\rAnyenv 1.1.1\r関連記事 【JavaやRuby含めほとんどの言語に対応】Homebrewで「anyenv」をインストールしてhodenvを使ってバージョン管理をする方法まとめ【fish shellも対応】 2019/06/27 1985文字 約4分で読めます インストール 以下のコマンドでMkDocsをインストールしてください。\npip install mkdocs Collecting mkdocs Downloading https://files.pythonhosted.org/packages/5d/89/ed04b217404bbba031c4e2e084f36ef840b8663fce0b80302b547e651e4d/mkdocs-1.1.2-py3-none-any.whl (6.4MB) 100% |████████████████████████████████| 6.4MB 239kB/s Collecting Jinja2\u0026gt;=2.10.1 (from mkdocs) Downloading https://files.pythonhosted.org/packages/30/9e/f663a2aa66a09d838042ae1a2c5659828bb9b41ea3a6efa20a20fd92b121/Jinja2-2.11.2-py2.py3-none-any.whl (125kB) 100% |████████████████████████████████| 133kB 2.9MB/s Collecting Markdown\u0026gt;=3.2.1 (from mkdocs) Downloading https://files.pythonhosted.org/packages/a4/63/eaec2bd025ab48c754b55e8819af0f6a69e2b1e187611dd40cbbe101ee7f/Markdown-3.2.2-py3-none-any.whl (88kB) 100% |████████████████████████████████| 92kB 3.0MB/s Collecting lunr[languages]==0.5.8 (from mkdocs) Downloading https://files.pythonhosted.org/packages/15/a4/3043c019613a1d60abb6e150b7665761bdd236a0d915d447d21c4415fddd/lunr-0.5.8-py2.py3-none-any.whl (2.3MB) 100% |████████████████████████████████| 2.3MB 292kB/s Collecting tornado\u0026gt;=5.0 (from mkdocs) Downloading https://files.pythonhosted.org/packages/95/84/119a46d494f008969bf0c775cb2c6b3579d3c4cc1bb1b41a022aa93ee242/tornado-6.0.4.tar.gz (496kB) 100% |████████████████████████████████| 501kB 567kB/s Collecting click\u0026gt;=3.3 (from mkdocs) Downloading https://files.pythonhosted.org/packages/d2/3d/fa76db83bf75c4f8d338c2fd15c8d33fdd7ad23a9b5e57eb6c5de26b430e/click-7.1.2-py2.py3-none-any.whl (82kB) 100% |████████████████████████████████| 92kB 939kB/s Collecting livereload\u0026gt;=2.5.1 (from mkdocs) Downloading https://files.pythonhosted.org/packages/b5/a2/a36af515c73fac8d596b5e0f1f9b38b83a9366facb3959dd8428727cc650/livereload-2.6.2.tar.gz Ignoring tornado: markers \u0026#39;python_version == \u0026#34;2.7\u0026#34;\u0026#39; don\u0026#39;t match your environment Collecting PyYAML\u0026gt;=3.10 (from mkdocs) Downloading https://files.pythonhosted.org/packages/64/c2/b80047c7ac2478f9501676c988a5411ed5572f35d1beff9cae07d321512c/PyYAML-5.3.1.tar.gz (269kB) 100% |████████████████████████████████| 276kB 791kB/s Collecting MarkupSafe\u0026gt;=0.23 (from Jinja2\u0026gt;=2.10.1-\u0026gt;mkdocs) Downloading https://files.pythonhosted.org/packages/f0/00/a6aea33f5598b080b86d6b6d1214b51afe3ffa6100b902d5aa465080083f/MarkupSafe-1.1.1-cp36-cp36m-macosx_10_6_intel.whl Collecting importlib-metadata; python_version \u0026lt; \u0026#34;3.8\u0026#34; (from Markdown\u0026gt;=3.2.1-\u0026gt;mkdocs) Downloading https://files.pythonhosted.org/packages/8e/58/cdea07eb51fc2b906db0968a94700866fc46249bdc75cac23f9d13168929/importlib_metadata-1.7.0-py2.py3-none-any.whl Requirement already satisfied: six\u0026gt;=1.11.0 in /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages (from lunr[languages]==0.5.8-\u0026gt;mkdocs) Collecting future\u0026gt;=0.16.0 (from lunr[languages]==0.5.8-\u0026gt;mkdocs) Downloading https://files.pythonhosted.org/packages/45/0b/38b06fd9b92dc2b68d58b75f900e97884c45bedd2ff83203d933cf5851c9/future-0.18.2.tar.gz (829kB) 100% |████████████████████████████████| 829kB 742kB/s Collecting nltk\u0026gt;=3.2.5; python_version \u0026gt; \u0026#34;2.7\u0026#34; and extra == \u0026#34;languages\u0026#34; (from lunr[languages]==0.5.8-\u0026gt;mkdocs) Downloading https://files.pythonhosted.org/packages/92/75/ce35194d8e3022203cca0d2f896dbb88689f9b3fce8e9f9cff942913519d/nltk-3.5.zip (1.4MB) 100% |████████████████████████████████| 1.4MB 536kB/s Collecting zipp\u0026gt;=0.5 (from importlib-metadata; python_version \u0026lt; \u0026#34;3.8\u0026#34;-\u0026gt;Markdown\u0026gt;=3.2.1-\u0026gt;mkdocs) Downloading https://files.pythonhosted.org/packages/b2/34/bfcb43cc0ba81f527bc4f40ef41ba2ff4080e047acb0586b56b3d017ace4/zipp-3.1.0-py3-none-any.whl Collecting joblib (from nltk\u0026gt;=3.2.5; python_version \u0026gt; \u0026#34;2.7\u0026#34; and extra == \u0026#34;languages\u0026#34;-\u0026gt;lunr[languages]==0.5.8-\u0026gt;mkdocs) Downloading https://files.pythonhosted.org/packages/b8/a6/d1a816b89aa1e9e96bcb298eb1ee1854f21662ebc6d55ffa3d7b3b50122b/joblib-0.15.1-py3-none-any.whl (298kB) 100% |████████████████████████████████| 307kB 750kB/s Collecting regex (from nltk\u0026gt;=3.2.5; python_version \u0026gt; \u0026#34;2.7\u0026#34; and extra == \u0026#34;languages\u0026#34;-\u0026gt;lunr[languages]==0.5.8-\u0026gt;mkdocs) Downloading https://files.pythonhosted.org/packages/b8/7b/01510a6229c2176425bda54d15fba05a4b3df169b87265b008480261d2f9/regex-2020.6.8.tar.gz (690kB) 100% |████████████████████████████████| 696kB 685kB/s Collecting tqdm (from nltk\u0026gt;=3.2.5; python_version \u0026gt; \u0026#34;2.7\u0026#34; and extra == \u0026#34;languages\u0026#34;-\u0026gt;lunr[languages]==0.5.8-\u0026gt;mkdocs) Downloading https://files.pythonhosted.org/packages/46/62/7663894f67ac5a41a0d8812d78d9d2a9404124051885af9d77dc526fb399/tqdm-4.47.0-py2.py3-none-any.whl (66kB) 100% |████████████████████████████████| 71kB 1.6MB/s Installing collected packages: MarkupSafe, Jinja2, zipp, importlib-metadata, Markdown, future, click, joblib, regex, tqdm, nltk, lunr, tornado, livereload, PyYAML, mkdocs Running setup.py install for future ... done Running setup.py install for regex ... done Running setup.py install for nltk ... done Running setup.py install for tornado ... done Running setup.py install for livereload ... done Running setup.py install for PyYAML ... done Successfully installed Jinja2-2.11.2 Markdown-3.2.2 MarkupSafe-1.1.1 PyYAML-5.3.1 click-7.1.2 future-0.18.2 importlib-metadata-1.7.0 joblib-0.15.1 livereload-2.6.2 lunr-0.5.8 mkdocs-1.1.2 nltk-3.5 regex-2020.6.8 tornado-6.0.4 tqdm-4.47.0 zipp-3.1.0 確認 以下のコマンドで確認してみましょう。\nmkdocs -V mkdocs, version 1.1.2 from /Users/blogenist/.anyenv/envs/pyenv/versions/3.6.3/lib/python3.6/site-packages/mkdocs (Python 3.6) 無事にインストールされていますね♪\nプロジェクトの作成 まずはプロジェクトを作成しましょう。\nmkdocs new {プロジェクト名}で作成する事が可能です。\nmkdocs new sample INFO - Creating project directory: sample INFO - Writing config file: sample/mkdocs.yml INFO - Writing initial docs: sample/docs/index.md すると以下の形でディレクリが生成されます。\ntree . . └── sample ├── docs │ └── index.md └── mkdocs.yml 2 directories, 2 files 以降の作業は生成されたディレクトリに移動した上で行う事になります。\nローカルでの開発サーバ起動(Serve) では、一旦初期の状態でMarkdownから生成されるHTMLを確認してみましょう。\nデフォルトではindex.mdには以下の記述がされています。\ndocs/index.md # Welcome to MkDocs For full documentation visit [mkdocs.org](https://www.mkdocs.org). ## Commands * `mkdocs new [dir-name]` - Create a new project. * `mkdocs serve` - Start the live-reloading docs server. * `mkdocs build` - Build the documentation site. * `mkdocs -h` - Print help message and exit. ## Project layout mkdocs.yml # The configuration file. docs/ index.md # The documentation homepage. ... # Other markdown pages, images and other files. 以下のコマンドでローカルに開発サーバを起動出来ます。\nmkdocs serve mkdocs serve 火 6/30 19:36:32 2020 INFO - Building documentation... INFO - Cleaning site directory INFO - Documentation built in 0.09 seconds [I 200630 19:37:47 server:334] Serving on http://127.0.0.1:8000 INFO - Serving on http://127.0.0.1:8000 これでhttp://localhost:8000/\u0026nbsp;にサーバが起動されHTMLが確認出来ます。\nホットリロード標準完備が便利過ぎる！ そしてこの開発サーバはホットリロードに対応しているので、サーバ起動後にMarkdownを変更すると自動で再リロードがかかります。\n毎回再起動する必要なく、作業者はMarkdownの修正だけ気にすれば良いのはとても楽ですね！\nホットリロードログ [I 200630 19:43:22 watcher:111] Running task: builder (delay: None) INFO - Running task: builder (delay: None) INFO - Building documentation... [I 200630 19:43:22 handlers:95] Reload 2 waiters: /Users/blogenist/Develop/local/python/mkdocs/sample/docs/index.md INFO - Reload 2 waiters: /Users/blogenist/Develop/local/python/mkdocs/sample/docs/index.md [I 200630 19:43:22 handlers:135] Browser Connected: http://localhost:8000/ INFO - Browser Connected: http://localhost:8000/ [I 200630 19:43:22 handlers:135] Browser Connected: http://localhost:8000/ INFO - Browser Connected: http://localhost:8000/ ページを追加 ドキュメントのページを追加する際には、docs配下にmdファイルを追加するだけで自動で反映されます。\ndocs/about.md ## About This is About Page. ページ名を制御 ページ名を変えたい場合や順番を変えたい場合は以下のようにmkdocs.ymlに記述する事で制御する事が可能です。\nmkdocs.yml site_name: My Docs pages: - Page1: home.md - Page2: about.md ちなみに、docs/index.mdはトップページに該当するので用意しておく必要があります。\nHTMLの生成(ビルド) では、実際にHTML出力をしてみましょう。\n[adsense-responsive]\rmkdocs build INFO - Cleaning site directory INFO - Building documentation to directory: /Users/blogenist/Develop/local/python/mkdocs/sample/site INFO - Documentation built in 0.12 seconds すると、siteディレクトリが生成され、HTMLファイル一式が出力されています。\ntree . . ├── docs │ └── index.md ├── mkdocs.yml └── site ├── 404.html ├── css │ ├── base.css │ ├── bootstrap.min.css │ └── font-awesome.min.css ├── fonts │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ ├── fontawesome-webfont.woff2 │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 ├── img │ ├── favicon.ico │ └── grid.png ├── index.html ├── js │ ├── base.js │ ├── bootstrap.min.js │ └── jquery-1.10.2.min.js ├── search │ ├── lunr.js │ ├── main.js │ ├── search_index.json │ └── worker.js ├── sitemap.xml └── sitemap.xml.gz 7 directories, 28 files 確認 ブラウザでindex.htmlを確認すると、正常に表示されていますね♪\nとても簡単です！\n終わりに 今回はインストールからシンプルなHTML出力までの確認をしました。\nMkDocsの本領発揮はカスタマイズ性の高さなので、次回はその辺を試してみようと思います♪\n皆さんも脱Office/GoogleDocsを目指してみてはいかがでしょうか♪\n","date":"2020-06-30T19:57:47+09:00","image":"/wp-content/uploads/2020/06/mkDocsInstallEye.png","permalink":"/2020/06/30/10739/","title":"【グッバイエクセル/パワポ/スプレットシート 】ドキュメントをマークダウンでかけるMkDocsが最強過ぎた【Github管理可能】"},{"content":"高クオリティフォントをフォトショップやイラレ使おう どのフォントを使えば良いか問題 動画編集やデザインなどの仕事をしている際に、テキストフォントをどうすれば良いか迷う事は多くあると思います。\nフォントのデザインもさる事ながら、商用利用可否のライセンス周りもややこしいですよね。。。orz\nAdobeフォントを使おう そんな時はAdobe Fontsを使いましょう！\nAdobe Fontsとは、Adobe Creative Cloudを利用している人であれば基本的に無料で使う事が出来るフォントサービスです。\n膨大な量のフォントがあり、ライセンスも個人利用から商用利用まで明確に定義されているので、簡単に目的のフォントを探す事が可能です♪\n今回は実際にAdobe Fontsを利用してみたのでやり方をご紹介しようと思います。\n使い方 フォントをダウンロード まずは、AdobeCCのアプリケーションから、リソースリンク→フォントを選びます。\nすると、フォント一覧画面が表示されます。\nあとはこの中から好きなフォントを探してダウンロードする事で利用することが可能になります♪\nロバート山本さんも愛用しているフォントを発見！ 今回はロバート山本さんのゲーム実況YouTubeチャンネルでよく使われているこちらのフォントをインストールしてみようと思います。\n[adsense-responsive]\rファミリーを表示すると右側にフォントのアクティベートスイッチがあるので、こちらをONにします。\nするとこのようにフォントがアクティブになります。\n正常にAdone Fontsにも追加されていますね♪\nAdobeソフトから利用する あとはAfterEffectsやPremirere Pro、PhotoShopやIllustratorなどのAdobeのアプリケーションのフォント選択から利用する事が可能になっています。\nとても簡単ですね！\n終わりに 以上のようにAdobeCCを契約していれば、ハイクオリティなフォントを簡単に使う事が可能になります♪\nフォントの数も大量にあるので、是非自分好みのフォントを探してみてはいかがでしょうか♪\n","date":"2020-06-19T17:36:50+09:00","image":"/wp-content/uploads/2020/06/adobeFontInstallEye.png","permalink":"/2020/06/19/10720/","title":"【AdobeFonts】アドビCCを契約していれば無料で使えるハイクオリティフォントのインストール方法【デザイン/YouTuber】"},{"content":"シーケンス内で画像や動画、テキストを綺麗に整列したい PemiereProでは素材の整列機能がない？ YouTubeやSNSに投稿する動画を作成する際に、AfterEffectsではなくPremiereProを使っている方も多いと思います。\n簡単なカットやテロップ程度ならPremiere Proの方が簡単なので、作業効率が良いですよね♪\nしかし、Premiere Proはシーケンス内の動画像やテキストなどを整理するツールがないっぽいんですよ。。。\n撮影した動画以外に素材を使う動画を作る際には、しっかりと整列している方がクオリティが上がるのですが、手作業で細かい調整をするのは現実的ではないですよね。。。orz\n端に吸い付いてくれないのがもどかしい。。。orz\nプログラムモニターをスナップイン機能で解決 しかしご安心を。\nPremiereProでは同じような操作を実現するための「プログラムモニターをスナップイン」という機能があります。\nこちらはプログラムモニター内での水平垂直の中心線および画面の境界線に選択した素材をスナップする(合わせる)事が可能です。\nまた、「ガイド」と「定規」いう機能を使う事でより精密な配置が出来るので結果的に素材の整列が可能になります♪\nやり方 プログラムモニターをスナップインを有効にする まずはプログラムモニターをスナップインを有効にしましょう。\n表示→プログラムモニターをスナップインにチェックを入れれば有効になります。\n[adsense-responsive]\rまたプログラムウィンドウの以下のボタンをクリックする事でON／OFFを簡単に切り替えることが可能です。\nこれでプログラムモニターの中心や上下左右に対してスナップする事が可能になりました。\n定規機能とガイド機能を有効化 次に、より細かいスナップを可能にするために定規機能とガイド機能を有効にしましょう。\n表示→定規を表示と、ガイドを表示にチェックを入れれば有効になります。\nガイドは定規部分から上から下、左から右にドラッグする事で任意の場所に引くことが可能です。\nガイドを引くと、そのラインがスナップポイントになるのでお好きな場所へのスナップが可能になります♪\nもちろん、テキストもスナップが有効になっています♪\n終わりに 以上のように、PremiereProでも簡単に素材を揃える事が可能になりました。\nこの機能は動画編集をする上でとても便利な機能なので、是非覚えてみてください♪\n","date":"2020-06-06T15:34:58+09:00","image":"/wp-content/uploads/2020/06/premiereSnapEye.png","permalink":"/2020/06/06/10701/","title":"【Adobe Premiere Pro】動画像やテキストを画面の端や任意のフッテージに揃えて配置する方法【AfterEffecrtsの整列ツールに近づかせる】"},{"content":"アフターエフェクトで背景透過動画を出力したい YouTubeや趣味で動画編集をしている際に、背景が透過している動画を書き出して素材として使いたいという事があると思います。\nそんな方のために、AdobeのAfterEffectsを使って背景が透過した動画を書き出す方法をご紹介しようと思います♪\nやり方 コンポジションからレンダキューに追加 やり方はとても簡単です。\nメニューからコンポジション→レンダキューに追加を選択します。\nAdobe Media Encoderへのキューでは無理 通常の動画書き出しの場合は、メニューからコンポジション→Adobe Media Encoderキューに追加をして、MediaEncoderでH.264 MP4形式ので書き出しを行っていると思いますが、それだとアルファチャンネルありの透過で書き出すことは出来ませんので、ご注意ください。\nRGB+アルファに変更 すると、レンダーキューに追加されるのでロスレス設定を選択し出力モジュールダイアログを表示します。\n[adsense-responsive]\rその中で、形式をQuickTimeに変更し、ビデオ出力のチャンネルをRGB + アルファに変更してOKボタンをクリックします。\nこれで設定が変更されるので、レンダリングボタンをクリックしてレンダリングを実行しましょう。\nこれで背景が透過した動画が出力されます♪\n終わりに 見ている人が見やすいするためや、クオリティを上げるためには背景透過のフッテージを作ることが必要不可欠だと思います。\n思ったより簡単にAfterEffects単体で背景が透過した動画を作る事が出来たので、是非試してみてください♪\n","date":"2020-05-23T21:51:13+09:00","image":"/wp-content/uploads/2020/05/aeAlphaExportEye.png","permalink":"/2020/05/23/10684/","title":"【AfterEffects】アルファチャンネル付きの背景透過の動画を簡単に書き出す方法【動画編集】"},{"content":"音楽ファイルのBPMを測定してみよう 音楽編集や動画を作っている際に、仕様している楽曲ファイルのBPMが気になる場合がありますよね。\n今回はBPMを簡単に測れるBPM Analyzerを使ってBPMを測定してみようと思います♪\nBPM Analyzerは小さなアプリケーションで、その名が示すとおり曲の中で1分間ごとのビート数を見つけてくれます。BPM Analyzer 1.0.1のMac - ダウンロード\n手順 公式サイトからインストーラーをダウンロード まずはコチラからインストーラーをダウンロードしてください。\nダウンロードが完了したら、インストーラーを実行してインストールを完了させましょう。\nインストールはたったこれだけです！！\nAlfredでもヒットするようになりましたね♪\n使い方 ファイルをドラッグ\u0026amp;ドロップするだけ 使い方はとても簡単です。\nBPM測定したい音楽ファイルをBPM AnalyzerにD\u0026Dするだけです。\n今回はこちらの楽曲のBPMを測定してみました。\nTHYKIER - INTENSIFY [NCS Release] - YouTube\nそいや！\nおぉ、一瞬で判定されました。\n複数ファイルも対応 もちろん、複数ファイルの測定も対応しています。\nこれは使いやすいですね♪\n終わりに 以上のようにインストールから使い方までとても簡単でした。\nBPM測定をしたいと思っている方は是非こちらのアプリケーションを使ってみてはいかがでしょうか♪\n","date":"2020-05-01T21:11:32+09:00","image":"/wp-content/uploads/2020/05/bpmAnalyzerEye.jpg","permalink":"/2020/05/01/10650/","title":"【まとめて一瞬測定】BPM Analyzerでmp3やmp4のリズムを測る方法【Windows10/MacBook】"},{"content":"SwitchやPS4とパソコンでモニターを使い回す 出力を簡単に切り替える便利アイテム 前回、デュアルディスプレイの有効性のご紹介とオススメディスプレイについてご紹介する記事を執筆しました。\nAmazon HUANUO モニターアーム 2画面 デュアル ディスプレイアーム ガススプリング式 17～27インチ対応 耐荷重2-6.5kg グロメット式＆クランプ式 VESA100*100 (ブラック) Amazon BenQ モニター ディスプレイ GW2480 23.8インチ/フルHD/IPS/ウルトラスリムベゼル/DisplayPort,HDMI,VGA端子/ブライトネスインテリジェンス搭載 [adsense-responsive]\r関連記事 【作業効率アップ】BenQのモニターをサブディスプレイにしてみたら快適空間が出来上がってしまった【ゲーミングPC】 2020/04/22 1866文字 約4分で読めます 今回は、一つのPCモニターをHDMIケーブルを抜き差しする事なく出力を切り替える事が可能になるオススメアクセサリーを購入してみたのでご紹介しようと思います♪\nHDMI切替器 GANA 4Kx2K HDMI分配器/セレクター 今回購入したのはAmazonで約1000円ほどで販売されているこちらです！\nAmazon HDMI切替器 GANA 4Kx2K HDMI分配器/セレクター 3入力1出力金メッキコネクタ搭載1080p/3D対応(メス→オス) 電源不要 Chromecast Stick/Xbox One ゲーム機/レコーダー パソコン PS3 Xbox 3D 液晶テレビなどの対応 3つの入力をボタン一つで簡単に切り換える事が出来るので、ゲームとPCの出力操作や、メインデスクトップPCとサブノートPCやMacBookなどで同じディスプレイを共有可能になるため、とても便利なのでオススメのアイテムです！\nThunderbolt3(USB3.0 TypeC) To HDMI 変換 ケーブル 最近のMacBookをお使いの方は本体にThunderbolt3(USB3.0 TypeC)しかないため、こちらのケーブルを使う事でHDMI出力が可能になります！\nAmazon uni USB Type C HDMI 変換 ケーブル1.8m/4K 60Hz/Thunderbolt 3/USB3.1 USB C HDMI ケーブル 4K高解像度, MacBook Air Pro 2018 2020/ iPad Pro 2018 / Mac Mini/ Surface Go/ クロームブック/ Huawei Matebook 13 14(2020)など タイプC デバイスに対応 スペースグレー とりあえず持っておく事でHDMI出力が可能になるので購入しておく事をオススメします♪\n開封の儀 外装袋 切り替え機はこちらの袋に入れられています。\n早速取り出してみましょう！\nピリッ。\n内容物 中身は以下の通りです。\n内容物\rHDMI切り替え機\r取扱説明書\rカスタマーサポート説明用紙・名刺\r説明書は日本語で描かれれています。\n使い方自体もインストールなどの作業は不要で接続するだけで良いので戸惑うことはないと思います。\nカスタマーサポートの案内もあります。\n本体には3つの入力端子と1つの出力端子があります。\n切り替えはこちらのスイッチを押す事でInput1→Input2→Input3→Input1...の順番で切り替わります。\nUSBに接続する必要なく、HDMIに接続するだけで使えるのも便利ですね♪\n終わりに 以上のように簡単にHDMI出力の切り替えが出来るようになりました。\nゲームや複数PCを使用している方であれば、モニターを共有出来るようになるので是非導入してみてはいかがでしょうか♪\n","date":"2020-04-27T23:45:06+09:00","image":"/wp-content/uploads/2020/04/hdmiHubUnboxingEye-min.jpg","permalink":"/2020/04/27/10629/","title":"【デュアルディスプレイ】一つのモニターに出力するHDMIを簡単に切り替える方法【MacBook Pro/Windows10】"},{"content":"デュアルディスプレイを導入 作業効率化を求めてお金を生贄に召喚 テレワークで自宅にてPC作業をしたりPCゲームをしたり動画編集等をしている際に、画面が1つだけだと作業効率が悪いと感じる事はありませんか？\n画面が一つだと、ウィンドウを切り替えて作業をする必要がありちょっとめんどくさいですよね。\nモニターがもう一つあればそんな事をしなくても片方の画面を開きながら作業出来るのに・・・。\nって事で大人の経済力を発揮して購入しました。\nBenQ モニター DisplayPort搭載ディスプレイ GW2480 23.8インチ/フルHD 今回購入したのは、BenQ モニター ディスプレイ GW2480 23.8インチです。\nAmazon BenQ モニター ディスプレイ GW2480 23.8インチ/フルHD/IPS/ウルトラスリムベゼル/DisplayPort,HDMI,VGA端子/ブライトネスインテリジェンス搭載 BenQはPCモニターを多く販売しており、ゲーミングモニターメーカーとしても人気があります！\nまた、HDMIに加えディスプレイポートでの接続も出来るのが嬉しいですよね♪\nメインモニターは同じくBenQの144Hzに対応しているゲーミングモニターを使用しています。\nこちらもフルHDかつディスプレイポート付き、さらにはブルーライト軽減機能があるのでオススメです♪\nAmazon BenQ ゲーミングモニター ディスプレイ ZOWIE XL2411P 24インチ/フルHD/HDMI,DP,DVI端子/144Hz/1ms/ブルーライト軽減 HUANUO モニターアーム 2画面 デュアル ディスプレイアーム デュアルディスプレイにする際に通常のスタンドを使っていると、デスク上の作業スペースが圧縮されてしまうので、ディスプレイアームを購入する事をオススメします。\nAmazon HUANUO モニターアーム 2画面 デュアル ディスプレイアーム ガススプリング式 17～27インチ対応 耐荷重2-6.5kg グロメット式＆クランプ式 VESA100*100 (ブラック) Bauhutte(バウヒュッテ) ロングモニターアーム デュアル BMA-200N-BK 今回は上記のディスプレイアームを購入しましたが、PCメーカーの大手Bauhutteからも販売されているものがあるのでお好みで選んでみてください♪\nAmazon Bauhutte(バウヒュッテ) ロングモニターアーム デュアル BMA-200N-BK ブラック 複数マシンで作業をしていたりPCとゲームで同じモニターを共有したい場合は、こちらのHDMI出力切り替え機を利用する事でHDMIケーブルを抜き差しせずに切り換える事が可能になるので幸せになります！\nAmazon HDMI切替器 GANA 4Kx2K HDMI分配器/セレクター 3入力1出力金メッキコネクタ搭載1080p/3D対応(メス→オス) 電源不要 Chromecast Stick/Xbox One ゲーム機/レコーダー パソコン PS3 Xbox 3D 液晶テレビなどの対応 関連記事 【デュアルディスプレイ】一つのモニターに出力するHDMIを簡単に切り替える方法【MacBook Pro/Windows10】 2020/04/27 1286文字 約3分で読めます 開封の儀 BenQ モニター 外装箱 こちらのダンボールで配送されてきました。\n約24インチなのでそれなりのサイズ感\n早速開けていきましょう！\nパカッ。\n梱包物 中身は以下の通りです。\n梱包物\rモニター本体\rACコード\rHDMIケーブル\rスタンドパーツ\r取扱説明書\rモニターはこんな感じ。\nギリギリまで液晶になっているので、23.8インチの割に横幅がコンパクトで省スペース仕様です！\nロゴは下部中央にあります。\n端子は以下の通り。\n操作ボタンも結構多くカスタム割り当てが出来るのでHDMIとディスプレイポートの切り替えも簡単に出来ます♪\n背面の固定部分はお馴染みのVESA規格となっています。\nスタンドはVESA規格ではなく、モニター下部に取り付ける形式となっています。\nディスプレイアーム 外装箱 ダンボールはこんな感じです。\nダンボール自体は大きめですが、ディスプレイアームなのでそこまで重くありません。\n早速開けていきましょう！\nパカッ。\n梱包物 中身は以下の通り。\n[adsense-responsive]\r梱包物\rディスプレイアーム(2本)\r取扱説明書\r固定器具パーツ\rVESA規格用ネジ\r取扱説明書は日本語で丁寧に描かれているので組み立てと取り付けについては困る事はないと思うので割愛します。\nデスクにはこのような形で挟み込む形式で固定する事が可能です。\nパーツもギリギリまで壁面に近づけるように作られていますので、かなり壁に寄せる事が出来ます！\n良い感じじゃん！(ニッコリ)\n終わりに 以上のように快適デュアルモニター生活が始まりました。\n単一モニターで作業するのとは比べ物にならないくらい快適にPC作業が出来るようになるので、試してみてはいかがでしょうか♪\n","date":"2020-04-22T20:34:24+09:00","image":"/wp-content/uploads/2020/04/benqSubMonitorEye.jpg","permalink":"/2020/04/22/10589/","title":"【作業効率アップ】BenQのモニターをサブディスプレイにしてみたら快適空間が出来上がってしまった【ゲーミングPC】"},{"content":"Vue-CLI+Quasar+Pugで静的サイトを作ってみる フロントの技術はめまぐるしい変化を遂げてますが、最近はVue.jsに落ち着いた感が出てきている気がします。\nThe Progressive\rJavaScript Framework\rなぜ VUE.JS ? はじめる Vue.js\nそこで、今回はVue.jsを使ったプロジェクトを作成するところまでを試してみようと思います♪\n手順 Dockerfileの作成 まずは入れ物となるDockerfileを作成しましょう。\nDockerfile FROM node:12.16.1 WORKDIR /usr/src/app RUN yarn global add @vue/cli vue-cliさえ使えれば良いのでここでは特にモジュールは入れない事とします。\ndocker-compose.ymlの作成 次にdocker-compose.ymlを作成しましょう。\ndocker-compose.yml version: \u0026#39;3\u0026#39; services: app: build: . container_name: portfolio-vue ports: - \u0026#34;10080:10080\u0026#34; volumes: - .:/usr/src/app working_dir: /usr/src/app stdin_open: true tty: true イメージのBuild では、一旦ここまでの設定でDockerイメージをビルドしてみましょう。\ndocker-compose build Building app Step 1/3 : FROM node:12.16.1 12.16.1: Pulling from library/node Digest: sha256:46f4c17e1edbde36d60a9f6362db7912cfe301bac89afef7cc92421ab3e7ca18 Status: Downloaded newer image for node:12.16.1 ---\u0026gt; 88c089733a3b Step 2/3 : WORKDIR /usr/src/app ---\u0026gt; Using cache ---\u0026gt; 311e9471c5a2 Step 3/3 : RUN yarn global add @vue/cli ---\u0026gt; Running in 446ee64187cb yarn global v1.22.0 [1/4] Resolving packages... mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.) [2/4] Fetching packages... info fsevents@1.2.12: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@1.2.12\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed \u0026#34;@vue/cli@4.3.1\u0026#34; with binaries: - vue Done in 175.56s. Successfully built 311e9471c5a2 Successfully tagged portfolio-vue_app:latest ビルドが成功したのでコンテナを起動してみます。\ndocker-compose up -d Creating network \u0026#34;portfolio-vue_default\u0026#34; with the default driver Creating portfolio-vue ... done 正常にコンテナが起動しましたね♪\nコンテナ内の作業 では、次はコンテナに入ってプロジェクトを整えていきましょう。\ndocker-compose exec app /bin/bashでコンテナの中に入りましょう。\nVue-CLIでプロジェクトを作成 まずはVue-CLIを使ってプロジェクトの雛壇を作成しましょう。\n設定はよしなに選んでください。\nvue create \u0026lt;プロジェクト\u0026gt; ? Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? Yes Vue CLI v4.3.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, PWA, CSS Pre-processors, Linter ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Basic ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No ? Pick the package manager to use when installing dependencies: Yarn Vue CLI v4.3.1 ✨ Creating project in /usr/src/app/vue. ⚙️ Installing CLI plugins. This might take a while... yarn install v1.22.0 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.12: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@1.2.12\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.2: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@2.1.2\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. info To upgrade, run the following command: $ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash Done in 176.63s. 🚀 Invoking generators... 📦 Installing additional dependencies... yarn install v1.22.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.12: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@1.2.12\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.2: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@2.1.2\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. Done in 107.25s. ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project vue. 👉 Get started with the following commands: $ cd vue $ yarn serve 動作確認 これでプロジェクトの雛壇は出来たので動作確認をしてみましょう。\n作成したディレクトリに移動して、以下のコマンドで開発用サーバーを起動してください。\nyarn serve yarn run v1.22.0 $ vue-cli-service serve INFO Starting development server... Starting type checking service... Using 1 worker with 2048MB memory limit 98% after emitting CopyPlugin DONE Compiled successfully in 18762ms 1:05:15 PM No type errors found Version: typescript 3.8.3 Time: 6811ms App running at: - Local: http://localhost:8080/ It seems you are running Vue CLI inside a container. Access the dev server via http://localhost:\u0026lt;your container\u0026#39;s external mapped port\u0026gt;/ Note that the development build is not optimized. To create a production build, run yarn build. 無事に起動しました。\nCLIで生成されたディレクトリは以下の通りです。\ntree -L 3 . ├── Dockerfile ├── README.md ├── docker-compose.yml └── {作成プロジェクト} ├── README.md ├── babel.config.js ├── node_modules │ └── 略 ├── package.json ├── public │ ├── img │ ├── index.html │ └── robots.txt ├── src │ ├── App.vue │ ├── assets │ ├── components │ ├── data │ ├── favicon.ico │ ├── main.ts │ ├── quasar.js │ ├── registerServiceWorker.ts │ ├── shims-tsx.d.ts │ ├── shims-vue.d.ts │ └── styles ├── tsconfig.json └── yarn.lock が、ポート番号が8080となっており、docker-compose.ymlで開けたポートとズレちゃってますねorz\nvue.config.jsで開発サーバーのポート番号を変更 vueプロジェクトの開発サーバーのポートはvue.config.jsを作成して設定を追加する事で変える事が出来ます。\n[adsense-responsive]\rvue.config.js module.exports = { devServer: { port: 10080, host: \u0026#39;0.0.0.0\u0026#39;, disableHostCheck: true, }, }; 確認 上記ファイルを作成したら再度起動してみてください。\nyarn serve yarn run v1.22.0 $ vue-cli-service serve INFO Starting development server... Starting type checking service... Using 1 worker with 2048MB memory limit 98% after emitting CopyPlugin DONE Compiled successfully in 10038ms 1:09:11 PM No type errors found Version: typescript 3.8.3 Time: 8633ms App running at: - Local: http://localhost:10080/ It seems you are running Vue CLI inside a container. Access the dev server via http://localhost:\u0026lt;your container\u0026#39;s external mapped port\u0026gt;/ Note that the development build is not optimized. To create a production build, run yarn build. 起動ログも無事にポートが10080に変わっていますね！\nブラウザからlocalhost:18080/\u0026nbsp;にアクセスする事で正常に表示もされました♪\nQuasarをインストール 次にVue.jsのデザインフレームワークのQuasarを追加しましょう。\n関連記事 【Vue.jsのUIフレームワーク】Electronアプリのデザインフレームワークに「Quasar」をインストール・導入する方法 2019/09/08 2008文字 約5分で読めます vue add quasar 📦 Installing vue-cli-plugin-quasar... yarn add v1.22.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.12: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@1.2.12\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.2: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@2.1.2\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ vue-cli-plugin-quasar@2.0.0 info All dependencies └─ vue-cli-plugin-quasar@2.0.0 Done in 94.88s. ✔ Successfully installed plugin: vue-cli-plugin-quasar ? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes ? Pick a Quasar components \u0026amp; directives import strategy: (can be changed later) Auto import (kebab-case) ? Pick your favorite CSS preprocessor: Stylus ? Choose Quasar Icon Set Material ? Default Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/ui/lang en-us ? Use RTL support? No ? Select features: IE11 support, Roboto font, Material, Material Outlined, Material Round, Material Sharp, Fontawesome, Ionicons, MDI, Eva 🚀 Invoking generator for vue-cli-plugin-quasar... 📦 Installing additional dependencies... yarn install v1.22.0 [1/4] Resolving packages... [2/4] Fetching packages... info There appears to be trouble with your network connection. Retrying... info fsevents@1.2.12: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@1.2.12\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.2: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@2.1.2\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. Done in 151.58s. ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-quasar INFO quasar Documentation can be found at: https://quasar.dev Quasar is relying on donations to evolve. We\u0026#39;d be very grateful if you can read our manifest on \u0026#34;Why donations are important\u0026#34;: https://quasar.dev/why-donate Donation campaign: https://donate.quasar.dev Any amount is very welcomed. If invoices are required, please first contact razvan@quasar.dev Please give us a star on Github if you appreciate our work: https://github.com/quasarframework/quasar Enjoy! - Quasar Team 自動変換をYにした場合は以下のように自動でQuasarの形式に変換されてます。\nApp.vue \u0026lt;template\u0026gt; \u0026lt;q-layout view=\u0026#34;lHh Lpr lFf\u0026#34;\u0026gt; \u0026lt;q-header elevated class=\u0026#34;glossy\u0026#34;\u0026gt; \u0026lt;q-toolbar\u0026gt; \u0026lt;q-btn flat dense round @click=\u0026#34;leftDrawerOpen = !leftDrawerOpen\u0026#34; aria-label=\u0026#34;Menu\u0026#34; icon=\u0026#34;menu\u0026#34; /\u0026gt; \u0026lt;q-toolbar-title\u0026gt; Quasar App \u0026lt;/q-toolbar-title\u0026gt; \u0026lt;div\u0026gt;Quasar v{{ $q.version }}\u0026lt;/div\u0026gt; \u0026lt;/q-toolbar\u0026gt; \u0026lt;/q-header\u0026gt; \u0026lt;q-drawer v-model=\u0026#34;leftDrawerOpen\u0026#34; show-if-above bordered content-class=\u0026#34;bg-grey-2\u0026#34; \u0026gt; \u0026lt;q-list\u0026gt; \u0026lt;q-item-label header\u0026gt;Essential Links\u0026lt;/q-item-label\u0026gt; \u0026lt;q-item clickable tag=\u0026#34;a\u0026#34; target=\u0026#34;_blank\u0026#34; href=\u0026#34;https://quasar.dev\u0026#34;\u0026gt; \u0026lt;q-item-section avatar\u0026gt; \u0026lt;q-icon name=\u0026#34;school\u0026#34; /\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-item-section\u0026gt; \u0026lt;q-item-label\u0026gt;Docs\u0026lt;/q-item-label\u0026gt; \u0026lt;q-item-label caption\u0026gt;quasar.dev\u0026lt;/q-item-label\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;/q-item\u0026gt; \u0026lt;q-item clickable tag=\u0026#34;a\u0026#34; target=\u0026#34;_blank\u0026#34; href=\u0026#34;https://github.com/quasarframework/\u0026#34;\u0026gt; \u0026lt;q-item-section avatar\u0026gt; \u0026lt;q-icon name=\u0026#34;code\u0026#34; /\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-item-section\u0026gt; \u0026lt;q-item-label\u0026gt;Github\u0026lt;/q-item-label\u0026gt; \u0026lt;q-item-label caption\u0026gt;github.com/quasarframework\u0026lt;/q-item-label\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;/q-item\u0026gt; \u0026lt;q-item clickable tag=\u0026#34;a\u0026#34; target=\u0026#34;_blank\u0026#34; href=\u0026#34;https://chat.quasar.dev\u0026#34;\u0026gt; \u0026lt;q-item-section avatar\u0026gt; \u0026lt;q-icon name=\u0026#34;chat\u0026#34; /\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-item-section\u0026gt; \u0026lt;q-item-label\u0026gt;Discord Chat Channel\u0026lt;/q-item-label\u0026gt; \u0026lt;q-item-label caption\u0026gt;chat.quasar.dev\u0026lt;/q-item-label\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;/q-item\u0026gt; \u0026lt;q-item clickable tag=\u0026#34;a\u0026#34; target=\u0026#34;_blank\u0026#34; href=\u0026#34;https://forum.quasar.dev\u0026#34;\u0026gt; \u0026lt;q-item-section avatar\u0026gt; \u0026lt;q-icon name=\u0026#34;forum\u0026#34; /\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-item-section\u0026gt; \u0026lt;q-item-label\u0026gt;Forum\u0026lt;/q-item-label\u0026gt; \u0026lt;q-item-label caption\u0026gt;forum.quasar.dev\u0026lt;/q-item-label\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;/q-item\u0026gt; \u0026lt;q-item clickable tag=\u0026#34;a\u0026#34; target=\u0026#34;_blank\u0026#34; href=\u0026#34;https://twitter.com/quasarframework\u0026#34;\u0026gt; \u0026lt;q-item-section avatar\u0026gt; \u0026lt;q-icon name=\u0026#34;rss_feed\u0026#34; /\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-item-section\u0026gt; \u0026lt;q-item-label\u0026gt;Twitter\u0026lt;/q-item-label\u0026gt; \u0026lt;q-item-label caption\u0026gt;@quasarframework\u0026lt;/q-item-label\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;/q-item\u0026gt; \u0026lt;/q-list\u0026gt; \u0026lt;/q-drawer\u0026gt; \u0026lt;q-page-container\u0026gt; \u0026lt;HelloWorld /\u0026gt; \u0026lt;/q-page-container\u0026gt; \u0026lt;/q-layout\u0026gt; \u0026lt;/template\u0026gt; Pugの追加 次はPugの追加をしましょう。\n関連記事 【簡単瞬殺】vue-cliでpugを導入して記述量を半分以下に減らす方法【Electron】 2019/09/11 636文字 約2分で読めます [adsense-responsive]\rHTMLのようなマークアップだと記述量が多くなってしまうので、階層化によって記述が出来るPugだと記述量が圧倒的に少なくなります！\nただ、ESLintなどが対応していないなどのデメリットもあるのでお好みで導入してください。\n今回は簡単なページを作るだけなのでESLintの懸念は一旦忘れて導入してみようと思います♪\n追加は以下のコマンドで簡単に出来ます。\nvue add pug 📦 Installing vue-cli-plugin-pug... yarn add v1.22.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@1.2.12: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@1.2.12\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@2.1.2: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@2.1.2\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 33 new dependencies. info Direct dependencies └─ vue-cli-plugin-pug@1.0.7 info All dependencies ... (略) ... Done in 106.08s. ✔ Successfully installed plugin: vue-cli-plugin-pug Plugin vue-cli-plugin-pug does not have a generator to invoke App.vueのHTML記法をPug記法に変換 次にApp.vueのHTML記述をPug記法に変換しましょう。\nApp.vue \u0026lt;template lang=\u0026#34;pug\u0026#34;\u0026gt; q-layout(view=\u0026#39;lHh Lpr lFf\u0026#39;) q-header.glossy(elevated=\u0026#39;\u0026#39;) q-toolbar q-btn(flat=\u0026#39;\u0026#39;, dense=\u0026#39;\u0026#39;, round=\u0026#39;\u0026#39;, @click=\u0026#39;leftDrawerOpen = !leftDrawerOpen\u0026#39;, aria-label=\u0026#39;Menu\u0026#39;, icon=\u0026#39;menu\u0026#39;) q-toolbar-title Quasar App div Quasar v{{ $q.version }} q-drawer(v-model=\u0026#39;leftDrawerOpen\u0026#39;, show-if-above=\u0026#39;\u0026#39;, bordered=\u0026#39;\u0026#39;, content-class=\u0026#39;bg-grey-2\u0026#39;) q-list q-item-label(header=\u0026#39;\u0026#39;) Essential Links q-item(clickable=\u0026#39;\u0026#39;, tag=\u0026#39;a\u0026#39;, target=\u0026#39;_blank\u0026#39;, href=\u0026#39;https://quasar.dev\u0026#39;) q-item-section(avatar=\u0026#39;\u0026#39;) q-icon(name=\u0026#39;school\u0026#39;) q-item-section q-item-label Docs q-item-label(caption=\u0026#39;\u0026#39;) quasar.dev q-item(clickable=\u0026#39;\u0026#39;, tag=\u0026#39;a\u0026#39;, target=\u0026#39;_blank\u0026#39;, href=\u0026#39;https://github.com/quasarframework/\u0026#39;) q-item-section(avatar=\u0026#39;\u0026#39;) q-icon(name=\u0026#39;code\u0026#39;) q-item-section q-item-label Github q-item-label(caption=\u0026#39;\u0026#39;) github.com/quasarframework q-item(clickable=\u0026#39;\u0026#39;, tag=\u0026#39;a\u0026#39;, target=\u0026#39;_blank\u0026#39;, href=\u0026#39;https://chat.quasar.dev\u0026#39;) q-item-section(avatar=\u0026#39;\u0026#39;) q-icon(name=\u0026#39;chat\u0026#39;) q-item-section q-item-label Discord Chat Channel q-item-label(caption=\u0026#39;\u0026#39;) chat.quasar.dev q-item(clickable=\u0026#39;\u0026#39;, tag=\u0026#39;a\u0026#39;, target=\u0026#39;_blank\u0026#39;, href=\u0026#39;https://forum.quasar.dev\u0026#39;) q-item-section(avatar=\u0026#39;\u0026#39;) q-icon(name=\u0026#39;forum\u0026#39;) q-item-section q-item-label Forum q-item-label(caption=\u0026#39;\u0026#39;) forum.quasar.dev q-item(clickable=\u0026#39;\u0026#39;, tag=\u0026#39;a\u0026#39;, target=\u0026#39;_blank\u0026#39;, href=\u0026#39;https://twitter.com/quasarframework\u0026#39;) q-item-section(avatar=\u0026#39;\u0026#39;) q-icon(name=\u0026#39;rss_feed\u0026#39;) q-item-section q-item-label Twitter q-item-label(caption=\u0026#39;\u0026#39;) @quasarframework q-page-container HelloWorld \u0026lt;/template\u0026gt; ... (略) ... templateタグにlang=\"pug\"を追加するのを忘れずに。\n確認 では、ここまでの修正を確認してみましょう。\n正常に表示が出来ました♪\nVSCodeのPrettierの設定 こちらの設定は好みによりますが、VSCodeの保存時の自動コードフォーマットを有効にしたい方は以下の記事を参考にして追加してみてください♪\n関連記事 【Prettier・ESLint】Vue-CLIで生成したプロジェクトにVSCodeの自動整形と静的チェックを有効化する方法【フロントエンド最新技術】 2020/04/18 1310文字 約3分で読めます 終わりに これでPug+Quasarを用いたVueプロジェクトの準備が出来ました。\nVue-CLIを使えばコマンドを打つだけでだいたい整える事が出来るので、ぜひ参考にしてみてください♪\n","date":"2020-04-21T00:04:44+09:00","image":"/wp-content/uploads/2020/04/vueWithDockerEye.jpg","permalink":"/2020/04/21/10491/","title":"【ホストマシンを汚さずに】docker-composeでvue.jsプロジェクトの開発環境を構築する方法【Vue-CLI】"},{"content":"テレワークや在宅作業の運動不足を解消 コロナウィルスの影響で在宅作業になると、通勤が無くなったりで運動不足になってしまいますよね。\nましてや、ジムなどに通ってたからはジム側の休業でも身体を動かす事が出来なくなってしまいます。\nそこで今回は、自宅でトレーニングを快適に行うための道具を買ってみたので一つ一つ紹介しようと思います♪\nオススメトレーニング器具 IROTEC(アイロテック) クロームジム ダンベル やはり自宅で筋トレするなら、邪魔にならずダンベルがオススメですね！\nAmazon IROTEC（アイロテック） ラバー ダンベル 40KGセット （片手20kg×2個） バーはこちらの筒に入っています。\n直径は一般的な28mmとなっています。\n重りは1.25Kgが4個、2.5Kgが4個、5Kgが2個セットとなっています。\nプレート単体を持つ事でスクワットの負荷を上げる事も出来るのでオススメです♪\nまた、床の傷防止や置いた時の衝撃を軽減するためのラバーリングも付いています。\nadidas(アディダス) トレーニング トレーニングマット 次に紹介するのはトレーニングマットです。\nAmazon adidas(アディダス) トレーニング トレーニングマット ADMT-12235 トレーニング前後の柔軟はとても大事ですが、直接フローリングでやると身体が痛くなったり汚れてしまうので一枚持っておくだけでもオススメです！\n材質はかなりクッション性の高い素材なので、腹筋やプランクをやる際に使う事で身体への負担がほぼ無くなります！\nもちろん、ヨガを行う際のマットとしても使えるので女性にもオススメです！\nまた、持ち運び用のマジックバンドも付属されているのもポイントです♪\nダンノ(DANNO) バーベル ダンベル プレート止め ダンベルの重りを変える際、標準で付属しているストッパーだと、重りを変える際に回してから取り外したり取り付ける必要があるのでとてもめんどくさいよね。\nそんな方向けのアイテムがダンベルプレート止めです！\n握って広げるだけでダンベルバーに取り付け可能なので、プレートの取り外しや取り付けが段違いでやりやすくなります！\n部位によって重さを変える作業が楽になるので、マストで購入すべきアイテムだと思います♪\nAmazon ダンノ(DANNO) バーベル ダンベル プレート止め 外カラー (クリップ式) 28mm用 D-680 トレーニング グローブ ダンベルを素手で握るとグリップ力が弱くて効果が軽減されてしまうので、トレーニンググローブを購入するのもオススメします♪\nAmazon ウェイトリフティング トレーニング グローブ リストフラップ付き メッシュ仕様 2カラー ３サイズ M/L/XL 【GROW WITH】 (ブラック, L) こちらはグリップ力も高める事が出来て、リストフラップがあるので手首を保護する事も出来ます！\n手が痛くならないように手のひら部分は厚く滑り止めが施されています。\nトレーニングベンチの代わり こちらは本来は収納も出来る便利オッドマンですが、\u001d単体での対荷重が約80Kgとなっているので、2つ用意する事でダンベルベンチが可能になったり、ワンハンドローイングをするための体勢を作るためにも使えます！\n単体でもかなり使い勝手の良い収納オッドマンなので、筋トレの幅を広げるためにもこちらも購入する事をオススメします♪\nAmazon コンパクト収納スツール グレー 関連記事 【オススメ収納スツール】オッドマンチェアや踏み台としても使える便利ボックスを買ってみたら幸せになった【開封レビュー】 2020/04/17 660文字 約2分で読めます 終わりに 以上のアイテムを揃えれば、大体のトレーニングを自宅で行う事が可能になります。\nコロナによる外出自粛は長期戦になると思うので、ぜひ買ってみてはいかがでしょうか♪\n","date":"2020-04-20T00:59:55+09:00","image":"/wp-content/uploads/2020/04/homeTrainingGoodsEye.jpg","permalink":"/2020/04/20/10532/","title":"【自宅トレーニングルーム化】ジムに通う事なく自宅で筋トレするための必要な道具をまとめて買ったので開封レビューしていくぅ！【一人暮らしも人も】"},{"content":"PrettierとESLintを有効活用しよう 標準化をサポートしてくれるお助けツール コーディングをしていると、人によってコードの書き方にバラつきが出てしまいます。\nプロジェクトとして開発を進めていると、ある程度ルールに沿ったコーディングにしてレビューの負荷軽減や品質担保をしたいところだと思います。\nそこで、今回はPrettierとESLintを使ってファイル保存時に設定ファイルによってコードを自動フォーマットする方法をご紹介しようと思います。\n使い方が複雑。。。 とはいえ使い方がやや複雑で、ESLintから内部的にPrettierを呼び出す方法やESLintとPrettierを並行して使う方法、またVSCode側のプラグインを使う方法など様々な使い方があり、ネット上の記事を見ても多種多様なやり方があります。\n今回紹介する方法もその中の一つとして参考にしていただければなと思います。\nやり方 前提 今回はVue-CLIを用いて作成したプロジェクトに適用します。\nvue create format Vue CLI v4.3.1 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No .prettierrc.jsを.prettierrcにリネーム まずは自動生成された.prettierrc.jsを.prettierrcにリネームした上でJson形式に変更してください。\n.prettierrc.jsが無かったら新規作成で問題ありません。\n.prettierrc { \u0026#34;tabWidth\u0026#34;: 2, \u0026#34;singleQuote\u0026#34;: true, \u0026#34;endOfLine\u0026#34;: \u0026#34;auto\u0026#34;, \u0026#34;trailingComma\u0026#34;: \u0026#34;es5\u0026#34; } 今回はこんな感じの設定にしてみました。\n.prettierrc.jsを.prettierrcにリネーム まずは自動生成された.prettierrc.jsを.prettierrcにリネームした上でJson形式に変更してください。\nそもそも.prettierrc.jsが無かったら新規作成で問題ありません。\n.prettierrc { \u0026#34;tabWidth\u0026#34;: 2, \u0026#34;singleQuote\u0026#34;: true, \u0026#34;endOfLine\u0026#34;: \u0026#34;auto\u0026#34;, \u0026#34;trailingComma\u0026#34;: \u0026#34;es5\u0026#34; } 今回はこんな感じの設定にしてみました。\n次は、.eslintrc.jsを確認しましょう。\nこちらは自動生成された状態のままにしておきます。\n.eslintrc.js module.exports = { root: true, env: { node: true, }, extends: [ \u0026#39;plugin:vue/essential\u0026#39;, \u0026#39;eslint:recommended\u0026#39;, \u0026#39;@vue/typescript/recommended\u0026#39;, \u0026#39;@vue/prettier\u0026#39;, \u0026#39;@vue/prettier/@typescript-eslint\u0026#39;, ], parserOptions: { ecmaVersion: 2020, }, rules: { \u0026#39;no-console\u0026#39;: process.env.NODE_ENV === \u0026#39;production\u0026#39; ? \u0026#39;warn\u0026#39; : \u0026#39;off\u0026#39;, \u0026#39;no-debugger\u0026#39;: process.env.NODE_ENV === \u0026#39;production\u0026#39; ? \u0026#39;warn\u0026#39; : \u0026#39;off\u0026#39;, }, }; .vscode/settings.jsonを作成 次に、VSCode用の設定ファイルを作成しましょう。\nプロジェクトルートに.vscode/settings.jsonを作成し、以下の設定を追加してください。\n.vscode/settings.json { \u0026#34;editor.formatOnSave\u0026#34;: true, \u0026#34;eslint.options\u0026#34;: { \u0026#34;extensions\u0026#34;: [\u0026#34;.js\u0026#34;, \u0026#34;.vue\u0026#34;] }, \u0026#34;eslint.validate\u0026#34;: [\u0026#34;javascript\u0026#34;, \u0026#34;vue\u0026#34;] } エディターの保存時にフォーマットをかける設定をONにしています。\n確認 では、実際にApp.vueのファイルを保存してみましょう。\n自動整形が行われるようになりましたね♪\nESLintも効いているようです♪\nprettier.configPathで設定ファイルを指定 .prettierrcがルート階層以外にある場合は、prettier.configPathで指定する事が可能です。\n.vscode/settings.json { ... (略) ... \u0026#34;prettier.configPath\u0026#34;: \u0026#34;path/to/.prettierrc\u0026#34; // 指定 } eslint.workingDirectoriesで設定ファイルを指定 .eslintrc.jsがルート階層以外にある場合も同様に、eslint.workingDirectoriesで指定する事が可能です。\n.vscode/settings.json { ... (略) ... \u0026#34;eslint.workingDirectories\u0026#34;: [\u0026#34;./path/to\u0026#34;], // 指定 } 終わりに 以上のように設定ファイルの追加と軽微な修正だけでファイルの自動整形が可能になりました。\n複数人開発をしている場合は、この設定を追加するだけで開発効率が上がるので是非試してみてください♪\n","date":"2020-04-18T20:10:29+09:00","image":"/wp-content/uploads/2020/04/vsCodePritterToVueEye.jpg","permalink":"/2020/04/18/10517/","title":"【Prettier・ESLint】Vue-CLIで生成したプロジェクトにVSCodeの自動整形と静的チェックを有効化する方法【フロントエンド最新技術】"},{"content":"一人暮らしにもピッタリの使い勝手抜群の便利グッズ 武田コーポレーション コンパクト収納スツール 日常生活をしていると、収納スペースに困ったり電球交換や高い場所の物を取る際に届かなかったり、知人が来た際に座るスペースが無かったりと困る場合が多々あると思います。\n今回はたった一つのグッズでこの3つの悩みを解消してくれるアイテムを見つけたのでご紹介しようと思います♪\nAmazon コンパクト収納スツール グレー 開封の儀 外装箱 パッケージはこんな感じです。\n収納も出来て座れて踏み台にも出来る用途が様々なスツールとなっています！\n早速開封していきましょう！\nパカッ。\n梱包物 中身は以下の通りです。\n天板部分をひっくり返すと、こんな感じで折りたたまれている事が分かります。\n取り出すと、底板とボックスパーツが出てきました。\nボックスパーツを広げると、底のチャックを閉めて箱の形に組み立てましょう。\n裏面はこんな感じ。\nこのままだと底部分が布一枚で強度が低いので、底板をはめ込みます。\n組み立てはこれだけで完了です！\n天板を閉じればあら不思議。\n収納スツールの完成です！\n30cm四方なので、思ったよりでかくタオルケットやPC用品、その他様々なものを入れる事が出来ます。♪\nまた、80Kgまで耐える事が出来るので女性から男性まで幅広く使う事が出来ます。\nこの強度なら足場に使っても問題無さそうですね♪\n終わりに 以上のように使い勝手の良い収納スツールでした。\n持ち運びや折りたたみも出来てとりあえず1個家にあるだけで助かる事が多いので、是非購入してみてはいかがでしょうか♪\n","date":"2020-04-17T18:24:18+09:00","image":"/wp-content/uploads/2020/04/compactStoolEye.jpg","permalink":"/2020/04/17/10463/","title":"【オススメ収納スツール】オッドマンチェアや踏み台としても使える便利ボックスを買ってみたら幸せになった【開封レビュー】"},{"content":"もしもアフェリエイト経由で売れた商品を確認したい 審査合格しやすい もしもアフェリエイトに登録している方は、Amazonアフェリエイトプロモーションも利用している方が多いと思います。\n直接申請するよりも通過の確率が高く最低支払い額も安いためアフェリエイト初心者にはオススメです。\n成果の内訳を見たい・・・ 実際にもしもアフェリエイト経由でAmazonの商品が売れた際、報酬額はレポート画面から確認出来るのですが具体的に何の商品が売れたのかが確認出来ないので困っている、、、という方をたまに見受けられます。\n試してみると通常のレポート画面では概要しか見れず、商品名までは確認出来ません。\n確かに開いても商品名までは表示されませんね。。。orz\n今回はそんなお困りの方へ、もしもアフェリエイトでAmazonアソシエイトプロモーションで何の商品が売れたかを確認する方法をご紹介しようと思います♪\n確認方法 プロモーションレポートからCSV出力 \u0010\nやり方は簡単です。\nレポート画面の初期表示のサイトタブからプロモーションタブに切り替えて商品情報ボタンをクリックしダウンロードしたCSVに記載されています！\n商品名や発生日、金額まで乗っているのでレポートとしてかなり優秀なCSVとなっています♪\n終わりに 以上のように、簡単にもしもアフェリエイト経由でのAmazonアソシエイトの詳細レポートを確認する事が出来ました。\nお困りの方は是非試してみてください♪\n","date":"2020-04-15T19:04:10+09:00","image":"/wp-content/uploads/2020/04/moshimoAfAmazonReportItemNameEye.jpg","permalink":"/2020/04/15/10451/","title":"【もしもアフェリエイト】Amazonアソシエイト で何が売れたかをレポートで確認する方法【成果報酬】"},{"content":"CloudFrontはgzip配信可能 うわ・・私のサイト遅すぎ・・・？ 皆さんはCloudFront使っていますか？\n当ブログはWorpress+StaticPress+CloudFront+S3を組み合わせて、完全静的サイトとして運用しています。\nPHP処理やDBアクセスが無いので、\nうわ・・私のサイト遅すぎ・・・？\nという心配をする必要も無いくらい、スピーディーな表示を実現出来るので満足しています♪\n関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます Accept-Encodingで高速化 そして先日ネットサーフィンをしていたところ、さらにサイトのパフォーマンスを向上するためのテクニックを発見しました！\nそれは、gzip配信を行うという事です！\ngzipについての説明は割愛しますが、簡単にいうとHTMLをgzip形式で圧縮したものを配信する事でデータ量が減りよりパフォーマンスが早くなるという技術です。\nCloudFrontでgzip配信に変更するのはとても簡単だという事だったので、実際にやってみました♪\n画像ファイルは圧縮されないので注意 gzip配信によるメリットはテキストコンテンツの圧縮となっており、画像ファイル等は対象に含まれずに今まで通りの配信になるので軽くなるといった事はないのでご注意ください！\n手順 作業前の確認 まず、変更する前はリクエストを投げるとこのような形式でレスポンスが帰って来ました。\ncurl -D - -s -o /dev/null -w \u0026#39;%\u0026lt;time_starttransfer\u0026gt; \u0026#39; -H \u0026#39;Accept-Encoding:gzip,deflate\u0026#39; \u0026#39;/2020/03/30/10389/\u0026#39; HTTP/2 200 content-type: text/html content-length: 136410 date: Tue, 31 Mar 2020 15:34:16 GMT last-modified: Mon, 30 Mar 2020 09:27:22 GMT etag: \u0026#34;XXXXXXXX\u0026#34; server: AmazonS3 vary: Accept-Encoding x-cache: Hit from cloudfront via: 1.1 XXXXXXXX.cloudfront.net (CloudFront) x-amz-cf-pop: NRT20-C1 x-amz-cf-id: XXXXXXXX-XXXXXXXX== age: 507 0.453218 CloudFrontのCompress Objects Automaticallyを変更 変更方法はとても簡単です。\nAWSのマネジメントコンソールにログインし、CloudFrontを開いたら対象のDistributionを選択してBehaviorsタブを開きEditボタンをクリックします。\n[adsense-responsive]\r次の画面の下部にCompress Objects Automaticallyという項目があるので、こちらをYesに変更してください。\n変更後はYes, Editボタンを押下して変更を保存することを忘れずに。\n参考までに、以下のような説明があります。\nSelect whether you want CloudFront to automatically compress content for web requests that include Accept-Encoding: gzip in the request header. CloudFront compresses files of certain types for both Amazon S3 and custom origins.\r翻訳: CloudFrontがリクエストヘッダーにAccept-Encoding：gzipを含むウェブリクエストのコンテンツを自動的に圧縮するかどうかを選択します。 CloudFrontは、Amazon S3とカスタムオリジンの両方に対して特定のタイプのファイルを圧縮します。AWS CloudFront Management Console\n設定はこれだけで完了です♪\ncurlでgzip確認 それでは実際に確認してみましょう。\ncurl -D - -s -o /dev/null -w \u0026#39;%\u0026lt;time_starttransfer\u0026gt; \u0026#39; -H \u0026#39;Accept-Encoding:gzip,deflate\u0026#39; \u0026#39;/2020/03/30/10389/\u0026#39; HTTP/2 200 content-type: text/html date: Tue, 31 Mar 2020 15:41:22 GMT last-modified: Mon, 30 Mar 2020 09:27:22 GMT server: AmazonS3 content-encoding: gzip vary: Accept-Encoding x-cache: Hit from cloudfront via: 1.1 XXXXXXXX.cloudfront.net (CloudFront) x-amz-cf-pop: NRT20-C1 x-amz-cf-id: XXXXXXXX-XXXXXXXX== age: 79 0.264120 無事にcontent-encoding: gzipが追加され、gzip形式での配信に切り替わっていますね♪\nただ、CloudFrontのキャッシュ設定次第では反映までに多少時間がかかるらしいので、Invalidateするなり時間を置いてから再度試してみてください♪\n終わりに 以上のようにたった一つの設定を変えるだけでgzip形式での配信に切り替わりました！\nCloudFrontを使っている方は是非試してみてはいかがでしょうか♪\n","date":"2020-04-13T20:02:58+09:00","image":"/wp-content/uploads/2020/04/cloudFrontPublishByGzipEye.png","permalink":"/2020/04/13/10402/","title":"【パフォーマンスアップを狙え】CloudFront+S3で配信している静的サイトをgzip形式で配信して高速化する方法【SEO対策】"},{"content":"EC2サーバーやMacにあるJPG画像を圧縮するしたい 大きい画像はメリットよりデメリットが多い Wordpressなどでブログを運営していると画像等をアップロードする際に、なるべく綺麗な画像を乗せたいという気持ちで画像ファイルが大きいままアップロードをしてしまう事が多いと思います。\nその気持ちもわかりますが、サイズがでかい画像をアップロードするとページの表示スピードが遅くなってしまいSEO順位が下がったりユーザー離脱に繋がってしまったり、CloudFrontなどのCDNを利用しているとデータ転送量が肥大して、予期せぬ通信料が発生してしまう可能性があります。\njpegoptimで一括圧縮 そこで、今回はjpegoptimというCLIツールを利用して、サーバー上にアップロードしたJpeg画像を一括で圧縮する方法をご紹介しようと思います。\n導入方法 インストール Macの場合 Macの場合はHomebrewからインストールする事が出来ます。\n[adsense-responsive]\rbrew install jpegoptim ==\u0026gt; Installing dependencies for jpegoptim: jpeg ==\u0026gt; Installing jpegoptim dependency: jpeg ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/jpeg-9d.mojave.bottle.tar.gz ==\u0026gt; Downloading from https://akamai.bintray.com/b9/b931e7725c83275c56f962b51b83c10f31a01ac8d823c6722edaf16d893970b1?__gda__=exp=1585831376~hmac=11424e2838ece64525a48c4ca20cda66d0628da1ade6b4b1aba7addf3bd2a82b\u0026amp;response-content-disposition= ######################################################################## 100.0% ==\u0026gt; Pouring jpeg-9d.mojave.bottle.tar.gz 🍺 /usr/local/Cellar/jpeg/9d: 21 files, 751KB ==\u0026gt; Installing jpegoptim ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/jpegoptim-1.4.6.mojave.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring jpegoptim-1.4.6.mojave.bottle.tar.gz 🍺 /usr/local/Cellar/jpegoptim/1.4.6: 7 files, 61.3KB EC2などのサーバーの場合 EC2インスタンスの場合はyum経由でインストールします。\nyum --enablerepo=epel install jpegoptim ============================================================================================================================================================================================================================================== Package Arch Version Repository Size ============================================================================================================================================================================================================================================== Installing: jpegoptim x86_64 1.4.6-1.el7 epel 30 k Installing for dependencies: libjpeg-turbo x86_64 1.2.90-6.amzn2.0.3 amzn2-core 132 k Transaction Summary ============================================================================================================================================================================================================================================== Install 1 Package (+1 Dependent package) Total download size: 162 k Installed size: 388 k Is this ok [y/d/N]: y Downloading packages: warning: /var/cache/yum/x86_64/2/epel/packages/jpegoptim-1.4.6-1.el7.x86_64.rpm: Header V3 RSA/SHA256 Signature, key ID 352c64e5: NOKEY Public key for jpegoptim-1.4.6-1.el7.x86_64.rpm is not installed (1/2): jpegoptim-1.4.6-1.el7.x86_64.rpm | 30 kB 00:00:00 (2/2): libjpeg-turbo-1.2.90-6.amzn2.0.3.x86_64.rpm | 132 kB 00:00:00 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Total 47 kB/s | 162 kB 00:00:03 Retrieving key from file:///etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7 Importing GPG key 0x352C64E5: Userid : \u0026#34;Fedora EPEL (7) \u0026lt;epel@fedoraproject.org\u0026gt;\u0026#34; Fingerprint: 91e9 7d7c 4a5e 96f1 7f3e 888f 6a2f aea2 352c 64e5 Package : epel-release-7-11.noarch (@amzn2extra-epel) From : /etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7 Is this ok [y/N]: y Running transaction check Running transaction test Transaction test succeeded Running transaction Installing : libjpeg-turbo-1.2.90-6.amzn2.0.3.x86_64 1/2 Installing : jpegoptim-1.4.6-1.el7.x86_64 2/2 Verifying : jpegoptim-1.4.6-1.el7.x86_64 1/2 Verifying : libjpeg-turbo-1.2.90-6.amzn2.0.3.x86_64 2/2 Installed: jpegoptim.x86_64 0:1.4.6-1.el7 Dependency Installed: libjpeg-turbo.x86_64 0:1.2.90-6.amzn2.0.3 Complete! Error getting repository data for epel, repository not foundが出た場合 上記のようなエラーが出た場合はyumでepelリポジトリを有効にする必要があるので、以下のコマンドを実行してください。\namazon-linux-extras install -y epel Installing epel-release Loaded plugins: ovl, priorities amzn2-core | 2.4 kB 00:00:00 amzn2extra-epel | 1.3 kB 00:00:00 amzn2extra-epel/2/x86_64/primary_db | 1.8 kB 00:00:00 Resolving Dependencies --\u0026gt; Running transaction check ---\u0026gt; Package epel-release.noarch 0:7-11 will be installed --\u0026gt; Finished Dependency Resolution Dependencies Resolved ============================================================================================================================================================================================================================================== Package Arch Version Repository Size ============================================================================================================================================================================================================================================== Installing: epel-release noarch 7-11 amzn2extra-epel 15 k Transaction Summary ============================================================================================================================================================================================================================================== Install 1 Package Total download size: 15 k Installed size: 24 k Downloading packages: epel-release-7-11.noarch.rpm | 15 kB 00:00:00 Running transaction check Running transaction test Transaction test succeeded Running transaction Installing : epel-release-7-11.noarch 1/1 Verifying : epel-release-7-11.noarch 1/1 Installed: epel-release.noarch 0:7-11 Complete! 0 ansible2 available [ =2.4.2 =2.4.6 ] 1 emacs available [ =25.3 ] 2 httpd_modules available [ =1.0 ] 3 memcached1.5 available [ =1.5.1 ] 4 nginx1.12 available [ =1.12.2 ] 5 postgresql9.6 available [ =9.6.6 =9.6.8 ] 6 postgresql10 available [ =10 ] 7 python3 available [ =3.6.2 ] 8 redis4.0 available [ =4.0.5 =4.0.10 ] 9 R3.4 available [ =3.4.3 ] 10 rust1 available \\ [ =1.22.1 =1.26.0 =1.26.1 =1.27.2 =1.31.0 ] 11 vim available [ =8.0 ] 12 golang1.9 available [ =1.9.2 ] 13 ruby2.4 available [ =2.4.2 =2.4.4 ] 14 nano available [ =2.9.1 ] 15 php7.2 available \\ [ =7.2.0 =7.2.4 =7.2.5 =7.2.8 =7.2.11 ] 16 php7.1 available [ =7.1.22 ] 17 lamp-mariadb10.2-php7.2 available \\ [ =10.2.10_7.2.0 =10.2.10_7.2.4 =10.2.10_7.2.5 =10.2.10_7.2.8 =10.2.10_7.2.11 ] 18 libreoffice available [ =5.0.6.2_15 =5.3.6.1 ] 19 gimp available [ =2.8.22 ] 20 docker available \\ [ =17.12.1 =18.03.1 =18.06.1 ] 21 mate-desktop1.x available [ =1.19.0 =1.20.0 ] 22 GraphicsMagick1.3 available [ =1.3.29 ] 23 tomcat8.5 available [ =8.5.31 =8.5.32 ] 24 epel=latest enabled [ =7.11 ] 25 testing available [ =1.0 ] 26 ecs available [ =stable ] 27 corretto8 available [ =1.8.0_192 ] 28 firecracker available [ =0.11 ] 29 golang1.11 available [ =1.11.3 ] これでepelが参照できるようになります。\n確認 以下のコマンドは確認してみましょう。\njpegoptim -V jpegoptim v1.4.6 x86_64-apple-darwin18.0.0 Copyright (C) 1996-2018, Timo Kokkonen This program comes with ABSOLUTELY NO WARRANTY. This is free software, and you are welcome to redistirbute it under certain conditions. See the GNU General Public License for more details. libjpeg version: 9d 12-Jan-2020 Copyright (C) 2020, Thomas G. Lane, Guido Vollbeding 正常にインストール出来ていますね♪\n使い方 使用上の注意 デフォルトの設定だと、圧縮処理後は同一ファイル名で上書きされるので気をつけましょう。\n適宜オプションを使うなり、バックアップを取るなりなどして自己責任でお願いします！\n上書きしたくない場合はオプションで出力先を指定してください。\nコマンド 基本的なコマンドはjpegoptim -m{圧縮率(1~100)} -t {対象ファイル名}となっています。\n対象ファイル名には*(ワイルドカード)が使えるので同一階層のJpegファイルはまとめて処理出来ます。\n[adsense-responsive]\r-mは画質を指定します。100に近づくほど元の画質(高画質)に近づきます。\n-tは処理結果を\n{処理ファイル名} {サイズ} 24bit N Exif IPTC ICC XMP Adobe [OK] {元のサイズ} --\u0026gt; {圧縮後のサイズ} bytes ({圧縮率}%), optimized.\nのような形式で標準出力に出してくれるので、結果が分かりやすくなるのでつけておいた方が良いと思います。\nつけないと何も表示されずに処理が完了します。\n他にもたくさんのオプションがあるので、気になる方は調べてみてください。\njpegoptim --help jpegoptim v1.4.6 Copyright (C) 1996-2018, Timo Kokkonen Usage: jpegoptim [options] \u0026lt;filenames\u0026gt; -d\u0026lt;path\u0026gt;, --dest=\u0026lt;path\u0026gt; specify alternative destination directory for optimized files (default is to overwrite originals) -f, --force force optimization -h, --help display this help and exit -m\u0026lt;quality\u0026gt;, --max=\u0026lt;quality\u0026gt; set maximum image quality factor (disables lossless optimization mode, which is by default on) Valid quality values: 0 - 100 -n, --noaction don\u0026#39;t really optimize files, just print results -S\u0026lt;size\u0026gt;, --size=\u0026lt;size\u0026gt; Try to optimize file to given size (disables lossless optimization mode). Target size is specified either in kilo bytes (1 - n) or as percentage (1% - 99%) -T\u0026lt;threshold\u0026gt;, --threshold=\u0026lt;threshold\u0026gt; keep old file if the gain is below a threshold (%) -b, --csv print progress info in CSV format -o, --overwrite overwrite target file even if it exists (meaningful only when used with -d, --dest option) -p, --preserve preserve file timestamps -P, --preserve-perms preserve original file permissions by overwriting it -q, --quiet quiet mode -t, --totals print totals after processing all files -v, --verbose enable verbose mode (positively chatty) -V, --version print program version -s, --strip-all strip all markers from output file --strip-none do not strip any markers --strip-com strip Comment markers from output file --strip-exif strip Exif markers from output file --strip-iptc strip IPTC/Photoshop (APP13) markers from output file --strip-icc strip ICC profile markers from output file --strip-xmp strip XMP markers markers from output file --all-normal force all output files to be non-progressive --all-progressive force all output files to be progressive --stdout send output to standard output (instead of a file) --stdin read input from standard input (instead of a file) 実際にやって見るとこんな感じです。\njpegoptim -m50 -t *.jpg sample1.jpg 3000x2000 24bit N Exif IPTC ICC XMP Adobe [OK] 481161 --\u0026gt; 127041 bytes (73.60%), optimized. sample2.jpg 2000x3000 24bit N Exif IPTC ICC XMP Adobe [OK] 34306 --\u0026gt; 17948 bytes (47.68%), optimized. Average compression (2 files): 60.64% パフォーマンスはとても早く1000枚ほどのファイルに対しても数分で終わりました！\n画像によって圧縮率は変わりますが、調整しながら試してみてください♪\n終わりに 以上のように簡単にサーバー上のJpegファイルを圧縮する事が出来ました。\nサーバー上に存在する画像ファイルのサイズにお困りの方は是非試してみてはいかがでしょうか♪\n","date":"2020-04-04T23:07:53+09:00","image":"/wp-content/uploads/2020/04/jpegOptEye.png","permalink":"/2020/04/04/10404/","title":"【Wordpress】jpegoptimを使ってサーバー上のJPEG画像ファイルをまとめて圧縮する方法【便利】"},{"content":"MySQLのNULLに対するORDER BYの取り扱いについて MySQLにて、NULLが許容されたカラムに対してORDER BYをかける際にはちょっと注意した方が良いです。\n何も気にせずにORDER BYをかけると想定と違う挙動になる場合もあるので、MySQLのNULLに対する挙動の整理とNULLに対する優先度を制御する方法をご紹介しようと思います。\nNULLの取り扱いについてのおさらい 前提 今回は以下のテーブルを使って試しています。\nusersテーブル CREATE TABLE `users` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT \u0026#39;ID\u0026#39;, `name` varchar(255) NOT NULL COMMENT \u0026#39;名前\u0026#39;, `age` varchar(255) COMMENT \u0026#39;年齢\u0026#39;, `priority` int(10) COMMENT \u0026#39;優先度\u0026#39;, `created_at` datetime NOT NULL COMMENT \u0026#39;登録日\u0026#39;, PRIMARY KEY (`id`) ) COMMENT = \u0026#39;会員情報\u0026#39;; 投入データはこんな感じ。\n投入SQL INSERT INTO `users` VALUES ( 1, \u0026#39;Taro\u0026#39;, -- name 20, -- age 2, -- priority NOW()-- created_at ),( 2, \u0026#39;Jiro\u0026#39;, -- name 18, -- age NULL, -- priority NOW()-- created_at ),( 3, \u0026#39;Saburo\u0026#39;, -- name 185, -- age 1, -- priority NOW()-- created_at ); 通常のORDER BY それでは、priorityカラムを軸にORDER BYして見ます。\nASC(昇順)の場合 まずはASCから確認して見ましょう。\nSELECT * FROM users ORDER BY priority ASC; +----+--------+------+----------+---------------------+ | id | name | age | priority | created_at | +----+--------+------+----------+---------------------+ | 2 | Jiro | 18 | NULL | 2020-03-30 13:46:03 | | 3 | Saburo | 185 | 1 | 2020-03-30 13:46:03 | | 1 | Taro | 20 | 2 | 2020-03-30 13:46:03 | +----+--------+------+----------+---------------------+ 3 rows in set (0.00 sec) 結果としてはNULLが最大値として判定され、そのあとに値の昇順(0,1,2...)が判定されています。\nDESC(降順)の場合 次にDESCで確認して見ましょう。\nSELECT * FROM users ORDER BY priority DESC; +----+--------+------+----------+---------------------+ | id | name | age | priority | created_at | +----+--------+------+----------+---------------------+ | 1 | Taro | 20 | 2 | 2020-03-30 13:46:03 | | 3 | Saburo | 185 | 1 | 2020-03-30 13:46:03 | | 2 | Jiro | 18 | NULL | 2020-03-30 13:46:03 | +----+--------+------+----------+---------------------+ 3 rows in set (0.00 sec) 結果としては値の降順(100,99,98...)が判定されNULLが最小値となっています。\nNULLの優先度を制御する方法 ORDER BY句の先頭にIS NULLを追加 上記で紹介したようなシンプルなORDER BYとは違う順序制御をしたい場合は、ORDER BY句の先頭にORDER BY {対象項目} IS NULL {ASC or DESC},{対象項目}とするだけで制御が可能になります。\n[adsense-responsive]\rNULLの優先度を最低、値を昇順にしたい場合 以下のSQLで実現可能です。\nSELECT * FROM users ORDER BY priority IS NULL ASC, priority ASC; +----+--------+------+----------+---------------------+ | id | name | age | priority | created_at | +----+--------+------+----------+---------------------+ | 3 | Saburo | 185 | 1 | 2020-03-30 13:46:03 | | 1 | Taro | 20 | 2 | 2020-03-30 13:46:03 | | 2 | Jiro | 18 | NULL | 2020-03-30 13:46:03 | +----+--------+------+----------+---------------------+ 3 rows in set (0.00 sec) 期待通りの並び順になりましたね♪\n上記の構文を解説すると、まず値がNULLかどうかの判定を行いNULLじゃない場合をFALSE(=0)と判定し、その値でASCをかけることにより値が登録されているレコードを優先的に取得し、そのあとに値がNULLの場合のレコードを昇順で取得するようにしています。\nNULLの優先度を最高、値を降順にしたい場合 以下のSQLで実現可能です。\nSELECT * FROM users ORDER BY priority IS NULL DESC, priority DESC; +----+--------+------+----------+---------------------+ | id | name | age | priority | created_at | +----+--------+------+----------+---------------------+ | 2 | Jiro | 18 | NULL | 2020-03-30 13:46:03 | | 1 | Taro | 20 | 2 | 2020-03-30 13:46:03 | | 3 | Saburo | 185 | 1 | 2020-03-30 13:46:03 | +----+--------+------+----------+---------------------+ 3 rows in set (0.00 sec) こちらも期待通りの結果になりました。\n上記の構文を解説すると、まず値がNULLかどうかの判定を行いNULLじゃない場合をFALSE(=0)と判定し、その値でDESCをかけることにより値がNULLの場合のレコードを優先的に取得し、そのあとに値が登録されているレコードを降順で取得するようにしています。\n終わりに 以上のようにちょっと取り扱いが難しいMySQLのNULLに対するORDER BYテクニックでした。\n今回ご紹介した4パターンを覚えておけば、NULLが混在したカラムに対するORDER BYは網羅出来ると思うので、お困りの方はぜひ試して見てください♪\n","date":"2020-03-30T18:18:26+09:00","image":"/wp-content/uploads/2020/03/mysqlOrderByNullableColumnEye.png","permalink":"/2020/03/30/10389/","title":"【MySQL】NULLが含まれるデータを取得する際のORDER BYで優先度を低くしたい場合の書き方【簡単瞬殺】"},{"content":"WordpressでAmazonの商品が表示されなくなった AmazonJSのリンクが表示されない 先日、WordpressにてAmazonの商品を紹介している記事の商品画像が表示されていない事に気づきました。\nムムム・・・。\n原因はPA-API v5対応の不備 これは、Amazonが提供する商品APIのバージョンがv4からv5に上がった事によるWordpress側の設定不備が原因でした。\nAmazonアソシエイトの公式サイトにも以下のようなアラートが表示されていたと思います。\n今回は実際にWordpressのAmazonJSを利用しているケースの対応方法を実際に試してみようと思います。\n解決方法 AmazonJSプラグインのアップデート まずはAmazonJSプラグインをバージョンアップしましょう。\n0.10がPA-API v5に対応しているのでそちらに更新します。\n[adsense-responsive]\rAmazonJSはこれだけで対応は完了です！\n認証キーの再発行 以下のようなエラーが出る方は現在利用している認証情報とは別に新しい認証キーを発行して登録する必要があります。\nAmazonアソシエイトにログインし、ツール \u003e Product \u003e Advertising APIを選択します。\n次に認証キーの管理にて、認証情報を追加するボタンをクリックします。\nすると、新しい認証情報が表示されるのでダウンロードするなり保存するなりしましょう。\nなお、この画面を閉じるとシークレットキーは2度と確認出来ないので要注意です！\nあとは、このAmazonJSの設定画面から認証情報を設定し保存する事で完了です。\n確認 では、実際に確認して見ましょう。\n無事に表示されましたね♪\n数日経ってからAmazonアソシエイトのレポートを確認してみると、正常にv5からの流入が反映されていました♪\n終わりに 以上のように、思ったより簡単にPA-APIをv4からv5に変える事が出来ました。\nこちらの作業をやらないとせっかくの収入が貰えなくなるので、該当する方は最優先で修正して見てください！\n","date":"2020-03-29T20:47:52+09:00","image":"/wp-content/uploads/2020/03/amazonJsV5VersionUpEye.png","permalink":"/2020/03/29/10371/","title":"【AmazonJS】WordpressでAmazonアソシエイトの商品が表示出来なくなったのでPA-APIをv4からv5に更新する方法【必須設定】"},{"content":"フォームのポストをボタンによって動的に切り替えたい JavaScriptで上書きするのが一般的だった HTMLでフォームを作成している場合、要件によっては通常のサブミットとは別のURLにフォーム内容を送信したい場合があると思います。\nそんなとき、今までは以下のようにjQueryなどのJavaScriptを使ってボタンが押下された際にformのURLを動的に書き換えた上でsubmitする、といった方法が一般的でした。\n従来のやり方 ... (略) ... \u0026lt;form method=\u0026#34;post\u0026#34;\u0026gt; ... (略) ... \u0026lt;button type=\u0026#34;button\u0026#34; onclick=\u0026#34;formSubmit(\u0026#39;./draft.html\u0026#39;)\u0026#34;\u0026gt;下書き\u0026lt;/button\u0026gt; \u0026lt;button type=\u0026#34;button\u0026#34; onclick=\u0026#34;formSubmit(\u0026#39;./create.html\u0026#39;)\u0026#34;\u0026gt;作成\u0026lt;/button\u0026gt; \u0026lt;/form\u0026gt; ... (略) ... function formSubmit(url) { $(\u0026#39;form\u0026#39;).attr(\u0026#39;action\u0026#39;, url); $(\u0026#39;form\u0026#39;).submit(); } ... (略) ... HTML5の登場により1行追加するだけで実現可能 しかしそんな話も過去の話。\nなんと、HTML5にて追加されたbutton要素のformaction属性を利用することでJavaScriptを一行も書く必要なく同様の処理が可能になったのです！\nDefinition and Usage\rThe formaction attribute specifies where to send the form-data when a form is submitted. This attribute overrides the form's action attribute.\rThe formaction attribute is only used for buttons with type=\u0026ldquo;submit\u0026rdquo;.HTML button formaction Attribute\nサポートしているブラウザ等は公式サイトを見ていただければなと思います。\nでは、実際に試してみましょう！\nやり方 サンプルコード 今回は以下のようなフォームを用意し、下書きボタンを押下した際にのみ、formのaction属性を上書きするようにしてみようと思います。\n[adsense-responsive]\rindex.html \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta http-equiv=\u0026#34;X-UA-Compatible\u0026#34; content=\u0026#34;IE=edge\u0026#34;\u0026gt; \u0026lt;title\u0026gt;登録フォーム\u0026lt;/title\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;description\u0026#34; content=\u0026#34;\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;author\u0026#34; content=\u0026#34;\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;viewport\u0026#34; content=\u0026#34;width=device-width, initial-scale=1\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;shortcut icon\u0026#34; href=\u0026#34;\u0026#34;\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; # フォーム \u0026lt;form method=\u0026#34;POST\u0026#34; action=\u0026#34;./create.html\u0026#34;\u0026gt; \u0026lt;p\u0026gt; \u0026lt;input type=\u0026#34;submit\u0026#34; value=\u0026#34;下書き\u0026#34; formaction=\u0026#34;./draft.html\u0026#34; /\u0026gt; \u0026lt;input type=\u0026#34;submit\u0026#34; value=\u0026#34;作成\u0026#34; /\u0026gt; \u0026lt;/p\u0026gt; \u0026lt;/form\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; create.html \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta http-equiv=\u0026#34;X-UA-Compatible\u0026#34; content=\u0026#34;IE=edge\u0026#34;\u0026gt; \u0026lt;title\u0026gt;作成完了\u0026lt;/title\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;description\u0026#34; content=\u0026#34;\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;author\u0026#34; content=\u0026#34;\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;viewport\u0026#34; content=\u0026#34;width=device-width, initial-scale=1\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;shortcut icon\u0026#34; href=\u0026#34;\u0026#34;\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; # 作成完了 \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; draft.html \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta http-equiv=\u0026#34;X-UA-Compatible\u0026#34; content=\u0026#34;IE=edge\u0026#34;\u0026gt; \u0026lt;title\u0026gt;下書き完了\u0026lt;/title\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;description\u0026#34; content=\u0026#34;\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;author\u0026#34; content=\u0026#34;\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;viewport\u0026#34; content=\u0026#34;width=device-width, initial-scale=1\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;shortcut icon\u0026#34; href=\u0026#34;\u0026#34;\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; # 下書き完了 \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 確認 では、実際に動かしてみましょう。\n期待通りの動きがJavaScript無しで実現出来ましたね！\nこれは簡単かつ便利過ぎる・・・！\nformタグにactionが無くても問題ない また、以下のようにformタグにaction属性をつけなくても問題ありません。\nindex.html \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta http-equiv=\u0026#34;X-UA-Compatible\u0026#34; content=\u0026#34;IE=edge\u0026#34;\u0026gt; \u0026lt;title\u0026gt;登録フォーム\u0026lt;/title\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;description\u0026#34; content=\u0026#34;\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;author\u0026#34; content=\u0026#34;\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;viewport\u0026#34; content=\u0026#34;width=device-width, initial-scale=1\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;shortcut icon\u0026#34; href=\u0026#34;\u0026#34;\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; # フォーム \u0026lt;form method=\u0026#34;POST\u0026#34;\u0026gt; \u0026lt;p\u0026gt; \u0026lt;input type=\u0026#34;submit\u0026#34; value=\u0026#34;下書き\u0026#34; formaction=\u0026#34;./draft.html\u0026#34; /\u0026gt; \u0026lt;input type=\u0026#34;submit\u0026#34; value=\u0026#34;作成\u0026#34; formaction=\u0026#34;./create.html\u0026#34; /\u0026gt; \u0026lt;/p\u0026gt; \u0026lt;/form\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; その場合は必ずbuttonタグにsubmitaction属性を記述するようにしてください。\nお好みのやり方で試してみてください♪\n終わりに 以上のように、HTML5の新しい属性のおかげでとても簡単に実装出来ました！\n他にもHTML5の新機能で便利なものがあるので、気になる方は調べてみてください♪\n","date":"2020-03-26T19:13:39+09:00","image":"/wp-content/uploads/2020/03/html5FormSubmitActionEye.png","permalink":"/2020/03/26/10353/","title":"【JavaScript要らず】HTML5で追加されたbuttonタグのformaction属性でSubmit先のURLを簡単に変更する方法【たった1行】"},{"content":"設定を変えたいのに反映されない MySQLのポートを変えたい 先日、お勉強用サーバーのMySQLをいじっていた際にポートを変えようと思い、上書き用の.my.cnfを作業ユーザーのホームディレクトリに作成しました。\n~/.my.cnf [mysqld] port=3336 ファイルの中身自体はポート番号を変えるだけの簡単なものです。\nまた、事前調査でMySQLの設定は以下の順番で設定ファイルを読み込みし、同一プロパティの指定がある場合は後勝ちで使用されるという記事も確認済みだったのでこれで行けると思いMySQLサーバーを再起動しました。\n優先度\r/etc/my.cnf\r/etc/mysql/my.cnf\rSYSCONFDIR/my.cnf\r$MYSQL_HOME/my.cnf\r--defaults-extra-file=path\r~/.my.cnf\r~/.mylogin.cnf\rあれ、変わらないぞ・・・？ 再起動後、ポートが変わっていると思いきや変わっておらず外部からのアクセスが出来ません。\nなぜだ？\n試しにMySQLが起動しているサーバーからmysqlに入りポート番号を確認してみると。\nshow variables like \u0026#39;port\u0026#39;; +---------------+-------+ | Variable_name | Value | +---------------+-------+ | port | 3306 | +---------------+-------+ 1 row in set (0.01 sec) 変わっていない。。。\nしっかりサーバー上にも~/.my.cnfは存在しています。\nls -la ... (略) ... -rw------- 1 work-user work-user 71 3月 21 11:07 .my.cnf ... (略) ... ファイルの中身も先ほどのものと同じです。。。\n原因 原因は\u0026ndash;defaults-fileオプション 原因は、MySQLサーバーを起動する際に--defaults-fileを指定していたことが原因でした。\n[adsense-responsive]\rこのオプションが指定されると、上記の複数ファイルは読み込まずにオプションで指定したファイルのみしか読み込まなくなります。\nこのオプションが入っている経緯としては、まだ知識が無い頃にAnsibleを使ってMySQLをインストールしたのですが、その参考記述に--defaults-fileが指定されており、そのままオプションが含まれたコマンドを実行していたのが原因でした。\r\u0026ndash;defaults-extra-fileで上書き 対応策として、--defaults-extra-fileという読み込む設定ファイルを明示的に追加するオプションが用意されているので、こちらを使って~/.my.cnfを追加することで上書きすることが可能になりました。\nshow variables like \u0026#39;port\u0026#39;; +---------------+-------+ | Variable_name | Value | +---------------+-------+ | port | 3336 | +---------------+-------+ 1 row in set (0.00 sec) 一件落着！\n終わりに 以上のように、ちょっとハマりガチな現象でした。\n原因が分からないとハマってしまう可能性があるので、お困りの方は是非試してみてください♪\n","date":"2020-03-21T20:41:51+09:00","image":"/wp-content/uploads/2020/03/mysqlReadMyCnfEye.png","permalink":"/2020/03/21/10345/","title":"【MySQL】~/.my.cnfの設定が読み込まれない原因【--defaults-fileオプション】"},{"content":"自動でワット金策をしたい！ 育成環境の緩和に感謝 皆さんはポケモン剣盾やってますか？\nポケモン大好き人間の筆者は相変わらず好きなポケモンを厳選してはカジュアルバトルにて対戦をして楽しんでいます。\n今作ではミントによって性格を変えたり、教え技は後から覚えられたり、前作に引き続きおうかんによって個体値も簡単にVにする事が出来るためとても簡単に育成をする事が出来ます♪\nただ、育成の一番のキモでもある努力値ですが、こちらもタウリンやブロムヘキシンなどのドーピングアイテムにより252まで簡単に一気に割り振る事が出来ることになったのもとても大きいですね。\n膨大なお金が必要 しかし、ドーピングアイテムによる限界値までの投与が可能になった分、金策の重要性が上がりました。。。\nキョダイマックスニャースによる金策も、1周約15分で約36万円、さらに常にコマンド操作をしなければいけない点とゴーストタイプ使いのウェイ君が来た時点でその試合ではキョダイマックスによる金策が無効化されるのがとてもメンタル的に疲れます。笑\n巷で見つけた自動化を試してみる そこで今回は有名な時渡りによるワットバグを用いた金策をマイコンによるSwitch自動操作と合わせて放置でひたすらワットを稼ぐ方法を実際に試してみようと思います。\nArduino IDEを使う方法だったり、pythonを使う方法だったり色々試してみましたが、個人的に今回紹介する方法が一番簡単だったのでご紹介します♪\nやり方 前提 今回ご紹介する方法については、プログラムのミスやバージョン、その他予期せぬ原因によって、セーブデータや本体、その他機器に問題が発生する可能性があります。\nお試しの際は必ず自己責任でお願いします！\nまた、時渡りによるワットバグについては本記事では説明を割愛しますので、各自で調べてみてください。\n事前に購入しておく物 今回は以下の機器を使用するので事前に用意しておいてください。\nプレイズ Arduino UNO R3 互換基板 ATmega328P ATmega16U2 こちらがマイコンになります。\nこちらに自動操作プログラムを書き込んでSwitchと繋げる事で自動操作を実現します。\nAmazon プレイズ Arduino UNO R3 互換基板 ATmega328P ATmega16U2 USBケーブル付属 アルディーノ マイコン 電子工作 ELEGOO arduino用ジャンパーワイヤー こちらはマイコンをDFUモードにする際に使用します。\nAmazon ELEGOO 120pcs多色デュポンワイヤー、arduino用ワイヤ—ゲ—ジ28AWG オス-メス オス-オス メス –メス ブレッドボードジャンパーワイヤー Nintendo Switch 3In1 Type-C to HDMI変換アダプタ Switchのドックを使わずにマイコンと本体を接続するための変換アダプタとなります。\nドック経由の接続はとてもめんどくさい点と、ドックを使わずにHDMI経由でテレビモードにする事も出来るので買っておいて損はないです。\nAmazon Nintendo Switch 3In1 Type-C to HDMI変換アダプタ ドックセット HDMI変換 テレビ コンピューターに出力 高速充電対応 小型 持ち運びに便利 多機能変換アダプター … crosspack-avrの準備 まずはcrosspack-avrをhomebrew caskからインストールしましょう。\n[adsense-responsive]\rbrew cask install crosspack-avr ==\u0026gt; Downloading https://www.obdev.at/downloads/crosspack/CrossPack-AVR-20131216.dmg ==\u0026gt; Downloading from https://www.obdev.at/ftp/pub/Products/crosspack/CrossPack-AVR-20131216.dmg ######################################################################## 100.0% ==\u0026gt; Verifying SHA-256 checksum for Cask \u0026#39;crosspack-avr\u0026#39;. ==\u0026gt; Installing Cask crosspack-avr ==\u0026gt; Running installer for crosspack-avr; your password may be necessary. ==\u0026gt; Package installers may write to any location; options such as --appdir are ignored. Password: installer: Package name is CrossPack for AVR Development installer: Installing at base path / installer: The install was successful. 🍺 crosspack-avr was successfully installed! インストールが完了したら、パスを通しておきましょう。\n例:export PATH=$PATH:/usr/local/CrossPack-AVR/bin/\ndfu-programmer 次はdfu-programmerをhomebrewでインストールします。\nbrew install dfu-programmer ==\u0026gt; Installing dependencies for dfu-programmer: libusb and libusb-compat ==\u0026gt; Installing dfu-programmer dependency: libusb ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/libusb-1.0.23.mojave.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring libusb-1.0.23.mojave.bottle.tar.gz 🍺 /usr/local/Cellar/libusb/1.0.23: 29 files, 524.8KB ==\u0026gt; Installing dfu-programmer dependency: libusb-compat ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/libusb-compat-0.1.5_1.mojave.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring libusb-compat-0.1.5_1.mojave.bottle.tar.gz 🍺 /usr/local/Cellar/libusb-compat/0.1.5_1: 14 files, 94.0KB ==\u0026gt; Installing dfu-programmer ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/dfu-programmer-0.7.2.mojave.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring dfu-programmer-0.7.2.mojave.bottle.tar.gz 🍺 /usr/local/Cellar/dfu-programmer/0.7.2: 9 files, 107.2KB こちらはパスを通さなくても大丈夫です。\n自動操作用のソースをGithubからダウンロード 次に、実際に自動操作するためのソースを入手しましょう。\nこちらからSource Code(Zip)をダウンロードし、任意のディレクトリに解凍しましょう。\n[adsense-responsive]\r次にこちらからZipをダウンロードし同じように解凍しましょう。\n解凍をしたらlufaディレクトリが空になっていると思うので、ダウンロードしたlufaディレクトリの中身を全てコピーしましょう。\nコピー後はこんな感じ。\ntree -L 2 . ├── Config │ └── LUFAConfig.h ├── Descriptors.c ├── Descriptors.h ├── HORI_Descriptors ├── Joystick.c ├── Joystick.h ├── Joystick.hex ├── LUFA_LICENSE ├── README.md ├── lufa │ ├── Bootloaders │ ├── BuildTests │ ├── Demos │ ├── LUFA │ ├── Maintenance │ ├── Projects │ ├── README.txt │ └── makefile └── makefile 8 directories, 12 files ソースの修正 このままだと、古い状態のワットバグ(みんなで挑戦経由)での自動操作になっているので、ランクマッチを用いたもっと効率的な自動化に適応した自動操作に変えようと思います。\nまた、今回の自動操作の事前準備として、\n事前準備\rランクマッチを一回以上終わっている事\rローカル通信にしている事\rねがいのかけらを投げ入れている事\rポケモンの巣の目の前にいる事\r本体の時計をOFFにしている事\r上記の準備が完了している状態で自動操作を開始することを想定しています。\nソース自体はほとんど一緒ですが、とりあえず以下をそのままコピペしてしまって構いません。\nJoystick.c /* Nintendo Switch Fightstick - Proof-of-Concept Based on the LUFA library\u0026#39;s Low-Level Joystick Demo (C) Dean Camera Based on the HORI\u0026#39;s Pokken Tournament Pro Pad design (C) HORI This project implements a modified version of HORI\u0026#39;s Pokken Tournament Pro Pad USB descriptors to allow for the creation of custom controllers for the Nintendo Switch. This also works to a limited degree on the PS3. Since System Update v3.0.0, the Nintendo Switch recognizes the Pokken Tournament Pro Pad as a Pro Controller. Physical design limitations prevent the Pokken Controller from functioning at the same level as the Pro Controller. However, by default most of the descriptors are there, with the exception of Home and Capture. Descriptor modification allows us to unlock these buttons for our use. */ #include \u0026#34;Joystick.h\u0026#34; typedef enum { UP, DOWN, LEFT, RIGHT, UPLEFT, // UP + LEFT UPRIGHT, DOWNLEFT, DOWNRIGHT, HOLD_UP, // Hold L Stick UP HOLD_DOWN, // using duration = 0 HOLD_LEFT, HOLD_RIGHT, HOLD_CLEAR, // clear Hold L Stick = center HOLD_CAM_L, // Hold R Stick Left HOLD_CAM_R, // Hold R Stick Right HOLD_CAM_C, // clear Hold R Stick = center HOLD_CAM_UP,// Hold R Stick Up X, Y, A, B, L, R, PLUS, HOME, H_LEFT, LOOP_START, NOTHING } Buttons_t; typedef struct { Buttons_t button; uint16_t duration; } command; static const command step[] = { // Setup controller { B, 0 }, { A, 0 }, // ここまでコントローラーを認識させるおまじない // Start // 初期設定など1回だけ動かしたいコードはここまで // loop Start { LOOP_START, 0 }, // これより下を無限ループ // ワット回収(ワット回収済みであったとしても元に戻る) { A, 5 }, { NOTHING, 30 }, { B, 5 }, { NOTHING, 30 }, { B, 5 }, { NOTHING, 30 }, { B, 5 }, { NOTHING, 50 }, // 設定変更 { HOME, 5 }, { NOTHING, 15 }, { DOWN, 5 }, { NOTHING, 5 }, { RIGHT, 5 }, { NOTHING, 5 }, { RIGHT, 5 }, { NOTHING, 5 }, { RIGHT, 5 }, { NOTHING, 5 }, { RIGHT, 5 }, { NOTHING, 5 }, { A, 5 }, // 設定を押す { NOTHING, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { DOWN, 5 }, { NOTHING, 15 }, { A, 5 }, // 設定\u0026gt;本体を押す { NOTHING, 5 }, { DOWN, 5 }, { NOTHING, 5 }, { DOWN, 5 }, { NOTHING, 5 }, { DOWN, 5 }, { NOTHING, 5 }, { DOWN, 5 }, { NOTHING, 5 }, { A, 5 }, // 日付と時刻を押す { NOTHING, 5 }, { DOWN, 5 }, { NOTHING, 5 }, { DOWN, 5 }, { NOTHING, 5 }, { A, 5 }, // 現在の日付と時刻を押す { NOTHING, 15 }, { RIGHT, 5 }, { NOTHING, 5 }, { RIGHT, 5 }, { UP, 5 }, // 日付を1つ増やす { NOTHING, 15 }, { RIGHT, 5 }, { NOTHING, 5 }, { RIGHT, 5 }, { NOTHING, 5 }, { RIGHT, 5 }, { NOTHING, 15 }, { A, 5 }, // OKを押す { NOTHING, 30 }, { HOME, 5 }, // HOMRに戻る { NOTHING, 30 }, { HOME, 5 }, // ゲームに戻る { NOTHING, 30 }, }; // Main entry point. int main(void) { // We\u0026#39;ll start by performing hardware and peripheral setup. SetupHardware(); // We\u0026#39;ll then enable global interrupts for our use. GlobalInterruptEnable(); // Once that\u0026#39;s done, we\u0026#39;ll enter an infinite loop. for (;;) { // We need to run our task to process and deliver data for our IN and OUT endpoints. HID_Task(); // We also need to run the main USB management task. USB_USBTask(); } } // Configures hardware and peripherals, such as the USB peripherals. void SetupHardware(void) { // We need to disable watchdog if enabled by bootloader/fuses. MCUSR \u0026amp;= ~(1 \u0026lt;\u0026lt; WDRF); wdt_disable(); // We need to disable clock division before initializing the USB hardware. clock_prescale_set(clock_div_1); // We can then initialize our hardware and peripherals, including the USB stack. #ifdef ALERT_WHEN_DONE // Both PORTD and PORTB will be used for the optional LED flashing and buzzer. #warning LED and Buzzer functionality enabled. All pins on both PORTB and \\ PORTD will toggle when printing is done. DDRD = 0xFF; //Teensy uses PORTD PORTD = 0x0; //We\u0026#39;ll just flash all pins on both ports since the UNO R3 DDRB = 0xFF; //uses PORTB. Micro can use either or, but both give us 2 LEDs PORTB = 0x0; //The ATmega328P on the UNO will be resetting, so unplug it? #endif // The USB stack should be initialized last. USB_Init(); } // Fired to indicate that the device is enumerating. void EVENT_USB_Device_Connect(void) { // We can indicate that we\u0026#39;re enumerating here (via status LEDs, sound, etc.). } // Fired to indicate that the device is no longer connected to a host. void EVENT_USB_Device_Disconnect(void) { // We can indicate that our device is not ready (via status LEDs, sound, etc.). } // Fired when the host set the current configuration of the USB device after enumeration. void EVENT_USB_Device_ConfigurationChanged(void) { bool ConfigSuccess = true; // We setup the HID report endpoints. ConfigSuccess \u0026amp;= Endpoint_ConfigureEndpoint(JOYSTICK_OUT_EPADDR, EP_TYPE_INTERRUPT, JOYSTICK_EPSIZE, 1); ConfigSuccess \u0026amp;= Endpoint_ConfigureEndpoint(JOYSTICK_IN_EPADDR, EP_TYPE_INTERRUPT, JOYSTICK_EPSIZE, 1); // We can read ConfigSuccess to indicate a success or failure at this point. } // Process control requests sent to the device from the USB host. void EVENT_USB_Device_ControlRequest(void) { // We can handle two control requests: a GetReport and a SetReport. // Not used here, it looks like we don\u0026#39;t receive control request from the Switch. } // Process and deliver data from IN and OUT endpoints. void HID_Task(void) { // If the device isn\u0026#39;t connected and properly configured, we can\u0026#39;t do anything here. if (USB_DeviceState != DEVICE_STATE_Configured) return; // We\u0026#39;ll start with the OUT endpoint. Endpoint_SelectEndpoint(JOYSTICK_OUT_EPADDR); // We\u0026#39;ll check to see if we received something on the OUT endpoint. if (Endpoint_IsOUTReceived()) { // If we did, and the packet has data, we\u0026#39;ll react to it. if (Endpoint_IsReadWriteAllowed()) { // We\u0026#39;ll create a place to store our data received from the host. USB_JoystickReport_Output_t JoystickOutputData; // We\u0026#39;ll then take in that data, setting it up in our storage. while(Endpoint_Read_Stream_LE(\u0026amp;JoystickOutputData, sizeof(JoystickOutputData), NULL) != ENDPOINT_RWSTREAM_NoError); // At this point, we can react to this data. // However, since we\u0026#39;re not doing anything with this data, we abandon it. } // Regardless of whether we reacted to the data, we acknowledge an OUT packet on this endpoint. Endpoint_ClearOUT(); } // We\u0026#39;ll then move on to the IN endpoint. Endpoint_SelectEndpoint(JOYSTICK_IN_EPADDR); // We first check to see if the host is ready to accept data. if (Endpoint_IsINReady()) { // We\u0026#39;ll create an empty report. USB_JoystickReport_Input_t JoystickInputData; // We\u0026#39;ll then populate this report with what we want to send to the host. GetNextReport(\u0026amp;JoystickInputData); // Once populated, we can output this data to the host. We do this by first writing the data to the control stream. while(Endpoint_Write_Stream_LE(\u0026amp;JoystickInputData, sizeof(JoystickInputData), NULL) != ENDPOINT_RWSTREAM_NoError); // We then send an IN packet on this endpoint. Endpoint_ClearIN(); } } int find_loop_start_step(void){ for(int i=0;i\u0026lt;(int)(sizeof(step)/sizeof(step[0]))-1;i++){ if(step[i].button==LOOP_START) return i; } return 0; } typedef enum { SYNC_CONTROLLER, BREATHE, PROCESS, } State_t; State_t state = SYNC_CONTROLLER; #define ECHOES 2 int echoes = 0; USB_JoystickReport_Input_t last_report; int report_count = 0; int hold_LX = STICK_CENTER; int hold_LY = STICK_CENTER; int hold_RX = STICK_CENTER; int hold_RY = STICK_CENTER; int bufindex = 0; int duration_count = 0; int loop_start_step = 0; void GetNextReport(USB_JoystickReport_Input_t* const ReportData) { // Prepare an empty report memset(ReportData, 0, sizeof(USB_JoystickReport_Input_t)); ReportData-\u0026gt;LX = STICK_CENTER; ReportData-\u0026gt;LY = STICK_CENTER; ReportData-\u0026gt;RX = STICK_CENTER; ReportData-\u0026gt;RY = STICK_CENTER; ReportData-\u0026gt;HAT = HAT_CENTER; //Hold stick ReportData-\u0026gt;LX = hold_LX; ReportData-\u0026gt;LY = hold_LY; ReportData-\u0026gt;RX = hold_RX; ReportData-\u0026gt;RY = hold_RY; // Repeat ECHOES times the last report if (echoes \u0026gt; 0) { memcpy(ReportData, \u0026amp;last_report, sizeof(USB_JoystickReport_Input_t)); echoes--; return; } // States and moves management switch (state) { case SYNC_CONTROLLER: loop_start_step = find_loop_start_step(); state = PROCESS; break; case PROCESS: switch (step[bufindex].button) { case UP: ReportData-\u0026gt;LY = STICK_MIN; break; case LEFT: ReportData-\u0026gt;LX = STICK_MIN; break; case DOWN: ReportData-\u0026gt;LY = STICK_MAX; break; case RIGHT: ReportData-\u0026gt;LX = STICK_MAX; break; case UPLEFT: ReportData-\u0026gt;LY = STICK_MIN; ReportData-\u0026gt;LX = STICK_MIN; break; case UPRIGHT: ReportData-\u0026gt;LY = STICK_MIN; ReportData-\u0026gt;LX = STICK_MAX; break; case DOWNLEFT: ReportData-\u0026gt;LY = STICK_MAX; ReportData-\u0026gt;LX = STICK_MIN; break; case DOWNRIGHT: ReportData-\u0026gt;LY = STICK_MAX; ReportData-\u0026gt;LX = STICK_MAX; break; case HOLD_UP: hold_LY = STICK_MIN; break; case HOLD_LEFT: hold_LX = STICK_MIN; break; case HOLD_DOWN: hold_LY = STICK_MAX; break; case HOLD_RIGHT: hold_LX = STICK_MAX; break; case HOLD_CLEAR: hold_LX = STICK_CENTER; hold_LY = STICK_CENTER; break; case HOLD_CAM_L: hold_RX = STICK_MIN; break; case HOLD_CAM_R: hold_RX = STICK_MAX; break; case HOLD_CAM_C: hold_RX = STICK_CENTER; hold_RY = STICK_CENTER; break; case HOLD_CAM_UP: hold_RY = STICK_MIN; break; case A: ReportData-\u0026gt;Button |= SWITCH_A; break; case B: ReportData-\u0026gt;Button |= SWITCH_B; break; case X: ReportData-\u0026gt;Button |= SWITCH_X; break; case Y: ReportData-\u0026gt;Button |= SWITCH_Y; break; case R: ReportData-\u0026gt;Button |= SWITCH_R; break; case PLUS: ReportData-\u0026gt;Button |= SWITCH_PLUS; break; case HOME: ReportData-\u0026gt;Button |= SWITCH_HOME; break; case H_LEFT: ReportData-\u0026gt;HAT = HAT_LEFT; break; default: break; } duration_count++; if (duration_count \u0026gt; step[bufindex].duration) { bufindex++; duration_count = 0; } if (bufindex \u0026gt; (int)( sizeof(step) / sizeof(step[0])) - 1) { bufindex = loop_start_step; duration_count = 0; } } // Prepare to echo this report memcpy(\u0026amp;last_report, ReportData, sizeof(USB_JoystickReport_Input_t)); echoes = ECHOES; } コンパイル ソースを修正したら、コンパイルを行います。\nソースファイルと同じディレクトリに移動し、makeコマンドを実行しましょう。\n[adsense-responsive]\rmake [INFO] : Begin compilation of project \u0026#34;Joystick\u0026#34;... avr-gcc (GCC) 4.8.1 Copyright (C) 2013 Free Software Foundation, Inc. This is free software; see the source for copying conditions. There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. [GCC] : Compiling C file \u0026#34;Joystick.c\u0026#34; avr-gcc -c -pipe -gdwarf-2 -g2 -mmcu=atmega16u2 -fshort-enums -fno-inline-small-functions -Wall -fno-strict-aliasing -funsigned-char -funsigned-bitfields -ffunction-sections -I. -DARCH=ARCH_AVR8 -DF_CPU=16000000UL -mrelax -fno-jump-tables -x c -Os -std=gnu99 -Wstrict-prototypes -DUSE_LUFA_CONFIG_HEADER -IConfig/ -I. -I./lufa/LUFA/.. -DARCH=ARCH_AVR8 -DBOARD=BOARD_NONE -DF_USB=16000000UL -MMD -MP -MF obj/Joystick.d Joystick.c -o obj/Joystick.o Joystick.c: In function \u0026#39;GetNextReport\u0026#39;: Joystick.c:311:3: warning: enumeration value \u0026#39;BREATHE\u0026#39; not handled in switch [-Wswitch] switch (state) ^ [LNK] : Linking object files into \u0026#34;Joystick.elf\u0026#34; avr-gcc obj/Joystick.o obj/Descriptors.o obj/HIDParser.o obj/Device_AVR8.o obj/EndpointStream_AVR8.o obj/Endpoint_AVR8.o obj/Host_AVR8.o obj/PipeStream_AVR8.o obj/Pipe_AVR8.o obj/USBController_AVR8.o obj/USBInterrupt_AVR8.o obj/ConfigDescriptors.o obj/DeviceStandardReq.o obj/Events.o obj/HostStandardReq.o obj/USBTask.o -o Joystick.elf -lm -Wl,-Map=Joystick.map,--cref -Wl,--gc-sections -Wl,--relax -mmcu=atmega16u2 [OBJCPY] : Extracting HEX file data from \u0026#34;Joystick.elf\u0026#34; avr-objcopy -O ihex -R .eeprom -R .fuse -R .lock -R .signature Joystick.elf Joystick.hex [OBJCPY] : Extracting EEP file data from \u0026#34;Joystick.elf\u0026#34; avr-objcopy -O ihex -j .eeprom --set-section-flags=.eeprom=\u0026#34;alloc,load\u0026#34; --change-section-lma .eeprom=0 --no-change-warnings Joystick.elf Joystick.eep || exit 0 [OBJCPY] : Extracting BIN file data from \u0026#34;Joystick.elf\u0026#34; avr-objcopy -O binary -R .eeprom -R .fuse -R .lock -R .signature Joystick.elf Joystick.bin [OBJDMP] : Extracting LSS file data from \u0026#34;Joystick.elf\u0026#34; avr-objdump -h -d -S -z Joystick.elf \u0026gt; Joystick.lss [NM] : Extracting SYM file data from \u0026#34;Joystick.elf\u0026#34; avr-nm -n Joystick.elf \u0026gt; Joystick.sym [SIZE] : Determining size of \u0026#34;Joystick.elf\u0026#34; avr-size --mcu=atmega16u2 --format=avr Joystick.elf AVR Memory Usage ---------------- Device: atmega16u2 Program: 3888 bytes (23.7% Full) (.text + .data + .bootloader) Data: 266 bytes (52.0% Full) (.data + .bss + .noinit) [INFO] : Finished building project \u0026#34;Joystick\u0026#34;. [INFO] : Finished building project \"Joystick\".が出力されていれば正常にコンパイルが成功しJoystick.hexというファイルが生成されていると思います。\nマイコンに書き込み 次はマイコンに書き込みます。\nまずはジャンパーワイヤーを使い、マイコンをDFUモードで繋げれるようにしましょう。\nこの状態で付属のUSBを使いPCに接続します。\n接続し、ランプが点灯したらジャンパーワイヤーを取り外します。\n次に以下のコマンドを順番に実行してください。\nsudo dfu-programmer atmega16u2 erase Password: Checking memory from 0x0 to 0x2FFF... Not blank at 0x1. Erasing flash... Success sudoコマンドなのでPCのパスワードを求められます。\n正常に通ればマイコンに入っている既存プログラムを削除出来ます。\nsudo dfu-programmer atmega16u2 flash Joystick.hex Checking memory from 0x0 to 0xF7F... Empty. 0% 100% Programming 0xF80 bytes... [\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;] Success 0% 100% Reading 0x3000 bytes... [\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;\u0026gt;] Success Validating... Success 0xF80 bytes written into 0x3000 bytes memory (32.29%). これで正常に書き込みが成功しました。\n最後にsudo dfu-programmer atmega16u2 resetを実行し書き込みを完了しましょう。\nこれで準備が完了しましたので、マイコンを取り外して大丈夫です。\n自動操作開始 では、実際に自動操作をしてみましょう。\nマイコンとSwitchをType-CのUSBケーブルで接続しましょう。\n接続してから多少動くまでは準備処理が走っているため5秒くらい経過してから自動操作が始まります！\nかがくの　ちからって　すげ〜！\n終わりに 以上のように、規則性のある単純な作業であればマイコンを使う事で自動化をすることが可能になりました！\nポケモン剣盾だけではなく他のソフトでもJoystick.cのstep[]変数の中身を変えるだけで同じように自動化をすることが可能なので、気になる方はぜひ試してみてください♪\n","date":"2020-03-20T01:19:42+09:00","image":"/wp-content/uploads/2020/03/pokemonSWAutoWatEye.png","permalink":"/2020/03/20/10317/","title":"【色々試した結果一番簡単】Switchのポケモン剣盾の無限ワットバグをマイコンで自動化する方法【Python・Arduino IDE不要】"},{"content":"日本人にぴったりなパスポートケース 先日、ツイッターで話題になっていた葛飾北斎の富嶽三十六景「凱風快晴」をモチーフにしたパスポートケースを実際に購入してみました！\n葛飾北斎の富嶽三十六景「凱風快晴」をモチーフにしたパスポートカバーが話題です。パスポートの赤色を活かしたデザインになっているのですが、ご覧のとおりとってもかっこいいんです…！ pic.twitter.com/gNTb5PAN0K\n\u0026mdash; BuzzFeed Japan (@BuzzFeedJapan) February 21, 2020 Amazon Akafuji あかふじ パスポートカバー パスポートケース 開封の儀 包装 パスポートケースはこんな感じで包装されています。\nビニールから出してみましょう。\nスルッ。\nパスケース本体 パスケースはさらにプラスチックのカバーに保護されて入っています。\nめちゃくちゃいいデザイン！\nかなり和を感じるデザインになっていますね♪\nAKAFUJI！！\n裏面です。\n凱風快晴についての説明が丁寧に記載されています♪\nではでは、お待ちかねのパスケース本体を出してみましょう！\nスルッ。\n本体はこんな感じです。\nビニール製ですがかなり良い質感です♪\n中には台紙が入っています。\n台紙を外すとこんな感じです。\n[adsense-responsive]\rパスポートを入れてみましょう。\nジャストフィット！！\n素晴らしい。(脱帽)\n10年パスポートの赤色がとても良い感じに赤富士を表現してくれてます！\n裏面もしっかり赤富士です♪\n終わりに 赤いパスポートなら赤富士、青いパスポートなら青富士になり、日本人にピッタリなデザインです！\n日本人として海外に行く機会が多い方にはオススメですので、気になる方は是非購入してみてはいかがでしょうか♪\n","date":"2020-03-13T23:56:33+09:00","image":"/wp-content/uploads/2020/03/passportAkafujiEye.png","permalink":"/2020/03/13/10294/","title":"【オススメのパスポートケース】日本人にぴったりな葛飾北斎の富嶽三十六景「凱風快晴」のデザインケース【海外旅行】"},{"content":"高音質でコンパクトなPC用スピーカー PCディスプレイを購入した際に、スピーカーが搭載されていないタイプのディスプレイだと後から気づく場合があります。\n安価の製品だったりゲーミングモニターの場合はよくありますね。\nヘッドセットなどを持っている場合はそれでも音声再生は問題ありませんが、ずっとつけたままだと頭が疲れたり耳が痛くなったりする事があります。\nそこで、今回はコスパが最強のPCスピーカーをAmazonで発見して実際に購入してみたのでご紹介しようと思います♪\nAmazon PCスピーカー ELEGIANT 高音質 大音量 小型 重低音 ホームシアター ステレオ サウンドバー スマホ/パソコン/タブレット/テレビ対応 USB Speaker 開封の儀 外観 パッケージはこんな感じです。\nスピーカーのサイズに合わせたスリムなパッケージです。\n早速中身を見ていきましょう。\nパカッ。\n内容物 スピーカーはビニールに包まれています。\nビニールから出すとこんな感じです。\nシンプルなデザインですね！\n梱包物は以下の通り。\n梱包物\rスピーカー本体\r保証書\r取扱説明書\rスピーカーにはロゴがワンポイントに入っています。\n音量調整はダイヤルで簡単に調整可能です。\n裏には電源スイッチがあります。\n底面には滑り止めがあるので、デスク上でもズレる心配はありません。\n取扱説明書はこんな感じ。\nスピーカー自体の使い方がシンプルなので取扱説明書を見る必要はありませんが、複数言語で書いてあるので困りません♪\nあら、このパターンは・・・！？\n見たことあるぞ！笑\n某充電機器メーカーと似ていますね！！\n使い方 使い方はとても簡単です。\nUSBを接続しイヤホンジャックを対象機器に繋げ、背面の電源スイッチを押し込みます。\nポチッとな。\nあとはダイヤルを時計回りに回すと電源が入り音が出始めます。\nLEDライトは音楽とは同期がしないので、オマケみたいなものですが意外と綺麗にライトアップされます！\nPC周辺機器のLEDと相性が良いです♪\n終わりに 以上のように、音質もクリアで使い勝手もとても良いPCスピーカーでした。\n安い価格のものをお探しの方は、是非こちらを購入してみてはいかがでしょうか♪\n","date":"2020-03-07T19:18:19+09:00","image":"/wp-content/uploads/2020/03/elegantPcSpeakerEye.png","permalink":"/2020/03/07/10263/","title":"【コスパ最強】ELEGIANTのUSBタイプのPCスピーカーが使い勝手抜群でオススメ【Amazon】"},{"content":"不要なパッケージのガバレッジはJaCoCoで出力したくない 前回、JaCoCoのsbtプラグインを利用してJUnitテストのガバレッジを出力する方法をご紹介しました。\n関連記事 【HTMLガバレッジレポート】sbtのJaCoCoプラグインでJunitの実行結果をドキュメント化しよう【PlayFramework2.7】 2020/02/22 1458文字 約3分で読めます しかし、デフォルトの設定だとコンパイル時に自動生成されたviewsパッケージやrouteパッケージのクラスも対象になってしまい、ボリュームが肥大化してしまいがちです。\n今回は設定によって、JaCoCoのガバレッジ対象からパッケージ単位で除外する方法をご紹介しようと思います。\n手順 build.sbtに追記 除外する方法は、build.sbtに以下を追記するだけでOKです。\n今回は自動生成されるviewsパッケージとrouteパッケージ、さらにcontroller配下のjavascriptパッケージを除外してみようと思います。\nbuild.sbt ... (略) ... // JaCoCo jacocoExcludes in Test := Seq( \u0026#34;views.*\u0026#34;, \u0026#34;router.*\u0026#34;, \u0026#34;controllers.javascript.*\u0026#34;, \u0026#34;controllers.*.javascript.*\u0026#34;, ) ... (略) ... 設定はたったこれだけです。\n確認 では実際に動かしてみましょう。\n正常に除外されましたね♪\n終わりに 以上のように簡単に出力対象パッケージを制御する事が出来ました♪\n全体ガバレッジを100%に近づけるためには不要な移動生成パッケージを除外する必要があるので、ぜひ試してみてください。\n","date":"2020-03-04T15:47:50+09:00","image":"/wp-content/uploads/2020/03/jacocoIgnorePackageEye.png","permalink":"/2020/03/04/10251/","title":"【ユニットテスト】JUnitのJaCoCoの出力対象パッケージを指定する方法【PlayFramework2.7系】"},{"content":"PlayFrameworkをGradleで動かしたい 前回、sbtを使ったPlayFrameworkのプロジェクト作成方法についてご紹介しました。\n関連記事 【爆速環境構築】sbtを使ったPlayFramework2.7のプロジェクト作成方法【Java】 2020/02/21 1116文字 約3分で読めます しかし、Gradle信者な筆者はどうにかしてPlayFrameworkをsbtでは無くGradleから実行出来ないのか？と調べてみたところ、Gradleから公式のPlayFramework用のプラグインが提供されていたので、試しに使って起動までを動作確認してみました。\n手順 環境 今回は以下の環境で試してみようと思います。\nPoint\rPlayFramework 2.6.25\rScala 2.12\rGradle 5.6.4\rPlayFramework2.7以上、Scala2.13以上はサポート外 こちらのGradle-PlayFrameworkプラグインはPlayFramework2.7以上、Scala2.13以上はサポートしておらず、あくまでPlayFramework~2.6、Scala~2.12までしか正常に動かないとのことです。\n[adsense-responsive]\r試しに、PlayFramework2.7.3、Scapa2.13で試したところ、java.lang.NoClassDefFoundError: scala/Serializableエラーが出てうまく起動しませんでした\u003e\u003c\n実行ログ \u0026gt; Task :runPlay java.lang.NoClassDefFoundError: scala/Serializable at play.doc.JarRepository.\u0026lt;init\u0026gt;(FileRepository.scala:109) at play.docs.BuildDocHandlerFactory.fromJar(BuildDocHandlerFactory.java:126) at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.base/java.lang.reflect.Method.invoke(Method.java:566) at org.gradle.playframework.tools.internal.run.DefaultVersionedPlayRunAdapter.getBuildDocHandler(DefaultVersionedPlayRunAdapter.java:116) at org.gradle.playframework.tools.internal.run.PlayWorkerServer.startServer(PlayWorkerServer.java:78) at org.gradle.playframework.tools.internal.run.PlayWorkerServer.start(PlayWorkerServer.java:63) at org.gradle.playframework.tools.internal.run.PlayWorkerServer.execute(PlayWorkerServer.java:46) at org.gradle.playframework.tools.internal.run.PlayWorkerServer.execute(PlayWorkerServer.java:21) at org.gradle.process.internal.worker.child.ActionExecutionWorker.execute(ActionExecutionWorker.java:91) at org.gradle.process.internal.worker.child.ActionExecutionWorker.execute(ActionExecutionWorker.java:34) at org.gradle.process.internal.worker.child.SystemApplicationClassLoaderWorker.call(SystemApplicationClassLoaderWorker.java:136) at org.gradle.process.internal.worker.child.SystemApplicationClassLoaderWorker.call(SystemApplicationClassLoaderWorker.java:69) at worker.org.gradle.process.internal.worker.GradleWorkerMain.run(GradleWorkerMain.java:68) at worker.org.gradle.process.internal.worker.GradleWorkerMain.main(GradleWorkerMain.java:73) Caused by: java.lang.ClassNotFoundException: scala.Serializable at java.base/java.net.URLClassLoader.findClass(URLClassLoader.java:471) at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:588) at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521) ... 17 more \u0026lt;===========--\u0026gt; 90% EXECUTING [17s] PlayFramework2.7以上、Scapa2.13以上でも動くならかなり実用性は上がるんですけどね。。。orz\nbuild.graldeの作成 まずはbuild.sbtに変わってbuild.gradleを作成しましょう。\nbuild.gradle plugins { id \u0026#39;org.gradle.playframework\u0026#39; version \u0026#39;0.9\u0026#39; } def playVersion = \u0026#34;2.6.25\u0026#34; def scalaVersion = \u0026#34;2.12\u0026#34; repositories { jcenter() maven { name \u0026#34;lightbend-maven-release\u0026#34; url \u0026#34;https://repo.lightbend.com/lightbend/maven-releases\u0026#34; } ivy { name \u0026#34;lightbend-ivy-release\u0026#34; url \u0026#34;https://repo.lightbend.com/lightbend/ivy-releases\u0026#34; layout \u0026#34;ivy\u0026#34; } } play { injectedRoutesGenerator = true } dependencies { implementation \u0026#34;com.typesafe.play:play-guice_${scalaVersion}:${playVersion}\u0026#34; testImplementation \u0026#34;com.typesafe.play:play-guice_${scalaVersion}:${playVersion}\u0026#34; } build.sbtやprojectディレクトリは不要なので削除してしまって問題ありません。\ngradle runPlayで実行 サーバーを起動する際にはgradle runPlayで実行可能です。\n実行ログ gradle runPlay \u0026lt;======-------\u0026gt; 50% EXECUTING [1m 4s] \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; spring-beans-4.3.11.RELEASE.jar \u0026gt; 101 KB/745 KB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; spring-core-4.3.11.RELEASE.jar \u0026gt; 335 KB/1.07 MB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; guava-22.0.jar \u0026gt; 480 KB/2.46 MB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; joda-time-2.9.9.jar \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; scala-java8-compat_2.12-0.8.0.jar \u0026gt; 589 KB/1.11 MB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; hibernate-validator-5.4.1.Final.jar \u0026gt; 223 KB/744 KB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; spring-context-4.3.11.RELEASE.jar \u0026gt; 342 KB/1.09 MB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; play_2.12-2.6.15.jar \u0026gt; 509 KB/2.60 MB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; akka-protobuf_2.12-2.5.11.jar \u0026gt; 397 KB/473 KB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; play-json_2.12-2.6.9.jar \u0026gt; 336 KB/644 KB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; akka-actor_2.12-2.5.11.jar \u0026gt; 765 KB/3.06 MB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; play-functional_2.12-2.6.9.jar \u0026gt; 115 KB/173 KB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; commons-lang3-3.6.jar \u0026gt; 336 KB/483 KB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; config-1.3.2.jar \u0026gt; 16 KB/279 KB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; reflections-0.9.11.jar \u0026gt; 65 KB/130 KB downloaded \u0026gt; :compileScala \u0026gt; Resolve files of :compileClasspath \u0026gt; jackson-databind-2.8.11.1.jar \u0026gt; 287 KB/1.19 MB downloaded ... (略) ... No play.logger.configurator found: logging must be configured entirely by the application. --- (Running the application, auto-reloading is enabled) --- SLF4J: Failed to load class \u0026#34;org.slf4j.impl.StaticLoggerBinder\u0026#34;. SLF4J: Defaulting to no-operation (NOP) logger implementation SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details. SLF4J: Failed to load class \u0026#34;org.slf4j.impl.StaticMDCBinder\u0026#34;. SLF4J: Defaulting to no-operation MDCAdapter implementation. SLF4J: See http://www.slf4j.org/codes.html#no_static_mdc_binder for further details. \u0026gt; Task :runPlay Running Play App (:runPlay) at http://localhost:9000/ Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0. Use \u0026#39;--warning-mode all\u0026#39; to show the individual deprecation warnings. See https://docs.gradle.org/5.6.4/userguide/command_line_interface.html#sec:command_line_warnings BUILD SUCCESSFUL in 2s 7 actionable tasks: 1 executed, 6 up-to-date Reloadable deployment detected. Entering continuous build. Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0. Use \u0026#39;--warning-mode all\u0026#39; to show the individual deprecation warnings. See https://docs.gradle.org/5.6.4/userguide/command_line_interface.html#sec:command_line_warnings BUILD SUCCESSFUL in 169ms 7 actionable tasks: 1 executed, 6 up-to-date Waiting for changes to input files of tasks... (ctrl-d to exit) \u0026lt;=============\u0026gt; 100% EXECUTING [17s] \u0026gt; IDLE このログが出力されればサーバー起動が成功しているので、同じようにhttp://localhost:9000/\u0026nbsp;にアクセスすれば画面が表示されます。\nJUnitも実行可能かつGradleレポートも自動生成可能 もちろん、gralde経由でのJUnitの実行もgradle testにて可能です。\n[adsense-responsive]\rgradle test \u0026gt; Task :compileTestScala Pruning sources from previous analysis, due to incompatible CompileSetup. \u0026gt; Task :test WARNING: An illegal reflective access operation has occurred WARNING: Illegal reflective access by com.google.inject.internal.cglib.core.$ReflectUtils$1 (file:/Users/blogenist/.gradle/caches/modules-2/files-2.1/com.google.inject/guice/4.1.0/eeb69005da379a10071aa4948c48d89250febb07/guice-4.1.0.jar) to method java.lang.ClassLoader.defineClass(java.lang.String,byte[],int,int,java.security.ProtectionDomain) WARNING: Please consider reporting this to the maintainers of com.google.inject.internal.cglib.core.$ReflectUtils$1 WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations WARNING: All illegal access operations will be denied in a future release Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0. Use \u0026#39;--warning-mode all\u0026#39; to show the individual deprecation warnings. See https://docs.gradle.org/5.6.4/userguide/command_line_interface.html#sec:command_line_warnings BUILD SUCCESSFUL in 4s 6 actionable tasks: 2 executed, 4 up-to-date そしてGradleでユニットテストを行う最大の利点である、ケース単位のレポートHTMLの自動生成も活用出来ます！\n出力先はデフォルトで `{プロジェクトディレクトリ}/build/reports/tests/test/index.html` となっています。\n失敗時はこんな感じ。\nしっかりとテスト結果単位でログがレポートにまとまるので調査もしやすい・・・！\nこのレベルのレポートが標準で出力されるのはとても嬉しいですよね！\nsbtじゃ出来ない部分なので、やはり筆者はGradleに惹かれてしまいます・・・！\nもちろんJaCoCoも利用可能 通常のsbt+JaCoCoで出来たガバレッジの出力についても問題無く可能です。\nbuild.gradleに以下の一文を加えてください。\nbuild.gradle plugins { id \u0026#39;org.gradle.playframework\u0026#39; version \u0026#39;0.9\u0026#39; id \u0026#39;jacoco\u0026#39; // ★追加 } ... (略) ... 追記したらgralde test jacocoTestReportコマンドで生成されます。\n終わりに 以上のように、PlayFrameworkをsbtではなくGradleで起動する事が出来ました。\nGradleも強力なビルドツールなので、気になる方は是非試してみてください♪\n","date":"2020-02-28T12:24:12+09:00","image":"/wp-content/uploads/2020/02/playWithGradleEye.png","permalink":"/2020/02/28/10180/","title":"【グッバイsbt】PlayFramework2系をGradleで動かす方法【Java】"},{"content":"Bauhutte（バウヒュッテ）のL字デスクを買ってみた 拡張デスクを購入！ PC周りの環境を快適にするためにこれまで様々なBauhutteメーカーのアイテムをご紹介してきましたが今回は、サイドデスクとして昇降式L字デスクを購入してみたので開封していこうと思います♪\nAmazon Bauhutte（バウヒュッテ） 昇降式L字デスク ラージ 木目 幅39×奥行き82㎝ BHD-820H-WD こちらは、メインのPCデスクの拡張デスクとしても使えますし、このデスク単体を作業用デスクとしても使う事が出来る万能なL字デスクとなっています♪\nオススメPC周り商品 PCデスク Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅120cm×奥行55cm) BHD-1200M Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅100cm×奥行60cm) BHD-1000M 関連記事 【ゲーミングPCデスク】Bauhutteの「昇降式式PCデスク」が快適過ぎた【PC作業向け】 2019/05/08 2964文字 約6分で読めます Amazon Bauhutte (バウヒュッテ) コントローラースタンド ヘッドホンハンガー BHP-S100 ブラック 幅20×奥行き13×高さ Amazon Bauhutte(バウヒュッテ) ゲーム機収納ラック スライダー式 ブラック BHS-380G-BK 39.5×37×61.5cm 関連記事 【Bauhutte】複数ゲームハード機やPC用品を収納出来るスライダー式ゲーム機収納ラックを購入してみたのでご紹介【デスクワーク/テレワーク/在宅】 2020/10/12 2244文字 約5分で読めます デスクマット Amazon Bauhutte (バウヒュッテ) デスクごとチェアマット BCM-160BK ブラック 特大サイズ160×130cm 厚さ1.5mm BCM-160BK 関連記事 【PC環境を整えよう】Bauhutteの「デスクごとチェアマット」を購入してみたので紹介してみる【ゲーミングPC/ゲーミングチェア】 2019/03/28 1778文字 約4分で読めます マイク付きヘッドセット Amazon Logicool G ゲーミングヘッドセット ワイヤレス 無線 G533 ブラック Dolby 7.1ch ノイズキャンセリング マイク 付き PC 軽量 国内正規品 2年間メーカー保証 キーボード Amazon Logicool ロジクール G PRO テンキーレス ゲーミング キーボード G-PKB-001ブラック メカニカル Romer-G RGB 着脱式ケーブル プロ仕様 PUBG JAPAN SERIES 2019 推奨モデル 国内正規品 2年間メーカー保証 PCモニター Amazon BenQ ゲーミングモニター ディスプレイ ZOWIE XL2411P 24インチ/フルHD/HDMI,DP,DVI端子/144Hz/1ms/ブルーライト軽減 ゲーミングチェア Amazon AKRACING ゲーミングチェア WOLF-GREY 灰 関連記事 【快適なPC作業を求め】ゲーミングチェア初心者にオススメな「AKRACING ゲーミングチェア WOLF-GREY」を購入したら大正解だった【ゲーミングPC】 2019/03/23 1937文字 約4分で読めます クッション Amazon Bauhutte (バウヒュッテ) ゲル\u0026amp;低反発 ずっと座りたいクッション BC-80G-BK 関連記事 【デスクワーク/テレワーク/在宅】PCゲーマーにもオススメの長時間座ってもお尻が痛くならないクッションを買ったので開封レビューしてみた【快適空間】 2020/10/17 1637文字 約4分で読めます マウス Amazon Logicool ロジクール G502 HERO ゲーミングマウス G502RGBh 【2年間保証付き】 ゲームパッド Amazon ワイヤレスコントローラー (DUALSHOCK 4) マグマ・レッド (CUH-ZCT2J11) 開封の儀 外装 L字デスクは大きな段ボールで運ばれてきます。\nかなり重いので腰をやらかさないように気をつけてください！\n早速開封していきましょう。\nパカっ。\n内容物 中身は以下の通りです。\nPoint\rL字デスクパーツ\r取扱説明書\r取扱説明書はかなり詳しく組み立て方書いてあるので、迷う事は無いと思いますので、組み立て工程は割愛します。。\n完成形 取扱説明書を見ながら30分ほどで完成しました。\n天板もかなり広めです。\n[adsense-responsive]\r横から見た図。\nBauhutteのプレートがお洒落です♪\n高さを調整するためのロックがあり、簡単に高さの調節が可能です。\nキャスターも同様にロックがあるので移動や固定が簡単です。\n終わりに 以上のようにPC周りのスペースの拡張から、開封作業の撮影スペースとしても優秀です。\nお値段もそこまで高く無いため、単体としての利用も全然ありだと思うので気になる方は購入してみてください。\n","date":"2020-02-26T12:28:37+09:00","image":"/wp-content/uploads/2020/02/bauhutteLlineEye.png","permalink":"/2020/02/26/10220/","title":"【Bauhutte】開封作業の撮影スペースとしても使えるPC用昇降式L字デスクが使い勝手が良すぎた【PC環境】"},{"content":"配列クエリをFormモデルにバインドしようとしたら一癖あった話 PlayFrameworkを使ってAPI開発をしている際に、配列を想定しているクエリパラメーターに対してもBeanバリデーションを行いたかったため、Formモデルを使ってマッピングしようとしたところ、最初の要素しかListモデルにマッピング出来ませんでした。\n今回はその原因と実際に試してみた対処方法についてご紹介しようと思います。\n手順 前提 以下のようなidを複数指定して返却するようなAPIがあったとします。\nOpenAPI openapi: 3.0.0 info: title: サンプル version: 1.0.0 paths: /v1/accounts: get: parameters: - name: ids in: query required: false schema: type: array items: type: integer format: int32 responses: 200: description: 成功時のレスポンス content: \u0026#39;application/json\u0026#39;: schema: type: object properties: accounts: type: array items: type: object properties: id: type: integer format: int32 example: 1001 name: type: string example: 山田太郎 age: type: integer format: int32 example: 26 total: type: integer format: int32 example: 1 まずはModelにマッピングせずに直接取得する方法 まずはController側で直接配列のクエリパラメーターを受け取ってみましょう。\n[adsense-responsive]\r以下のようなroutesの記述とControllerがあったとします。\nconf/routes # Routes # This file defines all application routes (Higher priority routes first) # ~~~~ GET /v1/accounts controllers.account.AccountController.listingBy(ids: java.util.List[Integer]) ... (略) ... constrollers.account.AccountController.java package controllers.account; import java.util.Collections; import java.util.List; import java.util.stream.Collectors; import java.util.stream.IntStream; import models.account.AccountListElementModel; import models.account.AccountListModel; import play.mvc.Controller; import play.mvc.Result; public class AccountController extends Controller { public Result listingBy(List\u0026lt;Integer\u0026gt; ids) { ... (略) ... 確認 この場合idsの値は、http://localhost:9000/v1/accounts?ids=1\u0026ids=4\u0026ids=6の場合はidsは1と4と6、http://localhost:9000/v1/accounts?ids=1の場合は1、http://localhost:9000/v1/accountsの場合はidsはempty(nullではない)となります。\nしっかりマッピング出来てますね♪\nFormモデルで取得 しかし、routesとControllerの引数に直接追加すると、クエリパラメーターが増えたりした際の修正範囲が増えてしまいます。\nPlayFrameworkのFormはPOSTなどのリクエストボディのマッピングで主に使うようですがGETのクエリパラメーターに対してもモデルにマッピングし、さらにBeanバリデーションを活用したいので試してみましょう。\n[adsense-responsive]\r以下の検索モデルを用意します。\nmodels.account.AccountListCriteriaModel.java package models.account; import java.util.List; import javax.validation.constraints.Size; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor @Builder @Data public class AccountListCriteriaModel { @Size(max = 3) public List\u0026lt;Integer\u0026gt; ids; public AccountListCriteriaModel(){} // LombokのNoArgsConstructorが認識されないので明示的に定義 } 今回はとりあえずなにかしらのBeanバリデーションをかけたいので、@Sizeを利用し要素が4件以上指定された場合にバリデーションエラーを発生させるようにしてみます。\nroutesとControllerは以下のように修正します。\nconf/routes # Routes # This file defines all application routes (Higher priority routes first) # ~~~~ GET /v1/accounts controllers.account.AccountController.listingBy(request: Request) ... (略) ... 確認 では、実際にリクエストしてみましょう。\nまず、http://localhost:9000/v1/accountsの場合はids=nullとなります。この場合はControllerの引数で直接取得する場合との差異が出てますね。\n次にhttp://localhost:9000/v1/accounts?ids=1の場合。\nこちらは正しくListの要素として4要素がマッピングされていますね。\n最後に複数クエリパラメーターが指定されたhttp://localhost:9000/v1/accounts?ids=1\u0026ids=4\u0026ids=8\u0026ids=10の場合です。\nあら、一つ目の要素しかマッピングされていませんし、Beanバリデーターも機能していませんね。。。\n試しにCriteriaモデルのidsの型をListから配列にしてもダメでした。orz\n配列をマッピングしたい場合は[]を付けるのがplayのお作法 実は、PlayFrameworkでは配列パラメーターをマッピングしたい場合は[]を付けるのが基本となっているようです。\n試しに、http://localhost:9000/v1/accounts?ids[]=1\u0026ids[]=4\u0026ids[]=8\u0026ids[]=10でリクエストしてみましょう。\n正しくidsに4要素マッピングされ、Beanバリデーションも実行されていますね！\nとはいえ、[]を付けるのはちょっと気持ち悪い。。。 しかし、クエリパラメーターに[]を付けるのはちょっと一般的ではない気がするのと、呼び出し側も修正しないといけないのでちょっと採用したくない案ですよね。。。\nそこで、クエリには[]をつけずにFormでバインドしてBeanバリデーションを実行する方法を以下のようにして実現してみました！(もっとスマートな方法があるかもしれません。orz)\n配列を[]を使わずにFormモデルにbind\u0026amp;Beanバリデーションを実行する方法 routesの修正 まず、routesの設定として配列になりうる要素のみControllerの引数で取得出来るようにします。\n[adsense-responsive]\rconf/routes # Routes # This file defines all application routes (Higher priority routes first) # ~~~~ GET /v1/accounts controllers.account.AccountController.listingBy(request: Request,ids: java.util.List[String]) ... (略) ... この際に、Stringで定義しておくことがポイントです。\nControllerでFormにbindする部分を修正 次に、Controllerの引数で受け取った配列を利用して意図的にバインドする処理を追加します。\ncontrollers.account.AccountController.java package controllers.account; import java.util.Arrays; import java.util.List; import java.util.Map; import java.util.stream.Collectors; import java.util.stream.IntStream; import javax.inject.Inject; import javax.inject.Singleton; import models.account.AccountListCriteriaModel; import models.account.AccountListElementModel; import models.account.AccountListModel; import play.data.Form; import play.data.FormFactory; import play.i18n.MessagesApi; import play.mvc.Controller; import play.mvc.Http; import play.mvc.Result; @Singleton public class AccountController extends Controller { private final MessagesApi messagesApi; private final Form\u0026lt;AccountListCriteriaModel\u0026gt; accountListCriteria; private final String CODES_QUERY_KEY = \u0026#34;ids\u0026#34;; // 配列クエリのキーを定義 @Inject public AccountController(FormFactory formFactory, MessagesApi messagesApi) { this.messagesApi = messagesApi; this.accountListCriteria = formFactory.form(AccountListCriteriaModel.class); } public Result listingBy(Http.Request request, List\u0026lt;String\u0026gt; ids) { // クエリに含まれている配列があり得るキーの値を一旦除去 Map\u0026lt;String, String[]\u0026gt; ignoreArrayQueryStringMap = request.queryString().entrySet().stream() .filter(entry -\u0026gt; !Arrays.asList(CODES_QUERY_KEY).contains(entry.getKey())) .collect(Collectors.toMap(Map.Entry::getKey, Map.Entry::getValue)); // Listを配列に変換 String[] convertCodes = new String[ids.size()]; ids.toArray(convertCodes); // 受け取った配列をMapに追加 ignoreArrayQueryStringMap.put(String.format(\u0026#34;%s%s\u0026#34;, CODES_QUERY_KEY, \u0026#34;[]\u0026#34;), convertCodes); // 処理を加えたMapを使ってbind final Form\u0026lt;AccountListCriteriaModel\u0026gt; bindForm = accountListCriteria.bindFromRequestData( this.messagesApi.preferred(request).lang(), request.attrs(), ignoreArrayQueryStringMap); ... (略) ... 確認 では、http://localhost:9000/v1/accounts?ids=1\u0026ids=4\u0026ids=8\u0026ids=10にアクセスして確認してみましょう。\nこれで一応期待通りの動きになりましたね！\n終わりに 痒いところに手が届かない部分を自前でカスタマイズしてみました。\n他にも良い対応策があると思いますが、同じようにモヤモヤしている方は参考にしてみていただければなと思います。\n","date":"2020-02-25T22:03:44+09:00","image":"/wp-content/uploads/2020/02/playMappingArrayQueryParamEye.png","permalink":"/2020/02/25/10014/","title":"【bindFromRequestData】playFramework2.7で配列をマッピングする方法【BeanValidator】"},{"content":"ユニットテストのガバレッジを自動生成しよう 皆さんはユニットテスト書いていますか？\n品質をあげるにはしっかりとユニットテストを書いて、CI環境でしっかり実施する事が大事です。\n今回ご紹介するのは、ユニットテストの実施によって実行されたソース部分のガバレッジレポートをHTML形式で自動生成してくれるJaCoCoというプラグインをご紹介しようと思います。\n出力対象のパッケージを制御する方法については以下でご紹介していますので、合わせてみて頂ければなと思います。\n関連記事 【ユニットテスト】JUnitのJaCoCoの出力対象パッケージを指定する方法【PlayFramework2.7系】 2020/03/04 534文字 約2分で読めます 手順 sbt-jacocoプラグインの追加 まずはプロジェクトにsbt用のJaCoCoプラグインを追加しましょう。\nproject/plugins.sbtに以下を追記してください。\nproject/plugins.sbt // The Play plugin addSbtPlugin(\u0026#34;com.typesafe.play\u0026#34; % \u0026#34;sbt-plugin\u0026#34; % \u0026#34;2.8.0\u0026#34;) // Defines scaffolding (found under .g8 folder) // http://www.foundweekends.org/giter8/scaffolding.html // sbt \u0026#34;g8Scaffold form\u0026#34; addSbtPlugin(\u0026#34;org.foundweekends.giter8\u0026#34; % \u0026#34;sbt-giter8-scaffold\u0026#34; % \u0026#34;0.11.0\u0026#34;) // JaCoCo ★追加 addSbtPlugin(\u0026#34;com.github.sbt\u0026#34; % \u0026#34;sbt-jacoco\u0026#34; % \u0026#34;3.2.0\u0026#34;) ★追加 設定はたったこれだけです！\n実行方法 テスト実行時のコマンドをsbt jacocoに変えて実行する事でJUnitの実行とレポートの生成を行なってくれます。\n[adsense-responsive]\rsbt jacoco ... (略) ... [info] ------- Jacoco Coverage Report ------- [info] [info] Lines: 58.49% (\u0026gt;= required 0.0%) covered, 44 of 106 missed, OK [info] Instructions: 46.5% (\u0026gt;= required 0.0%) covered, 635 of 1187 missed, OK [info] Branches: 22.92% (\u0026gt;= required 0.0%) covered, 37 of 48 missed, OK [info] Methods: 33.02% (\u0026gt;= required 0.0%) covered, 71 of 106 missed, OK [info] Complexity: 27.69% (\u0026gt;= required 0.0%) covered, 94 of 130 missed, OK [info] Class: 73.33% (\u0026gt;= required 0.0%) covered, 4 of 15 missed, OK [info] [info] Check /Users/blogenist/sample/java-sample/target/scala-2.13/jacoco/report for detailed report [info] [success] Total time: 5 s, completed 2020/02/21 21:11:02 生成ディレクトリは `{プロジェクトルート}/target/scala-2.13/jacoco/report` です。\n結果の中には、PlayFrameworkが自動で生成するパッケージ(routerやviews、controller.javascriptなどがありますがスルーしましょう。)\n取り急ぎ、sbtが自動生成してくれたHomeControllerクラスのテスト結果を見てみましょう。\n緑色になっているところがユニットテストで実行されたコード部分になります。\nユニットテスト作成の一つの指標として、全てのコードを通っていることを担保するには良いガバレッジに使えそうですね♪\n実行されていない場合 実行されていない場合はこのように赤くなります。\nなので、まずは全ての行が緑色になるようにユニットテストやソースの修正をしましょう。\n※今回は紹介するためにテスト元クラスをいじってJaCoCoの動きをご紹介していますorz\nif文を網羅していない場合 また、以下のような引数の値によってif文などの分岐が存在する場合に、ユニットテストで網羅できていない場合は以下のように黄色くなります。\n[adsense-responsive]\rapp.controllers.HomeController.java package controllers; import play.mvc.*; /** * This controller contains an action to handle HTTP requests * to the application\u0026#39;s home page. */ public class HomeController extends Controller { /** * An action that renders an HTML page with a welcome message. * The configuration in the \u0026lt;code\u0026gt;routes\u0026lt;/code\u0026gt; file means that * this method will be called when the application receives a * \u0026lt;code\u0026gt;GET\u0026lt;/code\u0026gt; request with a path of \u0026lt;code\u0026gt;/\u0026lt;/code\u0026gt;. */ public Result index(Boolean isAvailable) { if( isAvailable ){ hello(); } return ok(views.html.index.render()); } private void hello(){ System.out.println(\u0026#34;Hello World!!!\u0026#34;); } } test.controllers.HomeControllerTest.java package controllers; import org.junit.Test; import play.Application; import play.inject.guice.GuiceApplicationBuilder; import play.mvc.Http; import play.mvc.Result; import play.test.WithApplication; import static org.junit.Assert.assertEquals; import static play.mvc.Http.Status.OK; import static play.test.Helpers.GET; import static play.test.Helpers.route; public class HomeControllerTest extends WithApplication { @Override protected Application provideApplication() { return new GuiceApplicationBuilder().build(); } @Test public void testIndexByFalse() { Http.RequestBuilder request = new Http.RequestBuilder() .method(GET) .uri(\u0026#34;/?isAvailable=false\u0026#34;); Result result = route(app, request); assertEquals(OK, result.status()); } } その場合は、ユニットテスト側で分岐を網羅するようなケースを追加してあげることでガバレッジが100%になります。\ntest.controllers.HomeControllerTest.java package controllers; import org.junit.Test; import play.Application; import play.inject.guice.GuiceApplicationBuilder; import play.mvc.Http; import play.mvc.Result; import play.test.WithApplication; import static org.junit.Assert.assertEquals; import static play.mvc.Http.Status.OK; import static play.test.Helpers.GET; import static play.test.Helpers.route; public class HomeControllerTest extends WithApplication { @Override protected Application provideApplication() { return new GuiceApplicationBuilder().build(); } @Test public void testIndexByTrue() { Http.RequestBuilder request = new Http.RequestBuilder() .method(GET) .uri(\u0026#34;/?isAvailable=true\u0026#34;); Result result = route(app, request); assertEquals(OK, result.status()); } @Test public void testIndexByFalse() { Http.RequestBuilder request = new Http.RequestBuilder() .method(GET) .uri(\u0026#34;/?isAvailable=false\u0026#34;); Result result = route(app, request); assertEquals(OK, result.status()); } } ちなみに、分岐の中に入ってソースの全てが実行されたとしても、falseのパターンが実行されていないと判断されて黄色になりますのでご注意を。\n終わりに 以上のように、ユニットテストと組み合わせる事でとても有能なガバレッジを自動生成してくれます。\nユニットテストの実施結果を残すことはとても大事なので、是非導入してみてください♪\n","date":"2020-02-22T14:03:41+09:00","image":"/wp-content/uploads/2020/02/playSbtWithJacocoEye.png","permalink":"/2020/02/22/10159/","title":"【HTMLガバレッジレポート】sbtのJaCoCoプラグインでJunitの実行結果をドキュメント化しよう【PlayFramework2.7】"},{"content":"PlayFrameworkプロジェクトを生成しよう とある案件で、PlayFrameworkプロジェクトを作成する必要が出てきました。\n筆者的にはSpringBoot信者なので、PlayFrameworkについては知見が無かったので良い機会なので良い勉強になればと実際に行なった作業をまとめてみようと思います。\nThe High Velocity\rWeb Framework\rFor Java and ScalaPlay Framework - Build Modern \u0026 Scalable Web Apps with Java and Scala\n作り方 Homebrewでsbtのインストール まずはhomebrewからsbtをインストールしましょう。\nsbtとはビルドツールの一つで、Gradleと同じ立場のツールと言えます。\n基本的にPlayFrameworkでは、sbtを使ってビルドや実行を行う事になります。\nbrew install sbt ==\u0026gt; Installing sbt ==\u0026gt; Downloading https://github.com/sbt/sbt/releases/download/v1.3.8/sbt-1.3.8.tgz ==\u0026gt; Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/279553/5f99d580-46ba-11ea-9a43-f963361b7978?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026amp;X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20200221%2Fus-east-1%2Fs3%2Faws4_req ######################################################################## 100.0% ==\u0026gt; Caveats You can use $SBT_OPTS to pass additional JVM options to sbt. Project specific options should be placed in .sbtopts in the root of your project. Global settings should be placed in /usr/local/etc/sbtopts ==\u0026gt; Summary 🍺 /usr/local/Cellar/sbt/1.3.8_1: 801 files, 61MB, built in 2 minutes 51 seconds プロジェクトの作成 Scalaの場合 [adsense-responsive]\rsbt new playframework/play-scala-seed.g8\nJavaの場合 sbt new playframework/play-java-seed.g8\n今回はJavaで作成する要望なのでこちらで作業を進めていきます。\n実行ログ [info] Fetched artifacts of [info] Set current project to withgradle (in build file:/Users/blogenist/work/play/) [info] Set current project to withgradle (in build file:/Users/blogenist/work/play/) [info] downloading https://repo1.maven.org/maven2/org/scala-sbt/sbt-giter8-resolver/sbt-giter8-resolver_2.12/0.11.0/sbt-giter8-resolver_2.12-0.11.0.jar ... [info] downloading https://repo1.maven.org/maven2/com/github/scopt/scopt_2.12/3.7.0/scopt_2.12-3.7.0.jar ... [info] downloading https://repo1.maven.org/maven2/org/foundweekends/giter8/giter8_2.12/0.11.0/giter8_2.12-0.11.0.jar ... [info] downloading https://repo1.maven.org/maven2/org/apache/commons/commons-compress/1.6/commons-compress-1.6.jar ... [info] downloading https://repo1.maven.org/maven2/org/tukaani/xz/1.4/xz-1.4.jar ... [info] [SUCCESSFUL ] com.github.scopt#scopt_2.12;3.7.0!scopt_2.12.jar (603ms) [info] [SUCCESSFUL ] org.scala-sbt.sbt-giter8-resolver#sbt-giter8-resolver_2.12;0.11.0!sbt-giter8-resolver_2.12.jar (718ms) [info] [SUCCESSFUL ] org.foundweekends.giter8#giter8_2.12;0.11.0!giter8_2.12.jar (972ms) [info] [SUCCESSFUL ] org.tukaani#xz;1.4!xz.jar (1072ms) [info] [SUCCESSFUL ] org.apache.commons#commons-compress;1.6!commons-compress.jar (1312ms) This template generates a Play Java project name [play-java-seed]: java-sample organization [com.example]: jp.blogenist Template applied in /Users/blogenist/work/play/./java-sample 実行 これでプロジェクトのベース作成は完了です！\n試しにsbt runコマンドを実行してみてください。\nsbt run -- (Running the application, auto-reloading is enabled) --- [info] p.c.s.AkkaHttpServer - Listening for HTTP on /0:0:0:0:0:0:0:0:9000 (Server started, use Enter to stop and go back to the console...) すると、上記のログが出力されhttp://localhost:9000/\u0026nbsp;にアクセスすると画面が表示されます。\nとても簡単ですね！\n生成ディレクトリ構造 ディレクトリ構成はこのような形になりました。\ntree -L 3 . ├── app │ ├── controllers │ │ └── HomeController.java │ └── views │ ├── index.scala.html │ └── main.scala.html ├── build.sbt ├── conf │ ├── application.conf │ ├── logback.xml │ └── routes ├── logs │ └── application.log ├── project │ ├── build.properties │ ├── plugins.sbt │ ├── project │ │ └── target │ └── target │ ├── config-classes │ ├── scala-2.12 │ └── streams ├── public │ ├── images │ │ └── favicon.png │ ├── javascripts │ │ └── main.js │ └── stylesheets │ └── main.css ├── target │ ├── scala-2.13 │ │ ├── classes │ │ ├── routes │ │ ├── twirl │ │ └── update │ ├── streams │ │ ├── _global │ │ ├── compile │ │ ├── runtime │ │ └── web-assets │ └── web │ ├── classes │ └── public └── test └── controllers └── HomeControllerTest.java 32 directories, 14 files JUnitテストの実行方法 sbtコマンドでPlayFrameworkプロジェクトを作成すると、JUnitを用いたテストクラスのサンプルも自動生成されます。\ncontrollers.HomeControllerTest.java package controllers; import org.junit.Test; import play.Application; import play.inject.guice.GuiceApplicationBuilder; import play.mvc.Http; import play.mvc.Result; import play.test.WithApplication; import static org.junit.Assert.assertEquals; import static play.mvc.Http.Status.OK; import static play.test.Helpers.GET; import static play.test.Helpers.route; public class HomeControllerTest extends WithApplication { @Override protected Application provideApplication() { return new GuiceApplicationBuilder().build(); } @Test public void testIndex() { Http.RequestBuilder request = new Http.RequestBuilder() .method(GET) .uri(\u0026#34;/\u0026#34;); Result result = route(app, request); assertEquals(OK, result.status()); } } sbt testで実行出来ます。\nsbt test [info] Loading global plugins from /Users/blogenist/.sbt/1.0/plugins [info] Loading settings for project java-sample-build from plugins.sbt ... [info] Loading project definition from /Users/blogenist/sample/java-sample/project [info] Loading settings for project root from build.sbt ... [info] Set current project to java-sample (in build file:/Users/blogenist/sample/java-sample/) [info] Compiling 1 Java source to /Users/blogenist/sample/java-sample/target/scala-2.13/test-classes ... [info] Passed: Total 1, Failed 0, Errors 0, Passed 1 [success] Total time: 4 s, completed 2020/02/21 20:55:43 終わりに 以上のようにわずか数分でPlayFramework2.7の環境が整いました。\nSpringに勝るとも劣らないJavaフレームワークなので、気になる方は勉強してみてはいかがでしょうか♪\n","date":"2020-02-21T19:34:47+09:00","image":"/wp-content/uploads/2020/02/playWithJavaEye.png","permalink":"/2020/02/21/10138/","title":"【爆速環境構築】sbtを使ったPlayFramework2.7のプロジェクト作成方法【Java】"},{"content":"コマンドラインでのJavaの実行ログを英語にしたい 簡単なプログラミングはコマンドでビルド・実行した方が早い 開発や技術調査をしている際に、簡単なJavaの動作確認をしたいなーと思う場合が多々あると思います。\nその場合、gradleやsbtなどを使ってプロジェクトを作って実行するより、エディターで記述してjavaコマンドからビルド・実行した方が早いですよね。/p\u003e\rフレームワーク等の準備がいらないためサクッと動かせるのがメリットです♪\nコンパイルログを英語(または他の言語)にしたい その際に、以下のようにコンパイル時のエラーログが日本語で出てしまう事が有ります。\nコンパイルエラー(日本語) App.java:11: エラー: final変数arraysListに値を代入することはできません arraysList = Collections.emptyList(); ^ エラー1個 もちろん、日本語であるとエラーの内容が一目瞭然なので助かりますが、複雑なエラーの場合ネットで調べようにも日本語でのエラーが引っかからずに調査に手間取ってしまう場合があります。\nそんな時はコンパイル時のエラーログを強制的に英語に変換するコマンドオプションを使いしょう！\n手順 -J-Duser.languageを指定 [adsense-responsive]\rjavacコマンドでコンパイルする際に-J-Duser.language=enのように、変換したい言語コードを渡す事でエラーメッセージの言語を意図的に変える事が可能になります。\nコンパイルエラー App.java:11: error: cannot assign a value to final variable arraysList arraysList = Collections.emptyList(); ^ 1 error 期待通り、英語になりましたね。\nこれで複雑なコンパイルエラーが発生してもグーグル先生に簡単に頼る事が可能になりました♪笑\n終わりに 以上のように、地味に助かるコマンドラインオプションなので、お困りの方は是非試してみてください♪\n","date":"2020-02-18T18:47:15+09:00","image":"/wp-content/uploads/2020/02/javaCompileErrorToEnEye.png","permalink":"/2020/02/18/10032/","title":"【コンパイルエラー】javacのエラーログを日本語ではなく英語にしたい【-J-Duser.language】"},{"content":"JBLとアンダーアーマーのコラボイヤホン 巷ではAirPodsを始めとした、ワイヤレスイヤホンが流行っていますよね。\niPhoneを使っている方でしたらAirPodsを購入するのもアリですが、やはり価格が高い点と品薄状態という点がネックです。\nもちろん、AndroidユーザーでもAirPodsをBlueToothで接続する事は出来ますが、公式のサポートがないのはちょっと不安ですよね。\n今回はAirPodsに負けないワイヤレスイヤホンを探してみたところ、JBLとアンダーアーマーがコラボしたオススメの商品を購入してみたのでご紹介しようと思います。\nAmazon JBL 完全ワイヤレスイヤホン UA SPORT WIRELESS FLASH /IPX7/Bluetooth対応 アンダーアーマー ブラック UAJBLFLASHBLK 【国内正規品/メーカー1年保証付き】 UA SPORT WIRELESS 公式サイト あらゆる動きを、自由に\r「UA SPORT WIRELESS」シリーズ初の完全ワイヤレスイヤホン\rアスリートをケーブルから解放し、ダイナミックな動きを妨げない\rFLASH（フラッシュ）イヤホン｜UNDER ARMOUR（アンダーアーマー）\n抜群の装着感 人間工学に基づいた形状と素材の研究から開発されたイヤチップを採用\rウイング付きのスタビライザーとの組み合わせで激しく動いても耳から抜け落ちない\rFLASH（フラッシュ）イヤホン｜UNDER ARMOUR（アンダーアーマー）\nワンタッチで会話ができる トレーニング中のちょっとした会話に対応できるトークスルー機能を搭載\r左イヤホンのロゴ部分を一度押すと音楽の音量が下がり、外の音を聞き取ることができる\rFLASH（フラッシュ）イヤホン｜UNDER ARMOUR（アンダーアーマー）\n充電ケース付き \u0010\n高級感のあるアルミニウム素材を使用\r生活防水機能(IPX3)も搭載し、耐久性にも優れた充電ケース\rFLASH（フラッシュ）イヤホン｜UNDER ARMOUR（アンダーアーマー）\n一日中音楽を再生できる イヤホン本体は約2時間の充電で最大約5時間のワイヤレス再生\rさらに充電ケースにイヤホンを収納すれば最大約20時間分の充電ができる\rFLASH（フラッシュ）イヤホン｜UNDER ARMOUR（アンダーアーマー）\n開封の儀 外観 パッケージはこんな感じです。\n黒ベースのシンプルなデザインですね。\n[adsense-responsive]\rこの赤い紐を引っ張る事で開封出来るので早速開封していきましょう。\nスルッ。\n梱包物 中にはさらに箱が入っています。\n開けるとこんな感じ。\nパカッ。\n高級感がありますね。。。！\n内容は以下の通りです。\n付属品\r充電ケース\rイヤーピース\rUSBケーブル\rスタビライザー(S/M/L)\rイヤーチップ(S/M/L)\rUSBはType-Cではなくmicroなのでご注意です。\nケーブルは短めなので、長めのUSBケーブルがあると便利です♪\nイヤーチップとスタビライザライザーは標準で付いているものを合わせるとS/M/Lの各3種類があります。\nそして、この商品の一番のオススメポイントは充電ケースがおしゃれでカッコいい点です！\nアルミニウムべースで生活防水機能(IPX3)も備わっているため、持ち運びにもとても便利です♪\nアンダーアーマーのロゴもおしゃれ・・・！\nストラップも標準で付いています。\nまた、この充電ケース自体もバッテリーを搭載しているのでこの充電ケースを充電しておけば最大20時間分をコンセントを使わずにイヤホンの充電をする事が出来てしまいます！\nここにUSBを接続する事で充電が可能になります。\n旅行などの長期外出にとてもピッタリですね♪\nイヤホンもシンプルでかっこいいデザインになっています。\n充電するにはこの部分にセットする事で充電が始まります。\n電源を入れると簡単にスマートフォン等に接続出来ます。\n使用感 実際に1ヶ月ほど使ってみて思った点は、\n[adsense-responsive]\r感想\r充電しやすい\r音質はかなり良い\r接続が切れない\r耳にフィットする形になっているのでジムでも違和感を感じない\rイヤホンを付けたままシャワーを浴びれる\rケースを無駄にかしゃかしゃ出し入れしちゃう\rイヤホンだけでの楽曲操作はちょっと不便\r基本的に付けたまま日常生活のすべてをこなす事が出来るのでとても楽チンです♪\n楽曲操作についてはちょっとボタン操作をしにくいですが、スマホなどでやれば問題ないのでそこまで気にする必要は無いと思います。\n終わりに 以上のように、おしゃれで使い勝手も良いワイヤレスイヤホンでした。\n使用感もとても良くAirPodsに負けない商品だと思うので、気になる方は購入してみてください♪\n","date":"2020-02-15T16:46:19+09:00","image":"/wp-content/uploads/2020/02/jvcUaSportsWirelessEye.png","permalink":"/2020/02/15/10083/","title":"【コラボ商品】JBLのUA SPORT WIRELESS イヤホンがAirPodsに負けないくらい良かった件【アンダーアーマー】"},{"content":"筋トレ初心者からスポーツをガッツリやっている人へオススメ 皆さんは運動していますか？\n筆者は最近ジムに通い、知り合いにパーソナルトレーニングを依頼しているのですが、翌日以降の筋肉痛がかなり激しいです。笑\n運動後に程よくマッサージをすれば筋肉痛を軽減する事が出来ますが、専用のマッサージ器具を使う事でよりほぐす事が出来ます♪\nまた、運動後だけでなく運動前にやる事で筋肉をほぐす事ができ、パフォーマンスが向上する効果もあります。\n今回はAmazonにて人気のマッサージガンを購入しましたのでご紹介しようと思います♪\nAmazon Pitaya 筋肉 筋膜 マッサージ器 マッサージ機 マッサージャー マッサージガン 20段階振動スピード 八種類アタッチメント 超低騒音 軽量便利 筋肉痛緩和 血行促進 疲労改善 全身用 開封の儀 外観 収納ボックスはこのような形になっています。\nクッション性のある素材で落としたりぶつけたりしても本体を守ってくれるボックスとなっています。\nそれでは早速中身を確認してみましょう。\nパカッ。\n梱包物 梱包物は以下の通りとなっています。\n内容\rマッサージガン本体\r取扱説明書\rACアダプター\rマッサージアタッチメント\r[adsense-responsive]\r取扱説明書は日本語で細かく書いてあるので使い方に困ることはありません。\nアタッチメントは様々な形状のものが種類も付いてきます！\nACアダプターはごく一般的な家電のタイプになっています。\n本体はこんな感じ。\nこちらにアタッチメントを差し込んで取り付けます。\n充電は底面に取り付ける事で充電が出来ます。\n充電中は緑色のランプが点灯します。\n電源も底面部のON/OFFのスイッチで切り替える事が出来ます。\nなお、充電タイプなのでコードレスで使える点はとても便利です♪\n電源を入れると背面の液晶が点灯します。\n左は強度(20段階)/残電池量(%)となっています。\n電源やレベル調整は背面の液晶をタッチする事で操作出来ます。\n終わりに 使い勝手や強度などかなり使いやすい設計になっているマッサージガンでした。\n身体を鍛えたりスポーツをしている方にはオススメなので、気になったら是非購入してみてはいかがでしょうか♪\n","date":"2020-02-12T01:21:05+09:00","image":"/wp-content/uploads/2020/02/massageGunPitayaEye.png","permalink":"/2020/02/12/10056/","title":"【筋トレの前後にオススメ】筋肉をほぐせるマッサージガンで筋肉痛や疲労を軽減しよう【Pitaya】"},{"content":"一人暮らしにオススメのアイテムをまとめてみた この時期は新社会人や新大学生、新専門学生など新たな生活に向けて準備を始めている形が多いと思います。\nそんな中、何を買ったら良いのか？何があったら生活が便利になるのか？などの不安もあるでしょう。。。\nそんな迷える子羊方達のために、一人暮らし歴10年を突破した筆者が買って良かったものを一方的にご紹介していこうと思います！\nもちろん、好みが合う合わないなどがあると思うので参考程度に考えていただければなと思います♪\n洗濯関連 GLAMOURIC 洗濯ネット ランドリーネット 洗濯の際に、ニットやセーターをそのまま洗ってしまうと、絡まって伸びたりしてしまい形が崩れてしまいます。\nこちらはそれを防ぐためのランドリーネットです。\nAmazon GLAMOURIC 洗濯ネット ランドリーネット 洗濯袋 6枚入 セット 細目角型 収納 一年保証付き 6枚セットで約1000円と格安でさらにランドリーネットだけでなく、旅行時などの衣類仕分け袋としても利用出来ます。\n間違いなく持っていて損はないアイテムです♪\nDOKEHOM ランドリーボックス 洗濯バスケット 洗濯物を入れて置いたり、洗濯機から取り出したものを運ぶ際に便利なランドリーボックスです。\n持ち手もしっかりしていて、キジも厚めなので長いこと使う事が出来ます。\nカラーも6種類あり、デザインもシンプルなのもオススメです♪\nAmazon DOKEHOM 82L ランドリーボックス 洗濯バスケット ランドリーかご 洗濯ボックス 収納ボックス 収納バッグ 脱衣かご シンプル 防水取っ手付き 折りたたみ（全６色ダークグレー, L） 掃除関連 ダイソン 掃除機 コードレス コードレス掃除機の定番、ダイソンです。\nちょっとお高めですが、ハンドクリーナーとしても使えるので奮発して購入しておけば長いこと使えるので奮発する価値はあります！\nAmazon ダイソン 掃除機 コードレス Dyson V7 Fluffy SV11FF2 SV11 FF2 山崎実業　コードレスクリーナースタンド こちらは、ダイソンのコードレスクリーナーを収納・充電するためのスタンドです。\n[adsense-responsive]\r壁に穴をあけることなくセットする事が出来るので、一人暮らしの方にはオススメです♪\nAmazon 山崎実業(Yamazaki)コードレスクリーナースタンド ブラック 約W22XD29XH127㎝ V10V8V7V6シリーズ対応 タワー 3541 キッチン関連 KKC 食品保存容器 キャニスター 5個セット ガラス密封びん パスタやお菓子、その他色々な食材を保存することが出来る密封瓶です。\n様々なサイズがあるため、お好みのサイズのセットを購入する事が出来ます。\n密封具合も強く、おしゃれなデザインなのでこだわりたい方にはオススメのアイテムです♪\nAmazon KKC 食品保存容器 キャニスター 5個セット ガラス密封びん 食品保存瓶 キッチン収納パスタ 小麦粉 雑穀 穀物収納 キッチン収納 コーヒー豆 お茶 ナッツ キャンディー食品保存 (2000ML×1；1200ML×2；450ML×2) 【Classic】再利用可能なシリコン食品保存バッグ 自炊をする方は、食材を長期間保存するための密封アイテムが必須になります。\nこちらは、お得なシリコンタイプの4パックセットです♪\nAmazon 【Classic】再利用可能なシリコン食品保存バッグ - 密閉シール食品貯蔵、スープソース密閉冷凍庫、フルーツ用の多目的保存容器野菜肉-1L*4Pack エリエール キッチンペーパー キッチンペーパーは自炊をしない方も必須のキッチンアイテムです。\nちょっとした汚れを落とすためにも使えるので、常備しておいて損はありません♪\nAmazon エリエール キッチンペーパー ピーチ キッチンタオル 50カット×4ロール パルプ100% Voimakas キッチンペーパーホルダー キッチンペーパー掛け 穴あけ不要 こちらはキッチンペーパーホルダーです。\nキッチンのデッドスペースを活用する事が出来るのでオススメです♪\nAmazon Voimakas 【2019最新版】2IN1 キッチンペーパーホルダー キッチンペーパー掛け 穴あけ不要 取り付け簡単 強力粘着 耐荷重6KG 調味料収納ラック タオルハンガー ステンレス キッチンペーパー収納 キッチン バスルーム キッチンペーパーハンガー 密封袋止めクリップ 冷凍食品や食べかけのお菓子などの口をピッチリ閉じるためのアイテムです。\nこちらも常備しておいて損はないので、38個セットを買っておくのもアリですね♪\nAmazon ANPHSIN 袋止めクリップ - 38個セット クランプ 食品 お菓子 クリップ 酸化防止 軽食保存 食材保ち 袋密封 湿気対策 キッチン用 チャック付き キッチン 密閉 冷蔵庫袋クリップ クリップ 袋 袋とじ 食材クリップ 食品 保存 封口袋 防水防湿 繰り返し使用 多サイズ エムケー精工(MK精工) オープンラック レンジ台 フローリエ 電子レンジや炊飯器、その他インスタント食材などをまとめて収納する事が出来るラックです。\n無駄なくまとめて収納出来るのでキッチン周りの物が多くなってしまっている方にはオススメです♪\nAmazon エムケー精工(MK精工) オープンラック レンジ台 「フローリエ」 スリムタイプ ブラウン ORE-102T ちなみに、デザインもいい感じです♪\n寝具関連 タンスのゲン 羽毛布団 寒い時期には、安い羽毛布団だと寒さに耐えれないので、ある程度羽毛がしっかり詰まった毛布を購入する事をオススメします！\nAmazon タンスのゲン 羽毛布団 セミダブルロング 【増量1.5kg】 ホワイトダックダウン90％ 日本製 350dp(かさ高145mm) 以上 7年保証 防カビ 消臭 CILシルバーラベル ベージュ 39100055 03AM 【60949】 アイリスオーヤマ 布団カバー 掛け布団用 こちらはローコストブランドで有名なアイリスオーヤマの布団カバーです。\nサイズに合わせたものを購入してみてください♪\nAmazon アイリスオーヤマ 布団カバー 掛け布団用 綿100% セミダブル 170×210ｃｍ ブラウン CMK-SD mofua (モフア) 掛け布団カバー マイクロフリース こちらは冬用の掛け布団カバーです。\nマイクロフリースとなっているので、肌触りがとても暖かく冬場でも快適な睡眠をする事が出来ます♪\nAmazon mofua (モフア) 掛け布団カバー マイクロフリース あったか ファスナー式 ダブル ブラウン 50070306 mofua (モフア) 枕カバー マイクロフリース 冬用の枕カバーです\nこちらもモフモフなので冬場の快適暖か睡眠をお求めの方にはオススメです♪\nAmazon mofua (モフア) 枕カバー マイクロフリース ピローケース あったか 43×75cm 2枚組 ブラウン 50090006 mofua(モフア) 敷きパッド こちらは敷布団の上に置く敷パッドです。\nモフモフによる暖かさもさることながら、布団自体が汚れないように保護してくれる役割も持っています♪\nAmazon mofua(モフア) 敷きパッド セミダブル ブラウン ふんわり あったか 1年間品質保証 静電気防止加工 プレミアムマイクロファイバー 50010206 高密度ポケットコイルマットレス ベットフレームを置くスペースは無いけど、床に直接布団を引きたく無い方はマットレスを購入する事をオススメします。\n弾力も強く身体に合わせてクッション性を出してくれるので、疲れが溜まりにくいです！\nAmazon 高密度ポケットコイルマットレス セミダブル neruco バリューマット/ブラック 生活関連 レインシューズ 雨の日の外出用の靴が欲しいけど、長靴はちょっと、、、という方にオススメのレインシューズです。\n伸縮性があるので簡単に履けますし、キャンプなどの足元が汚れやすい場所に行くときにもオススメです♪\nAmazon Hellozebra レインシューズ メンズ 超軽量 レディース ショート レインブーツ 釣り 花見 雨靴 ブラック 26.0cm(41) ダイソン Dyson Supersonic ionic ダイソンのハイパワーなヘアードライヤーです。\n[adsense-responsive]\rかなりの風量なので、髪を乾かすスピードが段違いです！\nまた、マイナスイオンも出るので髪への影響が少ない点もオススメポイントです♪\nAmazon ダイソン Dyson Supersonic ionic ホワイト/シルバー HD01ULFV2WSN ダイソンAM09ファンヒーター こちらもダイソンのファンヒーターです。\n冷風から温風まで温度設定や強さ、範囲などを細かく指定出来るのでオススメです。\nデザインもシンプルでかっこいいです♪\nAmazon ダイソンAM09ファンヒーター、ブラック/ニッケル Satori 遮光１級 ロールスクリーン 遮熱 UVカット こちらはロールスクリーンです。\nキッチンやクローゼットとの境目や、棚などのを隠したい場合にオススメです♪\nAmazon Satori 遮光１級 ロールスクリーン 遮光率99.99％ 遮熱 UVカット 既成品サイズ ４サイズ ４カラー ハイサッシ対応 Satori 幅９０ｃｍ×丈２２０ｃｍ ブラウン色 関連記事 【ホコリ防止】オタクグッズを飾る棚にぴったりなロールスクリーンを買ってみた【ホコリ防止】 2019/12/18 1613文字 約4分で読めます Anker PowerPort Speed 5 (63W 5ポート USB急速充電器) 今時はスマホやポケットワイファイ、イヤフォンなどほとんどがUSB充電タイプとなっています。\n充電器業界でトップクラスのブランド力を持っているAnkerの5ポート急速充電器を一つ持っていれば、USB充電口不足問題が発生する事が無いので一押しです！\nAmazon Anker PowerPort Speed 5 (63W 5ポート USB急速充電器)【PSE認証済/PowerIQ搭載/QC 3.0対応】 iPhone、Android各種対応（ブラック） KYG 散髪ハサミ ヘアカット ちょっとしたヘアセットや調整に1セット常備しておくと、困ったときにとても便利です♪\nAmazon KYG 散髪ハサミ ヘアカット はさみ カットシザー/セニングシザー 2本セット カットバサミ・すきバサミ 左右兼用 プロ 美容師 理容師 プロ用高級シザー 専用ケース付 散髪 ヘアケア カット はさみ 初心者 子供 家庭自宅 メリー 片面約5倍拡大鏡付コンパクトミラー 外出先でちょっとした身だしなみを整えるために、ビジネスバッグ等に仕込ませて置くと便利なアイテムです♪\nAmazon メリー 片面約5倍拡大鏡付コンパクトミラー Sサイズ シルバー AD-105 moca モカ ペットボトルホルダー 外出時にペットボトルをバッグに入れずに手ぶらでキープ出来るとても便利なアイテムです。\nAmazon moca モカ ペットボトルホルダー ＜ブラック＞ 革小物 レザー 日本製 カラビナ 自転車 キーホルダー ベビーカー ライブ フェス 小物 ファッション. エレコム 電源タップ 6個口 コードが長くて6個口もあるタコ足電源タップです。\nコンセントが不足しがちなテレビ周りやパソコン周り、キッチン周りにオススメです♪\nAmazon エレコム 電源タップ 雷ガード 個別スイッチ ほこりシャッター付 スイングプラグ 6個口 5m ブラック AVT-K6A-2650BK 収納関連 山善 キューブボックス 複数積み重ねてる事で自由自在に収納棚を作る事が出来るキューブボックスです。\nフラップ扉がついているので、中身を隠す事が出来るのもポイントです。\nAmazon 山善 キューブボックス 幅33×奥行29×高さ33cm フラップ扉付き 棚板 背面化粧仕上げ 組み合わせても 組立品 ジョイブラウン CCR-3535F(JB) 武田コーポレーション スツール 【コンパクト収納スツール】 収納ボックスとしても使え、さらには椅子や脚立代わりに高いところのものを撮ったり掃除するときにも使える万能ボックス！\nAmazon 武田コーポレーション/スツール/【コンパクト収納スツール】30×30×30cm/グレー(M7-CDS30GRY) 天馬 衣装ケース フィッツケース 下着から衣服まで衣類を収納する事が出来る定番の衣装ケースです。\n複数積み重ねる事が可能で、様々なサイズがあるので場所に合わせて選んでみてください♪\nAmazon 天馬 衣装ケース フィッツケース 小物用 リトル カプチーノ 幅31.6X奥行41X高さ17.2cm フォーラル 強力 除湿・消臭 シートクローゼット用 吊り下げ型 クローゼットにかけて置くだけで除湿や消臭効果があります。\n[adsense-responsive]\r大事な洋服を守るためにもあると便利です♪\nAmazon フォーラル 強力 除湿・消臭 シートクローゼット用 吊り下げ型 繰り返し使えるから経済的 (お知らせセンサー付)×3セット 山善 突っ張り パーテーション 壁面を収納スペースに変えてくれる便利な壁面収納アイテムです！\n玄関周りにセットする事で鍵やマフラー、帽子などの小物をまとめる事が出来るので一押しです！\nAmazon 山善 突っ張り パーテーション 幅80×奥行18×高さ200-260cm S字フック3個/金属製フック6個付属 壁面収納 組立品 アンティークブラウン/ブラック RTRW-8120H(ABR/SBK) すべり落ちない ズボンハンガー ズボン用のハンガーです。\nこちらを使えばズボンもクローゼットに簡単にかける事が出来るのでオススメです♪\nAmazon HLC すべり落ちない ズボンハンガーロングスカート ストール用 スラックスハンガー (12本) クリップハンガー こちらもズボンハンガーですが、クリップタイプとなっています。\n使い分けてみると良いでしょう♪\nAmazon KiGesYo ズボンハンガー スカートハンガー クリップ ハンガー 8本セット 幅30cm 終わりに 以上のように各ジャンルで実際に購入したことがあって、よかったアイテムをご紹介してみました。\n今回紹介したアイテム以外にも、Amazonには隠れた便利アイテムが眠っていますので是非探してみてください♪\n","date":"2020-02-11T16:11:35+09:00","image":"/wp-content/uploads/2020/02/AmazonRecommendItemEye.png","permalink":"/2020/02/11/10006/","title":"【新生活に便利】持ってると地味に助かるAmazonオススメグッズを紹介【一人暮らし便利アイテムまとめ】"},{"content":"java.lang.UnsupportedOperationException 概要 こちらは、ListやMapなどが固定長な形式な際にaddやputなどをしようとすると発生します。\n主に、Collections.emptyList()やCollections.emptyList()、Arrays.asList()などで生成したコレクションオブジェクトにaddやput、removeなどの操作を加えようとすると発生します。\n配列をリストに変換する際にArrays.asListはよく使うと思うので、覚えておくと良いでしょう。\nfinalは関係ない このエラーが発生した際によく間違えるのが、finalで定義した変数に対して操作をしているから、と勘違いしてしまう人も少なくありません。\nfinalによる挙動は、一度代入した変数への再代入を防ぐ事になるので、一度代入した変数が持っているメソッドを使って中身を操作する分には問題ありません。\nまた、エラーのタイミングについても実行時エラーでなくビルドエラーになります。\nApp.java package app; import java.util.ArrayList; import java.util.List; public class App { public static void main(String[] args) { final List\u0026lt;String\u0026gt; arraysList = new ArrayList\u0026lt;\u0026gt;(); arraysList = new ArrayList\u0026lt;\u0026gt;(); arraysList.add(\u0026#34;value\u0026#34;); } } ビルドエラー App.java:13: error: cannot assign a value to final variable arraysList arraysList = new ArrayList\u0026lt;\u0026gt;(); ^ 1 error 覚えておくと良いでしょう♪\nサンプル MapとListについて簡単なサンプルをまとめてみました。\nMap Collections.emptyMap [adsense-responsive]\rApp.java package app; import java.util.Collections; import java.util.Map; public class App { public static void main(String[] args) { Map\u0026lt;String, String\u0026gt; emptyMap = Collections.emptyMap(); emptyMap.put(\u0026#34;a\u0026#34;, \u0026#34;value\u0026#34;); } } 実行時エラー Exception in thread \u0026#34;main\u0026#34; java.lang.UnsupportedOperationException at java.base/java.util.AbstractMap.put(AbstractMap.java:209) at app.App.main(App.java:9) new HashMap App.java package app; import java.util.HashMap; import java.util.Map; public class App { public static void main(String[] args) { Map\u0026lt;String, String\u0026gt; hashMap = new HashMap\u0026lt;String, String\u0026gt;(); hashMap.put(\u0026#34;a\u0026#34;, \u0026#34;value\u0026#34;); } } こちらは正常に処理が終了します。\nList Collections.emptyList App.java package app; import java.util.Collections; import java.util.List; public class App { public static void main(String[] args) { List\u0026lt;String\u0026gt; emptyList = Collections.emptyList(); emptyList.add(\u0026#34;value\u0026#34;); } } 実行時エラー Exception in thread \u0026#34;main\u0026#34; java.lang.UnsupportedOperationException at java.base/java.util.AbstractList.add(AbstractList.java:153) at java.base/java.util.AbstractList.add(AbstractList.java:111) at app.App.main(App.java:9) new ArrayList App.java package app; import java.util.ArrayList; import java.util.List; public class App { public static void main(String[] args) { List\u0026lt;String\u0026gt; arrayList = new ArrayList\u0026lt;String\u0026gt;(); arrayList.add(\u0026#34;value\u0026#34;); } } こちらは正常に処理が終了します。\nArrays.asList App.java package app; import java.util.Arrays; import java.util.List; public class App { public static void main(String[] args) { List\u0026lt;String\u0026gt; asList = Arrays.asList(); asList.add(\u0026#34;value\u0026#34;); } } 実行時エラー Exception in thread \u0026#34;main\u0026#34; java.lang.UnsupportedOperationException at java.base/java.util.AbstractList.add(AbstractList.java:153) at java.base/java.util.AbstractList.add(AbstractList.java:111) at app.App.main(App.java:9) Arrays.asListで変換したリストに操作を加えたい場合 Arrays.asListを使って生成したリストに操作を加えたい場合は、以下のようにnew ArrayListでラップすることで可能になるので覚えておくと良いでしょう♪\n[adsense-responsive]\rApp.java package app; import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class App { public static void main(String[] args) { List\u0026lt;String\u0026gt; asList = Arrays.asList(); List\u0026lt;String\u0026gt; arrayList = new ArrayList\u0026lt;String\u0026gt;(asList); arrayList.add(\u0026#34;value\u0026#34;); } } 終わりに 以上のように、よく使うような記述ですがちょっと使い方を間違えるとバグを潜ませる事になってしまいます。\nこの辺の挙動の違いを覚えておくだけでも、エンジニアとしてのレベルが少し上がるので是非頭の片隅に置いておくと良いでしょう♪\n","date":"2020-02-07T00:52:16+09:00","image":"/wp-content/uploads/2020/02/unsupportedOperationExceptionEye.png","permalink":"/2020/02/07/10016/","title":"【コレクションオブジェクト】要素を操作した際にUnsupportedOperationExceptionが出る原因と対応方法【Java】"},{"content":"Wordpressのバージョンアップをローカルで試したい Wordpressを使ってサイトやブログを構築している場合、実際にインターネット上に公開しているサーバー上で稼働させていたり、本番以外の検証・開発サーバーを構築せずに運用しているケースが多いと思います。\nWordpressであればそれでもほとんど問題がないのですが、サイト移行やWordpress本体のバージョンアップ、その他動作確認を試したい場合に迂闊にお試し出来ないのがネックとなってしまいます。\nそこで、今回は以前紹介したWordpressのバックアップ用プラグインの「Updraft Plus」を利用した、サーバー上のWordpressをまるっとそのままローカル環境にコピーして動作させる方法をご紹介しようと思います♪\n関連記事 【おすすめ無料プラグイン】Wordpress丸々バックアップで安心！「UpdraftPlus」の導入方法【復元】 2017/09/08 1619文字 約4分で読めます 手順 Updraftのバックアップファイルをダウンロード まずはUpdraftで取得しているバックアップファイルをダウンロードしておきましょう。\n今回はGoogleDriveと連携しているのでこちらからダウンロードします。\nDBのバックアップデータを修正 このままローカルのWordpressにリストア(復元)してしまうと、各種URLの情報が実際のサーバーのものになってしまうので、ローカルに復元するためにデータベース上のURLを置換処理をする必要があります。\n[adsense-responsive]\rまずは、backup_{年}-{月}-{日}-{時間}_{サイト名}__{ランダム文字列}-db.gzを解凍し、適当なエディターで開きましょう。\ngzファイルの解凍の仕方は以下でご紹介しているので、合わせて読んでみてください♪\n関連記事 【zip,gz,tarの違い】コマンドで簡単にgz,tar形式を圧縮及び解凍する方法まとめ【ファイルやディレクトリも可能】 2020/01/27 1631文字 約4分で読めます エディターは置換機能があるAtomかVSCode辺りがオススメです。\nファイルを開いたら、サーバーのURLを置換対象に入力し、置換後文字列にローカルのWordpressURLを入力します。\n今回はDockerを用いて起動しているので置換後はhttp://localhost:8000となります。\n置換が完了したら、再度gzファイルとして圧縮しましょう。\nローカルにWordpressを構築 次にローカルに復元先のWordpressを構築しましょう。\n今回はこの手順は割愛しますが、こちらを参考にしてもらえるとサクッと構築出来ます。\n関連記事 【瞬殺】docker-composeで爆速Wordpress環境構築【Wordpress5.3系・PHP7.3・Apache】 2020/01/15 628文字 約2分で読めます Updraftプラグインをインストール Updraftプラグインのみ事前にインストール及び有効化する必要があるので、管理画面から準備しておきましょう。\n有効化だけすれば良いのでGoogleDriveとのバックアップ連携等の設定は不要です。\nUpdraftから復元 では、ここから復元処理を行ってみましょう。\nUpdraftプラグインメニューを開き、バックアップ/復元タブを開き、下部のバックアップファイルをアップロードリンクをクリックします。\nすると、ファイルのドラッグ＆ドロップエリアが表示されるので、そこに先ほどダウンロードしたファイルをアップロードします。\n今回はファイルサイズがでかくなってしまうので、アップロード画像の登録はしていませんが本来はアップロードする必要があります。\nアップロードが正常に完了すると、バックアップ対象が表示されるので復元ボタンをクリックしましょう。\n復元画面に遷移するので復元したい情報にチェックを入れ次へボタンをクリックします。\nすぐに復元の準備が始まるので復元ボタンをクリックしましょう。\nすると、復元作業が始まるのであとは完了するまで待ちましょう。\n無事に完了しました♪\n[adsense-responsive]\rDBの更新を求められる可能性がありますので、Wordpress データベースを更新ボタンをクリックします。\n以下のような画面が表示された場合は、左下のリンクを押してダッシュボードに戻りましょう。\n確認 実際に登録しているサーバーの管理ユーザーのID/PWを入力する事でログイン出来ます。\n無事にデータがローカル環境にコピー出来ましたね♪\nプラグインやテーマもしっかりとコピーされています。\n終わりに 以上のように、簡単にサーバー上のWordpressをデータ丸々ローカル環境にコピーして起動する事が出来ました。\nWordpressのメジャーバージョンアップなどの確認をする為には必要な作業だと思いますので、バージョンアップをお考えの方はぜひ試してみてください♪\n","date":"2020-01-29T00:24:42+09:00","image":"/wp-content/uploads/2020/01/wordpressRestoreToLocalEye.png","permalink":"/2020/01/29/9968/","title":"【簡単丸ごとコピー】Updraft Plusでサイトやブログをローカル環境に復元(リストア)コピーする方法【Wordpress】"},{"content":"gz形式で圧縮/解凍したい ファイルの圧縮/解凍についてはzip形式が主流となっていると思いますが、たまにgz形式やtar形式で取り扱いたいケースも出てくると思います。\n今回はコマンドから簡単にgz形式への圧縮及び解凍を行う手順をご紹介しようと思います♪\nそもそもzip,gz,tarの違いとは？ 圧縮担当かアーカイブ担当かの違い そもそもzipやgz,tarとはなんなんでしょう？\n実は、それぞれの役割が全然違うのです。\ngz形式とは？ まず、gzとはGNU zipの略で、ファイルを圧縮するためのアルゴリズムとなります。\n主に対象のファイルサイズを小さくまとめてくれるのが得意技です。\nですが、アーカイブ(まとめる)機能は持ち合わせていません。\ntar形式とは？ 一方で、tarとはtape archivesの略で複数ファイルをまとめるための書庫管理コマンドとなります。\n主にディレクトリや複数ファイルを一つにまとめるのが得意技です。\nですが、圧縮機能は持ち合わせていません。\nzip形式とは？ そして、一般的なzipとはアーカイブ機能と圧縮機能を持ち合わせているフォーマットとなります。\n主にWindowsで主流となっています。\ngzとtarの合わせ技 では、zipを使わずにgzで圧縮した上でtarのようにアーカイブしたいよ！という要望はどのように実現すれば良いでしょうか？\ntarでアーカイブしたものをgzで圧縮すれば良いだけです。(悟り)\nその辺については後述でご紹介しているのでそちらをみてもらえればと思いますが、よくみるXXX.tar.gzというファイルはそういう手順でアーカイブ及び圧縮したファイルの事を指しています。\n手順 gzip -cで圧縮 ファイルを圧縮するには、gzip -c {対象ファイル} \u003e {出力ファイル}の形式でコマンドを実行する必要があります。\n例として、以下のようなディレクトリ階層にて\ntree . . └── hoge.txt 1 files\u0010 gzip -c ./hoge.txt \u0026gt; hoge.gzを実行すると以下のようになります。\ntree . . ├── hoge.gz └── hoge.txt 1 files\u0010 確認 では、解凍をしてみましょう。\ngzファイルの回答にはgunzipというコマンドを使います。\ngunzip {gzファイルパス}と打ってみてください。\ntree . . ├── hoge └── hoge.txt 1 files\u0010 すると、hoge.gzがhogeに代わり解凍されていると思います。\n注意事項 元ファイルを残す際は解凍時に-kオプションを付ける gunzipでgzファイルを指定すると、指定されたgzファイルがなくなってしまいます。\nもう一度gzipコマンドすれば同じ物を生成出来ますが、念の為バックアップを取っておいたほうが良いでしょう。\nまた、-kオプションをつけることで元ファイルを残す事が出来るのでこちらをつけておいたほうが安全かもしれませんね。\nファイル名は元ファイルのものが残らない gzipで圧縮すると、圧縮前のファイル名は消えてしまい、gzのファイル名がそのまま流用されます。\nなので、gzファイルを生成する際にはファイル名を意識して作成するのが良いと思います。\nディレクトリをgzにしたい場合 単一ファイルをgz形式で圧縮したい場合は上記の流れで問題ありませんが、ディレクトリをgz形式で圧縮しようとすると、以下のようなエラーログが出力されてしまうので、代わりにtarコマンドを使う必要があります。\ngzip -c ./texts \u0026gt; hoge.gz gzip: ./texts is a directory 以下のようなディレクトリがあった場合、\ntree . . └── texts ├── hoge.txt └── piyo.txt 1 directory tar czf {出力ファイル名} {対象ディレクトリ}のコマンドで圧縮する事が可能です。\n今回はtar czf hoge.tar.gz texts/を実行してみました。すると、\ntree . . ├── hoge.tar.gz └── texts ├── hoge.txt └── piyo.txt 1 directory 上記のようにhoge.tar.gzが生成されていることが分かります。\n解凍 では実際に解凍してみましょう。\n解凍はtar xzf {対象ファイル名}で行えます。\ntextsフォルダを削除してからtar xzf hoge.tar.gzを実行すると、\ntree . . ├── hoge.tar.gz └── texts ├── hoge.txt └── piyo.txt 1 directory 無事にtextsフォルダが生成されましたね♪\nこちらはアーカイブ前のディレクトリ名がそのまま再現されました。\n終わりに 以上のように、コマンドから簡単にファイルやディレクトリのgz形式やtar形式での圧縮/解凍をする事が出来ました。\ngz形式はファイルバックアップ等でよく出てくる形式なので、お困りの方はぜひ試してみてください♪\n","date":"2020-01-27T23:37:26+09:00","image":"/wp-content/uploads/2020/01/gazAndTarHowToEye.png","permalink":"/2020/01/27/9961/","title":"【zip,gz,tarの違い】コマンドで簡単にgz,tar形式を圧縮及び解凍する方法まとめ【ファイルやディレクトリも可能】"},{"content":"application.confからCookieの設定を変更しよう PlayFrameworkを採用してWebシステムを開発している方ならご存知だと思いますが、PlayFrameworkには一般的なSessionの概念は存在せずに、Cookieに情報を保存する事で擬似的にSessionを再現しています。\nとはいえ、セキュリティ的な観点でログインセッションやSecureな設定を変更したい事もあるかと思います。\n今回はapplication.confから簡単に、保存するCookieの属性情報を変更する方法をご紹介しようと思います。\n手順 前提 今回は以下の環境での作業と致します。\n前提\rPlayFramework 2.7系\rまずはデフォルト値の確認 まずは何も設定していない状態のCookieの設定情報をみてみましょう。\n種類\r説明\rデフォルト値\rName\rCookieの名称\rPLAY_SESSION\rDomain\r送信先ドメイン\rlocalhost\rPath\r送信先パス\r/\rExpire / Max-Age\rCookie有効期限\rSession\rHttpOnly\rCookieヘッダー以外からの読み取り制限\rTRUE\rSecure\rHTTPS通信でのみ送信\rFALSE\rでは、これらの値を上書きしてみましょう。\nplay.http.session配下のキーで上書き 設定はconf/application.confに以下のように記述する事で上書きする事が出来ました。\n今回は名称と有効期限を変更してみようと思います。\n[adsense-responsive]\rconf/application.conf play { http { session{ cookieName = \u0026#34;NEW_PLAY_SESSION\u0026#34; maxAge = 3 days } } } 確認 では、実際に起動して確認してみましょう。\n正常にCookieの名称と有効期限が上書きされていますね♪\n終わりに 以上のように、簡単にCookie(セッション)の名称や有効期限を変更する事が出来ました。\n品質を高めるには、この辺の細かい設定も決めておく事が大事なのでぜひ試してみて下さい♪\n","date":"2020-01-25T12:41:17+09:00","image":"/wp-content/uploads/2020/01/playFramewordChangeCookieAttrEye.png","permalink":"/2020/01/25/9944/","title":"【PlayFramework2.7】Cookieに保存されるSession情報の有効期限などの属性を変更する方法【Java/Scala】"},{"content":"爆速Wordpress環境構築 今回はWordpressの環境をdockerを用いてローカルに爆速で整えるやり方を紹介しようと思います。\ndockerさえインストールしていれば冗談抜きで爆速でログイン画面まで表示出来てしまいます・・・！\nでは、早速進めていきましょう。\n手順 前提 以下のツールはインストールしてある事とします。\n用意するもの\rdocker\rdocker-compose\rdocker-compose.ymlの作成 まずはdocker-compose.ymlを作成しましょう。\n[adsense-responsive]\rdocker-compose.yml version: \u0026#39;3.3\u0026#39; services: wordpress: image: wordpress:5.3-php7.3-apache depends_on: - db ports: - \u0026#34;8000:80\u0026#34; restart: always environment: WORDPRESS_DB_HOST: db:3306 WORDPRESS_DB_USER: wordpress WORDPRESS_DB_PASSWORD: wordpress WORDPRESS_DB_NAME: wordpress volumes: - ./html:/var/www/html db: image: mysql:5.7 volumes: - ./db_data:/var/lib/mysql restart: always environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: wordpress MYSQL_USER: wordpress MYSQL_PASSWORD: wordpress volumes: db_data: パスワードなどはよしなに設定してください。\n起動 なんとこれだけで起動の準備が完了です。\n以下のコマンドで実行しましょう。\ndocker-compose up -d Creating network \u0026#34;wordpress_default\u0026#34; with the default driver Pulling db (mysql:5.7)... 5.7: Pulling from library/mysql 804555ee0376: Pull complete ... (略) ... Pulling wordpress (wordpress:5.3-php7.3-apache)... 5.3-php7.3-apache: Pulling from library/wordpress 8ec398bc0356: Pull complete ... (略) ... Creating wordpress_db_1 ... done Creating wordpress_wordpress_1 ... done 正常にサービスが作成されました。\n念の為プロセスも確認してみましょう。\ndocker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 4a026c5ab217 wordpress:5.3-php7.3-apache \u0026#34;docker-entrypoint.s…\u0026#34; 6 minutes ago Up 6 minutes 0.0.0.0:8000-\u0026gt;80/tcp wordpress_wordpress_1 a4c7a3a7830f mysql:5.7 \u0026#34;docker-entrypoint.s…\u0026#34; 6 minutes ago Up 6 minutes 3306/tcp, 33060/tcp wordpress_db_1 こちらも正常に起動していますね♪\nhttp://localhost:8000\u0026nbsp;にアクセスすると、Wordpressの初期画面にリダイレクトされました。\nあとは通常通り初期設定を行えば構築が完了です。\n終わりに 以上のように、docker-compose.ymlを用意するだけでApacheやPHPをインストールをする事なくWordpressの環境を構築する事が出来ました。\nもちろんdocker環境なのでローカルだけでなくAWSインスタンス上でも同じように構築する事が出来るので、気になる方はぜひ試してみてください♪\n","date":"2020-01-15T20:56:16+09:00","image":"/wp-content/uploads/2020/01/wordpressFromDockerEye.png","permalink":"/2020/01/15/9932/","title":"【瞬殺】docker-composeで爆速Wordpress環境構築【Wordpress5.3系・PHP7.3・Apache】"},{"content":"iPadでのページレイアウトを確認しよう サイト制作をしていると、様々なブラウザやOSでのレイアウトを気にしないといけませんよね。\nただ、iPadなどのタブレット端末の場合は開発者ツールをPCブラウザのように簡単に使ってみる事が出来ないので不憫に感じる事があると思います。\n今回はiPadとMacのSafariを用いて、開発者ツールを使ってiPadの実機側のレイアウトを確認・操作する方法をご紹介しようと思います。\n手順 iPad側の設定 まずはiPad側で設定を行う必要があります。\n設定からSafari\u003e詳細へ進みます。\nすると、Webインスペクタ項目があるのでこのスイッチを有効にします。\niPadの設定はこれだけです。\nMac側の設定 次にMac側の設定を行なっていきましょう。\n[adsense-responsive]\rSafariを開き、環境設定へ進みます。\n設定ダイアログが開いたら、詳細タブを選択し下部にあるメニューバーに\"開発\"メニューを表示にチェックを入れます。\nすると、こんな形でメニューバーに開発タブが追加されます。\nMac側の設定もこれで完了です。\nデバッグ方法 では、実際に見ていきましょう。\nUSBでMacとiPadを接続すると、以下のように接続しているiPadとSafariで開いているタブが表示されますので、開発者ツールで開きたいたぶを選択します。\nすると、iPadで表示しているページのWebインスペクターが開くので、従来の開発者ツールのように直接DOM操作やCSS、JavaScriptを操作して実機確認することが可能になります。\niPad側でも選択しているDOMがアクティブになり、同期されている事が分かります。\n終わりに 以上のように簡単にiPadでのレイアウト確認をMacを用いて実機確認をする事が出来ました。\nWebサイト開発をする上で、iPad等のレスポンシブレイアウトの確認は必須なので是非こちらの手順を試してみてください♪\n","date":"2020-01-11T16:20:42+09:00","image":"/wp-content/uploads/2020/01/iPadDebugSafariFromMacEye.png","permalink":"/2020/01/11/9910/","title":"【実機動作確認】iPadのWebレイアウトを開発者ツールでデバッグする方法【小技】"},{"content":"MySQLWorkbenchでDELETE/UPDATEが実行出来ない You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column MySQLWorkbenchなどを使ってテーブルデータの操作をしている際に、DELETE/UPDATEで一気に対象テーブルのデータを変更しようとすると、以下のようなエラーが発生する事があります。\nエラーメッセージ DELETE FROM users; Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column. To disable safe mode, toggle the option in Preferences -\u0026gt; SQL Editor and reconnect. 原因 これは、Workbench上で誤って全てのデータを更新する事が無いようにサーバー接続時に自動で--safe-updatesの制約をつけている事が原因となります。\n--safe-updatesを使用すると、行を特定するキー値を指定しないと行を消去出来ないため、GUI上での一括操作ミスを防ぐ事が可能になります。\n試しに、where句を指定すれば問題なくupdateが可能になります。\n標準メッセージ DELETE FROM users WHERE id = 1001; 1 row(s) affected 解決方法 一時対応 一時的にSQLを実行したいのであれば、DELETE/UPDATEの前にSET SQL_SAFE_UPDATES = 0;を実行して、--safe-updatesを無効にすればWHERE句無しのDELETE/UPDATEが可能になります。\nただ、この設定は一度サーバーから接続を切ってサイド接続すると効果が無くなるので接続のたびに指定する必要があるので注意です。\n現在の設定を確認する方法 この値が現在どうなっているか確認したい場合には、以下のコマンドを投げる事で確認する事が可能です。\nshow variables like \u0026#39;SQL_SAFE_UPDATES\u0026#39;; +------------------+-------+ | Variable_name | Value | +------------------+-------+ | sql_safe_updates | OFF | +------------------+-------+ 1 row in set (0.02 sec) 恒久対応 毎回接続のたびにSETコマンドを流すのが大変だという方のために、恒久的な対処方法もご紹介しようと思います。\nまずはMySQLWorkbench\u003ePreferencesに移動します。\n設定ダイアログが表示されたら、SQL EditorのOtherエリアのSafe Updates(rejects UPDATEs and DELETEs with no restrictions)にチェックが入っていたら、このチェックを外します。\nこの設定を保存し、再度サーバーに繋ぎ直す事で--safe-updatesが無効になった状態で操作が可能になっているので、WHERE句無しのDELETE/UPDATEが可能になります。\n注意 この設定はWorkbench全体の共通設定となっているため、例えばローカルDBと開発DB、本番DBなどにWorkbenchから接続を行ってデータ確認等をしている場合、各DBに対してもWHERE句無しのUPDATE/DELETE文が可能になってしまうので、データ紛失に繋がる恐れがあります。\n可能であれば、この設定は残したままにしておいて、必要なタイミングでのみSET SQL_SAFE_UPDATES = 0;を実行するようにした方が運用ミスを避けれるので必要に応じて使い分けてください。\n終わりに 以上のように、運用ミスを防いでくれる便利な機能ですが、OFFにする事も可能です。\n用途に合わせて、設定を切り替えてみてください。\n","date":"2020-01-07T19:57:21+09:00","image":"/wp-content/uploads/2020/01/mysqlWorkbenchSafeUpdateDisableEye.png","permalink":"/2020/01/07/9898/","title":"【Workbench】MySQLでUPDATEとDELETEが実行時エラーになる原因と解決方法【Error Code: 1175】"},{"content":"オタクグッズがホコリまみれに。。。 オタクグッズはすぐ見える所に飾りたい 筆者はオタク気質なところもあり、様々なゲームのグッズが日々集まっています。\n飾るためにディノスで販売されているスペースラックの6段x90cmを愛用しています。\n棚板の無段階可動が使いやすいポイント！デスク上やテレビ上、洗濯機上など、すでにある家具を避けて設置が可能です。薄型スリムで、サニタリーや廊下などの省スペースも有効活用できます。収納物に合わせて棚板を調整できるので置くものを選ばず便利です。リビングや書斎での電話台や飾り棚としてもご使用いただけます。\r【無段階】棚板可動突っ張り式スペースラック 6段 ラック幅59.5cm 通販 - ディノス\n※現在は90cmサイズが販売中止というのが悔やまれる。。。orz\nホコリが溜まりやすい しかし、このラックはそのままだとホコリがモロに積もっていくので定期的に掃除をする必要が出てしまいます。\n愛するグッズ達が汚れていくのは我が子を汚されているのと同じくらいの気持ちになってしまいますよね。(大げさ)\nそこで、今回は大正義Amazonで見つけた良さげなロールスクリーンを購入してホコリを防ぎつつヲタグッズを飾ってみようと思います！\nAmazon Satori 遮光１級 ロールスクリーン 遮光率99.99％ 遮熱 UVカット 既成品サイズ ４サイズ ４カラー 幅９０ｃｍ×丈２２０ｃｍ ハイサッシ対応 ブラウン色 Amazon Satori 遮光１級 ロールスクリーン 遮光率99.99％ 遮熱 UVカット 既成品サイズ ４サイズ ４カラー 幅４５ｃｍ×丈１３５ｃｍ アイボリー色 Amazon Satori 遮光１級 ロールスクリーン 遮光率99.99％ 遮熱 UVカット 既成品サイズ ４サイズ ４カラー 幅６０ｃｍ×丈１８０ｃｍ グリーン色 サイズや色も多く用意されているので、用途に合ったものを探せます♪\n手順 商品到着 さて、早速Amazonさんからロールスクリーンが届きました。\n縦長の箱。\nパカッ。\n今回は窓につけるわけではありませんが、遮光素材となっています。\n簡単な取り扱い説明書と取り付け用のパーツが入っています。\nネジで取り付けるので、穴を開ける必要がありますので要注意。\n今回はディノスのウォールラックに取り付けるので穴を開けても問題ありません。\nまた、カーテンレールへの取り付けのためのパーツもあります。\n今回は使わないので割愛。\n取り付け 設置はとても簡単です。\n取り付けたい部分の両サイドに均等にパーツをネジで取り付けます。\nそして、ロールスクリーンの裏側のレール部分に上部の爪から引っ掛け、下部の爪が動くようになっているためカチッと音がなるまで軽くロールスクリーンをパーツに押し付けるだけです。\nとても簡単！\nただ、ネジで取り付ける部分は硬い素材だと厳しいので予め電動ドリルでネジ穴を開けた上で取り付けないと結構厳しいです。\n今回は以前購入した電動ドリルを使ってネジ穴とネジの取り付けを行いました。\n関連記事 【DIYの強い味方】充電式コードレスで小型な電動ドリルドライバー「ブラックアンドデッカー(BLACK\u0026#43;DECKER) BDCDD12」を買ってみた【一人暮らしにもオススメ】 2019/03/02 968文字 約2分で読めます ピッタリ過ぎワロタ これが。\nこう。\n寸法ドンピシャ過ぎてびっくりしました。笑\n横から見た図。\n壁とロールスクリーンにスペースがありますが、しっかり固定されているのでブレたりしないので全く気にする必要はありません。\n紐部分は左右にスライド出来るので間取りや取り付け場所に合わせて変えれるのもグッドです♪\n素材はこんな感じなので、安物感も無いため満足です♪\n紐も結構長めなので調整が可能です。\n終わりに 以上のように、簡単に取り付けが可能かつ、ディノスのウォールラックと相性が抜群のロールスクリーンでした。\nこれで普段は大事なグッズをホコリから守る事が可能にあり、飾る事も出来るようになりました♪\nグッズを展示したいと思っている方は是非購入してみてはいかがでしょうか♪\n","date":"2019-12-18T15:22:16+09:00","image":"/wp-content/uploads/2019/12/roleScreanEye.png","permalink":"/2019/12/18/9864/","title":"【ホコリ防止】オタクグッズを飾る棚にぴったりなロールスクリーンを買ってみた【ホコリ防止】"},{"content":"FlutterでGoogleMapを表示してみよう 前回、Flutterアプリの開発環境構築についてご紹介しました。\n関連記事 【天下のGoogle先生】Flutterの開発をVSCodeで行うための環境構築まとめ【Dart・Anrdoid・iOS】 2019/11/20 3857文字 約8分で読めます 今回は、GoogleMapAPIを使って地図を表示するところまで試してみようと思います。\n手順 前提 Google Maps PlatformのAPIキーは取得済みであるとします。\n¥\rpubspec.yamlに依存関係にgoogle_maps_flutterを追加 まずはpubspec.yamlにGoogleMapsライブラリの依存関係を追加しましょう。\npubspec.yaml name: sample description: A new Flutter project. version: 1.0.0+1 environment: sdk: \u0026#34;\u0026gt;=2.1.0 \u0026lt;3.0.0\u0026#34; dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 google_maps_flutter: ^0.0.3+3 // ★追加 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true APIキーの追記 Android 次に、android/app/src/main/AndroidManifest.xmlにAPIキーを追記してください。\nandroid/app/src/main/AndroidManifest.xml \u0026lt;manifest xmlns:android=\u0026#34;http://schemas.android.com/apk/res/android\u0026#34; package=\u0026#34;com.example.sample\u0026#34;\u0026gt; \u0026lt;application android:name=\u0026#34;io.flutter.app.FlutterApplication\u0026#34; android:label=\u0026#34;sample\u0026#34; android:icon=\u0026#34;@mipmap/ic_launcher\u0026#34;\u0026gt; \u0026lt;meta-data android:name=\u0026#34;com.google.android.geo.API_KEY\u0026#34; android:value=\u0026#34;XXXXXXXXXXXXXXXXXXXXXXX\u0026#34;/\u0026gt; \u0026lt;!-- ★追加 --\u0026gt; \u0026lt;activity android:name=\u0026#34;.MainActivity\u0026#34; ... (略) ... iOS iOSの場合は、まずios/Runner/Info.plistに以下を追記してください。\nios/Runner/Info.plist \u0026lt;?xml version=\u0026#34;1.0\u0026#34; encoding=\u0026#34;UTF-8\u0026#34;?\u0026gt; \u0026lt;!DOCTYPE plist PUBLIC \u0026#34;-//Apple//DTD PLIST 1.0//EN\u0026#34; \u0026#34;http://www.apple.com/DTDs/PropertyList-1.0.dtd\u0026#34;\u0026gt; \u0026lt;plist version=\u0026#34;1.0\u0026#34;\u0026gt; \u0026lt;dict\u0026gt; \u0026lt;key\u0026gt;io.flutter.embedded_views_preview\u0026lt;/key\u0026gt; \u0026lt;!-- ★追加 --\u0026gt; \u0026lt;string\u0026gt;YES\u0026lt;/string\u0026gt;\u0026lt;!-- ★追加 --\u0026gt; ... (略) ... 次に、ios/Runner/AppDelegate.swiftに以下を追記してください。\nAppDelegate.swift import UIKit import Flutter import GoogleMaps // ★追加 @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -\u0026gt; Bool { GMSServices.provideAPIKey(\u0026#34;XXXXXXXXXXXXXXXXXXXXX\u0026#34;) // ★追加 GeneratedPluginRegistrant.register(with: self) return super.application(application, didFinishLaunchingWithOptions: launchOptions) } } lib/main.dartの修正 設定は終わったので実際にmain.dartに手を加えてみましょう。\n今回は以下の公式が紹介しているソースを元に手を加えてみました。\nDevelopers Preview Status #\rThe plugin relies on Flutter's new mechanism for embedding Android and iOS views. As that mechanism is currently in a developers preview, this plugin should also be considered a developers preview.google_maps_flutter | Flutter Package\nlib/main.dart import \u0026#39;dart:async\u0026#39;; import \u0026#39;package:flutter/material.dart\u0026#39;; import \u0026#39;package:google_maps_flutter/google_maps_flutter.dart\u0026#39;; void main() =\u0026gt; runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: \u0026#39;Flutter Google Maps Demo\u0026#39;, home: MapSample(), ); } } class MapSample extends StatefulWidget { @override State\u0026lt;MapSample\u0026gt; createState() =\u0026gt; MapSampleState(); } class MapSampleState extends State\u0026lt;MapSample\u0026gt; { Completer\u0026lt;GoogleMapController\u0026gt; _controller = Completer(); // 初期位置の定義 static final CameraPosition _kInitPosition = CameraPosition( target: LatLng(35.7100627, 139.8107004), zoom: 14.4746, // カメラのズーム ); // 東京タワーの位置定義 static final CameraPosition _toTokyoTowar = CameraPosition( bearing: 192.8334901395799, // 地図上辺を回転させる角度、時計方向に0-359(マイナス可) target: LatLng(35.6585805, 139.7432442), tilt: 59.440717697143555, // 地図とカメラの垂直の角度、0〜90度の範囲で指定します。 zoom: 19.151926040649414 // カメラのズーム ); @override Widget build(BuildContext context) { return new Scaffold( body: GoogleMap( mapType: MapType.normal, // GoogleMapのタイプを指定 initialCameraPosition: _kInitPosition, onMapCreated: (GoogleMapController controller) { _controller.complete(controller); }, ), // ボタン定義 floatingActionButton: FloatingActionButton.extended( onPressed: _goToTokyoTower, //押下時の関数定義 label: Text(\u0026#39;To the Tokyo Tower!\u0026#39;), icon: Icon(Icons.directions_boat), ), ); } // ボタン押下時の関数定義 Future\u0026lt;void\u0026gt; _goToTokyoTower() async { final GoogleMapController controller = await _controller.future; controller.animateCamera(CameraUpdate.newCameraPosition(_toTokyoTowar)); } } 確認 では、実際にflutter runで起動してみましょう。\nAndroid 起動時の位置、ボタン押下時のカメラ移動含め問題無く動きました♪\niOS こちらも起動時の位置、ボタン押下時のカメラ移動含め問題無く動きました♪\n終わりに 以上のように、簡単にFlutterアプリにGoogleMapPlatformsのAPIを組み込む事が出来ました。\nGoogleMapは今や地図操作において一強になっているので、皆さんも是非使ってみてください♪\n","date":"2019-12-04T00:05:09+09:00","image":"/wp-content/uploads/2019/12/googleMapWithFlutterEye.png","permalink":"/2019/12/04/9846/","title":"【Google Maps Platform】FlutterでGoogleMapAPIを使う方法【iOS/Android】"},{"content":"話題のFlutterの開発環境を構築しよう 一番ホットなアプリ開発技術 巷ではFlutterが流行っていますね。\nFlutter(フラッター)とは、Googleによって開発されたモバイルアプリケーションSDK (Software Development Kit)の事を指します。\nMade by Google logo\rFlutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.\rFlutter - Beautiful native apps in record time\nクロスプラットフォーム 最大の特徴は、一つのコードからAndroidとiOSどちらのプラットフォームでもアプリケーションがビルド出来るという点でしょう。\n今回はMacでのFlutterの開発環境構築までを実際にやってみたので備忘録としてまとめようと思います。\n手順 Flutter本体のインストール まずはFlutterの本体をインストールしましょう。\nOSに合わせた最新のZIPをダウンロードします。\n今回はflutter_macos_v1.9.1+hotfix.6-stable.zipでした。\nSelect the operating system on which you are installing Flutter:Install - Flutter\nダウンロードが完了したら、任意のディレクトリ(今回はdevelop)に移動し解凍します。\n解凍 cd ~/develop unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip パスの追加 次に、Flutterへのパスを追加します。\n[adsense-responsive]\r今回はfishを使っているので以下のような形で修正してください。\n~/.config/fish/config.fish ... (略) ... #flutter set -x PATH ~/develop/flutter/bin $PATH ... (略) ... 確認 コマンドを確認してみましょう。\nflutter --version Flutter 1.9.1+hotfix.6 • channel stable • https://github.com/flutter/flutter.git Framework • revision 68587a0916 (9 weeks ago) • 2019-09-13 19:46:58 -0700 Engine • revision b863200c37 Tools • Dart 2.5.0 無事に通っていますね♪\nflutter doctorの確認 次に細かい設定を進めていきましょう。\n環境構築のサポートをしてくれる便利なコマンドが用意されているので、まずはそちらを実行して現状を確認してみます。\nflutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.14.5 18F203, locale ja-JP) [✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/setup/#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location. You may also want to add it to your PATH environment variable. [✗] Xcode - develop for iOS and macOS ✗ Xcode installation is incomplete; a full installation is necessary for iOS development. Download at: https://developer.apple.com/xcode/download/ Or install Xcode via the App Store. Once installed, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS and macOS platform side\u0026#39;s plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To install: sudo gem install cocoapods [!] Android Studio (not installed) [!] IntelliJ IDEA Community Edition (version 2019.1.3) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [!] VS Code (version 1.40.0) ✗ Flutter extension not installed; install from https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter [!] Connected device ! No devices available ! Doctor found issues in 6 categories. 色々とエラーが出たのでそちらを順番に潰していきましょう。\nAndroid toolchain - develop for Android devices Unable to locate Android SDK. AndroidのSDKが見つからないよと怒られました。\nこのマシンでは、Androidの開発をしたことが無いので初期設定をする必要がありそうです。\nただ出力によると、Android Studioをインストールすればよしなに設定してくれるとの事なのでAndroidStudioをインストールします。\nなんの問題もなくインストール出来ると思うので詳細は割愛します。\nAndroid Studio provides the fastest tools for building apps on every type of Android device.Download Android Studio and SDK tools | Android Developers\nAndroid licenses not accepted. 以下のエラーは、Androidのライセンスに承諾していないよ！と言われています。\nfultter doctor [!] Android toolchain - develop for Android devices (Android SDK version 29.0.2) ✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses ログに出ている通りに、flutter doctor --android-licensesを実行し、ライセンスの承諾を行いましょう。\n基本的には全てyでOKです。\nflutter doctor --android-licenses Warning: File /Users/blogenist/.android/repositories.cfg could not be loaded. 7 of 7 SDK package licenses not accepted. 100% Computing updates... ... (略) ... All SDK package licenses accepted ここまでやればAndroid toolchainの部分が設定完了となります。\n確認 [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2) Xcode - develop for iOS and macOS Xcode installation is incomplete; a full installation is necessary for iOS development. これはXcodeがインストールされていない際に出るエラーなので、AppStoreからXcodeをインストールしましょう。\nエラーログ ✗ Xcode installation is incomplete; a full installation is necessary for iOS development. Download at: https://developer.apple.com/xcode/download/ Or install Xcode via the App Store. Once installed, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Develope Xcodeのインストールが完了したら、sudo xcode-select --switch /Applications/Xcode.app/Contents/DeveloperでインストールしたものにSwitchしましょう。\nこの状態でflutter doctorを実行すると以下のようなエラーが出力されるようになりました。\nflutter doctor ⢿Error executing simctl: 69 Agreeing to the Xcode/iOS license requires admin privileges, please run “sudo xcodebuild -license” and then retry this command. ログに出た通りのコマンドを実行してみます。\n[adsense-responsive]\rすると、以下のように同意を求められるのでよしなに確認して承認しましょう。\nsudo xcodebuild -license You have not agreed to the Xcode license agreements. You must agree to both license agreements below in order to use Xcode. Hit the Enter key to view the license agreements at \u0026#39;/Applications/Xcode.app/Contents/Resources/English.lproj/License.rtf\u0026#39; ... (略) ... By typing \u0026#39;agree\u0026#39; you are agreeing to the terms of the software license agreements. Type \u0026#39;print\u0026#39; to print them or anything else to cancel, [agree, print, cancel] agree You can view the license agreements in Xcode\u0026#39;s About Box, or at /Applications/Xcode.app/Contents/Resources/English.lproj/License.rtf これでXcodeのチェックはOKです。\nflutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.14.5 18F203, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2) [✓] Xcode - develop for iOS and macOS (Xcode 11.2.1) [!] Android Studio (version 3.5) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [!] IntelliJ IDEA Community Edition (version 2019.1.3) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [!] VS Code (version 1.40.0) ✗ Flutter extension not installed; install from https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter [!] Connected device ! No devices available ! Doctor found issues in 4 categories. CocoaPods not installed. エラーログ ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS and macOS platform side\u0026#39;s plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To install: sudo gem install cocoapod こちらもMacにCocoaPodsがインストールされていない際に出るエラーです。\nCocoaPodsとは、iOS/Mac用のアプリを開発する際のライブラリ管理ツールとなっています。\n\u0010\r以下のコマンドでgem経由インストールしましょう。\nsudo gem install cocoapods Fetching: thread_safe-0.3.6.gem (100%) Successfully installed thread_safe-0.3.6 Fetching: tzinfo-1.2.5.gem (100%) Successfully installed tzinfo-1.2.5 Fetching: concurrent-ruby-1.1.5.gem (100%) Successfully installed concurrent-ruby-1.1.5 Fetching: i18n-0.9.5.gem (100%) Successfully installed i18n-0.9.5 Fetching: activesupport-4.2.11.1.gem (100%) Successfully installed activesupport-4.2.11.1 Fetching: nap-1.1.0.gem (100%) Successfully installed nap-1.1.0 Fetching: fuzzy_match-2.0.4.gem (100%) Successfully installed fuzzy_match-2.0.4 Fetching: httpclient-2.8.3.gem (100%) Successfully installed httpclient-2.8.3 Fetching: algoliasearch-1.27.1.gem (100%) Successfully installed algoliasearch-1.27.1 Fetching: cocoapods-core-1.8.4.gem (100%) Successfully installed cocoapods-core-1.8.4 Fetching: claide-1.0.3.gem (100%) Successfully installed claide-1.0.3 Fetching: cocoapods-deintegrate-1.0.4.gem (100%) Successfully installed cocoapods-deintegrate-1.0.4 Fetching: cocoapods-downloader-1.3.0.gem (100%) Successfully installed cocoapods-downloader-1.3.0 Fetching: cocoapods-plugins-1.0.0.gem (100%) Successfully installed cocoapods-plugins-1.0.0 Fetching: cocoapods-search-1.0.0.gem (100%) Successfully installed cocoapods-search-1.0.0 Fetching: cocoapods-stats-1.1.0.gem (100%) Successfully installed cocoapods-stats-1.1.0 Fetching: netrc-0.11.0.gem (100%) Successfully installed netrc-0.11.0 Fetching: cocoapods-trunk-1.4.1.gem (100%) Successfully installed cocoapods-trunk-1.4.1 Fetching: cocoapods-try-1.1.0.gem (100%) Successfully installed cocoapods-try-1.1.0 Fetching: molinillo-0.6.6.gem (100%) Successfully installed molinillo-0.6.6 Fetching: atomos-0.1.3.gem (100%) Successfully installed atomos-0.1.3 Fetching: CFPropertyList-3.0.1.gem (100%) Successfully installed CFPropertyList-3.0.1 Fetching: colored2-3.1.2.gem (100%) Successfully installed colored2-3.1.2 Fetching: nanaimo-0.2.6.gem (100%) Successfully installed nanaimo-0.2.6 Fetching: xcodeproj-1.13.0.gem (100%) Successfully installed xcodeproj-1.13.0 Fetching: escape-0.0.4.gem (100%) Successfully installed escape-0.0.4 Fetching: fourflusher-2.3.1.gem (100%) Successfully installed fourflusher-2.3.1 Fetching: gh_inspector-1.1.3.gem (100%) Successfully installed gh_inspector-1.1.3 Fetching: ruby-macho-1.4.0.gem (100%) Successfully installed ruby-macho-1.4.0 Fetching: cocoapods-1.8.4.gem (100%) Successfully installed cocoapods-1.8.4 Parsing documentation for thread_safe-0.3.6 Installing ri documentation for thread_safe-0.3.6 Parsing documentation for tzinfo-1.2.5 Installing ri documentation for tzinfo-1.2.5 Parsing documentation for concurrent-ruby-1.1.5 Installing ri documentation for concurrent-ruby-1.1.5 Parsing documentation for i18n-0.9.5 Installing ri documentation for i18n-0.9.5 Parsing documentation for activesupport-4.2.11.1 Installing ri documentation for activesupport-4.2.11.1 Parsing documentation for nap-1.1.0 Installing ri documentation for nap-1.1.0 Parsing documentation for fuzzy_match-2.0.4 Installing ri documentation for fuzzy_match-2.0.4 Parsing documentation for httpclient-2.8.3 Installing ri documentation for httpclient-2.8.3 Parsing documentation for algoliasearch-1.27.1 Installing ri documentation for algoliasearch-1.27.1 Parsing documentation for cocoapods-core-1.8.4 Installing ri documentation for cocoapods-core-1.8.4 Parsing documentation for claide-1.0.3 Installing ri documentation for claide-1.0.3 Parsing documentation for cocoapods-deintegrate-1.0.4 Installing ri documentation for cocoapods-deintegrate-1.0.4 Parsing documentation for cocoapods-downloader-1.3.0 Installing ri documentation for cocoapods-downloader-1.3.0 Parsing documentation for cocoapods-plugins-1.0.0 Installing ri documentation for cocoapods-plugins-1.0.0 Parsing documentation for cocoapods-search-1.0.0 Installing ri documentation for cocoapods-search-1.0.0 Parsing documentation for cocoapods-stats-1.1.0 Installing ri documentation for cocoapods-stats-1.1.0 Parsing documentation for netrc-0.11.0 Installing ri documentation for netrc-0.11.0 Parsing documentation for cocoapods-trunk-1.4.1 Installing ri documentation for cocoapods-trunk-1.4.1 Parsing documentation for cocoapods-try-1.1.0 Installing ri documentation for cocoapods-try-1.1.0 Parsing documentation for molinillo-0.6.6 Installing ri documentation for molinillo-0.6.6 Parsing documentation for atomos-0.1.3 Installing ri documentation for atomos-0.1.3 Parsing documentation for CFPropertyList-3.0.1 Installing ri documentation for CFPropertyList-3.0.1 Parsing documentation for colored2-3.1.2 Installing ri documentation for colored2-3.1.2 Parsing documentation for nanaimo-0.2.6 Installing ri documentation for nanaimo-0.2.6 Parsing documentation for xcodeproj-1.13.0 Installing ri documentation for xcodeproj-1.13.0 Parsing documentation for escape-0.0.4 Installing ri documentation for escape-0.0.4 Parsing documentation for fourflusher-2.3.1 Installing ri documentation for fourflusher-2.3.1 Parsing documentation for gh_inspector-1.1.3 Installing ri documentation for gh_inspector-1.1.3 Parsing documentation for ruby-macho-1.4.0 Installing ri documentation for ruby-macho-1.4.0 Parsing documentation for cocoapods-1.8.4 Installing ri documentation for cocoapods-1.8.4 Done installing documentation for thread_safe, tzinfo, concurrent-ruby, i18n, activesupport, nap, fuzzy_match, httpclient, algoliasearch, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader, cocoapods-plugins, cocoapods-search, cocoapods-stats, netrc, cocoapods-trunk, cocoapods-try, molinillo, atomos, CFPropertyList, colored2, nanaimo, xcodeproj, escape, fourflusher, gh_inspector, ruby-macho, cocoapods after 25 seconds 30 gems installed VS Code (version 1.40.0) Flutter extension not installed; install from 今回はVSCodeで開発をしようと思っているので、こちらも解決しておきましょう。\nエラーログ ✗ Flutter extension not installed; install from https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter こちらはVSCodeの拡張がインストールされていないのでインストールしてね、という警告になります。\nなので、言われるがままにインストールしておきましょう。\nこれでVSCodeについてもパスする事が出来ました。\nflutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.14.5 18F203, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2) [✓] Xcode - develop for iOS and macOS (Xcode 11.2.1) [!] Android Studio (version 3.5) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [!] IntelliJ IDEA Community Edition (version 2019.1.3) ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [✓] VS Code (version 1.40.0) [!] Connected device ! No devices available ! Doctor found issues in 3 categories. 今回はAndroidStudioもIntelliJも使わないので他のエラーについてはスルーします。\nFlutterプロジェクトの作成 では、実際にFlutterプロジェクトでHellowWorldを動かしてみようと思います。\nVSCodeを開いたら、Flutter: New Projectを実行しましょう。\n次にプロジェクト名を入力します。\n最後に、プロジェクトを作成するディレクトリを求められるので任意の作業ディレクトリを指定しましょう。\nCould not find a Flutter SDK.と言われる場合 初回は以下のようなエラーダイアログが出る場合があります。\n[adsense-responsive]\rその場合はLocate SDKをクリックして、Flutterのbinディレクトリを指定しましょう。\nこれで以下のようなディレクトリが生成されると思います。\ntree . -L 2 . ├── README.md ├── android │ ├── app │ ├── build.gradle │ ├── gradle │ ├── gradle.properties │ ├── gradlew │ ├── gradlew.bat │ ├── hello_world_android.iml │ ├── local.properties │ └── settings.gradle ├── hello_world.iml ├── ios │ ├── Flutter │ ├── Runner │ ├── Runner.xcodeproj │ └── Runner.xcworkspace ├── lib │ └── main.dart ├── pubspec.lock ├── pubspec.yaml └── test └── widget_test.dart 10 directories, 13 files 実行 以下のようなログが出ているので、試しに実行してみましょう。\nVSCodeログ In order to run your application, type: $ cd . $ flutter run Your application code is in ./lib/main.dart. すると、以下のようなエラーが出ると思います。\nflutter run No supported devices connected. 接続済のサポートしているデバイスが無いよと怒られました。。。orz\niOSエミュレーターの起動 では、iOSのエミュレーターを起動してもう一回試してみましょう。\nopen -a Simulatorでエミュレーターを起動して、、、\n再度実行！\nflutter run Launching lib/main.dart on iPhone 11 Pro Max in debug mode... Running Xcode build... ├─Assembling Flutter resources... 5.5s └─Compiling, linking and signing... 14.3s Xcode build done. 21.9s Syncing files to device iPhone 11 Pro Max... 1,843ms おぉ！きた！！\nとても簡単ですね♪\nちなみに、VSCodeのステータスバーのNo DeviceからiOSエミュレーターを起動する事も出来ました。\nAndoidエミュレーターの起動 では、せっかくなのでAndroidエミュレーターでの起動してみましょう。\nステータスバーのNo Deviceをクリックし、Creatiung Android emulatorを選択しましょう。\nNo suitable Android AVD system images are available. 筆者の環境では以下のようなエラーが発生しました。\nまだ一つもAVDを作成していないからですね。\n今回はAndroidStudioにて基本的なAVDを作成してみます。\n特に問題無く作れると思うので、詳細は割愛します。\n正常にAVDが作成出来ると、VSCodeにてAndroidエミュレーターが選択出来るようになります。\nこの状態でAndroidエミュレーターを起動した上でflutter runを実行してみます。\n無事に起動出来ました！\nこれでiOS/Androidの両エミュレーターでの開発環境の準備が出来ました♪\n終わりに 以上のように、簡単に両OSの開発環境が整いました。\nアプリ開発は個人でも手を出しやすい分野ですので、皆さんもぜひ試してみてください♪\n","date":"2019-11-20T10:56:09+09:00","image":"/wp-content/uploads/2019/11/flutterWithVsCodeEye.png","permalink":"/2019/11/20/9795/","title":"【天下のGoogle先生】Flutterの開発をVSCodeで行うための環境構築まとめ【Dart・Anrdoid・iOS】"},{"content":"VSCodeでSrpingBootプロジェクトを動かそう みんな大好きSpringBoot 連日、VSCodeを使ったJava関連の開発環境構築の記事をご紹介していますが、今回はSpringBootプロジェクトをVSCode上で動かすための設定をご紹介しようと思います。\nJavaはこちら VSCodeでJavaを動かすための記事もご紹介していますので、合わせて参考にしていただければなと思います。\n関連記事 【グッバイEclipse】VSCodeでJavaの開発環境を構築するための設定方法【import保管やデバッグ確認まで出来ちゃう】 2019/11/06 2196文字 約5分で読めます Gradleはこちら VSCodeでGradleを動かすための記事もご紹介していますので、合わせて参考にしていただければなと思います。\n関連記事 【グッバイIntellij】VSCodeでGradleプロジェクトを動かす方法【.classpathが重要】 2019/11/06 1693文字 約4分で読めます 手順 Spring Boot Extension Pack まずはSpring Boot Extension Packをインストールしてください。\nプロジェクトの作成 次に、インストールしたプラグインを使ってSpringBootのプロジェクトを作成してみましょう。\nCtrl+Shift+Pでコマンドパレットを開き、springと入力すると関連するタスクが表示されるので、Spring Initializer: Generate a Gradle Projectを選択します。\n[adsense-responsive]\rあとは対話式でアークテクチャーや依存ライブラリを求められるので、よしなに設定してください。\n以下のトーストが表示されれば、作成は完了です。\n確認 プロジェクトの作成が完了すると、以下のようなディレクトリ構造が生成されると思います。\ntree . └── sample ├── HELP.md ├── build.gradle ├── gradle │ └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── settings.gradle └── src ├── main │ ├── java │ │ └── com │ │ └── blogenist │ │ └── sample │ │ └── DemoApplication.java │ └── resources │ ├── application.properties │ ├── static │ └── templates └── test └── java └── com └── blogenist └── sample └── DemoApplicationTests.java デバッグ起動 com.blogenist.sample.DemoApplication.javaを開いてF5キーを押すと、launch.jsonが生成されます。\n.vscode/launch.json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 \u0026#34;version\u0026#34;: \u0026#34;0.2.0\u0026#34;, \u0026#34;configurations\u0026#34;: [ { \u0026#34;type\u0026#34;: \u0026#34;java\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;Debug (Launch) - Current File\u0026#34;, \u0026#34;request\u0026#34;: \u0026#34;launch\u0026#34;, \u0026#34;mainClass\u0026#34;: \u0026#34;${file}\u0026#34; }, { \u0026#34;type\u0026#34;: \u0026#34;java\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;Debug (Launch)-DemoApplication\u0026lt;sample\u0026gt;\u0026#34;, \u0026#34;request\u0026#34;: \u0026#34;launch\u0026#34;, \u0026#34;mainClass\u0026#34;: \u0026#34;com.blogenist.sample.DemoApplication\u0026#34;, \u0026#34;projectName\u0026#34;: \u0026#34;sample\u0026#34; } ] } もう一度F5を押すと、SpringBootが実行されます\n[adsense-responsive]\r起動ログ /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home/bin/java -agentlib:jdwp=transport=dt_socket,server=n,suspend=y,address=localhost:62696 -Dfile.encoding=UTF-8 -cp /var/folders/5k/s10ppj590d534615rmtkm9cm0000gn/T/cp_3hf0q2j6npm7jfl4co6roi3qp.jar com.blogenist.sample.DemoApplication . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.2.1.RELEASE) 2019-11-08 16:29:09.086 WARN 13791 --- [ restartedMain] o.s.boot.StartupInfoLogger : InetAddress.getLocalHost().getHostName() took 5005 milliseconds to respond. Please verify your network configuration (macOS machines may need to add entries to /etc/hosts). 2019-11-08 16:29:14.096 INFO 13791 --- [ restartedMain] com.blogenist.sample.DemoApplication : Starting DemoApplication on MacBook-Pro.local with PID 13791 (/Users/blogenist/study/java/springBoot/vscode/sample/bin/main started by blogenist in /Users/blogenist/study/java/springBoot/vscode) 2019-11-08 16:29:14.097 INFO 13791 --- [ restartedMain] com.blogenist.sample.DemoApplication : No active profile set, falling back to default profiles: default 2019-11-08 16:29:14.143 INFO 13791 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : Devtools property defaults active! Set \u0026#39;spring.devtools.add-properties\u0026#39; to \u0026#39;false\u0026#39; to disable 2019-11-08 16:29:14.143 INFO 13791 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : For additional web related logging consider setting the \u0026#39;logging.level.web\u0026#39; property to \u0026#39;DEBUG\u0026#39; 2019-11-08 16:29:14.935 INFO 13791 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http) 2019-11-08 16:29:14.947 INFO 13791 --- [ restartedMain] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2019-11-08 16:29:14.947 INFO 13791 --- [ restartedMain] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.27] 2019-11-08 16:29:14.994 INFO 13791 --- [ restartedMain] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2019-11-08 16:29:14.995 INFO 13791 --- [ restartedMain] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 852 ms 2019-11-08 16:29:15.134 INFO 13791 --- [ restartedMain] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService \u0026#39;applicationTaskExecutor\u0026#39; 2019-11-08 16:29:15.282 INFO 13791 --- [ restartedMain] o.s.b.d.a.OptionalLiveReloadServer : LiveReload server is running on port 35729 2019-11-08 16:29:15.325 INFO 13791 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path \u0026#39;\u0026#39; 2019-11-08 16:29:15.328 INFO 13791 --- [ restartedMain] com.blogenist.sample.DemoApplication : Started DemoApplication in 16.554 seconds (JVM running for 16.954) 確認 リクエスト 無事に起動したのでhttp://localhost:8080\u0026nbsp;にアクセスしてみましょう。\n正常に反応しましたね♪\nimport保管 import保管もバッチリです。\nブレイクポイント もちろんブレイクポイントも正常に働きます。\nホットリロード 依存関係にorg.springframework.boot:spring-boot-devtoolsを追加していればホットリロードも行われるので、VSCodeでも快適な開発を行う事が出来ます♪\n動かない場合 java.homeの設定が終わっていない可能性があるので、前回ご紹介したこちらの記事を参考にjava.homeの設定を行ってみてください。\n関連記事 【グッバイEclipse】VSCodeでJavaの開発環境を構築するための設定方法【import保管やデバッグ確認まで出来ちゃう】 2019/11/06 2196文字 約5分で読めます 終わりに 以上のようにVSCode単体でSpringBootプロジェクトの作成からデバッグ起動まで行う事が出来ました。\nIDEを使わずにSpringBootの開発が出来るのは魅力的だと思うので、ぜひ試してみてください♪\n","date":"2019-11-08T20:19:02+09:00","image":"/wp-content/uploads/2019/11/springBootWithVsCodeEye.png","permalink":"/2019/11/08/9757/","title":"【グッバイNetBeans】VSCodeでSpringBootの開発環境を構築するための設定方法【ホットリロードやデバッグにも対応】"},{"content":"VSCodeでGradleプロジェクトを動かそう 前回、VSCodeを用いてJavaプロジェクトを動かす方法をご紹介しました。\n関連記事 【グッバイEclipse】VSCodeでJavaの開発環境を構築するための設定方法【import保管やデバッグ確認まで出来ちゃう】 2019/11/06 2196文字 約5分で読めます 今回は、Gradleプロジェクトを動かすための方法を試してみましたのでご紹介しようと思います。\nSpringBootはこちら VSCodeでSpringBootを動かすための記事もご紹介していますので、合わせて参考にしていただければなと思います。\n関連記事 【グッバイNetBeans】VSCodeでSpringBootの開発環境を構築するための設定方法【ホットリロードやデバッグにも対応】 2019/11/08 1559文字 約4分で読めます 手順 Gradleのインストール まずはgradleプロジェクトを作成するためにgradleをインストールします。\ngradleはHomebrewでサクッと落とす事が出来ます。\nbrew install gradle Updating Homebrew... ==\u0026gt; Auto-updated Homebrew! Updated 1 tap (homebrew/core). ==\u0026gt; Deleted Formulae mysql@5.5 ==\u0026gt; Downloading https://services.gradle.org/distributions/gradle-5.6.4-all.zip ==\u0026gt; Downloading from https://downloads.gradle-dn.com/distributions/gradle-5.6.4-all.zip ######################################################################## 100.0% 🍺 /usr/local/Cellar/gradle/5.6.4: 14,318 files, 245.3MB, built in 44 seconds Gradleプロジェクトの作成 次にgradleプロジェクトを作成します。\n作業ディレクトリに移動し、以下を実行\ngradle init --type java-application Welcome to Gradle 5.6.4! Here are the highlights of this release: - Incremental Groovy compilation - Groovy compile avoidance - Test fixtures for Java projects - Manage plugin versions via settings script For more details see https://docs.gradle.org/5.6.4/release-notes.html Starting a Gradle Daemon (subsequent builds will be faster) Select build script DSL: 1: Groovy 2: Kotlin Enter selection (default: Groovy) [1..2] Select test framework: 1: JUnit 4 2: TestNG 3: Spock 4: JUnit Jupiter Enter selection (default: JUnit 4) [1..4] Project name (default: simple): sample Source package (default: sample): \u0026gt; Task :init Get more help with your project: https://docs.gradle.org/5.6.4/userguide/tutorial_java_projects.html BUILD SUCCESSFUL in 55s 2 actionable tasks: 2 executed 何点か対話式で聞かれるのでお好みで。\n今回は全てデフォルトで作成しました。\nプロジェクト構造 ディレクトリ構造はこんな感じになると思います。\ntree . ├── build.gradle ├── gradle │ └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── settings.gradle └── src ├── main │ ├── java │ │ └── sample │ │ └── App.java │ └── resources └── test ├── java │ └── sample │ └── AppTest.java └── resources 11 directories, 8 files tasks.jsonの作成 次に、gradleコマンドをVSCode上から実行するための設定ファイルを作りましょう。\n[adsense-responsive]\r.vscode/tasks.json { \u0026#34;version\u0026#34;: \u0026#34;2.0.0\u0026#34;, \u0026#34;tasks\u0026#34;: [ { \u0026#34;label\u0026#34;: \u0026#34;Sample Build\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;shell\u0026#34;, \u0026#34;command\u0026#34;: \u0026#34;./gradlew build\u0026#34; }, { \u0026#34;label\u0026#34;: \u0026#34;Sample Run\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;shell\u0026#34;, \u0026#34;command\u0026#34;: \u0026#34;./gradlew run\u0026#34;, \u0026#34;group\u0026#34;: { \u0026#34;kind\u0026#34;: \u0026#34;build\u0026#34;, \u0026#34;isDefault\u0026#34;: true } }, { \u0026#34;label\u0026#34;: \u0026#34;Sample Clean\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;shell\u0026#34;, \u0026#34;command\u0026#34;: \u0026#34;./gradlew clean\u0026#34; }, { \u0026#34;label\u0026#34;: \u0026#34;Sample Check\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;shell\u0026#34;, \u0026#34;command\u0026#34;: \u0026#34;./gradlew check\u0026#34; } ] } 確認 では、実際に実行してみましょう。\nCtrl+Pのショートカットでコマンドパレットを開き、「task 」(※要半角スペース)と入力するとtasks.jsonに指定したタスクが表示されます。\n今回はSample Buildタスクを実行してみます。\nすると、ターミナル上で実行されます。\nSample Build \u0026gt; Executing task: ./gradlew run \u0026lt; Error checking TLS connection: Host is not running \u0026gt; Task :run Hello world. BUILD SUCCESSFUL in 614ms 2 actionable tasks: 1 executed, 1 up-to-date Terminal will be reused by tasks, press any key to close it. 期待通りの挙動になりましたね♪\n依存関係の追加 では、次は適当なライブラリの依存関係を追加してimport補完が効くところまでを確認しましょう。\n今回はjavax.validationのvalidation-apiを追加してみようと思います。\nbuild.gradle /* * This file was generated by the Gradle \u0026#39;init\u0026#39; task. * * This generated file contains a sample Java project to get you started. * For more details take a look at the Java Quickstart chapter in the Gradle * User Manual available at https://docs.gradle.org/5.6.4/userguide/tutorial_java_projects.html */ plugins { // Apply the java plugin to add support for Java id \u0026#39;java\u0026#39; // Apply the application plugin to add support for building a CLI application id \u0026#39;application\u0026#39; } repositories { // Use jcenter for resolving dependencies. // You can declare any Maven/Ivy/file repository here. jcenter() } dependencies { // https://mvnrepository.com/artifact/javax.validation/validation-api compile group: \u0026#39;javax.validation\u0026#39;, name: \u0026#39;validation-api\u0026#39;, version: \u0026#39;2.0.1.Final\u0026#39; // ★追加 // This dependency is used by the application. implementation \u0026#39;com.google.guava:guava:28.0-jre\u0026#39; // Use JUnit test framework testImplementation \u0026#39;junit:junit:4.12\u0026#39; } application { // Define the main class for the application mainClassName = \u0026#39;sample.App\u0026#39; } この状態でSample Buildタスクを実行してみてください。\nしかし、このままではまだimport保管の候補に出ません。\nどうやら、VSCodeのjava extension packのimport保管はEclipseと同様に.classpathを読み込むようです。\nということは、Gradleのeclipseタスクを実行して再生成すれば良いのでは！？\n今日は頭が冴えています。(?)\n[adsense-responsive]\r早速試しましょう。\nbuild.gradle /* * This file was generated by the Gradle \u0026#39;init\u0026#39; task. * * This generated file contains a sample Java project to get you started. * For more details take a look at the Java Quickstart chapter in the Gradle * User Manual available at https://docs.gradle.org/5.6.4/userguide/tutorial_java_projects.html */ plugins { // Apply the java plugin to add support for Java id \u0026#39;java\u0026#39; // Apply the application plugin to add support for building a CLI application id \u0026#39;application\u0026#39; id \u0026#39;eclipse\u0026#39; // ★追加 } .vscode/tasks.json { \u0026#34;version\u0026#34;: \u0026#34;2.0.0\u0026#34;, \u0026#34;tasks\u0026#34;: [ { \u0026#34;label\u0026#34;: \u0026#34;Sample Build\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;shell\u0026#34;, \u0026#34;command\u0026#34;: \u0026#34;./gradlew build\u0026#34; }, { \u0026#34;label\u0026#34;: \u0026#34;Sample Run\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;shell\u0026#34;, \u0026#34;command\u0026#34;: \u0026#34;./gradlew run\u0026#34;, \u0026#34;group\u0026#34;: { \u0026#34;kind\u0026#34;: \u0026#34;build\u0026#34;, \u0026#34;isDefault\u0026#34;: true } }, { \u0026#34;label\u0026#34;: \u0026#34;Sample Clean\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;shell\u0026#34;, \u0026#34;command\u0026#34;: \u0026#34;./gradlew clean\u0026#34; }, { \u0026#34;label\u0026#34;: \u0026#34;Sample Check\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;shell\u0026#34;, \u0026#34;command\u0026#34;: \u0026#34;./gradlew check\u0026#34; }, // ★以下追加 { \u0026#34;label\u0026#34;: \u0026#34;Sample Eclipse\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;shell\u0026#34;, \u0026#34;command\u0026#34;: \u0026#34;./gradlew eclipse\u0026#34; } ] } 確認 Sample Eclipseタスクを実行してみてください。\n.classpath ... (略) ... \u0026lt;classpathentry sourcepath=\u0026#34;/Users/blogenist/.gradle/caches/modules-2/files-2.1/javax.validation/validation-api/2.0.1.Final/4b714a5167580122e46ead3317ffcdcdbd67c5f0/validation-api-2.0.1.Final-sources.jar\u0026#34; kind=\u0026#34;lib\u0026#34; path=\u0026#34;/Users/blogenist/.gradle/caches/modules-2/files-2.1/javax.validation/validation-api/2.0.1.Final/cb855558e6271b1b32e716d24cb85c7f583ce09e/validation-api-2.0.1.Final.jar\u0026#34;\u0026gt; \u0026lt;attributes\u0026gt; \u0026lt;attribute name=\u0026#34;gradle_used_by_scope\u0026#34; value=\u0026#34;main,test\u0026#34;/\u0026gt; \u0026lt;/attributes\u0026gt; \u0026lt;/classpathentry\u0026gt; ... (略) ... 正常に.classpathにも追記されました。\n保管も有効になりました！完璧です！\n終わりに 以上のように、Gradleで追加したライブラリもVSCode上でimport保管対象に含める事が可能になりました。\n.classpathの更新が必要なところに気づかずに困っている方も多いと思いますので、ぜひ参考にしてみてください♪\n","date":"2019-11-06T23:59:25+09:00","image":"/wp-content/uploads/2019/11/gradleWithVsCodeEye.png","permalink":"/2019/11/06/9730/","title":"【グッバイIntellij】VSCodeでGradleプロジェクトを動かす方法【.classpathが重要】"},{"content":"VSCodeでもJavaのデバッグが出来るらしい 時代が変わるか？ 筆者はJava開発をメインに行っており、そうなるとEclipseやIntellij、NetBeansなどのIDEでの開発が必須となっています。\nしかし、上記のIDEはかなり昔からあるため、UIがいまいちだったり重かったりとかなり課題が有りながらも代わりのエディターが無かったため使わざるを得なかったというのも事実です。\nそんな不満を抱きつつ例の如くネットサーフィンをしていたところ、なんとVSCodeでもJavaの開発が出来るようになったという情報を入手しました。\n今回は実際にVSCodeでJava8のソースを動かし、ブレイクポイントを貼ってデバッグするところまでを試してみようと思います。\nGradleはこちら VSCodeでGradleを動かすための記事もご紹介していますので、合わせて参考にしていただければなと思います。\n関連記事 【グッバイIntellij】VSCodeでGradleプロジェクトを動かす方法【.classpathが重要】 2019/11/06 1693文字 約4分で読めます SpringBootはこちら VSCodeでSpringBootを動かすための記事もご紹介していますので、合わせて参考にしていただければなと思います。\n関連記事 【グッバイNetBeans】VSCodeでSpringBootの開発環境を構築するための設定方法【ホットリロードやデバッグにも対応】 2019/11/08 1559文字 約4分で読めます Visual Studio Code Installer for Javaもあるよ ちなみに、マイクロソフトが2019年6月14日に「Visual Studio Code Installer for Java」なるツールを公開しました。\nこちらはマシンへのJDKやVSCodeなどのインストールをまとめて行ってくれるツールとなっています。\n気になる方はこちらも使ってみてください♪\nJava in Visual Studio Code\rSupport for Java in Visual Studio Code is provided through a wide range of extensions. Combined with the power of core VS Code, these extensions give you a lightweight and performant code editor that also supports many of the most common Java development techniques. VS Code provides essential language features such as code completion, refactoring, linting, formatting, and code snippets along with convenient debugging and unit test support. VS Code can also integrate with tooling and frameworks such as Maven, Tomcat, Jetty, and Spring Boot. Leveraging the power of Visual Studio Code, Java developers get an excellent tool for both quick code editing and also the full debugging and testing cycle. It's a great choice for your Java work if you're looking for a tool which:\rIs fast, lightweight, free, and open source. Supports many other languages, not just Java. Helps start your Java journey without installing and learning a complex IDE. Provides great microservices support including popular frameworks, container tooling, and cloud integration. Offers team-based collaboration features such as Visual Studio Live Share. Improves your productivity through IntelliSense and other code-aware editing features. Java in Visual Studio Code\n手順 Java Extension Packの導入 それではVSCodeにJava開発をする上で必要なプラグインを導入していきましょう。\nまずはJava Extension Packをインストールしてください。\nなんと、このプラグインを入れるだけで、最低限Javaの開発に必要なものが揃ってしまいます！\nインストールされるもの\rLanguage Support for Java\rDebugger for Java\rJava Test Runner\rMaven Project Explorer\rJava Dependency Viewer\rVisual Studio IntelliCode\rしかも、天下のMicroSoft製のプラグインなので間違い無いです！\nJavaHomeの設定 インストールが完了したら、JavaHomeの設定を行います。\n[adsense-responsive]\rプロジェクトルートに.vscode/setting.jsonを作成し、以下のような記述を追加してください。\n.vscode/settings.json { \u0026#34;java.home\u0026#34;: \u0026#34;{使用するJavaのホームディレクトリ}\u0026#34; } プロジェクトルートに設定を作る事で、プロジェクト単位で簡単にJavaのバージョンを変える事が出来るのでオススメです♪\n今回は、HomebrewでインストールしたJava8を設定してみます。\n.vscode/settings.json { \u0026#34;java.home\u0026#34;: \u0026#34;/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home\u0026#34; } JEnvで複数のJavaバージョンを共存させる ちなみに、Javaの複数バージョンを共存させる方法は以前紹介しているので、興味のある方は合わせて参考にしてみてください。\n関連記事 【オラクルの呪い】「jenv」を使ってJavaのバージョンをコマンド一つで切り替えよう【Homebrew/anyenv】 2019/06/30 1652文字 約4分で読めます Javaプロジェクトの作成 では、次にJavaプロジェクトを作成しましょう。\nCtrl+Shift+PからJava: Create Java Projectを選択肢します。\n流れに沿ってプロジェクトフォルダとプロジェクト名を決めて作成します。\nすると以下のようなプロジェクトが自動生成されると思います。\ntree . └── sample ├── bin └── src └── app └── App.java 4 directories, 1 file 使い方 import保管 この状態では、エディター上でライブラリの保管が有効になっているため、import文の補助が行われます。\nそして、さらに強力なのが以下のようにタイピング中にも保管が出てきてくれ、その状態でimportしたいクラスを選択してEnterを押すと、、、\n自動でimport文が追加されるのです！\nはい神。\nかなりIDEに近いコーディングが出来るようになったのではないでしょうか！\nもちろん、独自クラスにも反応してくれます。\n定義元メソッドにジャンプ こちらもよく使う機能ですね。\n対象のメソッドに対して、Ctrlを押しながらマウスクリックすることで定義元に飛べます！\n警告/エラー表示 もちろん、IDEのようにエラーや警告も出してくれます。\nコードの品質を保つためには必須の機能ですね。\nデバッグ起動 では実際にデバッグ起動をしてみましょう。\n[adsense-responsive]\r自動生成されたsrc/app/App.javaを開き、ブレイクポイントを設定してF5を押してみましょう。\n起動度にしっかりとブレイクポイントで止まりましたね！変数の中身も見れそうです♪\n起動ログにも先ほど設定したjava.homeもしっかり反映されていますね♪\n実行ログ Error checking TLS connection: Host is not running Darwin XXX18.6.0 x86_64 18:55 up 8 days, 6:56, 8 users, load averages: 3.39 2.74 2.46 ~/blogenist/vscode/sample /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home/bin/java -agentlib:jdwp=transport=dt_socket,server=n,suspend=y,address=localhost:51615 -Dfile.encoding=UTF-8 -cp \u0026#34;/Users/blogenist/Library/Application Support/Code/User/workspaceStorage/56e3f584c29463a8d042f4214c2c98f7/redhat.java/jdt_ws/jdt.ls-java-project/bin\u0026#34; app.App 終わりに 以上のように簡単にVSCodeでのJavaのデバッグが可能になりました。\nまだEclipseやIntellij、NetBeansなどのIDEに変わることは難しいかもしれませんが、簡単なシステム開発や技術調査であれば十分使えるレベルな気もしますので、皆さんもぜひ試してみてください♪\n","date":"2019-11-06T13:10:53+09:00","image":"/wp-content/uploads/2019/11/javaWithVsCodeEye.png","permalink":"/2019/11/06/9687/","title":"【グッバイEclipse】VSCodeでJavaの開発環境を構築するための設定方法【import保管やデバッグ確認まで出来ちゃう】"},{"content":"Logicoolのワイヤレスヘッドセット ハイクオリティなワイヤレスヘッドセット PCゲームなどをしている際に、Discordなどでボイスチャットをしながらプレイをする際に安値のマイク付きイヤホンを使ってもプレイが可能ですが、しっかりしたゲーミングヘッドセットを買った方がクリアな音声とリアルなゲームサウンドを聞き取る事が出来ます。\n今回はゲーミングウェアでダントツシェアを誇るLogicoolから発売されているG533を購入してみたのでご紹介しようと思います。\nAmazon Logicool G ゲーミングヘッドセット ワイヤレス 無線 G533 ブラック Dolby 7.1ch ノイズキャンセリング マイク 付き PC 軽量 国内正規品 2年間メーカー保証 「G533は、新たなイチオシ製品だ」ロジクールG533 DTS 7.1サラウンド サウンド ワイヤレス ゲーミング ヘッドセット - en-us\nその他のLogicool製品 Logicoolの製品は他にも紹介しているので興味がありましたらそちらもみていただければなと思います♪\n関連記事 【ゲーミングキーボード】程よい打鍵感が癖になる「Logicool ロジクール G PRO テンキーレス」がオススメ【PUBG・フォートナイト・ApexLegends】 2019/05/10 2753文字 約6分で読めます 関連記事 【快適マウスパッド】ゲーミングマウスにぴったりの「Logicool G240t」が滑らかすぎて快適エイムライフが送れそうな件【PUBG/Fortnite/ApexLegends/FPS/TPS】 2019/03/21 1968文字 約4分で読めます 関連記事 【最強ゲーミングマウス】PS4やSwitchでも使用可能な「Logicool ロジクール G502 HERO」の使い方と初期設定方法まとめ【フォートナイト/PUBG/ApexLegends/FPS/TPS】 2019/03/19 3535文字 約8分で読めます Logicool G533 一歩先を行くワイヤレス オーディオ https://www.youtube.com/watch?time_continue=2\u0026v=VeS76b_Phx8\rhttps://www.youtube.com/watch?time_continue=3\u0026v=jfsGd83JLIc\rあらゆる機能を搭載したプロ仕様のゲーミング ヘッドセット。7.1サラウンド サウンドを楽しむためのDTS Headphone:Xと、豊かなオーディオをほとんどひずみなく鳴らすPro-G™オーディオ ドライバーを搭載し、さらに15時間のバッテリー駆動を実現しました。また、安定したワイヤレス接続も見逃せないポイントです。ロジクールG533 DTS 7.1サラウンド サウンド ワイヤレス ゲーミング ヘッドセット - en-us\nDTS HEADPHONE:X 7.1chの仮想サラウンド サウンドで、ゲーム内環境を忠実に再現。近づいてくる脅威の音であれ、敵が落としたアイテムの音であれ、どの方向から聞こえてくる音も聞き逃しません。Logicool G HUBを使用すれば、7つの各オーディオ チャンネルの音量を調整できます。たとえば、ゲーム内の背後からの音をよく聞くためにリアチャンネルのサウンドを増幅することが可能です。ロジクールG533 DTS 7.1サラウンド サウンド ワイヤレス ゲーミング ヘッドセット - en-us\nPRO-Gオーディオ ドライバー サウンド デザイナーが意図したとおりのサウンドをありのままに再現し、大きくクリアな音を届けます。ハイブリッドメッシュ構造により、重厚な低音と透き通った高音をほとんどひずみなく鳴らします。ロジクールG533 DTS 7.1サラウンド サウンド ワイヤレス ゲーミング ヘッドセット - en-us\n一歩先を行くワイヤレス 2.4GHz以上のロスレス オーディオ伝送により、ワイヤレスの利便性（最大15mの受信距離）を担保しながら、驚異のハイファイサウンドを実現。厳しいテストを突破したG533は、付近でいくつもの無線信号が混信しているような電磁波ノイズの多い環境でも、強力な接続を確立できます。ロジクールG533 DTS 7.1サラウンド サウンド ワイヤレス ゲーミング ヘッドセット - en-us\nゲーミングに必須の要素を凝縮 G533は、最先端の素材と製造手法により耐久性と軽量性を両立した、軽量デザインのオーバーイヤー型ヘッドセットです。何時間着けていても疲れにくく、長時間のゲームプレイ中も快適な着け心地が持続します。通気性に優れたスポーツタイプのイヤーパッドは、取り外して洗濯することも可能です。ロジクールG533 DTS 7.1サラウンド サウンド ワイヤレス ゲーミング ヘッドセット - en-us\n15時間連続使用 1回の充電で最長15時間の連続使用が可能な充電式バッテリーにより、長時間のゲームプレイも安心して楽しめます。しかも、バッテリーは交換可能です。Logicool G HUB でバッテリー残量を確認できるため、ゲームの途中でバッテリー切れになる心配もありません。ロジクールG533 DTS 7.1サラウンド サウンド ワイヤレス ゲーミング ヘッドセット - en-us\nノイズキャンセリングマイク 伸縮可能な折り畳み式のマイクブームに搭載されたノイズキャンセリングマイクにより、ボイスチャットやコミュニケーションをクリアな音質で楽しめます。跳ね上げるだけで自動的にミュートになる便利機能も付いています。さらに、ヘッドセットから聞こえる自分の声の音量を自由にチューニングできる、“サイドトーン”設定も実装。声の聞こえ方を確認できるので、マイクに無闇に叫んでしまうことがありません。ロジクールG533 DTS 7.1サラウンド サウンド ワイヤレス ゲーミング ヘッドセット - en-us\n音質を細かく設定 左の耳元の音量調節ダイヤルとマイクミュートボタンを使って、ゲームをプレイしながら簡単にオーディオ設定を調節できます。ロジクールゲームソフトウェアを使えば、イコライザー、サラウンド サウンド、サイドトーン、マイクレベルを細かく調節してゲームごとのプロファイルを作成できます。ミュートボタンの機能を変更してGキーとして使用し、ミュートボタンで再生/一時停止したり、複雑なマクロを実行したりすることも可能です。ロジクールG533 DTS 7.1サラウンド サウンド ワイヤレス ゲーミング ヘッドセット - en-us\n開封の儀 外観 パッケージはこんな感じです。\nLogicoolお馴染みの誇張の激しい製品名！！！\n早速開けていきましょう。\nパカッ。\n梱包物 梱包物は以下の通りとなっています。\n梱包物\rヘッドセット本体\rUSBワイヤレスアダプター\rUSB充電ケーブル\r取扱説明書\r保証書\r保証規定\rUSBケーブルはType-Cではなく従来の端子となっています。\n本体 こちらがヘッドセットの本体となります。\n「G」の紋章が掘られています。\nマイクは左側に折りたたみ式で用意されており、立てる事で自動でマイク入力がONになります。\nイヤーパッドはかなり柔らかめなので長時間つけていても耳が痛くなることは今の所ありません！\nサイドにも「G」の紋章。\nバンド部分が伸びるので調整も簡単に出来ます♪\n電源や音量ボタン、充電用端子も左側に用意されています。\n使用準備 PCへの設定もとても簡単です。\nまずはUSBワイヤレスアダプターをPCにセットすることで自動でセットアップが行われます。\nセットアップが完了すると、Logicool ゲーミングソフトウェアにヘッドセットが追加されるので、これで使うための準備は完了です。\n7.1chを有効にしたい場合 このG533は7.1chにも対応していますが、有効にするにはアプリケーションからサラウンドサウンドを有効にし、ルーム名で「DTS7.1」を設定する必要があります。\n終わりに 以上のように、Logicoolブランドから発売されているオススメのゲーミングヘッドセットをご紹介しました。\nAmazon Logicool G ゲーミングヘッドセット ワイヤレス 無線 G533 ブラック Dolby 7.1ch ノイズキャンセリング マイク 付き PC 軽量 国内正規品 2年間メーカー保証 エントリー向けのお手頃なお値段なので、ヘッドセットをお探しの方は是非購入を考えてみてはいかがでしょうか♪\n","date":"2019-11-05T12:43:48+09:00","image":"/wp-content/uploads/2019/11/logicoolHeadSetEye.png","permalink":"/2019/11/05/9622/","title":"【Logicool】ゲーミングヘッドセットの「G533」を買ってみた【PUBG/フォートナイト/ApexLegend】"},{"content":"リクエスト容量の超過 PlayFrameworkを使ってファイルの送信フォームを作っている際に、特に設定を変えずに10MB以上のデータを送信するとHttpStatus413のRequest Entity Too Largeのようなエラーが出力されます。\nこれは、PlayFrameworkのデフォルトの設定値である10MBを超えるデータ量になっている事が原因です。\nFor parsers that buffer content on disk, such as the raw parser or multipart/form-data, the maximum content length is specified using the play.http.parser.maxDiskBuffer property, it defaults to 10MB. The multipart/form-data parser also enforces the text max length property for the aggregate of the data fields.Scala Body Parsers - 2.7.x\n解決方法 play.http.parser.maxDiskBufferを変更 上限値を広げるには、conf/application.confのplay.http.parser.maxDiskBufferの値に上限値を指定する事で拡張する事が可能です。\n例として、200MBにあげるには以下のように指定すればOKです。\nconf/application.conf ... (略) ... play { http { parser{ maxDiskBuffer=200MB } } } ... (略) ... 終わりに 以上のように、PlayFrameworkの設定ファイルに一行追記するだけで対応する事が可能です。\n複数画像をまとめてあげる機能を実現するにはほぼ必須の設定だと思うので、ぜひ試してみてください♪\n","date":"2019-10-31T23:13:51+09:00","image":"/wp-content/uploads/2019/10/playFrameworkRequestEntityTooLargeEye.png","permalink":"/2019/10/31/9615/","title":"【PlayFramework2.7系】HttpStatasu413の「Request Entity Too Large」が出た場合の原因と解決方法【play.http.parser.maxDiskBuffer】"},{"content":"Wordpressで特定のSVG画像だけアップロード出来ない このファイルタイプはセキュリティの観点で許可されていません 先日、いつも通りWordpressの記事に対してドラッグ\u0026ドロップでSVG画像を追加しようとしたところ、以下のようなエラーが出ました。\nむむむ。。。\n他のSVG画像は問題なくアップロード出来ているのに。。。orz\n原因 Wordpress自体のSVG画像アップロード対応については、以前に紹介しているので設定上は問題ない状態になっているはずです。\n関連記事 【瞬殺】WordpressでSVG画像がアップロード出来ない場合の解決方法 2018/08/18 1104文字 約3分で読めます いろいろ調べた結果、実際にアップロード出来たSVG画像とアップロード出来なかったSVG画像を比較してみると、アップロードするSVGファイル側に問題がある事が分かりました。\nアップロード出来ないSVG \u0026lt;svg clip-rule=\u0026#34;evenodd\u0026#34; fill-rule=\u0026#34;evenodd\u0026#34; viewBox=\u0026#34;0 0 2041 2160\u0026#34; xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34;\u0026gt; \u0026lt;path d=\u0026#34;m1397 271-370 642-371-642h-592l963 1667 962-1667z\u0026#34; fill=\u0026#34;#34495e\u0026#34; /\u0026gt; \u0026lt;path d=\u0026#34;m44 0h1952l-979 1696z\u0026#34; fill=\u0026#34;#563d7c\u0026#34; fill-rule=\u0026#34;nonzero\u0026#34; /\u0026gt; \u0026lt;path d=\u0026#34;m1633 392-612 1061-613-1061h-408l1021 1768 1020-1768z\u0026#34; fill=\u0026#34;#41b883\u0026#34; /\u0026gt; \u0026lt;path d=\u0026#34;m767 196h339c62 0 112 14 150 43 38 28 56 71 56 129 0 36-8 66-25 91s-42 44-74 58v2c43 9 75 29 98 61 22 31 33 71 33 118 0 28-5 53-15 77s-25 44-46 61c-21 18-47 31-80 41-32 11-71 16-116 16h-320zm122 292h199c29 0 54-9 73-25 20-17 29-41 29-72 0-35-8-60-26-75-17-14-43-21-76-21h-199zm0 305h216c37 0 66-10 86-29s31-46 31-81-10-61-31-80-49-28-86-28h-216z\u0026#34; fill=\u0026#34;#fff\u0026#34; /\u0026gt; \u0026lt;/svg\u0026gt; アップロード出来たSVG \u0026lt;?xml version=\u0026#34;1.0\u0026#34; encoding=\u0026#34;UTF-8\u0026#34;?\u0026gt; \u0026lt;svg xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34; width=\u0026#34;400\u0026#34; height=\u0026#34;303\u0026#34; version=\u0026#34;1\u0026#34; viewBox=\u0026#34;0 0 400 303\u0026#34;\u0026gt;\u0026lt;g fill=\u0026#34;none\u0026#34; fill-rule=\u0026#34;evenodd\u0026#34;\u0026gt;\u0026lt;path fill=\u0026#34;#00C58E\u0026#34; d=\u0026#34;M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z\u0026#34;/\u0026gt;\u0026lt;path fill=\u0026#34;#108775\u0026#34; d=\u0026#34;M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z\u0026#34;/\u0026gt;\u0026lt;path fill=\u0026#34;#2F495E\u0026#34; fill-rule=\u0026#34;nonzero\u0026#34; d=\u0026#34;M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z\u0026#34;/\u0026gt;\u0026lt;/g\u0026gt;\u0026lt;/svg\u0026gt; 原因は一目瞭然ですね。\nsvgファイルの先頭にxmlの宣言(\u0026lt;?xml version=\"1.0\" encoding=\"UTF-8\"?\u0026gt;)が無いとダメなようです。\n解決手順 対処 解決方法はSVGファイルの一行目に\u0026lt;?xml version=\"1.0\" encoding=\"UTF-8\"?\u0026gt;を入れれば解決です。\n修正後のSVG \u0026lt;?xml version=\u0026#34;1.0\u0026#34; encoding=\u0026#34;UTF-8\u0026#34;?\u0026gt; \u0026lt;svg clip-rule=\u0026#34;evenodd\u0026#34; fill-rule=\u0026#34;evenodd\u0026#34; viewBox=\u0026#34;0 0 2041 2160\u0026#34; xmlns=\u0026#34;http://www.w3.org/2000/svg\u0026#34;\u0026gt; \u0026lt;path d=\u0026#34;m1397 271-370 642-371-642h-592l963 1667 962-1667z\u0026#34; fill=\u0026#34;#34495e\u0026#34; /\u0026gt; \u0026lt;path d=\u0026#34;m44 0h1952l-979 1696z\u0026#34; fill=\u0026#34;#563d7c\u0026#34; fill-rule=\u0026#34;nonzero\u0026#34; /\u0026gt; \u0026lt;path d=\u0026#34;m1633 392-612 1061-613-1061h-408l1021 1768 1020-1768z\u0026#34; fill=\u0026#34;#41b883\u0026#34; /\u0026gt; \u0026lt;path d=\u0026#34;m767 196h339c62 0 112 14 150 43 38 28 56 71 56 129 0 36-8 66-25 91s-42 44-74 58v2c43 9 75 29 98 61 22 31 33 71 33 118 0 28-5 53-15 77s-25 44-46 61c-21 18-47 31-80 41-32 11-71 16-116 16h-320zm122 292h199c29 0 54-9 73-25 20-17 29-41 29-72 0-35-8-60-26-75-17-14-43-21-76-21h-199zm0 305h216c37 0 66-10 86-29s31-46 31-81-10-61-31-80-49-28-86-28h-216z\u0026#34; fill=\u0026#34;#fff\u0026#34; /\u0026gt; \u0026lt;/svg\u0026gt; 確認 先ほどアップロード出来なかったSVGに上記のxml宣言を追加し、再度アップロードしてみます。\n無事にアップロード出来るようになりましたね♪\n終わりに 以上のように、SVG画像の構造が分からない人にはちょっとハマりガチな問題でした。\n同じような現象でお困りの方はぜひ試してみてください♪\n","date":"2019-10-25T19:46:40+09:00","image":"/wp-content/uploads/2019/10/wordpressSvgDownloadErrorEye.png","permalink":"/2019/10/25/9482/","title":"【このファイルタイプは】wordpressで一部のSVGだけアップロード出来ない問題の原因と解決方法【セキュリティの観点から許可されてません】"},{"content":"consoleを使うと警告が出る TypeScriptを使っている際に、ログ出力のためにconsole.error()などを使うと以下のような警告が出るようになります。\n警告内容 WARNING in /Users/blogenist/Develop/sample/src/App.vue 106:9 Calls to \u0026#39;console.error\u0026#39; are not allowed. 104 | }) 105 | .catch(err =\u0026gt; { \u0026gt; 106 | console.error(\u0026#34;Copy Error.\u0026#34;, err); | ^ 107 | }); 108 | } これは、TypeScriptの環境ではconsole.error()を使用する事は許可されていないようです。\nもちろん、別の記述に変えれば良いのですが使いたい場合はtslint.jsonに一行追加するだけで警告が出なくなるのでご紹介致します。\n手順 tslint.jsonに追記 解決方法はとても簡単で、tslint.jsonのrulesに以下を追加すれば使用しても警告が出なくなります。\nsrc/tslint.json { \u0026#34;defaultSeverity\u0026#34;: \u0026#34;warning\u0026#34;, \u0026#34;extends\u0026#34;: [\u0026#34;tslint:recommended\u0026#34;], \u0026#34;linterOptions\u0026#34;: { \u0026#34;exclude\u0026#34;: [\u0026#34;node_modules/**\u0026#34;] }, \u0026#34;rules\u0026#34;: { \u0026#34;indent\u0026#34;: [true, \u0026#34;spaces\u0026#34;, 2], \u0026#34;interface-name\u0026#34;: false, \u0026#34;no-consecutive-blank-lines\u0026#34;: false, \u0026#34;object-literal-sort-keys\u0026#34;: false, \u0026#34;ordered-imports\u0026#34;: false, \u0026#34;quotemark\u0026#34;: [true, \u0026#34;double\u0026#34;], \u0026#34;trailing-comma\u0026#34;: [true, \u0026#34;never\u0026#34;], \u0026#34;curly\u0026#34;: true, \u0026#34;arrow-parens\u0026#34;: [2, \u0026#34;always\u0026#34;], \u0026#34;no-console\u0026#34;: [false] // 追加 } } とても簡単ですね！\n終わりに 以上のように、原因さえ分かれば簡単に警告を消す事が出来ました。\nお困りの際はぜひこのやり方を試してみてください♪\n","date":"2019-10-24T23:51:41+09:00","image":"/wp-content/uploads/2019/10/typeScriptConsoleErrorEye.png","permalink":"/2019/10/24/9585/","title":"【TypeScript】「Calls to 'console.error' are not allowed.」の警告が出た時の原因と解決方法まとめ【ビルドエラー】"},{"content":"Sitemapを作りたい 静的サイトを作成している際に、複数ページにまたがる場合はSitemapを作成する必要があります。\nサイトマップを使うと、ウェブマスターはサイト内のクロールされるページを検索エンジンに簡単に知らせることができます。 サイトマップは、最終アップロード日、通常の更新頻度、サイト内の他の URL との相対的な URL 優先度など、各 URL の詳細メタデータのほか、サイトの URL がリストされている簡単な形式の XML ファイルであるため、検索エンジンでより正確にサイトをクロールできます。\rsitemaps.org - プロトコル\nこのサイトマップですが、URLが少ない場合は手作業で作っても良いかもしれませんが、ページ数が増えたり動的にページが生成される場合は手動で管理するのは到底無理かつ無駄な作業といっても過言ではありません。\nそこで、今回はsitemap-generatorを使って自動生成してみようと思います。\nGenerates a sitemap by crawling your site. Uses streams to efficiently write the sitemap to your drive and runs asynchronously to avoid blocking the thread. Is cappable of creating multiple sitemaps if threshold is reached. Respects robots.txt and meta tags.sitemap-generator - npm\n手順 モジュールのインストール まずは例のごとく、モジュールをyarnにてインストールします。\nyarn add -D sitemap-generator yarn add v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 12 new dependencies. info Direct dependencies └─ sitemap-generator@8.4.1 info All dependencies ├─ async@2.6.1 ├─ cheerio@1.0.0-rc.2 ├─ cp-file@6.0.0 ├─ crypto-random-string@1.0.0 ├─ date-fns@1.29.0 ├─ mitt@1.1.3 ├─ nested-error-stacks@2.1.0 ├─ parse5@3.0.3 ├─ robots-parser@2.1.1 ├─ simplecrawler@1.1.8 ├─ sitemap-generator@8.4.1 └─ urijs@1.19.2 ✨ Done in 4.71s. 生成 まずはシンプルなsitemap.xmlを生成してみましょう。\n実行用のsitemap.jsを用意してみます。\nsitemap.js const SitemapGenerator = require(\u0026#34;sitemap-generator\u0026#34;); // option const option = {}; // create generator const generator = SitemapGenerator(\u0026#34;https://blogenist.com\u0026#34;, option); // register event listeners generator.on(\u0026#34;done\u0026#34;, () =\u0026gt; { // sitemaps created }); // start the crawler generator.start(); 実行 node sitemap.jsを実行すると、以下のようなファイルが生成されると思います。\nsitemap.xml \u0026lt;?xml version=\u0026#34;1.0\u0026#34; encoding=\u0026#34;utf-8\u0026#34; standalone=\u0026#34;yes\u0026#34; ?\u0026gt; \u0026lt;urlset xmlns=\u0026#34;http://www.sitemaps.org/schemas/sitemap/0.9\u0026#34;\u0026gt; \u0026lt;url\u0026gt; \u0026lt;loc\u0026gt;/\u0026lt;/loc\u0026gt; \u0026lt;/url\u0026gt; \u0026lt;url\u0026gt; \u0026lt;loc\u0026gt;/2019/10/19/9569/\u0026lt;/loc\u0026gt; \u0026lt;/url\u0026gt; \u0026lt;url\u0026gt; \u0026lt;loc\u0026gt;/2019/10/11/9457/\u0026lt;/loc\u0026gt; \u0026lt;/url\u0026gt; ... (略) ... \u0026lt;/urlset\u0026gt; SitemapGeneratorを生成する際に指定したURLを自動クローリングしてサイトマップを生成しているようですね。\n存在しないURLを指定するとエラー 存在しないURLを指定すると以下のようになります。\nエラーログ /Users/blogenist/node_modules/sitemap-generator/src/index.js:88 throw new Error(`Site \u0026#34;${parsedUrl.href}\u0026#34; could not be found.`); ^ Error: Site \u0026#34;https://hoge.blogenist.jp\u0026#34; could not be found. at Crawler.SitemapGenerator.crawler.on (/Users/blogenist/node_modules/sitemap-generator/src/index.js:88:13) at emitTwo (events.js:126:13) at Crawler.emit (events.js:214:7) at /Users/blogenist/node_modules/simplecrawler/lib/crawler.js:1282:25 at FetchQueue.update (/Users/blogenist/node_modules/simplecrawler/lib/queue.js:227:9) at ClientRequest.\u0026lt;anonymous\u0026gt; (/Users/blogenist/node_modules/simplecrawler/lib/crawler.js:1265:27) at emitOne (events.js:116:13) at ClientRequest.emit (events.js:211:7) at TLSSocket.socketErrorListener (_http_client.js:401:9) at emitOne (events.js:116:13) オプション 出力先の指定 sitemap.xmlはデフォルトでは実行ディレクトリに生成されます。\n今回はpublic配下に出力するように変えてみようと思います。\n[adsense-responsive]\rオプションにfilepathを追加します。\nsitemap.js const SitemapGenerator = require(\u0026#34;sitemap-generator\u0026#34;); // option const option = { filepath: \u0026#34;./public/sitemap.xml\u0026#34; // 追加 }; // create generator const generator = SitemapGenerator(\u0026#34;https://blogenist.com\u0026#34;, option); // register event listeners generator.on(\u0026#34;done\u0026#34;, () =\u0026gt; { // sitemaps created }); // start the crawler generator.start(); 確認 正しく出力先が変わっていることが確認出来ます。\ntree . -L 2 . ├── README.md ├── node_modules ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── sitemap.xml ├── sitemap.js └── yarn.lock 最終更新日時の追加 sitemap.xmlに最終更新日も入れてみましょう。\nオプションにlastModを追加します。\nsitemap.js const SitemapGenerator = require(\u0026#34;sitemap-generator\u0026#34;); // option const option = { filepath: \u0026#34;./public/sitemap.xml\u0026#34;, lastMod: true // 追加 }; // create generator const generator = SitemapGenerator(\u0026#34;https://blogenist.com\u0026#34;, option); // register event listeners generator.on(\u0026#34;done\u0026#34;, () =\u0026gt; { // sitemaps created }); // start the crawler generator.start(); 確認 こちらも正しくlastmodが追加されました。\nsitemap.xml \u0026lt;?xml version=\u0026#34;1.0\u0026#34; encoding=\u0026#34;utf-8\u0026#34; standalone=\u0026#34;yes\u0026#34; ?\u0026gt; \u0026lt;urlset xmlns=\u0026#34;http://www.sitemaps.org/schemas/sitemap/0.9\u0026#34;\u0026gt; \u0026lt;url\u0026gt; \u0026lt;loc\u0026gt;/\u0026lt;/loc\u0026gt; \u0026lt;lastmod\u0026gt;2019-10-20\u0026lt;/loc\u0026gt; \u0026lt;/url\u0026gt; \u0026lt;url\u0026gt; \u0026lt;loc\u0026gt;/2019/10/19/9569/\u0026lt;/loc\u0026gt; \u0026lt;lastmod\u0026gt;2019-10-19\u0026lt;/loc\u0026gt; \u0026lt;/url\u0026gt; \u0026lt;url\u0026gt; \u0026lt;loc\u0026gt;/2019/10/11/9457/\u0026lt;/loc\u0026gt; \u0026lt;lastmod\u0026gt;2019-10-11\u0026lt;/loc\u0026gt; \u0026lt;/url\u0026gt; ... (略) ... \u0026lt;/urlset\u0026gt; ドキュメントによるとこの値は、http-equiv=\"Last-Modified\"があればその値、なければ実行日が入るようです。\n終わりに Sitemapを作成する場合、手作業でやるのは大変なのでツールによる自動化はマストだと思います。\n今回はGoogleが推奨するタグのみを出力してみましたが、他にも様々なオプションがありますので、興味のある方はぜひ試して見てください♪\n","date":"2019-10-23T21:12:34+09:00","image":"/wp-content/uploads/2019/10/generateSitemapEye.png","permalink":"/2019/10/23/9591/","title":"【Node.js】npmモジュールの「sitemap-generator」でサイトマップの生成を自動化しよう【クローリング】"},{"content":"アイコンが出ない助けて！！！ 表示されない Quasarを使ってWebシステムやサイトを構築している際に、ドキュメントに「マテリアルアイコン以外にもFontAwesameやMDIなどをサポートしているよ！」という記載があったので使ってみようと思ったところ表示されませんでした。\nThe QIcon component allows you to easily insert icons within other components or any other area of your pages. Quasar currently supports: Material Icons , Font Awesome, Ionicons, MDI, Eva Icons and Themify Icons.Icon | Quasar Framework\nsrc/App.vue \u0026lt;template\u0026gt; \u0026lt;q-layout view=\u0026#34;lHh Lpr lFf\u0026#34;\u0026gt; \u0026lt;q-page-container\u0026gt; \u0026lt;div\u0026gt; \u0026lt;p\u0026gt; \u0026lt;span\u0026gt;マテリアルアイコン:\u0026lt;/span\u0026gt; \u0026lt;q-icon name=\u0026#34;thumb_up\u0026#34; /\u0026gt; \u0026lt;/p\u0026gt; \u0026lt;p\u0026gt; \u0026lt;span\u0026gt;FontAwesame:\u0026lt;/span\u0026gt; \u0026lt;q-icon name=\u0026#34;fas fa-ambulance\u0026#34; /\u0026gt; \u0026lt;/p\u0026gt; \u0026lt;p\u0026gt; \u0026lt;span\u0026gt;MDI:\u0026lt;/span\u0026gt; \u0026lt;q-icon name=\u0026#34;mdi-alert-circle-outline\u0026#34; /\u0026gt; \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/q-page-container\u0026gt; \u0026lt;/q-layout\u0026gt; \u0026lt;/template\u0026gt; なぜだ！！！\n原因 これは、Vue-CLIのプラグインとして、Quasarを導入する際の対話時にSelect featuresの項目で使用するアイコンを指定せずに生成すると、Choose Quasar Icon Setに指定したものしか読み込まれなくなってしまいます。\nvue add quasar 📦 Installing vue-cli-plugin-quasar... yarn add v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved 1 new dependency. info Direct dependencies └─ vue-cli-plugin-quasar@1.0.0 info All dependencies └─ vue-cli-plugin-quasar@1.0.0 ✨ Done in 6.21s. ✔ Successfully installed plugin: vue-cli-plugin-quasar ? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes ? Treeshake Quasar? (you\u0026#39;ll need to import the components, directives and plugins that you use yourself) Yes ? Use RTL support? No ? Choose Quasar Icon Set Material ? Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/quasar/lang en-us ? Select features: (Press \u0026lt;space\u0026gt; to select, \u0026lt;a\u0026gt; to toggle all, \u0026lt;i\u0026gt; to invert selection) ❯◉ IE11 support ◯ Roboto font ◯ Material icons ◯ Fontawesome icons ◯ Ionicons icons ◯ MDI icons ◯ Eva icons この際に全てにチェックを入れていれば、問題なく使用出来るのですが、後から追加するには、「quasar.conf.jsを作って記述をする必要があるよ！」と公式ドキュメントに書いてありましたが、別の方法でも簡単に実現出来たので今回はそちらをご紹介しようと思います。\n手順 前提 今回はVue-CLI3系によってプロジェクトにQuasarを導入していることを前提とします。\n以下の記事にて導入方法をご紹介しているので参考にしていただければなと思います。\n関連記事 【Vue.jsのUIフレームワーク】Electronアプリのデザインフレームワークに「Quasar」をインストール・導入する方法 2019/09/08 2008文字 約5分で読めます quasar.tsの修正 やり方はとても簡単で、src/quasar.tsに使いたいアイコンのcssファイルのimport文を追加するだけです。\n[adsense-responsive]\r各アイコンのモジュール自体はデフォルトでインストールされているようなので、yarnやnpmでインストールする必要は無さそうです。\ntree ./node_modules/@quasar/ -L 2 ./node_modules/@quasar/ └── extras ├── LICENSE ├── README.md ├── animate ├── eva-icons ├── fontawesome-v5 ├── ionicons-v4 ├── material-icons ├── material-icons-outlined ├── material-icons-round ├── material-icons-sharp ├── mdi-v3 ├── mdi-v4 ├── package.json ├── roboto-font ├── roboto-font-latin-ext └── themify 14 directories, 3 files 今回は、FontAwesameとマテリアルデザインアイコンを追加してみようと思います。\nsrc/quasar.ts import Vue from \u0026#34;vue\u0026#34;; import \u0026#34;./styles/quasar.styl\u0026#34;; import \u0026#34;quasar/dist/quasar.ie.polyfills\u0026#34;; import lang from \u0026#34;quasar/lang/ja.js\u0026#34;; import \u0026#34;@quasar/extras/roboto-font/roboto-font.css\u0026#34;; import \u0026#34;@quasar/extras/material-icons/material-icons.css\u0026#34;; import \u0026#34;@quasar/extras/fontawesome-v5/fontawesome-v5.css\u0026#34;; // 追加 import \u0026#34;@quasar/extras/mdi-v4/mdi-v4.css\u0026#34;;// 追加 ... (略) ... 確認 それではブラウザで再度確認してみましょう。\n無事に表示されるようになりましたね♪\n終わりに 以上のように、Vue-CLIを使ってQuasarを導入する際に使用するアイコンを最初から全て指定しておけば問題は無いのですが、後から追加するケースも多いにあると思います。\nそんな時は、上記の方法で試してみてください♪\n","date":"2019-10-19T18:32:05+09:00","image":"/wp-content/uploads/2019/10/quasarEnableIconEye.png","permalink":"/2019/10/19/9569/","title":"【Vue-CLI 3系】Quasarでアイコンが表示されない場合の原因と解決方法まとめ【マテリアルアイコン/FontAwesame/MDI】"},{"content":"多言語化を試してみた 来年の2020年には東京五輪が開幕、また日本の少子化による労働力不足などもあり、今後は日本に多くの外国人がなだれ込んでくると\n手順 vuex-i18nのインストール まずは以下のコマンドで必要なモジュールをインストールしましょう。\nyarn add vuex-i18n yarn add v1.17.3 warning ../package.json: No license field [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ vuex-i18n@1.13.1 info All dependencies └─ vuex-i18n@1.13.1 ✨ Done in 3.79s. 言語別メッセージファイルの用意 次に言語別のメッセージファイルを用意しましょう。\n[adsense-responsive]\r今回はよくある多言語化と同じように英語(en)と日本語(ja)ごとのjsonファイルを用意して管理してみようと思います。\nmessages.en.json { \u0026#34;hoge\u0026#34;: \u0026#34;fuga\u0026#34; } messages.ja.json { \u0026#34;hoge\u0026#34;: \u0026#34;ふが\u0026#34; } 階層化も可能 また、template側でfizz.bazzと言った形式で指定した場合、jsonファイル側では以下の両方でも取得が可能です。\nmessages.ja.json // フラット { \u0026#34;lang.ja\u0026#34;: \u0026#34;日本語\u0026#34;, \u0026#34;lang.en\u0026#34;: \u0026#34;英語\u0026#34; } // 構造 { \u0026#34;lang\u0026#34;: { \u0026#34;ja\u0026#34;: \u0026#34;日本語\u0026#34;, \u0026#34;en\u0026#34;: \u0026#34;英語\u0026#34; } } 出来れば構造化しておいた方がスッキリすると思います♪\nstoreにデフォルト言語を設定 次はstoreにデフォルトの設定を追加しましょう。\nsrc/store.js import Vue from \u0026#34;vue\u0026#34;; import Vuex from \u0026#34;vuex\u0026#34;; Vue.use(Vuex); export default new Vuex.Store({ state: { lang: \u0026#34;ja\u0026#34;//追加 }, mutations: {}, actions: {} }); i18.tsの作成 次に以下のファイルを作成してください。\nsrc/i18n.ts import Vue from \u0026#34;vue\u0026#34;; import vuexI18n from \u0026#34;vuex-i18n\u0026#34;; import store from \u0026#34;./store\u0026#34;; Vue.use(vuexI18n.plugin, store); const en = require(\u0026#34;./messages.en.json\u0026#34;); const ja = require(\u0026#34;./messages.ja.json\u0026#34;); Vue.i18n.add(\u0026#34;en\u0026#34;, en); Vue.i18n.add(\u0026#34;ja\u0026#34;, ja); Vue.i18n.set(store.state.lang); main.tsで読み込み 次は作成したi18n.tsをmain.tsから読み込んで実行するようにします。\nsrc/main.ts import Vue from \u0026#34;vue\u0026#34;; import App from \u0026#34;./App.vue\u0026#34;; import store from \u0026#34;./store\u0026#34;; import \u0026#34;./i18n\u0026#34;; // 追加 import \u0026#34;./registerServiceWorker\u0026#34;; import vuetify from \u0026#34;./plugins/vuetify\u0026#34;; Vue.config.productionTip = false; new Vue({ store, vuetify, render: h =\u0026gt; h(App) }).$mount(\u0026#34;#app\u0026#34;); template側の実装 では、実際に多言語出力する部分を用意していきましょう。\n[adsense-responsive]\rApp.vue \u0026lt;template lang=\u0026#34;pug\u0026#34;\u0026gt; #container p translate: {{ \u0026#34;hoge\u0026#34; | translate }} p $t: {{$t(\u0026#39;hoge\u0026#39;) }} ... (略) ... 出力の仕方は2種類あり、translateに引き渡す方法と$tに引き渡す方法です。\nstoreのlangをenにすると正常に英語に切り替わります。\n動的切り替え では、プルダウンの選択によって動的に切り替えるようにしてみましょう。\nApp.vue \u0026lt;template lang=\u0026#34;pug\u0026#34;\u0026gt; v-app v-app-bar(app=\u0026#39;\u0026#39;, color=\u0026#39;grey darken-4\u0026#39;, dark=\u0026#39;\u0026#39;) div.flex-grow-1 span {{$store.state.lang}} v-menu(right, bottom=\u0026#39;\u0026#39;) template(v-slot:activator=\u0026#34;{ on }\u0026#34;) v-btn(icon,v-on=\u0026#34;on\u0026#34;) i.material-icons language v-list v-list-item(key=\u0026#34;ja\u0026#34;,@click.prevent=\u0026#34;changeLang(\u0026#39;ja\u0026#39;)\u0026#34;) v-list-item-title JA v-list-item(key=\u0026#34;en\u0026#34;,@click.prevent=\u0026#34;changeLang(\u0026#39;en\u0026#39;)\u0026#34;) v-list-item-title EN v-content v-row(no-gutters=\u0026#34;\u0026#34;) v-col(cols=\u0026#34;4\u0026#34;) v-card.mx-auto v-card-text .text--primary p translate: {{ \u0026#34;hoge\u0026#34; | translate }} p $t: {{$t(\u0026#39;hoge\u0026#39;) }} \u0026lt;/template\u0026gt; \u0026lt;script lang=\u0026#34;ts\u0026#34;\u0026gt; import { Component, Vue } from \u0026#34;vue-property-decorator\u0026#34;; @Component({ components: {} }) export default class App extends Vue { changeLang(lang: string = \u0026#34;\u0026#34;) { this.$i18n.set(lang); this.$store.state.lang = lang; } } \u0026lt;/script\u0026gt; $i18n.setに渡す事で切り替えが可能です。\n確認 実際に動きを確認してみましょう。\n正常にシームレスな切り替えが実現出来ましたね♪\n終わりに 以上のように、vuex-i18nを使えば、Vuexプロジェクトに多言語化対応を簡単に導入する事が可能になります。\n多言語化をお考えの方は是非試してみてください♪\n","date":"2019-10-11T23:15:13+09:00","image":"/wp-content/uploads/2019/10/vuexI18nEye.png","permalink":"/2019/10/11/9457/","title":"【vuex-i18n】Vuexで多言語対応をする方法【簡単実装】"},{"content":"FishShellでエラー Command Substitutionが使えない？！ FishShellを使っている中で、shellによくある$(コマンド)...みたいな記述を実行しようとすると、以下のようなエラーが出ると思います。\n$(npm bin)/tsc index.ts fish: Command substitutions not allowed むむっ。\nFishShellでは、Command substitutionsは許可されていないらしいですね。\n詳細は以下の公式ページを見てみると良いでしょう。\nThe output of a series of commands can be used as the parameters to another command. If a parameter contains a set of parenthesis, the text enclosed by the parenthesis will be interpreted as a list of commands. On expansion, this list is executed, and substituted by the output. If the output is more than one line long, each line will be expanded to a new parameter. Setting IFS to the empty string will disable line splitting.fish: Documentation\nでは、どうすれば良いのでしょうか・・・orz\n対処方法 evalで解決 解決方法はとても簡単で$(コマンド)...となっている部分をeval (コマンド)...と変えることで同様の期待を得る事が出来ます。\nちなみに、evalの後には半角スペースが必要なので気をつけましょう。\n終わりに 以上のように、bashやzshで動いていた部分が動かなくなってしまう原因の一つとなっています。\nもしお困りの際は、こちらの方法を試してみてください♪\n","date":"2019-10-09T22:14:00+09:00","image":"/wp-content/uploads/2019/10/fishShellDoesntWorkEye.png","permalink":"/2019/10/09/9548/","title":"fishshellで「fish: Command substitutions not allowed」が出た場合の原因と解決方法【Command Substitution】"},{"content":"Listの順番を担保したMapを作りたい ソートされたListからMapを作ると順序が変わる Java8以降でstreamAPIを使い、ListオブジェクトからMapオブジェクトを生成したいというケースは良くあると思います。\n今回の例ではとてもシンプルなListオブジェクトですが、実際にはModelなどをListの要素として持つ形になると思います。\nそんな時に、すでにソートされたList(DBからの取得結果etc...)をstreamで回してMapオブジェクトにしようとする際に以下のような書き方をする場合が多いと思います。\nSample.java import java.util.Arrays; import java.util.List; import java.util.stream.Collectors; public class Sample { public static void main( String... args) { System.out.println(\u0026#34;=====List=====\u0026#34;); List\u0026lt;String\u0026gt; numberList = Arrays.asList(\u0026#34;One\u0026#34;,\u0026#34;Two\u0026#34;, \u0026#34;three\u0026#34;, \u0026#34;For\u0026#34;, \u0026#34;Five\u0026#34;, \u0026#34;Six\u0026#34;, \u0026#34;Seven\u0026#34;, \u0026#34;Eight\u0026#34;, \u0026#34;Nine\u0026#34;, \u0026#34;Ten\u0026#34;); numberList.stream() .forEach(System.out::println); System.out.println(\u0026#34;=====Map=====\u0026#34;); numberList.stream() .collect(Collectors.toMap( number -\u0026gt; number, number -\u0026gt; number ) ) .keySet() .forEach(System.out::println); } } しかし、この実装方法で作成したMapからkeySet()を呼び出してをさらにstreamでループ処理しようとした際に、Listの順序が担保されないMapオブジェクトが生成されてしまいます。\njava Sample =====List===== One Two three For Five Six Seven Eight Nine Ten =====Map===== Eight Five Six One Nine For Seven Ten Two three 原因 toMapを使う場合、引数にMapクラスを何も指定しないとHashMapクラスで生成されます。\n[adsense-responsive]\rそしてご存知の通りHashMapクラスは要素の一意性をkeyのハッシュ値で管理するので元々順序を保証してくれません。\n勘違いしやすいケース 以下のようなとてもシンプルなListの場合はぱっと見順序を保持していそうですが、たまたまハッシュ値と順序が一緒なだけなので、要素がオブジェクトになった途端順序がバラバラになってしまいます。\nSample.java import java.util.Arrays; import java.util.List; import java.util.TreeMap; import java.util.stream.Collectors; public class Sample { public static void main( String... args) { System.out.println(\u0026#34;=====List=====\u0026#34;); List\u0026lt;Integer\u0026gt; numberList = Arrays.asList(1,2,3,4,5,6,7,8,9,10); numberList.stream() .forEach(System.out::println); System.out.println(\u0026#34;=====Map=====\u0026#34;); numberList.stream() .collect(Collectors.toMap( number -\u0026gt; number, number -\u0026gt; number) ) .keySet() .forEach(System.out::println); } } java Sample =====List===== 1 2 3 4 5 6 7 8 9 10 =====Map===== 1 2 3 4 5 6 7 8 9 10 試しにリストをハッシュとは逆順にすると、、、、\nSample.java import java.util.Arrays; import java.util.List; import java.util.TreeMap; import java.util.stream.Collectors; public class Sample { public static void main( String... args) { System.out.println(\u0026#34;=====List=====\u0026#34;); List\u0026lt;Integer\u0026gt; numberList = Arrays.asList(10,9,8,7,6,5,4,3,2,1); numberList.stream() .forEach(System.out::println); System.out.println(\u0026#34;=====Map=====\u0026#34;); numberList.stream() .collect(Collectors.toMap( number -\u0026gt; number, number -\u0026gt; number) ) .keySet() .forEach(System.out::println); } } java Sample =====List===== 10 9 8 7 6 5 4 3 2 1 =====Map===== 1 2 3 4 5 6 7 8 9 10 はい残念。\n解決方法 なので、\rtoMap public static \u0026lt;T, K, U\u0026gt; Collector\u0026lt;T, ?, Map\u0026lt;K,U\u0026gt;\u0026gt; toMap(Function\u0026lt;? super T, ? extends K\u0026gt; keyMapper, Function\u0026lt;? super T, ? extends U\u0026gt; valueMapper) ではなく、\ntoMap public static \u0026lt;T, K, U, M extends Map\u0026lt;K, U\u0026gt;\u0026gt; Collector\u0026lt;T, ?, M\u0026gt; toMap(Function\u0026lt;? super T, ? extends K\u0026gt; keyMapper, Function\u0026lt;? super T, ? extends U\u0026gt; valueMapper, BinaryOperator\u0026lt;U\u0026gt; mergeFunction, Supplier\u0026lt;M\u0026gt; mapFactory) を使い、\u0010第四引数にてLinkedHashMapクラスを渡し、明示的に使用するMapクラス指定することで解決が可能となります。\nちなみに、LinkedHashMapクラスとは追加した順番を保持してくれる便利なMapクラスとなっています。\n今回は実際にこちらを使って追加した順番を担保するサンプルを作ってみようと思います。\n手順 collect関数の引数を修正 修正方法はとても簡単です。\n以下のようにCollectors.toMapの第三引数と第四引数を以下のように追加するだけでOKです。\n[adsense-responsive]\rSample.java import java.util.Arrays; import java.util.List; import java.util.LinkedHashMap; import java.util.stream.Collectors; public class Sample { public static void main( String... args) { System.out.println(\u0026#34;=====List=====\u0026#34;); List\u0026lt;String\u0026gt; numberList = Arrays.asList(\u0026#34;One\u0026#34;,\u0026#34;Two\u0026#34;, \u0026#34;three\u0026#34;, \u0026#34;For\u0026#34;, \u0026#34;Five\u0026#34;, \u0026#34;Six\u0026#34;, \u0026#34;Seven\u0026#34;, \u0026#34;Eight\u0026#34;, \u0026#34;Nine\u0026#34;, \u0026#34;Ten\u0026#34;); numberList.stream() .forEach(System.out::println); System.out.println(\u0026#34;=====Map=====\u0026#34;); numberList.stream() .collect(Collectors.toMap( number -\u0026gt; number, number -\u0026gt; number, (u, v) -\u0026gt; v, // 追加 LinkedHashMap::new // 追加 ) ) .keySet() .forEach(System.out::println); } } 確認 実行すると以下のような形になると思います。\njava Sample =====List===== One Two three For Five Six Seven Eight Nine Ten =====Map===== One Two three For Five Six Seven Eight Nine Ten 完璧ですね♪\nTreeMapでは怪しい LinkedHashMapではなく、TreeMapでもいけるという記事をいくつか見ましたので確かめてみました、。\nSample.java import java.util.Arrays; import java.util.List; import java.util.TreeMap; import java.util.stream.Collectors; public class Sample { public static void main( String... args) { System.out.println(\u0026#34;=====List=====\u0026#34;); List\u0026lt;String\u0026gt; numberList = Arrays.asList(\u0026#34;One\u0026#34;,\u0026#34;Two\u0026#34;, \u0026#34;three\u0026#34;, \u0026#34;For\u0026#34;, \u0026#34;Five\u0026#34;, \u0026#34;Six\u0026#34;, \u0026#34;Seven\u0026#34;, \u0026#34;Eight\u0026#34;, \u0026#34;Nine\u0026#34;, \u0026#34;Ten\u0026#34;); numberList.stream() .forEach(System.out::println); System.out.println(\u0026#34;=====Map=====\u0026#34;); numberList.stream() .collect(Collectors.toMap( number -\u0026gt; number, number -\u0026gt; number, (u, v) -\u0026gt; v, TreeMap::new ) ) .keySet() .forEach(System.out::println); } } java Sample =====List===== One Two three For Five Six Seven Eight Nine Ten =====Map===== Eight Five For Nine One Seven Six Ten Two three むむっ。\nTreeMapクラスは通常のHashMapクラスと同様にハッシュによる順序に自動ソートされるのでうまくいきませんでした。\nしかし、引数を渡さないtoMapと同様に、Listの値によってはうまく順序を保っているように見えてしまうので注意が必要です。\nSample.java import java.util.Arrays; import java.util.List; import java.util.TreeMap; import java.util.stream.Collectors; public class Sample { public static void main( String... args) { System.out.println(\u0026#34;=====List=====\u0026#34;); List\u0026lt;Integer\u0026gt; numberList = Arrays.asList(1,2,3,4,5,6,7,8,9,10); numberList.stream() .forEach(System.out::println); System.out.println(\u0026#34;=====Map=====\u0026#34;); numberList.stream() .collect(Collectors.toMap( number -\u0026gt; number, number -\u0026gt; number, (u, v) -\u0026gt; v, TreeMap::new ) ) .keySet() .forEach(System.out::println); } } java Sample =====List===== 1 2 3 4 5 6 7 8 9 10 =====Map===== 1 2 3 4 5 6 7 8 9 10 終わりに 以上のように簡単にList要素の順番に担保されたMapオブジェクトを生成することが可能になりました。\nお困りの方は、こちらのやり方を参考にしてみてください♪\n","date":"2019-10-07T23:50:00+09:00","image":"/wp-content/uploads/2019/10/java8SreamMapOrderEye.png","permalink":"/2019/10/07/9518/","title":"【Java8 Stream】ListをMapにした際に並び順が保証されない【LinkedHashMap】"},{"content":"DBはスネークケース、Entityはキャメルケースにしたい DBアクセスが伴うシステム等の実装をしている際に、設計方針によってはDB側のTableカラム名はスネークケース、Java側のEntityフィールド名はキャメルケースにしたい、という要望があります。\nこの際に、全てのEntityフィールドに\nAdminEntity.java @Column(name=:\u0026#34;admin_name\u0026#34;) private String adminName のようにしても良いが、フィールド数が多かったり変更する際に影響範囲が多かったりと課題は沢山あります。\n今回はHibernate5系を使っている際にPhysicalNamingStrategyStandardImplを継承して、共通処理としてスネークケースとキャメルケースをマッピング出来るようにしようと思います。\n手順 前提 今回は以下のような環境での作業とします。\nPoint\rHibernate: 5.1.0\rPlayFramework: 2.7\rMySQL: 5.7\rPhysicalNamingStrategyStandardImplの継承クラスの追加 まずは、org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImplを継承したカスタムクラスを実装します。\n[adsense-responsive]\rdb.sample.CustomNamingStrategy.java package db.sample; import org.hibernate.boot.model.naming.Identifier; import org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl; import org.hibernate.engine.jdbc.env.spi.JdbcEnvironment; import com.google.common.base.CaseFormat; public class CustomNamingStrategy extends PhysicalNamingStrategyStandardImpl { @Override public Identifier toPhysicalColumnName( final Identifier identifier, final JdbcEnvironment jdbcEnv) { return convertToSnakeCase(identifier); } private Identifier convertToSnakeCase(final Identifier identifier) { final String entityField = identifier.getText(); String formattedEntityField = CaseFormat.LOWER_CAMEL.to(CaseFormat.LOWER_UNDERSCORE, entityField); return Identifier.toIdentifier(formattedEntityField); } } 文字列をキャメルケースからスネークケースに変換するのは自前で行うとちょっとめんどくさいので、今回はGoogleが提供しているライブラリを利用しました。\nカラム名以外にも処理を追加する事が可能 org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl.javaを観てみると、他にもtoPhysicalSchemaNameやtoPhysicalTableNameメソッドがあるので、必要メソッドだけ@Overrideすれば処理を変える事が出来そうです。\norg.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl.java /* * Hibernate, Relational Persistence for Idiomatic Java * * License: GNU Lesser General Public License (LGPL), version 2.1 or later. * See the lgpl.txt file in the root directory or \u0026lt;http://www.gnu.org/licenses/lgpl-2.1.html\u0026gt;. */ package org.hibernate.boot.model.naming; import java.io.Serializable; import org.hibernate.engine.jdbc.env.spi.JdbcEnvironment; /** * Standard implementation of the PhysicalNamingStrategy contract. * * @author Steve Ebersole */ public class PhysicalNamingStrategyStandardImpl implements PhysicalNamingStrategy, Serializable { /** * Singleton access */ public static final PhysicalNamingStrategyStandardImpl INSTANCE = new PhysicalNamingStrategyStandardImpl(); @Override public Identifier toPhysicalCatalogName(Identifier name, JdbcEnvironment context) { return name; } @Override public Identifier toPhysicalSchemaName(Identifier name, JdbcEnvironment context) { return name; } @Override public Identifier toPhysicalTableName(Identifier name, JdbcEnvironment context) { return name; } @Override public Identifier toPhysicalSequenceName(Identifier name, JdbcEnvironment context) { return name; } @Override public Identifier toPhysicalColumnName(Identifier name, JdbcEnvironment context) { return name; } } hibernate.physical_naming_strategyの追加 次に、presistence.xmlのhibernate.physical_naming_strategyに上記のクラスを利用するようにプロパティを追加します。\n[adsense-responsive]\rconf/META-INF/persistence.xml \u0026lt;persistence xmlns=\u0026#34;http://xmlns.jcp.org/xml/ns/persistence\u0026#34; xmlns:xsi=\u0026#34;http://www.w3.org/2001/XMLSchema-instance\u0026#34; xsi:schemaLocation=\u0026#34;http://xmlns.jcp.org/xml/ns/persistence http://xmlns.jcp.org/xml/ns/persistence/persistence_2_1.xsd\u0026#34; version=\u0026#34;2.1\u0026#34;\u0026gt; \u0026lt;persistence-unit name=\u0026#34;defaultPersistenceUnit\u0026#34; transaction-type=\u0026#34;RESOURCE_LOCAL\u0026#34;\u0026gt; \u0026lt;provider\u0026gt;org.hibernate.jpa.HibernatePersistenceProvider\u0026lt;/provider\u0026gt; \u0026lt;non-jta-data-source\u0026gt;DefaultDS\u0026lt;/non-jta-data-source\u0026gt; \u0026lt;properties\u0026gt; \u0026lt;property name=\u0026#34;hibernate.dialect\u0026#34; value=\u0026#34;org.hibernate.dialect.MySQL5Dialect\u0026#34;/\u0026gt; \u0026lt;property name=\u0026#34;org.hibernate.flushMode\u0026#34; value=\u0026#34;COMMIT\u0026#34;/\u0026gt; \u0026lt;property name=\u0026#34;hibernate.physical_naming_strategy\u0026#34; value=\u0026#34;repositories.db.CustomNamingStrategy\u0026#34; /\u0026gt; \u0026lt;!-- 追加 --\u0026gt; \u0026lt;/properties\u0026gt; \u0026lt;/persistence-unit\u0026gt; \u0026lt;/persistence\u0026gt; これで@Columnアノテーションを使わなくても、DBのスネークケースのカラムをEntityのキャメルケースのフィールドに自動でマッピングするようになります。\n終わりに 以上のように、Hibernateを使っているのであれば便利なクラスや設定が存在します。\n同じような課題を抱えている方はぜひ試してみてください♪\n","date":"2019-10-06T22:33:38+09:00","image":"/wp-content/uploads/2019/10/playAndHibernateSnakeToCamelEye.png","permalink":"/2019/10/06/9357/","title":"【ImprovedNamingStrategyは廃止】スネークケースのDBカラムをキャメルケースのEntityフィールドにマッピングする方法【PhysicalNamingStrategyStandardImpl】"},{"content":"依存ライブラリでTypeScriptエラーが発生 TypeScriptを利用して開発をする際に、様々なライブラリを利用することになると思います。\nその際に、依存ライブラリ側でTypeScriptのエラーが出る事があります。\nエラー内容 ERROR in /Users/blogenist/sample/node_modules/canvas/types/index.d.ts 4:26 Cannot find module \u0026#39;stream\u0026#39;. 2 | /// \u0026lt;reference lib=\u0026#34;dom\u0026#34; /\u0026gt; 3 | \u0026gt; 4 | import { Readable } from \u0026#39;stream\u0026#39; | ^ 5 | 6 | export interface PngConfig { 7 | /** Specifies the ZLIB compression level. Defaults to 6. */ ERROR in /Users/blogenist/sample/node_modules/canvas/types/index.d.ts 90:41 Cannot find name \u0026#39;Buffer\u0026#39;. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig. 88 | * SVG. 89 | */ \u0026gt; 90 | toBuffer(cb: (err: Error|null, result: Buffer) =\u0026gt; void): void | ^ 91 | toBuffer(cb: (err: Error|null, result: Buffer) =\u0026gt; void, mimeType: \u0026#39;image/png\u0026#39;, config?: PngConfig): void 92 | toBuffer(cb: (err: Error|null, result: Buffer) =\u0026gt; void, mimeType: \u0026#39;image/jpeg\u0026#39;, config?: JpegConfig): void 今回の例でいうと、streamやBufferなど、Node.jsのコアモジュールに対するエラーです。\n自分で追加しているわけではないのでどうすれば良いのかと悩みがちですが、実はとても簡単にエラーを消す事が出来るのでやり方をご紹介します。\n手順 tsconfig.jsonのtypesに追加 解決方法は、tsconfig.jsonのcompilerOptions.typesに「node」を一行追加するだけです。\n[adsense-responsive]\rtsconfig.json { \u0026#34;compilerOptions\u0026#34;: { ... (略) ... \u0026#34;types\u0026#34;: [ \u0026#34;webpack-env\u0026#34;, \u0026#34;node\u0026#34; // 追加 ], ... (略) ... } たったこれだけでTypeScriptのコンパイルエラーが出なくなります。\n終わりに 以上のように一瞬で解決出来るエラーとなっています。\n同じような現象でお困りの方は是非こちらを試してみてください♪\n","date":"2019-10-05T23:31:59+09:00","image":"/wp-content/uploads/2019/10/TypeScriptBufferErrorEye.png","permalink":"/2019/10/05/9327/","title":"【TypeScript】streamやBufferのエラーが出る場合の対応方法【原因と解決方法】"},{"content":"大量のURLの画面キャプチャを自動化したい もはやキャプチャ保存は人間のやる作業ではない サイト開発等をしている場合、開発中の各画面のキャプチャを保存したいというケースがありますよね。\nしかし、人力でブラウザで全てのページを開いてキャプチャツールを使って保存、、、なんて作業をするのはとても骨が折れます。\nそんな時は、NightmareJSを使って自動化しちゃいましょう！\nnightmareとは？ NightmareJSとは、スクレイピングなどを行う際に多く利用されるPhantomJSという有名なヘッドレスブラウザをさらに扱いやすくしたラッパーツールです。\nA high-level browser automation library.\rNightmare\nPhantomJSを使うとこう書いていた部分が、\nPhantomJSの場合 phantom.create(function (ph) { ph.createPage(function (page) { page.open(\u0026#39;http://yahoo.com\u0026#39;, function (status) { page.evaluate(function () { var el = document.querySelector(\u0026#39;input[title=\u0026#34;Search\u0026#34;]\u0026#39;); el.value = \u0026#39;github nightmare\u0026#39;; }, function (result) { page.evaluate(function () { var el = document.querySelector(\u0026#39;.searchsubmit\u0026#39;); var event = document.createEvent(\u0026#39;MouseEvent\u0026#39;); event.initEvent(\u0026#39;click\u0026#39;, true, false); el.dispatchEvent(event); }, function (result) { ph.exit(); }); }); }); }); }); こうなる。\nNightmareJSの場合 yield Nightmare() .goto(\u0026#39;http://yahoo.com\u0026#39;) .type(\u0026#39;input[title=\u0026#34;Search\u0026#34;]\u0026#39;, \u0026#39;github nightmare\u0026#39;) .click(\u0026#39;.searchsubmit\u0026#39;); 神かよ！！！\nって事で早速使ってみました。\n手順 phantomjsのインストール nightmarejsはPhantomejsに依存しているのでまずはそちらをインストールします。\nyarn add -D phantomjs yarn add v1.17.3 warning package.json: No license field warning No license field [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. warning No license field success Saved 91 new dependencies. info Direct dependencies └─ phantomjs@2.1.7 info All dependencies ├─ ansi-styles@2.2.1 ├─ asn1@0.2.4 ├─ async@2.6.3 ├─ aws-sign2@0.6.0 ├─ balanced-match@1.0.0 ├─ bcrypt-pbkdf@1.0.2 ├─ bl@1.0.3 ├─ brace-expansion@1.1.11 ├─ caseless@0.11.0 ├─ chalk@1.1.3 ├─ combined-stream@1.0.8 ├─ commander@2.20.0 ├─ concat-map@0.0.1 ├─ concat-stream@1.5.0 ├─ core-util-is@1.0.2 ├─ cryptiles@2.0.5 ├─ dashdash@1.14.1 ├─ debug@0.7.4 ├─ delayed-stream@1.0.0 ├─ ecc-jsbn@0.1.2 ├─ escape-string-regexp@1.0.5 ├─ extend@3.0.2 ├─ extract-zip@1.5.0 ├─ extsprintf@1.3.0 ├─ fd-slicer@1.0.1 ├─ forever-agent@0.6.1 ├─ form-data@1.0.1 ├─ fs-extra@0.26.7 ├─ fs.realpath@1.0.0 ├─ generate-function@2.3.1 ├─ generate-object-property@1.2.0 ├─ getpass@0.1.7 ├─ glob@7.1.4 ├─ graceful-fs@4.2.2 ├─ har-validator@2.0.6 ├─ has-ansi@2.0.0 ├─ hasha@2.2.0 ├─ hawk@3.1.3 ├─ http-signature@1.1.1 ├─ inflight@1.0.6 ├─ inherits@2.0.4 ├─ is-my-ip-valid@1.0.0 ├─ is-my-json-valid@2.20.0 ├─ is-property@1.0.2 ├─ is-stream@1.1.0 ├─ is-typedarray@1.0.0 ├─ isarray@1.0.0 ├─ isexe@2.0.0 ├─ isstream@0.1.2 ├─ json-schema@0.2.3 ├─ json-stringify-safe@5.0.1 ├─ jsonfile@2.4.0 ├─ jsonpointer@4.0.1 ├─ jsprim@1.4.1 ├─ kew@0.7.0 ├─ klaw@1.3.1 ├─ lodash@4.17.15 ├─ mime-db@1.40.0 ├─ mime-types@2.1.24 ├─ minimatch@3.0.4 ├─ minimist@0.0.8 ├─ mkdirp@0.5.0 ├─ node-uuid@1.4.8 ├─ oauth-sign@0.8.2 ├─ pend@1.2.0 ├─ phantomjs@2.1.7 ├─ pinkie@2.0.4 ├─ process-nextick-args@1.0.7 ├─ progress@1.1.8 ├─ qs@5.2.1 ├─ readable-stream@2.0.6 ├─ request-progress@2.0.1 ├─ request@2.67.0 ├─ rimraf@2.7.1 ├─ safer-buffer@2.1.2 ├─ sntp@1.0.9 ├─ sshpk@1.16.1 ├─ string_decoder@0.10.31 ├─ stringstream@0.0.6 ├─ strip-ansi@3.0.1 ├─ supports-color@2.0.0 ├─ throttleit@1.0.0 ├─ tough-cookie@2.2.2 ├─ tunnel-agent@0.4.3 ├─ tweetnacl@0.14.5 ├─ typedarray@0.0.6 ├─ util-deprecate@1.0.2 ├─ verror@1.10.0 ├─ which@1.2.14 ├─ xtend@4.0.2 └─ yauzl@2.4.1 ✨ Done in 36.27s. NightmareJSのインストール 次にNightmareJSをインストールします。\nyarn add -D nightmare yarn add v1.17.3 warning package.json: No license field warning No license field [1/4] 🔍 Resolving packages... warning nightmare \u0026gt; electron \u0026gt; electron-download \u0026gt; nugget \u0026gt; progress-stream \u0026gt; through2 \u0026gt; xtend \u0026gt; object-keys@0.4.0: [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. warning No license field success Saved 85 new dependencies. info Direct dependencies └─ nightmare@3.0.2 info All dependencies ├─ @types/node@8.10.53 ├─ ajv@6.10.2 ├─ array-find-index@1.0.2 ├─ asynckit@0.4.0 ├─ aws4@1.8.0 ├─ buffer-from@1.1.1 ├─ camelcase-keys@2.1.0 ├─ camelcase@2.1.1 ├─ clone@1.0.4 ├─ code-point-at@1.1.0 ├─ commander@1.0.4 ├─ currently-unhandled@0.4.1 ├─ decamelize@1.2.0 ├─ deep-defaults@1.0.5 ├─ deep-extend@0.6.0 ├─ defaults@1.0.3 ├─ electron-download@3.3.0 ├─ electron@2.0.18 ├─ enqueue@1.0.2 ├─ error-ex@1.3.2 ├─ es6-promise@4.2.8 ├─ fast-deep-equal@2.0.1 ├─ fast-json-stable-stringify@2.0.0 ├─ find-up@1.1.2 ├─ function-source@0.1.0 ├─ har-schema@2.0.0 ├─ home-path@1.0.6 ├─ hosted-git-info@2.8.4 ├─ indent-string@2.1.0 ├─ ini@1.3.5 ├─ is-arrayish@0.2.1 ├─ is-finite@1.0.2 ├─ is-fullwidth-code-point@1.0.0 ├─ is-utf8@0.2.1 ├─ jsesc@0.5.0 ├─ json-schema-traverse@0.4.1 ├─ keypress@0.1.0 ├─ load-json-file@1.1.0 ├─ loud-rejection@1.6.0 ├─ map-obj@1.0.1 ├─ meow@3.7.0 ├─ minimist@1.2.0 ├─ minstache@1.2.0 ├─ mkdirp@0.5.1 ├─ ms@2.0.0 ├─ multiline@1.0.2 ├─ nightmare@3.0.2 ├─ normalize-package-data@2.5.0 ├─ nugget@2.0.1 ├─ object-assign@4.1.1 ├─ object-keys@0.4.0 ├─ parse-json@2.2.0 ├─ path-exists@2.1.0 ├─ path-parse@1.0.6 ├─ path-type@1.1.0 ├─ performance-now@2.1.0 ├─ pretty-bytes@1.0.4 ├─ progress-stream@1.2.0 ├─ psl@1.4.0 ├─ punycode@1.4.1 ├─ rc@1.2.8 ├─ read-pkg-up@1.0.1 ├─ read-pkg@1.1.0 ├─ redent@1.0.0 ├─ repeating@2.0.1 ├─ resolve@1.12.0 ├─ safe-buffer@5.1.2 ├─ semver@5.7.1 ├─ signal-exit@3.0.2 ├─ single-line-log@1.1.2 ├─ sliced@1.0.1 ├─ spdx-correct@3.1.0 ├─ spdx-exceptions@2.2.0 ├─ speedometer@0.1.4 ├─ split2@2.2.0 ├─ string-width@1.0.2 ├─ strip-bom@2.0.0 ├─ strip-indent@1.0.1 ├─ strip-json-comments@2.0.1 ├─ sumchecker@1.3.1 ├─ through2@2.0.5 ├─ trim-newlines@1.0.0 ├─ uri-js@4.2.2 ├─ uuid@3.3.3 └─ validate-npm-package-license@3.0.4 ✨ Done in 93.50s. スクリーンショットを保存 まずは試しに、Googleで検索した結果をキャプチャ保存するスクリプトを書いてみます。\n[adsense-responsive]\rsample.js const Nightmare = require(\u0026#39;nightmare\u0026#39;) const nightmare = Nightmare({ show: true})// ブラウザの設定 nightmare .goto(\u0026#39;https://google.com\u0026#39;) // 表示するURL .type(\u0026#39;input[type=text]\u0026#39;, \u0026#39;blogenist\u0026#39;) //タイピング対象のセレクタと入力値 .click(\u0026#39;input[name=btnK]\u0026#39;)// クリック対象のセレクタ .wait(\u0026#39;#resultStats\u0026#39;) // 表示されるまで待つセレクタ .screenshot(\u0026#34;./sample.png\u0026#34;) // キャプチャの保存設定 .end() // 終了 .catch(error =\u0026gt; { console.error(\u0026#39;Search failed:\u0026#39;, error) }) また、yarnで簡単に起動するためにpackage.jsonのscriptsに以下の起動スクリプトを追記しておきます。\npackage.json { \u0026#34;scripts\u0026#34;: { \u0026#34;capture\u0026#34;: \u0026#34;node ./capture.js\u0026#34; // 追加 }, \u0026#34;devDependencies\u0026#34;: { \u0026#34;nightmare\u0026#34;: \u0026#34;^3.0.2\u0026#34;, \u0026#34;phantomjs\u0026#34;: \u0026#34;^2.1.7\u0026#34; }, \u0026#34;dependencies\u0026#34;: {} } 確認 では、実際にyarn captureで起動してみましょう。\n正しく検索操作とキャプチャ保存も出来ていますね♪\n複数画面を自動キャプチャ保存 では、応用として複数画面のキャプチャを自動で保存してみましょう。\n今回は、config.jsonというファイルにキャプチャしたいページを管理し、ループ処理で自動保存する形式にしようと思います。\nconfig.json { \u0026#34;pages\u0026#34;: [ { \u0026#34;name\u0026#34;: \u0026#34;ページ1\u0026#34;, \u0026#34;url\u0026#34;: \u0026#34;/2019/09/09/9157/\u0026#34; }, { \u0026#34;name\u0026#34;: \u0026#34;ページ2\u0026#34;, \u0026#34;url\u0026#34;: \u0026#34;/2019/09/08/9128/\u0026#34; }, { \u0026#34;name\u0026#34;: \u0026#34;ページ3\u0026#34;, \u0026#34;url\u0026#34;: \u0026#34;/2019/09/06/9121/\u0026#34; } ] } sample.js const Nightmare = require(\u0026#39;nightmare\u0026#39;) const fs = require(\u0026#39;fs\u0026#39;); const config = require(\u0026#39;./config.json\u0026#39;); config.pages.forEach((page) =\u0026gt; { const nightmare = Nightmare({ show: false,width: 1920}) const dist = `./dist/${page.name}/`; const fileName = `${page.name}.png`; if (!fs.existsSync(dist)) { fs.mkdirSync(dist); } nightmare .goto(page.url) .wait(1000) .screenshot(`${dist}/${fileName}`) .end() // 終了 .catch(error =\u0026gt; { console.error(\u0026#39;Search failed:\u0026#39;, error) }) }); レスポンシブも対応 さらに以下のようにデバイス情報を追記し、\n[adsense-responsive]\rconfig.json { \u0026#34;pages\u0026#34;: [ { \u0026#34;name\u0026#34;: \u0026#34;ページ1\u0026#34;, \u0026#34;url\u0026#34;: \u0026#34;/2019/09/09/9157/\u0026#34; }, { \u0026#34;name\u0026#34;: \u0026#34;ページ2\u0026#34;, \u0026#34;url\u0026#34;: \u0026#34;/2019/09/08/9128/\u0026#34; }, { \u0026#34;name\u0026#34;: \u0026#34;ページ3\u0026#34;, \u0026#34;url\u0026#34;: \u0026#34;/2019/09/06/9121/\u0026#34; } ], \u0026#34;devices\u0026#34;: [ { \u0026#34;name\u0026#34;: \u0026#34;PC\u0026#34;, \u0026#34;width\u0026#34;: 1920, \u0026#34;height\u0026#34;: 1080 }, { \u0026#34;name\u0026#34;: \u0026#34;Tablet\u0026#34;, \u0026#34;width\u0026#34;: 768, \u0026#34;height\u0026#34;: 1024 } ] } sample.js const Nightmare = require(\u0026#39;nightmare\u0026#39;) const fs = require(\u0026#39;fs\u0026#39;); const config = require(\u0026#39;./config.json\u0026#39;); config.devices.forEach((device) =\u0026gt; { config.pages.forEach((page) =\u0026gt; { const nightmare = Nightmare({ show: false,width: device.width, height: device.height}) const dist = `./dist/${page.name}/`; const fileName = `${device.name}-${page.name}.png`; if (!fs.existsSync(dist)) { fs.mkdirSync(dist); } nightmare .goto(page.url) .wait(1000) .screenshot(`${dist}/${fileName}`) .end() }) }); }); ネストループする事で一気に2端末分のレスポンシブデザインの確認をするためのキャプチャも取れてしまいます・・・！\nかなり便利です！！！\nスクロール領域のキャプチャ 次は縦スクロールが発生する画面のキャプチャを撮ってみましょう。\n[adsense-responsive]\rsample.js const Nightmare = require(\u0026#39;nightmare\u0026#39;) const fs = require(\u0026#39;fs\u0026#39;); const config = require(\u0026#39;./config.json\u0026#39;); config.pages.forEach((page) =\u0026gt; { const nightmare = Nightmare({ show: false,width: device.width, height: device.height}) const dist = `./dist/${page.name}/`; const fileName = `${device.name}-${page.name}.png`; if (!fs.existsSync(dist)) { fs.mkdirSync(dist); } nightmare .goto(page.url) .wait(1000) .evaluate(() =\u0026gt; { return { width: document.body.scrollWidth, height: document.body.scrollHeight }; }) .then(({ width, height }) =\u0026gt; { nightmare.viewport(width, height); }) .then(() =\u0026gt; { nightmare.screenshot(`${dist}/${fileName}`) .end() .catch(error =\u0026gt; { console.error(\u0026#39;Search failed:\u0026#39;, error) }) }) }); 確認 正常にスクロールが発生する画面でも全体のキャプチャが取れました。\n終わりに 以上のように、簡単に画面キャプチャを撮る事が出来ました。\nたくさんの画面キャプチャを取らないといけない場合は、あらかじめ導入しておくととても便利ですので是非試して見てください♪\n","date":"2019-10-04T23:27:30+09:00","image":"/wp-content/uploads/2019/10/nightmareJsInstallEye.png","permalink":"/2019/10/04/9187/","title":"【サイトキャプチャ自動化】NightmareJSを使って大量の画面のキャプチャを自動で保存しよう【PhantomJS】"},{"content":"CanvasのtoDataUrlでコンパイルエラー TypeScriptを使ったプロジェクトの中でcanvasのtoDataUrlメソッドやtoDataURLメソッドを使用すると、以下のようなエラーが発生する事があると思います。\nエラーログ 210:31 Property \u0026#39;getContext\u0026#39; does not exist on type \u0026#39;HTMLElement\u0026#39;. 208 | qrCodeImg.onload = () =\u0026gt; { 209 | const canvas = document.getElementById(\u0026#34;canvas\u0026#34;); \u0026gt; 210 | const ctx: any = canvas.getContext(\u0026#34;2d\u0026#34;); エラーログ 212:32 Object is possibly \u0026#39;null\u0026#39;. 210 | const ctx: any = canvas.getContext(\u0026#34;2d\u0026#34;); 211 | ctx.drawImage(qrCodeImg, 0, 0, size, size); \u0026gt; 212 | this.qrCodeOnlyPngData = canvas.toDataURL(\u0026#34;image/png\u0026#34;); このままだとコンパイルエラーのため、CIで止まってしまうので解決する必要があります。\n原因 これは、canvas要素を取得した際の戻り値の型を明示的に指定する必要があります。\nダメな例 const canvas = document.getElementById(\u0026#34;canvas\u0026#34;); // これだとダメ 解決方法 解決方法は2種類あります。\nasを使って型を定義 まず一つ目はasを使ってType assertions (キャスト)を行う方法です。\n[adsense-responsive]\rasを利用 const canvas = document.getElementById(\u0026#34;canvas\u0026#34;) as HTMLCanvasElement; キャストを行う 二つ目はジェネリックを使う方法です。\nキャストを行う const canvas = \u0026lt;HTMLCanvasElement\u0026gt;document.getElementById(\u0026#34;canvas\u0026#34;); 型定義だけではダメ 変数を定義する際に型を指定すれば良いのでは？とTypeScript初心者の筆者は思いましたが、それではダメでした。\nダメな例 const canvas: HTMLCanvasElement = document.getElementById(\u0026#34;canvas\u0026#34;); その場合はasかcastと併用しなければいけないので、直接的な解決策ではなさそうですね。\n良い例 const canvas: HTMLCanvasElement = document.getElementById( \u0026#34;canvas\u0026#34;) as HTMLCanvasElement; 終わりに 以上のように、ややはまりがちなTypeScriptのエラーです。\nお困りの方は是非試してみてください♪\n","date":"2019-10-03T23:02:52+09:00","image":"/wp-content/uploads/2019/10/canvasTypeScriptErrorEye.png","permalink":"/2019/10/03/9446/","title":"【Canvas】Property 'toDataURL' does not exist on type 'HTMLElement'.の原因と対処方法【TypeScript】"},{"content":"アプリインストール数を集計しよう 前回の記事では、PWAアプリのインストール用のボタンを配置して意図的にインストールを行えるようにしました。\n関連記事 【ボタン配置】PWAアプリのインストールダイアログをJavaScriptで制御しよう【beforeinstallprompt】 2019/09/29 619文字 約2分で読めます 今回は、実際にインストールされたPWAアプリ数をGoogleAnalytics上で集計出来るようにスクリプトにサクッと手を加えたいと思います。\n手順 gaのevent処理を追加 作業はとても簡単です。\n前回紹介したスクリプトに以下のような追加をするだけでOKです。\n[adsense-responsive]\rPWAインストール関数 function pwaInstall() { console.log(\u0026#39;pwaInstall Click.\u0026#39;); ga(\u0026#39;send\u0026#39;, \u0026#39;event\u0026#39;, \u0026#39;pwa\u0026#39;, \u0026#39;click\u0026#39;, \u0026#39;installBtn\u0026#39;, 1); // 追加 if (defferedPrompt) { defferedPrompt.prompt(); defferedPrompt.userChoice.then(function(choiceResult) { if (choiceResult.outcome === \u0026#39;dismissed\u0026#39;) { ga(\u0026#39;send\u0026#39;, \u0026#39;event\u0026#39;, \u0026#39;pwa\u0026#39;, \u0026#39;cancel\u0026#39;, \u0026#39;installBtn\u0026#39;, 1);// 追加 } else { window.alert(\u0026#39;Thank You!\u0026#39;); ga(\u0026#39;send\u0026#39;, \u0026#39;event\u0026#39;, \u0026#39;pwa\u0026#39;, \u0026#39;install\u0026#39;, \u0026#39;installBtn\u0026#39;, 1); // 追加 } }); defferedPrompt = null; } } 3箇所ともgaのイベントに送信しているだけです。\n今回は、PWAインストールボタンのクリック、インストール、キャンセルの3イベントを送信するようにしてみました。\n確認 では、実際にタップしてから、GoogleAnalyticsを見てみましょう。\n正常に送信出来ていますね♪\n終わりに 以上のように簡単にPWAのインストール数をGoogleAnalyticsで集計する事が可能になりました。\nGooglePlayやAppleStoreを介していないので、このGoogleAnalytics上での集計は貴重なデータになりますので、忘れずに仕込んでおきましょう。\n","date":"2019-10-02T22:05:27+09:00","image":"/wp-content/uploads/2019/10/pwaGoogleAnalyticsEye.png","permalink":"/2019/10/02/9437/","title":"【PWA】アプリのインストールイベントをGoogleAnalyticsに送信しよう【ビッグデータ】"},{"content":"PWAのインストールボタンを配置しよう 先日、WebサイトのPWA化についてご紹介しました。\n関連記事 【30分でPWA化】Progressive Web Appsの概要とサイトのPWA対応のやり方まとめ【ServiceWorker】 2019/09/28 3540文字 約8分で読めます ただ、何も設定していないと、初回訪問時にインストールダイアログが出現しますが、ここでインストールを行わないとこのダイアログが当分出てこなくなってしまいます。\rそれだと、かなり使い勝手が悪いので、今回は自動で表示されるインストールダイアログを制御し、ボタンを押したタイミングでインストールを行うようにJavaScriptを使って改修してみようと思います。\n手順 beforeinstallpromptイベントの制御 今回はbeforeinstallpromptというイベントをJavaScriptで制御すれば実現出来そうです。\n以下の記述をheadタグに追記してください\n[adsense-responsive]\rindex.htlm \u0026lt; head \u0026gt; ... (略) ... // イベントを発火させずに保持 window.addEventListener(\u0026#39;beforeinstallprompt\u0026#39;, function(event) { event.preventDefault(); defferedPrompt = event; return false; }) // イベントを意図的に発火 function pwaInstall() { console.log(\u0026#39;pwaInstall Click.\u0026#39;); if (defferedPrompt) { defferedPrompt.prompt(); defferedPrompt.userChoice.then(function(choiceResult) { if (choiceResult.outcome === \u0026#39;dismissed\u0026#39;) { console.log(\u0026#39;pwaInstall Click.\u0026#39;); } else { window.alert(\u0026#39;Thank You!\u0026#39;); } }); defferedPrompt = null; } } ... (略) ... スクリプト自体はこれだけです。\nあとはbutton要素等にonclick='pwaInstall()'を入れるなどして実行させる導線を用意しましょう。\n確認 では実際に確認してみましょう。\n無事に、ボタンを押すことで期待通りの制御が出来ましたね♪\n終わりに 以上のように、意外と簡単にPWAアプリのインストール導線を用意する事が出来ました。\nPWA化するのであれば、間違いなく必要な作業だと思いますのでぜひ試してみてください♪\n","date":"2019-09-29T00:32:33+09:00","image":"/wp-content/uploads/2019/09/pwaInstallButtonEye.png","permalink":"/2019/09/29/9424/","title":"【ボタン配置】PWAアプリのインストールダイアログをJavaScriptで制御しよう【beforeinstallprompt】"},{"content":"Progressive Web Apps What\u0026rsquo;s? 皆さんは「PWA」という言葉をご存知でしょうか？\nPWAとは、「Progressive Web Apps」の略称で、モバイル向けのWebサイトをGooglePlayストアなどで配信されているスマートフォン向けアプリのように扱えるようにする仕組みです。\nプログレッシブウェブアプリは、デスクトップとモバイルの両方でインストール可能なアプリと同等の体験を提供し、ウェブ上で直接構築・配信される高速で信頼性の高いウェブアプリです。はじめてのプログレッシブウェブアプリ | Web Fundamentals | Google Developers\nPWAという仕組み自体は新しい技術といったわけではなく、以前からGoogleが推奨していた言われていたレスポンシブデザインやHTTPS対応、Service WorkerなどのブラウザAPIを対応しているWebサイトの事を指します。\nAMPと似ている また、同じような仕組みとしてAMP(Accelerated Mobile Pages)が挙げられます。\nAccelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトであるAccelerated Mobile Pages - Wikipedia\nPWAはWEBページを使ってネイティブアプリのようなUXを実現する仕組み、AMPはWEBページを高速化するための仕組み、と覚えると分かりやすいでしょう。\nどうすればPWAサイトになるの？ PWAサイトを実現するにはレスポンシブ対応やHTTPS化、ServiceWorker.jsとmanifest.jsonを配置する必要があります。\n何が出来る？ では、PWAに対応したWebサイトにする事でどんなメリットがあるのでしょうか？\n[adsense-responsive]\r簡単に比較するとこんな感じです。\n機能\rWebサイト\rPWA\rモバイルアプリ\rオフライン読み込み\r×\r◯\r◯\rアプリストア公開\r×\r×\r◯\rレスポンシブ対応\r◯\r◯\r◯\r検索エンジン\r◯\r◯\r×\rローカル通知\r×\r◯\r◯\rプッシュ通知\r×\r◯\r◯\rプッシュ通知 なんとネイティブアプリではないのにPUSH通知を実現する事が可能になります。\n通常のWebサイトの場合はユーザーがアクセスしてくれないといけなかったところを、サイト運営者側からのアクションによる集客が可能になります。\nホーム画面へのアイコン追加 スマートフォン端末のホーム画面に専用アイコンを使って設置できるため、通常のスマートフォンアプリのような感じで利用してもらう事が出来ます。\nPWA対応していないサイトもホーム画面にお気に入り登録する事が出来ますが、その際はWebサイトのfaviconとChromeのlogoが混じったアイコンになります。\n一方で、PWA対応を行なっているサイトをホーム画面にお気に入り登録すると、manifest.jsonで指定したアプリアイコンを利用出来るのでぱっと見では通常のスマートフォンアプリのように見えます。\nスプラッシュ画像を挿入可能 PWAサイトのアイコンをタッチして起動する際に、簡単なスプラッシュスクリーンも設定できます。\nそのため、よりスマートフォンアプリのような動きを行う事が可能になります。\nURLバー非表示 PWAサイトのアイコンから起動すると、ブラウザでの起動と異なりURLバーが非表示になりネイティブアプリに近いUIが実現出来ます。/p\u003e\rアプリ申請不要 GooglePlayやAppleStoreでの配信ではないので、特に申請等の作業は必要ないので、すぐに公開する事が可能になります。\nPWAサイト公開=リリースということになりますね。\nOSごとの実装不要 通常のネイティブアプリの場合は、iOS向けの開発とAndroid向けの開発を行う必要があります。\nしかし、PWAであれば中身はWebサイトなのでOSに依存する事はないので開発コストもかなり下がります。\nインストールの必要がない 通常のアプリケーションだと端末へのインストールの必要がありますが、基本的にはアイコン/タイトル/URL程度しか端末側で保存しないので、軽量かつスピーディーです。\nキャッシュの利用 こちらもServiceWorkerの機能ですが、強力なキャッシュ機能により表示速度の向上が測れます。\nまた、一度キャッシュしておけばオフライン時にもサイトを閲覧する事が可能になるとのことです。\nとはいえデメリットもある メリットだけを見るととても良さそうですが、デメリットもあります。\n自由度が低い 元はWebサイトなので、ネイティブアプリのような細かい動きや制御は出来ません。\nあくまでWebサイトで実現出来る事の範疇になります。\niOSの対応が遅れ気味 PWAはGoogleが推奨している仕組みのため、Android端末はかなりサポートされていますが、iOS端末はまだPWAでも実現出来ない機能が多少あるとのことです。\nとはいえ、少しずつ対応されてきているのでいずれは完全にサポートされると思います。\n実際に当サイトをPWA対応してみた やはり、開発者としては気になる技術なので、せっかくなので本ブログをPWA対応してみたので手順をご紹介致します。\n思っていたより簡単で30分ほどで実現出来ました！\nAMP対応よりとても簡単です♪\n手順 前提 PWA対応するには以下の準備をしておきましょう。\rPoint\rサイトのHTTPS化\rサイトのレスポンシブ化\r512x512サイズの透過アイコン画像\rWeb App Manifest Generatorで関連ファイルの作成 まずは必要なmanifest.jsonとアイコン画像を準備します。\n[adsense-responsive]\r自分で作成しても良いのですが、Firebaseが便利なツールを用意してくれているので、今回はそちらを使おうと思います。\nThe Web App Manifest is a JSON document that provides application metadata for Progressive Web Apps. Use the form below to generate the JSON file and optionally upload an app icon.App Manifest Generator\n必要事項を入力し、あらかじめ準備しておいたアイコン画像を選択してGENERATE ZIPボタンをクリックしましょう。\nダウンロードしたZIPを解凍すると以下のような構成になっていると思います。\n生成ファイル app-images ├── images │ └── icons │ ├── icon-128x128.png │ ├── icon-144x144.png │ ├── icon-152x152.png │ ├── icon-192x192.png │ ├── icon-384x384.png │ ├── icon-512x512.png │ ├── icon-72x72.png │ └── icon-96x96.png └── manifest.json manifest.json { \u0026#34;name\u0026#34;: \u0026#34;Blogenist -ブロゲニスト- \u0026#34;, \u0026#34;theme_color\u0026#34;: \u0026#34;#993333\u0026#34;, \u0026#34;background_color\u0026#34;: \u0026#34;#333333\u0026#34;, \u0026#34;display\u0026#34;: \u0026#34;standalone\u0026#34;, \u0026#34;orientation\u0026#34;: \u0026#34;portrait\u0026#34;, \u0026#34;Scope\u0026#34;: \u0026#34;/\u0026#34;, \u0026#34;start_url\u0026#34;: \u0026#34;/?utm_source=pwa\u0026#34;, \u0026#34;icons\u0026#34;: [ { \u0026#34;src\u0026#34;: \u0026#34;images/icons/icon-72x72.png\u0026#34;, \u0026#34;sizes\u0026#34;: \u0026#34;72x72\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;image/png\u0026#34; }, { \u0026#34;src\u0026#34;: \u0026#34;images/icons/icon-96x96.png\u0026#34;, \u0026#34;sizes\u0026#34;: \u0026#34;96x96\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;image/png\u0026#34; }, { \u0026#34;src\u0026#34;: \u0026#34;images/icons/icon-128x128.png\u0026#34;, \u0026#34;sizes\u0026#34;: \u0026#34;128x128\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;image/png\u0026#34; }, { \u0026#34;src\u0026#34;: \u0026#34;images/icons/icon-144x144.png\u0026#34;, \u0026#34;sizes\u0026#34;: \u0026#34;144x144\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;image/png\u0026#34; }, { \u0026#34;src\u0026#34;: \u0026#34;images/icons/icon-152x152.png\u0026#34;, \u0026#34;sizes\u0026#34;: \u0026#34;152x152\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;image/png\u0026#34; }, { \u0026#34;src\u0026#34;: \u0026#34;images/icons/icon-192x192.png\u0026#34;, \u0026#34;sizes\u0026#34;: \u0026#34;192x192\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;image/png\u0026#34; }, { \u0026#34;src\u0026#34;: \u0026#34;images/icons/icon-384x384.png\u0026#34;, \u0026#34;sizes\u0026#34;: \u0026#34;384x384\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;image/png\u0026#34; }, { \u0026#34;src\u0026#34;: \u0026#34;images/icons/icon-512x512.png\u0026#34;, \u0026#34;sizes\u0026#34;: \u0026#34;512x512\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;image/png\u0026#34; } ], \u0026#34;splash_pages\u0026#34;: null } start_urlを/?utm_source=pwaにしているのは、PWA経由の流入をGoogleAnalytics上で集計するためにクエリを付与しています。\nServiceWorker.jsの作成 次に、ServiceWorker.jsを用意しましょう。\nプッシュ通知やキャッシュを使ったオフライン通信を実現するには、色々と実装をしないといけませんが、今回はPWAとしてホームに追加するためだけの最小限の内容にします。\nserviceWorker.js self.addEventListener(\u0026#39;fetch\u0026#39;, function(){}); ルートディレクトリに配置 各種ファイルの用意が出来たら、manifest.json/imagesディレクトリ/serviceWorker.jsをルートディレクトリに配置しましょう。\nディレクトリ構造 . ... (略) ... ├── images ├── manifest.json └── serviceWorker.js headタグにPWA化の記述を追加 次に、headタグ内にPWA化のための記述を追記します。\nindex.html ... (略) ... \u0026lt;head\u0026gt; \u0026lt;!-- PWA --\u0026gt; \u0026lt;link rel=\u0026#34;manifest\u0026#34; href=\u0026#34;/manifest.json\u0026#34;\u0026gt; \u0026lt;script\u0026gt; if(\u0026#39;serviceWorker\u0026#39; in navigator){ navigator.serviceWorker.register(\u0026#39;/serviceWorker.js\u0026#39;).then(function(){ console.log(\u0026#34;Service Worker Registered\u0026#34;); }); } \u0026lt;/script\u0026gt; ... (略) ... \u0026lt;/head\u0026gt; これは、manifest.jsonの読み込みと、serviceWorkderの初期化の指定となります。\n確認 それでは実際にブラウザでアクセスして確認してみましょう。\nmanifest.json 開発者ツールを開き、Applicationタブを開くと、Manifestメニューにmanifest.jsonの指定が反映されている事が確認出来ますね。\n[adsense-responsive]\rserviceWorker.js 同じく開発者ツールを開き、Consoleタブを開くとServiceWorkerの初期化ログが出力されています。\nホームに追加 では、実際にスマートフォン端末で確認しましょう。\nサイトにアクセスすると、スネークバーで以下のようなナビゲーションが出ると思います。\n無事にホームに追加出来ました。\n通常のサイトアイコンとは違い、オリジナルのアイコンが使えるので良い感じですね♪\n一応、通知バーにも出ています。\nちなみに、背景は白固定っぽいのでアイコン画像には白を使わない方が良いと思います。\n実際の動き では、PWAを起動しましょう。\nアプリアイコンをタップすると、スプラッシュ画面が起動したのちにページが表示されます。\ntheme_colorに指定したカラーが通知バーに適用されています。\nブラウザアプリとは違い、URLバーが非表示となっているのでネイティブアプリ感がありますね♪\nアプリとしてもしっかりと独立しています。\nGoogleAnalyticで確認 GoogleAnalyticsで正しくPWAからの流入が集計されてるか集客\u003eすべてのトラフィック\u003e参照元/メディアで確認しましょう。\n[adsense-responsive]\rmanifest.jsonのstart_urlに指定したutm_sourceが正しく働いて、pwaからの参照が蓄積されるようになりました♪\n終わりに 以上のように、思っていた以上に簡単にサイトをPWA化することが出来ました。\nWebサイト制作者である以上、この対応はしておいて損は無いと思いますので、興味のある方は是非試してみてください♪\n","date":"2019-09-28T00:23:39+09:00","image":"/wp-content/uploads/2019/09/pwaSettingEye.png","permalink":"/2019/09/28/9337/","title":"【30分でPWA化】Progressive Web Appsの概要とサイトのPWA対応のやり方まとめ【ServiceWorker】"},{"content":"Vueプロジェクトをサブディレクトリにデプロイしたい サイトなどを製作している場合、基本的にはhttp://localhost/{アプリケーション}の形で開発及び動作確認を行うと思います。\nそして、いざ実装が終わりデプロイするぞ！！となった場合、レアケースですが、\n「ルートじゃなくてサブディレクトリに配置して。」\nと言われる事が稀にあります。笑\n要件定義の時に確認しとけや！\nという点は一旦置いといて、そんな急な要望が出た場合にもVue-cliを使ってプロジェクトを作っていれば柔軟に対応が可能になります。\n手順 vue.config.jsの作成 まずはプロジェクトルートにvue.config.jsを作成しましょう。\ntree -L 1 . ├── README.md ├── babel.config.js ├── dist ├── node_modules ├── package.json ├── postcss.config.js ├── public ├── src ├── tsconfig.json ├── tslint.json ├── vue.config.js // 追加 └── yarn.lock baseUrlを追加 次にvue.config.jsに以下の記述を追加してください。\nvue.config.js module.exports = { baseUrl: \u0026#34;/{配置したいサブディレクトリ}/\u0026#34;, // 追加 ... (略) ... }; assetsPublicPathは廃止 Vue-CLI 2系の場合はassetsPublicPathで指定していましたが、キー名が変わったので要注意です。\n確認 では、実際に起動してみましょう。\nyarn serve yarn run v1.17.3 $ vue-cli-service serve WARN \u0026#34;baseUrl\u0026#34; option in vue.config.js is deprecated now, please use \u0026#34;publicPath\u0026#34; instead. INFO Starting development server... Starting type checking and linting service... Using 1 worker with 2048MB memory limit 10% building 2/2 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from /generator/qrcode/ ℹ ｢wds｣: Content not from webpack is served from /Users/blogenist/sample/public ℹ ｢wds｣: 404s will fallback to /index.html 98% after emitting CopyPlugin DONE Compiled successfully in 4743ms 18:20:06 No type errors found No lint errors found Version: typescript 3.6.3, tslint 5.20.0 Time: 3049ms App running at: - Local: http://localhost:8080/sub/dummy/ - Network: unavailable Note that the development build is not optimized. To create a production build, run yarn build. 正常にbaseUrlが適用された状態で起動されました。\nHTML内のリンクにもbaseUrlの値が差し込まれています。\nbaseUrlも廃止予定 無事に期待通りの動きが出来ましたが、ログに気になる文言が出力されていました。\nyarn build yarn run v1.17.3 $ vue-cli-service build WARN \u0026#34;baseUrl\u0026#34; option in vue.config.js is deprecated now, please use \u0026#34;publicPath\u0026#34; instead. なにやら、baseUrlは非推奨なのでpublicPathを使ってね！との事です。\npublicPathに変更 という事で言われた通りにbaseUrlをpublicPathに変更しましょう。\nvue.config.js module.exports = { publicPath: \u0026#34;/{配置したいサブディレクトリ}/\u0026#34;, ... (略) ... }; 指定の仕方は同じです。\n確認 では再度実行してみましょう。\nyarn serve yarn run v1.17.3 $ vue-cli-service serve INFO Starting development server... Starting type checking and linting service... Using 1 worker with 2048MB memory limit 10% building 2/2 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from /sub/dummy/ ℹ ｢wds｣: Content not from webpack is served from /Users/blogenist/sample/public ℹ ｢wds｣: 404s will fallback to /index.html 98% after emitting CopyPlugin DONE Compiled successfully in 3344ms 18:31:16 No type errors found No lint errors found Version: typescript 3.6.3, tslint 5.20.0 Time: 2927ms App running at: - Local: http://localhost:8080/sub/dummy/ - Network: unavailable Note that the development build is not optimized. To create a production build, run yarn build. 無事、警告も消えて綺麗なログになりましたね♪\n終わりに 以上のように、Vue-CLIを使っていれば急なデプロイ要望にも柔軟に対応する事が出来ました。\nお困りの際はお試しください♪\n","date":"2019-09-25T23:22:24+09:00","image":"/wp-content/uploads/2019/09/vuePublicPathChangeEye.png","permalink":"/2019/09/25/9335/","title":"【baseUrl】Vue-CLI3でルートディレクトリ以外にデプロイしたい場合のURLを置き換える方法【publicPath】"},{"content":"TypeScriptでコンパイルエラー TypeScriptを利用して、Formのファイル選択時にサムネイルを出そうと思い、以下のようなコーディングをした際にTypeScriptのエラーが発生しました。\nApp.vue \u0026lt;template lang=\u0026#34;pug\u0026#34;\u0026gt; ... (略) ... \u0026lt;/template\u0026gt; \u0026lt;script lang=\u0026#34;ts\u0026#34;\u0026gt; ... (略) ... export default class App extends Vue { private imageData: string = \u0026#34;\u0026#34;; ... (略) ... fileChange(event) { let selectFile = event.target.files[0] let path = this.file; let reader = new FileReader() reader.onload = (e) =\u0026gt; { let result = e.target.result this.imageData = result // エラー }; reader.readAsDataURL(selectFile) } ... (略) ... \u0026lt;/script\u0026gt; エラー内容 Type \u0026#39;string | ArrayBuffer\u0026#39; is not assignable to type \u0026#39;string\u0026#39;. Type \u0026#39;ArrayBuffer\u0026#39; is not assignable to type \u0026#39;string\u0026#39;. 原因と対応 原因 これは、e.target.resultの戻り値の型がstring | ArrayBufferとなっているため、フィールドの型定義も同様にstring | ArrayBufferにする必要があります。\nApp.vue \u0026lt;template lang=\u0026#34;pug\u0026#34;\u0026gt; ... (略) ... \u0026lt;/template\u0026gt; \u0026lt;script lang=\u0026#34;ts\u0026#34;\u0026gt; ... (略) ... export default class App extends Vue { private imageData: string | ArrayBuffer = \u0026#34;\u0026#34;; ... (略) ... fileChange(event) { let selectFile = event.target.files[0] let path = this.file; let reader = new FileReader() reader.onload = (e) =\u0026gt; { let result = e.target.result this.imageData = result }; reader.readAsDataURL(selectFile) } ... (略) ... \u0026lt;/script\u0026gt; これでエラーが出なくなります。\n終わりに 以上のように、対応方法はとても簡単です。\nお困りの方はこちらの方法を試してみてください。\n","date":"2019-09-24T22:32:21+09:00","image":"/wp-content/uploads/2019/09/typeScriptArrayBuffarErrorEye.png","permalink":"/2019/09/24/9322/","title":"【TypeScript】FileReaderのevent.target.resultがString型に代入出来ない時の原因と対策【ArrayBuffer】"},{"content":"VueアプリでBootstrap4を導入したい 管理システムや簡易なWebサイトを開発する際、そこまでデザインにこだわる必要がなく、とはいえ自分でCSSを作り込む時間をかけたい場合にUIフレームワークを導入することになると思います。\nVueには多くのUIフレームワークがあるのですが、その中でもシンプルで使いやすいのがBootstrap-vueです。\nBootstrapVue\rWith BootstrapVue you can build responsive, mobile-first projects on the web using Vue.js and the world's most popular front-end CSS library — Bootstrap v4.\rBootstrapVue\nちなみに、Vue.jsのUIフレームワークの中でもコンポーネントの数や使いやすさが筆者的に一番高いのはQuasarだと思っているので、気になる方はそちらも参考にしてみてください。\n関連記事 【Vue.jsのUIフレームワーク】Electronアプリのデザインフレームワークに「Quasar」をインストール・導入する方法 2019/09/08 2008文字 約5分で読めます 今回はVue-cliを用いてVueプロジェクトにBootstrap-vueの導入を行う方法をご紹介致します。\n手順 Vueプロジェクトを作成 Vue-cli3を使ってVueプロジェクトを作成しましょう。\n設定はお好きな形で作っちゃってください。\nvue create sample 日 9/22 01:22:09 2019 Vue CLI v3.11.0 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, PWA, Vuex, CSS Pre-processors, Linter ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: (Press \u0026lt;space\u0026gt; to select, \u0026lt;a\u0026gt; to toggle all, \u0026lt;i\u0026gt; to invert selection)Lint on save ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No Vue CLI v3.11.0 ✨ Creating project in /Users/blogenist/sample. ⚙ Installing CLI plugins. This might take a while... yarn install v1.17.3 info No lockfile found. [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... success Saved lockfile. ✨ Done in 18.18s. 🚀 Invoking generators... 📦 Installing additional dependencies... yarn install v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. ✨ Done in 4.05s. ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project qrcode. 👉 Get started with the following commands: $ cd qrcode $ yarn serve Bootstrap-Vueの導入 次に、vue-cliを使ってプロジェクトにBootstrap-Vueのプラグインを導入します。\nvue add bootstrap-vue 📦 Installing vue-cli-plugin-bootstrap-vue... yarn add v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ vue-cli-plugin-bootstrap-vue@0.4.0 info All dependencies └─ vue-cli-plugin-bootstrap-vue@0.4.0 ✨ Done in 2.73s. ✔ Successfully installed plugin: vue-cli-plugin-bootstrap-vue ? Use babel/polyfill? Yes 🚀 Invoking generator for vue-cli-plugin-bootstrap-vue... 📦 Installing additional dependencies... yarn install v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... success Saved lockfile. ✨ Done in 9.56s. ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-bootstrap-vue これだけで導入作業は完了です。\n例のごとく、設定周りはVue-cliが自動で更新してくれているので、gitの差分が出ているはずなので確認してみてください。\nコアなファイルを例にあげるとにするとこのようにuseの指定が追加されています。\nsrc/plugins/bootstrap-vue.js import Vue from \u0026#39;vue\u0026#39; import BootstrapVue from \u0026#39;bootstrap-vue\u0026#39; import \u0026#39;bootstrap/dist/css/bootstrap.min.css\u0026#39; import \u0026#39;bootstrap-vue/dist/bootstrap-vue.css\u0026#39; Vue.use(BootstrapVue) 確認 では、実際にBootstrap-Vueのコンポーネントを使ってみましょう。\n今回は公式ドキュメントのカードをそのままコピペしてみます。\nsrc/App.vue \u0026lt;template\u0026gt; \u0026lt;div id=\u0026#34;app\u0026#34;\u0026gt; \u0026lt;img alt=\u0026#34;Vue logo\u0026#34; src=\u0026#34;./assets/logo.png\u0026#34;\u0026gt; \u0026lt;b-container class=\u0026#34;bv-example-row\u0026#34;\u0026gt; \u0026lt;b-row\u0026gt; \u0026lt;b-col\u0026gt; \u0026lt;b-card title=\u0026#34;Card Title\u0026#34; img-src=\u0026#34;https://picsum.photos/600/300/?image=25\u0026#34; img-alt=\u0026#34;Image\u0026#34; img-top tag=\u0026#34;article\u0026#34; style=\u0026#34;max-width: 20rem;\u0026#34; class=\u0026#34;mb-2\u0026#34;\u0026gt; \u0026lt;b-card-text\u0026gt; Some quick example text to build on the card title and make up the bulk of the card\u0026#39;s content. \u0026lt;/b-card-text\u0026gt; \u0026lt;b-button href=\u0026#34;#\u0026#34; variant=\u0026#34;primary\u0026#34;\u0026gt;Go somewhere\u0026lt;/b-button\u0026gt; \u0026lt;/b-card\u0026gt; \u0026lt;/b-col\u0026gt; \u0026lt;b-col\u0026gt; \u0026lt;b-card title=\u0026#34;Card Title\u0026#34; img-src=\u0026#34;https://picsum.photos/600/300/?image=25\u0026#34; img-alt=\u0026#34;Image\u0026#34; img-top tag=\u0026#34;article\u0026#34; style=\u0026#34;max-width: 20rem;\u0026#34; class=\u0026#34;mb-2\u0026#34;\u0026gt; \u0026lt;b-card-text\u0026gt; Some quick example text to build on the card title and make up the bulk of the card\u0026#39;s content. \u0026lt;/b-card-text\u0026gt; \u0026lt;b-button href=\u0026#34;#\u0026#34; variant=\u0026#34;primary\u0026#34;\u0026gt;Go somewhere\u0026lt;/b-button\u0026gt; \u0026lt;/b-card\u0026gt; \u0026lt;/b-col\u0026gt; \u0026lt;b-col\u0026gt; \u0026lt;b-card title=\u0026#34;Card Title\u0026#34; img-src=\u0026#34;https://picsum.photos/600/300/?image=25\u0026#34; img-alt=\u0026#34;Image\u0026#34; img-top tag=\u0026#34;article\u0026#34; style=\u0026#34;max-width: 20rem;\u0026#34; class=\u0026#34;mb-2\u0026#34;\u0026gt; \u0026lt;b-card-text\u0026gt; Some quick example text to build on the card title and make up the bulk of the card\u0026#39;s content. \u0026lt;/b-card-text\u0026gt; \u0026lt;b-button href=\u0026#34;#\u0026#34; variant=\u0026#34;primary\u0026#34;\u0026gt;Go somewhere\u0026lt;/b-button\u0026gt; \u0026lt;/b-card\u0026gt; \u0026lt;/b-col\u0026gt; \u0026lt;/b-row\u0026gt; \u0026lt;/b-container\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script lang=\u0026#34;ts\u0026#34;\u0026gt; import { Component, Vue } from \u0026#39;vue-property-decorator\u0026#39;; import HelloWorld from \u0026#39;./components/HelloWorld.vue\u0026#39;; @Component({ components: { HelloWorld, }, }) export default class App extends Vue {} \u0026lt;/script\u0026gt; \u0026lt;style lang=\u0026#34;scss\u0026#34;\u0026gt; #app { font-family: \u0026#39;Avenir\u0026#39;, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } \u0026lt;/style\u0026gt; 無事にコンポーネントが使えるようになっていますね♪\n終わりに 以上のように簡単にVueプロジェクトにBootstrap4を導入する事が出来ました。\nBootstrapは有名なUIフレームワークなので、Vue.jsと組み合わせたいという要望も多いと思うので、そんな時はこちらのやり方を試してみてください♪\n","date":"2019-09-23T14:40:29+09:00","image":"/wp-content/uploads/2019/09/useBoostrapVueEye.png","permalink":"/2019/09/23/9311/","title":"【Vue.js】Vue-CLI3でBootstarp-vueを導入する方法【デザインフレームワーク】"},{"content":"GithubActionsを使ってみよう CI/CDをGithubで完結 皆さんはGithubActions、使っていますか？\nGithubAcrtionsとは、2018年10月にβ版として公開されたGithubの新機能の事を指します。\nGitHub Actionsについて\rGitHub Actionsでは、カスタムソフトウェア開発のライフサイクルにわたるワークフローをGitHubリポジトリに直接作成することができます。GitHub Actionsについて - GitHub ヘルプ\nGithubで発生するPushやプルリク、その他諸々の操作をトリガーにアクションと呼ばれる処理を定義する事が出来ます。\nこれにより、今まではJenkinsやAWS CodeBuildなどを使っていたCI処理をGithub単体で完結出来てしまうという、開発者にとっては気になる機能となっています。\n今回は実際にGithubActionsを使って、リポジトリ内のファイルをAWSのS3バケットに転送するワークフローを作ってみようと思います。\n2019年9月24日追記：料金について GithubActionsの料金形態は以下のようになっています。\nSimple, pay-as-you-go pricing\rFeatures • GitHub Actions\n要するに、publicリポジトリは誰でもどれだけ使っても無料、privateリポジトリの場合は、アカウント情報によって無料枠の制限(分)と超過分の課金額が異なるよ、とのことです。\nなので、GithubActionsでビルド等はせずに成果物だけ管理してデプロイする形にした方がお財布に優しそうですね。\nもちろん、場合によりますのでそこはプロジェクト方針に合わせてください。\n手順 前提 yarnを使ってbuildを行い、dist配下に出力された成果物をAWSのS3バケットに転送する処理をGithubActionsで実現してみようと思います。\n以下の情報は事前に準備してある事とします。\nPoint\rS3バケット\r上記バケットにPutする権限を持ったIAM\rGithubActionsの利用申請 まずはGithubActionsを使わせてもらうように申請をする必要があります。\nコチラ\u0026nbsp;のリンクから申請をしましょう。\n無事申請が完了すると、リポジトリのタブにActionsが追加されると思います。\nHello Worldを出力してみよう まずはおきまりのHello Worldを出力してみましょう。\nActionsには、様々なテンプレートが用意されているので、一般的な処理なら自分で0から作らなくてもWorkflowが組めます。\nとても助かりますよね♪\n今回は勉強のために0から作るので、右上のSet up a workflow yourselfボタンをクリックしましょう。\nすると、エディター画面になると思います。\n基本的にはYaml形式での記述になります。\n[adsense-responsive]\r以前まではHCL形式での記述を行っていましたが、2019年9月30日で非推奨となり、Yaml形式に統一されるので注意してください！！！\n今回はmasterブランチへのpushをトリガーに標準出力を行うWorkflowを組んでみましょう。\nsample.yaml name: CI on: push: branches: - master jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: Run a one-line script run: echo Hello, world! こんな感じです。\nGithubActionsの記法はかなり細かく用意されています。\n公式のドキュメント\u0026nbsp;があるので、そちらをみて頂いた方が理解が進むと思われますので、今回は解説は割愛させていただきます。\n記述が終わったら右上のStart commitを行いましょう。\nすると、リポジトリに.github/workflow/sample.yamlが追加されていると思います。\n確認 それではmasterブランチへpushを行ってみましょう。\nすると、正常にActionsが反応してくれると思います。\n実行ログ GitHub Actions / Build successful 41 minutes ago in 5s Set up job 2s Download action repository \u0026#39;actions/checkout@v1\u0026#39; Current runner version: \u0026#39;2.158.0\u0026#39; Prepare workflow directory Prepare all required actions Download action repository \u0026#39;actions/checkout@v1\u0026#39; Run actions/checkout@v1 2s remote: Counting objects: 16% (12/72) Run actions/checkout@v1 Added matchers: \u0026#39;checkout-git\u0026#39;. Problem matchers scan action output for known warning or error strings and report these inline. ##[add-matcher]/home/runner/work/_temp/git_d24bc54c-f8e9-4e99-82d5-c850c5f652e3.json Syncing repository: blogenist/github-action-sample git version git version 2.23.0 git lfs version git-lfs/2.8.0 (GitHub; linux amd64; go 1.12.6) git init \u0026#34;/home/runner/work/github-action-sample/github-action-sample\u0026#34; Initialized empty Git repository in /home/runner/work/github-action-sample/github-action-sample/.git/ git remote add origin https://github.com/blogenist/github-action-sample git config gc.auto 0 git config --get-all http.https://github.com/blogenist/github-action-sample.extraheader git config --get-all http.proxy git -c http.extraheader=\u0026#34;AUTHORIZATION: basic ***\u0026#34; fetch --tags --prune --progress --no-recurse-submodules origin +refs/heads/*:refs/remotes/origin/* remote: Enumerating objects: 72, done. remote: Counting objects: 1% (1/72) remote: Counting objects: 2% (2/72) remote: Counting objects: 4% (3/72) remote: Counting objects: 5% (4/72) remote: Counting objects: 6% (5/72) remote: Counting objects: 8% (6/72) remote: Counting objects: 9% (7/72) remote: Counting objects: 11% (8/72) remote: Counting objects: 12% (9/72) remote: Counting objects: 13% (10/72) remote: Counting objects: 15% (11/72) remote: Counting objects: 16% (12/72) Run a one-line script 1s Hello, world! Run echo Hello, world! Hello, world! Complete job 0s Cleaning up orphan processes Cleaning up orphan processes pushをトリガーに正常に処理が実行されましたね♪\n実行中にもリアルタイムで処理を確認する事も出来ます。\n失敗した場合 処理の途中で失敗した場合は、こんな感じで処理結果とエラーが出力されます。\nエラーログ AWS-cli Check.3s ##[error]Process completed with exit code 2. Run aws -v usage: aws [options] \u0026lt;command\u0026gt; \u0026lt;subcommand\u0026gt; [\u0026lt;subcommand\u0026gt; ...] [parameters] To see help text, you can run: aws help aws \u0026lt;command\u0026gt; help aws \u0026lt;command\u0026gt; \u0026lt;subcommand\u0026gt; help aws: error: too few arguments ##[error]Process completed with exit code 2. AWS-cliはデフォルトで用意されている 今回使用するAWS-cliは、GihubActionsを実行する環境にて最初からコマンドが使える状態になっているとのことなので、確認してみましょう。\nsample.yaml name: CI on: push: branches: - master jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: AWS-cli Check. run: aws --version 確認 実行ログ Yarn Intall2s 1.17.3 Run yarn -v 1.17.3 AWS-cli Check.4s aws-cli/1.16.221 Python/2.7.15+ Linux/5.0.0-1016-azure botocore/1.12.211 Run aws --version aws-cli/1.16.221 Python/2.7.15+ Linux/5.0.0-1016-azure botocore/1.12.211 問題なく使えましたね。\n準備する必要がないので助かります♪\nSecretの登録 今回はAWS-cliに用意しているIAMの認証情報を指定する必要があります。\n[adsense-responsive]\rGithubActionsの中で外部サービス等の認証情報を使いたい場合、Workflowの中には定義せずに、GitHubのSecrets機能を使うことになります。\nSettings \u003e Secretsに遷移し、情報を登録しましょう。\nWorkflowの中に直接定義すると、Git管理内に認証情報が含まれてしまって危険です。\nSecretsを使うことで暗号化した状態で認証情報を管理してもらえるので、セキュリティ的に安全です。\nWorkflowの定義 では実際にWorkflowを定義していきましょう。\nsample.yaml name: CI on: push: branches: - master jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: Build run: cd home \u0026amp;\u0026amp; yarn install \u0026amp;\u0026amp; yarn build - name: Copy env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_S3_PUT_ACCESS_KEY }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_S3_PUT_SECRET_KEY }} run: aws s3 cp home/dist/ s3://blogenist.sample.bucket/ --recursive Secretsで定義した変数はsecrets.XXXで取得する事が可能です。\n今回はさらに実行環境の環境変数に指定する事でAWS-cliの認証情報として設定しています。\ncdに注意 注意すべき点は、stepごとに作業ディレクトリはリセットされてしまうらしく、ディレクトリを移動したい場合はcd \u0026\u0026 {続けて行いたいコマンド}のように記述する必要がありそうでした。\n実行ログ Step cd 0s shell: /bin/bash -e {0} Run cd home cd home shell: /bin/bash -e {0} Step pwd 0s Run pwd shell: /bin/bash -e {0} pwd /home/runner/work/github-action-sample/github-action-sample Step cd \u0026amp;pwd 0s Run cd home \u0026amp;\u0026amp;pwd shell: /bin/bash -e {0} cd home \u0026amp;\u0026amp;pwd /home/runner/work/github-action-sample/github-action-sample/home 実行 では、実際に実行してみましょう！\n無事に転送出来ました！！\nCIツールを用意する事なく簡単に転送出来るのはとても楽チンですね♪\n終わりに 以上のように、Githubの強力な新機能をお試しで使ってみました。\nJenkinsで出来る事は基本実現出来そうな気がしているので、皆さんもぜひ試してみてください♪\n","date":"2019-09-22T13:53:39+09:00","image":"/wp-content/uploads/2019/09/githubActionsBetaUsageEye.png","permalink":"/2019/09/22/9267/","title":"【GithubActions】新機能を使って特定ブランチへのマージをトリガーにS3へファイルを転送するWorkflowを組んでみた【AWS-cli】"},{"content":"VuetifyでTypeScriptエラー Vue-cli3で簡単に導入可能 Vue-cli3を利用すると、簡単にプロジェクトにVuetifyを導入することが可能になります。\nvue add vuetify 📦 Installing vue-cli-plugin-vuetify... yarn add v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ vue-cli-plugin-vuetify@0.6.3 info All dependencies └─ vue-cli-plugin-vuetify@0.6.3 ✨ Done in 2.79s. ✔ Successfully installed plugin: vue-cli-plugin-vuetify ? Choose a preset: Default (recommended) 🚀 Invoking generator for vue-cli-plugin-vuetify... 📦 Installing additional dependencies... yarn install v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. ✨ Done in 4.77s. ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify 必要な依存関係の追加やコードの修正は勝手にやってくれるので、Vue-cliはマジで神だと思います。\nちなみに、VuetifyとはVue.js用のデザインフレームワークです。\n活発なコミュニティ\rつまづいてしまったらすぐに助けが必要です。VuetifyはDiscord上で大きなコミュニティによるサポートを用意しています。\rセマンティックコンポーネント 80種類以上のコンポーネントが用意されており、どんなアプリケーションにも対応することができます。Vue Material Design Component Framework — Vuetify.js\nTypeScriptを導入しているとコンパイルエラーが発生 しかし、追加して起動するとアプリは立ち上がるのですが、TypeScriptのビルドエラーが発生してしまいます。\n[adsense-responsive]\rエラーログ ERROR in /Users/blogenist/sample-app/src/main.ts 11:3 No overload matches this call. Overload 1 of 3, \u0026#39;(options?: ThisTypedComponentOptionsWithArrayProps\u0026lt;Vue, object, object, object, never\u0026gt; | undefined): CombinedVueInstance\u0026lt;Vue, object, object, object, Record\u0026lt;never, any\u0026gt;\u0026gt;\u0026#39;, gave the following error. Argument of type \u0026#39;{ store: Store\u0026lt;{}\u0026gt;; vuetify: any; render: (h: CreateElement) =\u0026gt; VNode; }\u0026#39; is not assignable to parameter of type \u0026#39;ThisTypedComponentOptionsWithArrayProps\u0026lt;Vue, object, object, object, never\u0026gt;\u0026#39;. Object literal may only specify known properties, and \u0026#39;vuetify\u0026#39; does not exist in type \u0026#39;ThisTypedComponentOptionsWithArrayProps\u0026lt;Vue, object, object, object, never\u0026gt;\u0026#39;. Overload 2 of 3, \u0026#39;(options?: ThisTypedComponentOptionsWithRecordProps\u0026lt;Vue, object, object, object, object\u0026gt; | undefined): CombinedVueInstance\u0026lt;Vue, object, object, object, Record\u0026lt;never, any\u0026gt;\u0026gt;\u0026#39;, gave the following error. Argument of type \u0026#39;{ store: Store\u0026lt;{}\u0026gt;; vuetify: any; render: (h: CreateElement) =\u0026gt; VNode; }\u0026#39; is not assignable to parameter of type \u0026#39;ThisTypedComponentOptionsWithRecordProps\u0026lt;Vue, object, object, object, object\u0026gt;\u0026#39;. Object literal may only specify known properties, and \u0026#39;vuetify\u0026#39; does not exist in type \u0026#39;ThisTypedComponentOptionsWithRecordProps\u0026lt;Vue, object, object, object, object\u0026gt;\u0026#39;. Overload 3 of 3, \u0026#39;(options?: ComponentOptions\u0026lt;Vue, DefaultData\u0026lt;Vue\u0026gt;, DefaultMethods\u0026lt;Vue\u0026gt;, DefaultComputed, PropsDefinition\u0026lt;Record\u0026lt;string, any\u0026gt;\u0026gt;, Record\u0026lt;string, any\u0026gt;\u0026gt; | undefined): CombinedVueInstance\u0026lt;...\u0026gt;\u0026#39;, gave the following error. Argument of type \u0026#39;{ store: Store\u0026lt;{}\u0026gt;; vuetify: any; render: (h: CreateElement) =\u0026gt; VNode; }\u0026#39; is not assignable to parameter of type \u0026#39;ComponentOptions\u0026lt;Vue, DefaultData\u0026lt;Vue\u0026gt;, DefaultMethods\u0026lt;Vue\u0026gt;, DefaultComputed, PropsDefinition\u0026lt;Record\u0026lt;string, any\u0026gt;\u0026gt;, Record\u0026lt;string, any\u0026gt;\u0026gt;\u0026#39;. Object literal may only specify known properties, and \u0026#39;vuetify\u0026#39; does not exist in type \u0026#39;ComponentOptions\u0026lt;Vue, DefaultData\u0026lt;Vue\u0026gt;, DefaultMethods\u0026lt;Vue\u0026gt;, DefaultComputed, PropsDefinition\u0026lt;Record\u0026lt;string, any\u0026gt;\u0026gt;, Record\u0026lt;string, any\u0026gt;\u0026gt;\u0026#39;. 9 | new Vue({ 10 | store, \u0026gt; 11 | vuetify, | ^ 12 | render: (h) =\u0026gt; h(App) 13 | }).$mount(\u0026#39;#app\u0026#39;); 14 | ERROR in /Users/blogenist/sample-app/src/plugins/vuetify.ts 2:21 Could not find a declaration file for module \u0026#39;vuetify/lib\u0026#39;. \u0026#39;/Users/blogenist/sample-app/node_modules/vuetify/lib/index.js\u0026#39; implicitly has an \u0026#39;any\u0026#39; type. Try `npm install @types/vuetify` if it exists or add a new declaration (.d.ts) file containing `declare module \u0026#39;vuetify/lib\u0026#39;;` 1 | import Vue from \u0026#39;vue\u0026#39;; \u0026gt; 2 | import Vuetify from \u0026#39;vuetify/lib\u0026#39;; | ^ 3 | 4 | Vue.use(Vuetify); 5 | Version: typescript 3.6.3, tslint 5.20.0 Time: 1871ms むむ。\nしかしご安心を。\nこちらのエラーは簡単に一瞬で解決することが出来るので解決方法をご紹介しようと思います。\n手順 tsconfig.jsonに一行追加 対処方法は、tsconfig.jsonのcompilerOptions.typesにvuetifyを一行追加するだけで良いです。\r[adsense-responsive]\rtsconfig.json { \u0026#34;compilerOptions\u0026#34;: { \u0026#34;target\u0026#34;: \u0026#34;esnext\u0026#34;, \u0026#34;module\u0026#34;: \u0026#34;esnext\u0026#34;, \u0026#34;strict\u0026#34;: true, \u0026#34;jsx\u0026#34;: \u0026#34;preserve\u0026#34;, \u0026#34;importHelpers\u0026#34;: true, \u0026#34;moduleResolution\u0026#34;: \u0026#34;node\u0026#34;, \u0026#34;experimentalDecorators\u0026#34;: true, \u0026#34;esModuleInterop\u0026#34;: true, \u0026#34;allowSyntheticDefaultImports\u0026#34;: true, \u0026#34;sourceMap\u0026#34;: true, \u0026#34;baseUrl\u0026#34;: \u0026#34;.\u0026#34;, \u0026#34;types\u0026#34;: [ \u0026#34;webpack-env\u0026#34;, \u0026#34;vuetify\u0026#34; // 追加 ], \u0026#34;paths\u0026#34;: { \u0026#34;@/*\u0026#34;: [ \u0026#34;src/*\u0026#34; ] }, \u0026#34;lib\u0026#34;: [ \u0026#34;esnext\u0026#34;, \u0026#34;dom\u0026#34;, \u0026#34;dom.iterable\u0026#34;, \u0026#34;scripthost\u0026#34; ] }, \u0026#34;include\u0026#34;: [ \u0026#34;src/**/*.ts\u0026#34;, \u0026#34;src/**/*.tsx\u0026#34;, \u0026#34;src/**/*.vue\u0026#34;, \u0026#34;tests/**/*.ts\u0026#34;, \u0026#34;tests/**/*.tsx\u0026#34; ], \u0026#34;exclude\u0026#34;: [ \u0026#34;node_modules\u0026#34; ] } たったこれだけ。\n確認 では、再度起動してみましょう\nyarn serve yarn run v1.17.3 warning ../package.json: No license field $ vue-cli-service serve INFO Starting development server... Starting type checking and linting service... Using 1 worker with 2048MB memory limit 10% building 2/2 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: Content not from webpack is served from /Users/blogenist/sample-app/public ℹ ｢wds｣: 404s will fallback to /index.html 98% after emitting CopyPlugin DONE Compiled successfully in 8989ms 15:57:29 No type errors found No lint errors found Version: typescript 3.6.3, tslint 5.20.0 Time: 1945ms App running at: - Local: http://localhost:8080/ - Network: unavailable Note that the development build is not optimized. To create a production build, run yarn build. 無事にTypeScriptのビルドエラーが無くなりましたね♪\nnpm install @types/vuetifyは不要 エラーログを見ると、npm install @types/vuetifyを行って型定義ファイルを入れろ！とありますが、実際にはインストールする必要は無いので覚えておきましょう♪\nnpm install @types/vuetify npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvuetify - Not found npm ERR! 404 npm ERR! 404 \u0026#39;@types/vuetify@latest\u0026#39; is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url. npm ERR! A complete log of this run can be found in: npm ERR! /Users/blogenist/.npm/_logs/2019-09-19T11_24_38_698Z-debug.log そもそも無いしね！！！笑\n終わりに 以上のように、たった一行加えるだけでTypeScriptのエラーを解消する事が出来ました。\nTypeScriptでVuetifyを使う場合はほぼ必須の設定となっているので、お困りの際はぜひ試してみて下さい。\n","date":"2019-09-21T14:32:16+09:00","image":"/wp-content/uploads/2019/09/vuetifyTypeScriptErrorEye.png","permalink":"/2019/09/21/9263/","title":"【TypeScript】Vuetifyを入れた際の「implicitly has an 'any' type.」のビルドエラーの原因と解決方法【Vue-cli3】"},{"content":"ElectronアプリケーションにGoogleAnalyticsを導入したい 簡単に導入出来ると思ってた時期が僕にもありました。 Electronでアプリケーションを作る際に、公開することを見越してアクセス解析を仕込もうと思いました。\nElectronもWebの技術で作成されているので、簡単に入れれるだろうと思っていましたが、結構ハマったので備忘録として記事に残したいと思います。\n試したこと まずは、それっぽいnpmモジュールがあったのでいろいろ試しました。\nelectron-google-analytics\u0026nbsp;やvue-analytics\u0026nbsp;など試しましたが、ローカルでは動いたのですがビルドしてアプリケーション化すると動かなくなったり、ページ遷移が別のユーザーとして集計されてしまったりと、思い通りの動きになりませんでした。(筆者の実装の問題かもしれませんが。orz)\nビルドするとドメインを持たない Electornは開発時はローカルにサーバーを立てて動いているので、http通信によるドメイン(localhost)が自動振られますが、アプリケーション化するとhttp通信では無くなるので、ドメインが振られなったり、ブラウザキャッシュが使えなくなったり、正常にGoogleAnalyticsへの送信が出来ない原因と思われる事象がネット上に転がっており先駆者の方達も結構苦労しているようでした。\n開発者ツールのRequest URLとRequest Headersを見ると違いがわかると思います。\nローカル起動の場合 アプリケーション起動の場合 universal-analyticsで全て解決 そんな中、universal-analyticsを使ってみたところ特に苦労せずにGoogleAnalyticsの導入を実現する事が出来ました。\nuniversal-analytics\rA node module for Google's Universal Analytics tracking via the Measurement Protocol.\rThis module allows tracking data (or rather, users) from within a Node.js application. Tracking is initiated on the server side and, if required, does not require any more tracking in the browser.universal-analytics - npm\n手順 universal-analyticsをインストール まずはyarnコマンドでuniversal-analyticsを依存関係に追加しましょう。\n[adsense-responsive]\ryarn add universal-analytics yarn add v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning \u0026#34; \u0026gt; sass-loader@7.3.1\u0026#34; has unmet peer dependency \u0026#34;webpack@^3.0.0 || ^4.0.0\u0026#34;. [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ universal-analytics@0.4.20 info All dependencies └─ universal-analytics@0.4.20 $ electron-builder install-app-deps • electron-builder version=21.2.0 ✨ Done in 3.76s. 遷移時のイベント送信の追加 次に、Vue-Routerで遷移が発生した際にGoogleAnalyticsにイベントを送信する処理を追加します。\nsrc/main.ts ... (省略) ... import ua from \u0026#34;universal-analytics\u0026#34;; import { machineIdSync } from \u0026#34;node-machine-id\u0026#34;; const original: boolean = true; const uuid = machineIdSync(original); let visitor = ua(\u0026#34;UA-XXXXXXXXX-YY\u0026#34;, uuid, { strictCidFormat: false }); const isProduction = process.env.NODE_ENV === \u0026#34;production\u0026#34;; if (isProduction) { router.afterEach((to, from) =\u0026gt; { visitor .pageview(to.path, \u0026#34;http://localhost\u0026#34;, to.name) .send(); }); } ... (省略) ... router.afterEachを使えば、定義している全てのrouteに対して遷移時に共通処理を差し込むことが可能になります。\n今回はto変数に入っている遷移先のパスと名称を渡すようにしています。\nClientIDの付与 今回はGoogleAnalyticsへのClientIDを生成するためにnode-machine-idというモジュールを使ってマシンに対するUUIDを取得・発行しています。\n[adsense-responsive]\rCross-platform unique machine (desktop) id discoverynode-machine-id - npm\nまた、その際にstrictCidFormat: trueとしてClientIDの値をUUID以外も許容するようにしています。\nここでポイントなのは、第二引数のホストをhttp://localhostにすることです。\n他の指定でも良いのかもしれませんが、Electronアプリは前述の通りビルドしてしまうと、ホストを持たないのでとりあえずはこれで良い気がしています。\nまた、開発時の操作はGoogleAnalyticsに送信したくないので、process.env.NODE_ENVがproductionの場合のみ送信するようにしました。\n確認 では、実際にビルドしてアプリを立ち上げて機能遷移してみましょう。\n起動時 遷移時 正常に、同一ユーザーとしてアクセス解析がされるようになりました♪\nClientID CliendIDもしっかりと送られていますね♪\nGoogleAnalytics Electronログ 終わりに 以上のように、 universal-analyticsを使えば簡単にElectronアプリの機能単位の利用具合を集計・解析する事が可能になりました。\nどのような機能がどれだけ使われているか？という数字も、いずれは武器になったり機能改善に繋がるので、皆さんも是非入れてみてはいかがでしょうか♪\n","date":"2019-09-17T01:21:10+09:00","image":"/wp-content/uploads/2019/09/electronVueWithGoogleAnalyticsEye.png","permalink":"/2019/09/17/9221/","title":"【universal-analytics】ElectronにGoogleAnalyticsを導入して機能の利用・アクセス解析をする方法【Vue-cli】"},{"content":"scalaテンプレートでバリデーションエラーを取ろうとするとエラーが発生する とある案件にてPlayFramework2.7でWebシステムを開発している際に、バリデーションエラーを画面に表示しようと公式のように実装していたところ、以下のようなエラーが発生しました。\nエラーログ [error] a.a.ActorSystemImpl - Internal server error, sending 500 response akka.http.impl.util.One2OneBidiFlow$OutputTruncationException: Inner flow was completed without producing result elements for 1 outstanding elements at akka.http.impl.util.One2OneBidiFlow$OutputTruncationException$.apply(One2OneBidiFlow.scala:22) at akka.http.impl.util.One2OneBidiFlow$OutputTruncationException$.apply(One2OneBidiFlow.scala:22) at akka.http.impl.util.One2OneBidiFlow$One2OneBidi$$anon$1$$anon$4.onUpstreamFinish(One2OneBidiFlow.scala:97) at akka.stream.impl.fusing.GraphInterpreter.processEvent(GraphInterpreter.scala:506) at akka.stream.impl.fusing.GraphInterpreter.execute(GraphInterpreter.scala:376) at akka.stream.impl.fusing.GraphInterpreterShell.runBatch(ActorGraphInterpreter.scala:606) at akka.stream.impl.fusing.GraphInterpreterShell$AsyncInput.execute(ActorGraphInterpreter.scala:485) at akka.stream.impl.fusing.GraphInterpreterShell.processEvent(ActorGraphInterpreter.scala:581) at akka.stream.impl.fusing.ActorGraphInterpreter.akka$stream$impl$fusing$ActorGraphInterpreter$$processEvent(ActorGraphInterpreter.scala:749) at akka.stream.impl.fusing.ActorGraphInterpreter$$anonfun$receive$1.applyOrElse(ActorGraphInterpreter.scala:764) ログを見ただけではちょっとエラーがまだ特定出来ませんね。\nまずはデバッグでソースを追いながら原因を特定して対応していこうと思います\n手順 前提 今回は以下のような一般的な独自アノテーションによるバリデーションを行おうと思っています。\nインタフェース LoginCheck.class package validations.auth; import static java.lang.annotation.ElementType.FIELD; import static java.lang.annotation.ElementType.METHOD; import static java.lang.annotation.RetentionPolicy.RUNTIME; import java.lang.annotation.Documented; import java.lang.annotation.Retention; import java.lang.annotation.Target; import javax.validation.Constraint; import javax.validation.Payload; @Documented @Constraint(validatedBy = {LoginCheckValidator.class}) @Target({FIELD, METHOD}) @Retention(RUNTIME) public @interface LoginCheck { String message() default \u0026#34;error.custom.loginCheck\u0026#34;; Class\u0026lt;?\u0026gt;[] groups() default {}; Class\u0026lt;? extends Payload\u0026gt;[] payload() default {}; } 実装クラス LoginCheckValidator.class package validations.auth; import javax.validation.ConstraintValidator; import javax.validation.ConstraintValidatorContext; import com.google.common.base.Strings; import lombok.Builder; import lombok.Data; public class LoginCheckValidator implements ConstraintValidator\u0026lt;LoginCheck, LoginCheckValidator.Dto\u0026gt; { public void initialize(LoginCheck loginCheck) {} @Override public boolean isValid(LoginCheckValidator.Dto value, ConstraintValidatorContext context) { if (value.isNotFulfill()) { return true; } boolean isValid = {何やのチェックロジック}; return isValid; } @Data @Builder public static class Dto { private String loginId; private String password; public boolean isNotFulfill() { return Strings.isNullOrEmpty(loginId) || Strings.isNullOrEmpty(password); } } } Formモデル LoginFormModel.java package models.admin.login.form; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import play.data.validation.Constraints; import validations.auth.LoginCheck; import validations.auth.LoginCheckValidator; @AllArgsConstructor(staticName = \u0026#34;of\u0026#34;) @Builder @Data public class LoginFormModel { public LoginFormModel() {}; @Constraints.Required public String loginId; @Constraints.Required public String password; @LoginCheck public LoginCheckValidator.Dto getLoginCheck() { return LoginCheckValidator.Dto.builder() .loginId(this.loginId) .password(this.password) .build(); } } login.scala.html HTMLについては今回の必要な部分だけ抜粋しておきます。\nlogin.scala.html ... (略) ... \u0026lt;div class=\u0026#34;form-group row mb-0\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;col-md-8 offset-md-4\u0026#34;\u0026gt; \u0026lt;div\u0026gt; \u0026lt;ul class=\u0026#34;list-group list-group-flush\u0026#34;\u0026gt; @for(error \u0026lt;- response.validationError(\u0026#34;loginCheck\u0026#34;).errors) { \u0026lt;li class=\u0026#34;list-group-item\u0026#34;\u0026gt;@error.format(messages)\u0026lt;/li\u0026gt; } \u0026lt;/ul\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;button type=\u0026#34;submit\u0026#34; class=\u0026#34;btn btn-primary\u0026#34;\u0026gt; ログイン \u0026lt;/button\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; ... (略) ... org.springframework.beans.AbstractNestablePropertyAccessorでエラー デバッグでソースを追っていくと、怪しい部分がありました。\n","date":"2019-09-14T12:10:19+09:00","image":"/wp-content/uploads/2019/09/playFrameworkCustomBeanValidationErrorEye.png","permalink":"/2019/09/14/9200/","title":"【Play Framework2.7】自作のBeanValidatorのエラーメッセージをscalaテンプレートから取得出来ない場合の原因と対処方法【ConstraintValidator】"},{"content":"PugでVue.jsを書こう Pugについては以前ご紹介しています。\n関連記事 【pug導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】 2019/06/13 1187文字 約3分で読めます 今回はVue-cliを利用して、ElectronプロジェクトにPugを導入する方法をご紹介します。\n手順 vue-cli-plugin-pugの導入 まずは例の如く、vue-cliにてpug-pluginを追加しましょう。\n[adsense-responsive]\rvue add pug 📦 Installing vue-cli-plugin-pug... yarn add v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 31 new dependencies. info Direct dependencies └─ vue-cli-plugin-pug@1.0.7 info All dependencies ├─ @types/babel-types@7.0.7 ├─ @types/babylon@6.16.5 ├─ acorn-globals@3.1.0 ├─ align-text@0.1.4 ├─ asap@2.0.6 ├─ center-align@0.1.3 ├─ character-parser@2.2.0 ├─ doctypes@1.1.0 ├─ is-expression@3.0.0 ├─ jstransformer@1.0.0 ├─ lazy-cache@1.0.4 ├─ longest@1.0.1 ├─ promise@7.3.1 ├─ pug-attrs@2.0.4 ├─ pug-code-gen@2.0.2 ├─ pug-filters@3.1.1 ├─ pug-lexer@4.1.0 ├─ pug-linker@3.0.6 ├─ pug-load@2.0.12 ├─ pug-parser@5.0.1 ├─ pug-plain-loader@1.0.0 ├─ pug-strip-comments@1.0.4 ├─ pug@2.0.4 ├─ raw-loader@0.5.1 ├─ right-align@0.1.3 ├─ token-stream@0.0.1 ├─ uglify-to-browserify@1.0.2 ├─ void-elements@2.0.1 ├─ vue-cli-plugin-pug@1.0.7 ├─ window-size@0.1.0 └─ with@5.1.1 $ electron-builder install-app-deps • electron-builder version=21.2.0 ✨ Done in 7.33s. ✔ Successfully installed plugin: vue-cli-plugin-pug Plugin vue-cli-plugin-pug does not have a generator to invoke 準備はたったこれだけです！\nHTMLをpug記法に変更 あとは、Pug記法に沿ってHTMLをリファクタリングしていけば良いです。\nHTLM(修正前) LayoutDefault.vue \u0026lt;template\u0026gt; \u0026lt;q-layout view=\u0026#34;lHr LpR lFr\u0026#34;\u0026gt; \u0026lt;q-drawer show-if-above v-model=\u0026#34;left\u0026#34; side=\u0026#34;left\u0026#34; bordered content-class=\u0026#34;bg-grey-10\u0026#34;\u0026gt; \u0026lt;q-list class=\u0026#34;q-pt-md text-white\u0026#34;\u0026gt; \u0026lt;q-item-label header\u0026gt;Tools\u0026lt;/q-item-label\u0026gt; \u0026lt;q-expansion-item class=\u0026#34;q-mt-md q-mr-sm\u0026#34; expand-separator icon=\u0026#34;code\u0026#34; label=\u0026#34;Code\u0026#34; caption=\u0026#34;Code Operation\u0026#34; dark \u0026gt; \u0026lt;q-item to=\u0026#34;/code/formatter\u0026#34; exactx class=\u0026#34;q-ml-md\u0026#34;\u0026gt; \u0026lt;q-item-section avatar\u0026gt; \u0026lt;q-icon name=\u0026#34;format_indent_decrease\u0026#34; /\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-item-section\u0026gt; \u0026lt;q-item-label\u0026gt;Formatter\u0026lt;/q-item-label\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-tooltip anchor=\u0026#34;center right\u0026#34; :delay=\u0026#34;500\u0026#34; :offset=\u0026#34;[0, 10]\u0026#34; transition-show=\u0026#34;rotate\u0026#34; transition-hide=\u0026#34;rotate\u0026#34; \u0026gt; Format Code. \u0026lt;br /\u0026gt;HTML/SQL/JSON \u0026lt;/q-tooltip\u0026gt; \u0026lt;/q-item\u0026gt; \u0026lt;q-item to=\u0026#34;/code/mdEditor\u0026#34; exact class=\u0026#34;q-ml-md\u0026#34;\u0026gt; \u0026lt;q-item-section avatar\u0026gt; \u0026lt;q-icon name=\u0026#34;img:img/logos/markdown.svg\u0026#34; /\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-item-section\u0026gt; \u0026lt;q-item-label\u0026gt;MD Editor\u0026lt;/q-item-label\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-tooltip anchor=\u0026#34;center right\u0026#34; :delay=\u0026#34;500\u0026#34; :offset=\u0026#34;[0, 10]\u0026#34; transition-show=\u0026#34;rotate\u0026#34; transition-hide=\u0026#34;rotate\u0026#34; \u0026gt;MardDown Editor\u0026lt;/q-tooltip\u0026gt; \u0026lt;/q-item\u0026gt; \u0026lt;/q-expansion-item\u0026gt; \u0026lt;q-item to=\u0026#34;/internet\u0026#34; exactx\u0026gt; \u0026lt;q-item-section avatar\u0026gt; \u0026lt;q-icon name=\u0026#34;img:img/logos/internet.svg\u0026#34; /\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-item-section\u0026gt; \u0026lt;q-item-label\u0026gt;Internet\u0026lt;/q-item-label\u0026gt; \u0026lt;/q-item-section\u0026gt; \u0026lt;q-tooltip anchor=\u0026#34;center right\u0026#34; :delay=\u0026#34;500\u0026#34; :offset=\u0026#34;[0, 10]\u0026#34; transition-show=\u0026#34;rotate\u0026#34; transition-hide=\u0026#34;rotate\u0026#34; \u0026gt;Internet Browsing\u0026lt;/q-tooltip\u0026gt; \u0026lt;/q-item\u0026gt; \u0026lt;/q-list\u0026gt; \u0026lt;/q-drawer\u0026gt; \u0026lt;q-drawer show-if-above v-model=\u0026#34;right\u0026#34; side=\u0026#34;right\u0026#34; bordered\u0026gt; \u0026lt;q-img class=\u0026#34;absolute-top\u0026#34; src=\u0026#34;https://cdn.quasar.dev/img/material.png\u0026#34; style=\u0026#34;height: 150px\u0026#34; \u0026gt; \u0026lt;div class=\u0026#34;absolute-bottom bg-transparent\u0026#34;\u0026gt; \u0026lt;q-avatar size=\u0026#34;56px\u0026#34; class=\u0026#34;q-mb-sm\u0026#34;\u0026gt; \u0026lt;img src=\u0026#34;img/logos/blogenist-logo.svg\u0026#34; /\u0026gt; \u0026lt;/q-avatar\u0026gt; \u0026lt;div class=\u0026#34;text-weight-bold\u0026#34;\u0026gt;Blogenist\u0026lt;/div\u0026gt; \u0026lt;div\u0026gt;@blgenist\u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/q-img\u0026gt; \u0026lt;/q-drawer\u0026gt; \u0026lt;q-page-container\u0026gt; \u0026lt;router-view /\u0026gt; \u0026lt;/q-page-container\u0026gt; \u0026lt;/q-layout\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; export default { name: \u0026#34;LayoutDefault\u0026#34;, data() { return { left: false, right: false }; } }; \u0026lt;/script\u0026gt; Pug(修正後) LayoutDefault.vue \u0026lt;template lang=\u0026#34;pug\u0026#34;\u0026gt; q-layout(view=\u0026#39;lHr LpR lFr\u0026#39;) q-drawer(show-if-above=\u0026#39;\u0026#39; v-model=\u0026#39;left\u0026#39; side=\u0026#39;left\u0026#39; bordered=\u0026#39;\u0026#39; content-class=\u0026#39;bg-grey-10\u0026#39;) q-list.q-pt-md.text-white q-item-label(header=\u0026#39;\u0026#39;) Tools q-expansion-item.q-mt-md.q-mr-sm(expand-separator=\u0026#39;\u0026#39; icon=\u0026#39;code\u0026#39; label=\u0026#39;Code\u0026#39; caption=\u0026#39;Code Operation\u0026#39; dark=\u0026#39;\u0026#39;) q-item.q-ml-md(to=\u0026#39;/code/formatter\u0026#39; exactx=\u0026#39;\u0026#39;) q-item-section(avatar=\u0026#39;\u0026#39;) q-icon(name=\u0026#39;format_indent_decrease\u0026#39;) q-item-section q-item-label Formatter q-tooltip(anchor=\u0026#39;center right\u0026#39; :delay=\u0026#39;500\u0026#39; :offset=\u0026#39;[0, 10]\u0026#39; transition-show=\u0026#39;rotate\u0026#39; transition-hide=\u0026#39;rotate\u0026#39;) | Format Code. br | HTML/SQL/JSON q-item.q-ml-md(to=\u0026#39;/code/mdEditor\u0026#39; exact=\u0026#39;\u0026#39;) q-item-section(avatar=\u0026#39;\u0026#39;) q-icon(name=\u0026#39;img:img/logos/markdown.svg\u0026#39;) q-item-section q-item-label MD Editor q-tooltip(anchor=\u0026#39;center right\u0026#39; :delay=\u0026#39;500\u0026#39; :offset=\u0026#39;[0, 10]\u0026#39; transition-show=\u0026#39;rotate\u0026#39; transition-hide=\u0026#39;rotate\u0026#39;) MardDown Editor q-drawer(show-if-above=\u0026#39;\u0026#39; v-model=\u0026#39;right\u0026#39; side=\u0026#39;right\u0026#39; bordered=\u0026#39;\u0026#39;) q-img.absolute-top(src=\u0026#39;https://cdn.quasar.dev/img/material.png\u0026#39; style=\u0026#39;height: 150px\u0026#39;) .absolute-bottom.bg-transparent q-avatar.q-mb-sm(size=\u0026#39;56px\u0026#39;) img(src=\u0026#39;img/logos/blogenist-logo.svg\u0026#39;) .text-weight-bold Blogenist div @blogenist q-page-container router-view \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; export default { name: \u0026#34;LayoutDefault\u0026#34;, data() { return { left: false, right: false }; } }; \u0026lt;/script\u0026gt; めちゃくちゃスッキリしました！\n[adsense-responsive]\rやはり、閉じタグの文化は無くしたいですね・・・！\n終わりに 以上のようにコマンド一発で簡単にElectron + Vue-cliの環境へPugの導入が完了しました。\nPugにするメリットは計り知れないので、是非導入してみてください♪\n","date":"2019-09-11T22:22:57+09:00","image":"/wp-content/uploads/2019/09/electronVueCliWithPugEye.png","permalink":"/2019/09/11/9214/","title":"【簡単瞬殺】vue-cliでpugを導入して記述量を半分以下に減らす方法【Electron】"},{"content":"Electronアプリのタイトルバーを消したい Electron製のアプリケーションを作るとデフォルトではこのように、アプリケーション名がタイトルバーに表示されます。\nしかし、正直なところデザイン的にはタイトルバーは表示されなくても良い情報なので消したいですよね。\nElectronであれば起動スクリプトに手を加えるだけで簡単にタイトルバーを消すことが出来るのでやり方をご紹介しようと思います。\n手順 new BrowserWindowにtitleBarStyleを追加 消し方はとても簡単で、Electronの起動処理スクリプトでBrowserWindowをnewするときのオプションとして、titleBarStyle: \"hidden\"を加えるだけで実現可能です。\nbackground.ts ... (略) ... function createWindow() { // Create the browser window. win = new BrowserWindow({ titleBarStyle: \u0026#34;hidden\u0026#34;, // 追加 width: 800, height: 600, webPreferences: { nodeIntegration: true } }); ... (略) ... 確認 かなりスッキリしましたね。\nWindow操作のボタンは残るのでご安心を♪\nドラッグ出来ない問題 しかし、タイトルバーを消してしまうとウィンドウのドラッグ移動が出来なくなってしまいます。\nドラッグ移動を可能にするためには以下のようなCSSを当てる必要があります。\n[adsense-responsive]\r公式では、body要素に対して、-webkit-app-region: dragを指定しつつ、ドラッグさせたくない操作要素には-webkit-app-region: no-drag;をつけて制御すると紹介されています。\nしかし、これだとウィンドウの領域全体でドラッグ出来てしまうためエディターなどの機能を搭載している場合にテキスト選択しようとしてもウィンドウドラッグになってしまいます。\nもちろん、テキスト選択する要素に対して、-webkit-app-region: no-drag;をつけても良いのですが、明らかにウィンドウドラッグエリア\u003cテキスト選択エリアだと思うので、ウィンドウドラッグを許可する要素のみに-webkit-app-region: drag;をかけたほうが合理的な気がしたので、今回は以下のようなCSSを適用することにしました。\nsrc/styles/quasar.styl @import \u0026#39;./quasar.variables\u0026#39; @import \u0026#39;~quasar-styl\u0026#39; header, .draggable{ // header要素とdraggableクラスのみドラッグ可能領域とする -webkit-app-region: drag cursor: move; // ドラッグ可能領域を可視化 button { // その中にあるボタン要素はドラッグを不可とする -webkit-app-region: no-drag !important; cursor: auto; // 通常のカーソルに戻す } } これでいい感じにタイトルバーを消しつつドラッグが出来るElectronアプリケーションが構築出来ました♪\n終わりに 以上のようにちょっとはまりがちな部分ですが、対策方法はしっかりと用意されています。\nお困りの方は是非こちらの方法を試してみてください♪\n","date":"2019-09-09T23:01:37+09:00","image":"/wp-content/uploads/2019/09/electronHiddenTitlebarEye.png","permalink":"/2019/09/09/9157/","title":"【Vue.js】Electronのタイトルバーを消す方法【ドラッグ移動も対応】"},{"content":"VueのUIフレームワークは「Quasar」で決まり 沢山あって迷う問題 先日、Vue.jsを使う中で、UIフレームワークを何にするかで悩みました。\nVuetify\u0026nbsp;やBootstrap-Vue\u0026nbsp;、Buefy\u0026nbsp;、Element\u0026nbsp;などなど、様々なものがありますが、その中でもQuasarがダントツで使いやすい\u0026コンポーネントの数が膨大だったので使ってみる事にしました。\nQuasarとは？ Quasar(クエーサー)とは、マテリアルデザインベースのデザインを簡単に構築することが可能なVue.js製のデザインフレームワークです。\n[adsense-responsive]\rBuild high-performance VueJS user interfaces in record timeQuasar Framework\n使いやすさやデザインはもちろんですが、何よりコンポーネントの数が圧倒的に多いのが特徴だと思います。\nどんなものがあるかはドキュメントを見ていただければなと思います。\nvue-cliで簡単にプロジェクトに導入可能 また、このQuasarはvue-cliによる導入に対応しているのでコマンドラインからさくッと導入することが出来ます。\n今回は実際に導入してみましたので手順を紹介しようと思います。\nやり方 quasar-frameworkの導入 まずはyarnからインストールしましょう。\nyarn add quasar-framework yarn add v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... warning \u0026#34; \u0026gt; sass-loader@7.3.1\u0026#34; has unmet peer dependency \u0026#34;webpack@^3.0.0 || ^4.0.0\u0026#34;. [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ quasar-framework@0.17.20 info All dependencies └─ quasar-framework@0.17.20 $ electron-builder install-app-deps • electron-builder version=21.2.0 ✨ Done in 5.41s. コンポーネント利用の追加 次に、Vue.jsでquasarを利用する記述をmain.tsに追加しましょう。\nsrc/main.ts ... (略) ... import Quasar, * as All from \u0026#39;quasar-framework/dist/quasar.mat.esm.js\u0026#39; require(\u0026#39;quasar-framework/dist/umd/quasar.mat.min.css\u0026#39;) Vue.use(Quasar, { components: All }) ... (略) ... これで各コンポーネントでimportすることなくquasarのコンポーネントを使えるようになりました♪\n確認 では、試しにButtonコンポーネントを使ってみましょう。\nsrc/vies/Home.vue \u0026lt;template\u0026gt; \u0026lt;div class=\u0026#34;home\u0026#34;\u0026gt; \u0026lt;img alt=\u0026#34;Vue logo\u0026#34; src=\u0026#34;../assets/logo.png\u0026#34;\u0026gt; \u0026lt;HelloWorld msg=\u0026#34;Welcome to Your Vue.js + TypeScript App\u0026#34;/\u0026gt; \u0026lt;q-btn label=\u0026#34;My Button\u0026#34;/\u0026gt; \u0026lt;!-- ★追加 --\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; ... (略) ... 無事にコンポーネントが表示されましたね♪\nvue-cliとyarnで扱えるバージョンが違う 無事にquasarのコンポーネントが使えるようになりましたが、yarnでquasarをインストールすると、バージョンがv0.17系になってしまいます。\n最新版はv1系がすでにリリースされているので、ドキュメントに記載されているコンポーネントを使おうとすると存在しないコンポーネントがあるのでうまく動かなくなってしまいます。\nなので、先ほどの修正を戻した上でvue-cli経由でquasarをインストールし直そうと思います。\nvue add quasar 📦 Installing vue-cli-plugin-quasar... yarn add v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 16 new dependencies. info Direct dependencies ├─ @quasar/extras@1.3.1 ├─ babel-plugin-transform-imports@1.5.0 ├─ quasar@1.1.0 ├─ stylus-loader@3.0.2 ├─ stylus@0.54.7 └─ vue-cli-plugin-quasar@1.0.0 info All dependencies ├─ @quasar/extras@1.3.1 ├─ babel-plugin-transform-imports@1.5.0 ├─ babel-types@6.26.0 ├─ css-parse@2.0.0 ├─ is-invalid-path@0.1.0 ├─ is-valid-path@0.1.1 ├─ lodash.camelcase@4.3.0 ├─ lodash.clonedeep@4.5.0 ├─ lodash.findkey@4.6.0 ├─ lodash.snakecase@4.1.1 ├─ quasar@1.1.0 ├─ stylus-loader@3.0.2 ├─ stylus@0.54.7 ├─ to-fast-properties@1.0.3 ├─ vue-cli-plugin-quasar@1.0.0 └─ when@3.6.4 $ electron-builder install-app-deps • electron-builder version=21.2.0 ✨ Done in 16.02s. ✔ Successfully installed plugin: vue-cli-plugin-quasar ? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes ? Treeshake Quasar? (you\u0026#39;ll need to import the components, directives and plugins that you use yourself) Yes ? Use RTL support? No ? Choose Quasar Icon Set Material ? Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/quasar/lang ja ? Select features: Material, Fontawesome 🚀 Invoking generator for vue-cli-plugin-quasar... ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-quasar The following files have been updated / added: src/layouts/Default.vue src/quasar.js src/styles/quasar.styl src/styles/quasar.variables.styl babel.config.js package.json public/favicon.ico src/App.vue src/assets/logo.png src/main.ts src/router.ts src/views/About.vue src/views/Home.vue vue.config.js yarn.lock You should review these changes with git diff and commit them. INFO quasar Documentation can be found at: https://quasar.dev Quasar is relying on donations to evolve. We\u0026#39;d be very grateful if you can read our manifest on \u0026#34;Why donations are important\u0026#34;: https://quasar.dev/why-donate Donation campaign: https://donate.quasar.dev Any amount is very welcomed. If invoices are required, please first contact razvan@quasar.dev Please give us a star on Github if you appreciate our work: https://github.com/quasarframework/quasar Enjoy! - Quasar Team すると、プロジェクト全体が自動で修正されます。\n次、プロジェクトルートに作成されたquasar.jsをmain.tsからimportします。\nsrc/main.ts import Vue from \u0026#39;vue\u0026#39;; import App from \u0026#39;./App.vue\u0026#39;; import router from \u0026#39;./router\u0026#39;; import store from \u0026#39;./store\u0026#39;; import \u0026#39;./registerServiceWorker\u0026#39;; import \u0026#39;./quasar\u0026#39;; // 追加 Vue.config.productionTip = false; new Vue({ router, store, render: (h) =\u0026gt; h(App), }).$mount(\u0026#39;#app\u0026#39;); 確認 では、再度Electronアプリを起動してみましょう。\n無事にv1.1.0のquasarが適用されていますね♪\n何が変わったか？ いろいろ変わっている部分がありますが、要点だけ抜粋して解説しようと思います。\nRouterが親子関係を持つように変更 まずは、src/router.tsの内容が変わっています。\n元々はフラットにAbout.vueとHome.vueがルートとして設定されていましたが、DefaultLayout.vueというコンポーネントが親routeになり、その子routeとしてAbout.vueとHome.vueが紐づく形になりました。\nこれにより、デスクトップアプリケーション特有のサイドメニューによる機能切替のレイアウトが実現可能となります。\n子routeのtemplateが変更 次に、子routeのHome.vueとAbout.vueのコンポーネントに変更が入りました。\ndivタグで囲まれていた部分がq-pageタグにさし変わっています。\nこれにより、quasarに沿ったデザインでのroute遷移が可能になります。\nLayout Builderでコード生成 自動生成後のレイアウトだと、いまいちな感じがしたのでもう少しいい感じに調整したいと思います。\nquasarでは、レイアウトをGUIで設定してコード生成してくれる便利な機能があります。\n[adsense-responsive]\rLayout Builder | Quasar Framework\nGUI上で設定をポチポチして、EXPORT LAYOUTボタンを押すと自動でコードが生成されるので、それをsrc/layouts/Default.vueに貼り付ければOKです。\n自分でコーディングすると大変な部分を直感的に生成出来るのは開発者としてもとても助かりますよね♪\n簡単にベースのレイアウト構成が完成しました。\n終わりに 以上のように、デザインフレームワークを用いてアプリケーションの基本的なレイアウトを整えることが出来ました。\nElectronアプリを作る上で、とても便利なコンポーネントが沢山用意されているので是非試してみてください♪\n","date":"2019-09-08T21:02:13+09:00","image":"/wp-content/uploads/2019/09/electronAdQquasarEye.png","permalink":"/2019/09/08/9128/","title":"【Vue.jsのUIフレームワーク】Electronアプリのデザインフレームワークに「Quasar」をインストール・導入する方法"},{"content":"アプリケーションアイコンを設定しよう 前回、Electron + Vue-cliを用いた環境構築方法についてご紹介しました。\n関連記事 【デスクトップアプリ】Electron\u0026#43;Vueの環境構築をvue-cliのみで完結してみた【エディターいらず】 2019/09/05 2391文字 約5分で読めます 今回はビルド時にアプリケーションアイコンを指定する方法をご紹介します。\nせっかくElectronでオリジナルデスクトップアプリケーションを作るのであれば、デフォルトのアプリケーションアイコンではなくオリジナルのアプリケーションアイコンを設定したいですよね。\nvue-electron-builderを使っていれば、こちらも簡単に変えることが可能になります。\nやり方 アイコンファイルを指定 アプリに指定したいアイコンファイルを用意しましょう。\n形式はMacOSとWindowsで異なるので注意しましょう。\nsvgファイルからのアイコン画像のやり方については以前ご紹介しているので、そちらを参考にしてみてください。\n関連記事 【簡単マルチアイコン作成】SVGやPNGから様々なアイコンファイルをまとめて自動生成してくれる「icon-gen」をnpmでインストールして幸せになろう【使い方】 2018/11/30 2453文字 約5分で読めます そちらをsrc/assets/配下に格納します。\ntree src/assets src/assets/ ├── app.icns #マック用アイコンファイル └── app.ico #Win用アイコンファイル vue.config.jsの作成 次に、プロジェクトルートにvue.config.jsを作成しましょう。\nvue-electron-builderを使うと、vue.config.jsにビルド設定を外出しして管理することが出来るようです。\n今回はアプリケーションアイコンの指定のみなので以下のようにしました。\n[adsense-responsive]\rvue.config.js module.exports = { pluginOptions: { electronBuilder: { builderOptions: { mac: { icon: \u0026#39;src/assets/app.icns\u0026#39;, },win: { icon: \u0026#39;src/assets/app.ico\u0026#39;, }, } } } } 確認 それでは実際にビルドしてみましょう。\nしっかりとアプリケーションアイコンがデフォルトのものから指定したものに変わりました！\nこれだけでも、自分で作った感が出るのでモチベーションが上がりますよね！\n終わりに 以上のように、簡単にアプリケーションアイコンの変更が出来ました。\nオリジナルアプリケーションを作るのであれば、アプリケーションアイコンの設定は必須だと思うので、是非試してみてください♪\n","date":"2019-09-06T22:51:15+09:00","image":"/wp-content/uploads/2019/09/electronWithVueIconSettingEye.png","permalink":"/2019/09/06/9121/","title":"【自作デスクトップアプリ】Electronにアイコンを設定する方法【Vue.js】"},{"content":"Electron使いたい 今時のデスクトップアプリはクオリティが高い エンジニアの皆さんは、SlackやAtom、VSCode、PostManを使ったことありますか？\n使いやすさやデザイン、動作の軽さなどかなり使いやすいアプリケーションだと筆者は思っています。\nそして、これらのアプリケーションに共通する点として、「全てElectronフレームワーク製」という点が言えます。\nElectronとは？ Electronとは、GitHubが開発したオープンソースのフレームワークの事を指し、ChromiumとNode.jsを使いHTML/CSS/JsvaScriptのWebの技術を使いMacOS/Windows/Linuxに対応したクロスプラットフォームアプリケーションを作ることを可能にしてくれます。\nBuild cross platform desktop apps with JavaScript, HTML, and CSSElectron | Build cross platform desktop apps with JavaScript, HTML, and CSS.\n要は1ソースコードによって複数OSごとののデスクトップアプリケーションをビルド出来るということですね。\nまた、それがWebの技術で簡単に作れちゃうという点がポイントです。\n流行りのVue.jsでも実装可能 Electron自体はJavaScriptであればなんでも良いのでjQueryやReact、AngulerJSなどでも実装出来ますが、今回はフロントエンドでデファクトになりつつあるVue.jsを使った開発環境を作ってみようと思います。\nまた、vue-cliの3系を使うことで初期設定から起動までをコマンドラインのみで完結出来てしまうのでそちらも勉強がてら使ってみようと思います♪\n手順 vue-cliのインストール まずはvue-cliをインストールしましょう。\nyarn global @vue/cli yarn global add @vue/cli 2077ms  月 9/ 2 18:22:53 2019 yarn add v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 602 new dependencies. info Direct dependencies └─ @vue/cli@3.11.0 info All dependencies ... ✨ Done in 39.24s. vueプロジェクトの作成 以下のコマンドで対話式でプロジェクトの設定を行いましょう。\n[adsense-responsive]\rvue create sample-app Vue CLI v3.11.0 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: (Press \u0026lt;space\u0026gt; to select, \u0026lt;a\u0026gt; to toggle all, \u0026lt;i\u0026gt; to invert selection)Lint on save ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No Vue CLI v3.11.0 ✨ Creating project in /Users/blogenist/Develop\u0010/electron-app. ⚙ Installing CLI plugins. This might take a while... yarn install v1.17.3 info No lockfile found. [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... success Saved lockfile. ✨ Done in 56.01s. 🚀 Invoking generators... 📦 Installing additional dependencies... yarn install v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. ✨ Done in 8.53s. ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project electron-app. 👉 Get started with the following commands: $ cd electron-app 動作確認 以下のコマンドでサーバーを起動し、http://localhost:8080/\u0026nbsp;にアクセスしてみましょう。\nyarn serve yarn run v1.17.3 $ vue-cli-service serve INFO Starting development server... Starting type checking and linting service... Using 1 worker with 2048MB memory limit 98% after emitting CopyPlugin DONE Compiled successfully in 2517ms 18:43:43 No type errors found No lint errors found Version: typescript 3.6.2, tslint 5.19.0 Time: 1926ms App running at: - Local: http://localhost:8080/ - Network: unavailable Note that the development build is not optimized. To create a production build, run yarn build. 正常に起動しましたね！\nディレクトリ階層 . ├── README.md ├── babel.config.js ├── node_modules ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ ├── img │ │ └── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── msapplication-icon-144x144.png │ │ ├── mstile-150x150.png │ │ └── safari-pinned-tab.svg │ ├── index.html │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── main.ts │ ├── registerServiceWorker.ts │ ├── router.ts │ ├── shims-tsx.d.ts │ ├── shims-vue.d.ts │ ├── store.ts │ └── views │ ├── About.vue │ └── Home.vue ├── tsconfig.json ├── tslint.json └── yarn.lock 簡単にプロジェクトの雛壇を作れちゃうのがvue-cliの強みですね♪\nelectron-builderの追加 このままだと、単純なWebプロジェクトなのでElectron化するためにelectron-builderを追加する必要があります。\n以下のコマンドで追加しましょう。\n[adsense-responsive]\rvue add electron-builder yarn install v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. $ electron-builder install-app-deps • electron-builder version=21.2.0 ✨ Done in 107.13s. ⠋ Running completion hooks... WARN It is detected that you are using Vue Router. If you are using history mode, you must push the default route when the root component is loaded. Learn more at https://goo.gl/GM1xZG . ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-electron-builder The following files have been updated / added: .browserslistrc .gitignore README.md babel.config.js package.json postcss.config.js public/favicon.ico public/img/icons/android-chrome-192x192.png public/img/icons/android-chrome-512x512.png public/img/icons/apple-touch-icon-120x120.png public/img/icons/apple-touch-icon-152x152.png public/img/icons/apple-touch-icon-180x180.png public/img/icons/apple-touch-icon-60x60.png public/img/icons/apple-touch-icon-76x76.png public/img/icons/apple-touch-icon.png public/img/icons/favicon-16x16.png public/img/icons/favicon-32x32.png public/img/icons/msapplication-icon-144x144.png public/img/icons/mstile-150x150.png public/img/icons/safari-pinned-tab.svg public/index.html public/manifest.json public/robots.txt src/App.vue src/assets/logo.png src/background.ts src/components/HelloWorld.vue src/main.ts src/registerServiceWorker.ts src/router.ts src/shims-tsx.d.ts src/shims-vue.d.ts src/store.ts src/views/About.vue src/views/Home.vue tsconfig.json tslint.json yarn.lock You should review these changes with git diff and commit them. 確認 無事にインストール出来たら以下のコマンドでElectronを実行してみましょう。\nyarn electron:serve yarn run v1.17.3 $ vue-cli-service electron:serve INFO Starting development server... Starting type checking and linting service... Using 1 worker with 2048MB memory limit 98% after emitting CopyPlugin DONE Compiled successfully in 2229ms 19:00:21 Type checking and linting in progress... App running at: - Local: http://localhost:8080/ - Network: unavailable Note that the development build is not optimized. To create a production build, run yarn build. No type errors found Version: typescript 3.6.2, tslint 5.19.0 Time: 2638ms ⠴ Bundling main process... DONE Compiled successfully in 484ms 19:00:22 File Size Gzipped dist_electron/index.js 651.88 KiB 148.31 KiB Images and other types of assets omitted. INFO Launching Electron... 無事にアプリケーションとして起動しましたね♪\nデスクトップアプリケーションのビルド では、この状態のアプリケーションをビルドしてみましょう。\nvue-cliのelectron-builderを使うと、この辺のビルド周りもあらかじめ整えられているのでそのままビルド出来てしまいます・・・！\n以下のコマンドを実行しましょう。\nyarn electron:build yarn run v1.17.3 $ vue-cli-service electron:build INFO Bundling render process: ⠋ Building modern bundle for production...Starting type checking and linting service... Using 1 worker with 2048MB memory limit ⠹ Building modern bundle for production... File Size Gzipped dist_electron/bundled/js/chunk-vendors 105.82 KiB 36.04 KiB .7d92e116.js dist_electron/bundled/js/app.6774a83f. 6.93 KiB 2.63 KiB js dist_electron/bundled/service-worker.j 0.95 KiB 0.54 KiB s dist_electron/bundled/precache-manifes 0.67 KiB 0.31 KiB t.b1ab04c5225d9806f86209d073594343.js dist_electron/bundled/js/about.e281d17 0.44 KiB 0.31 KiB d.js dist_electron/bundled/css/app.00a74e55 0.42 KiB 0.26 KiB .css Images and other types of assets omitted. DONE Build complete. The dist_electron/bundled directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html ⠋ Bundling main process... DONE Compiled successfully in 3403ms 13:45:39 File Size Gzipped dist_electron/bundled/background.js 160.59 KiB 49.73 KiB Images and other types of assets omitted. INFO Building app with electron-builder: • electron-builder version=21.2.0 os=18.6.0 • description is missed in the package.json appPackageFile=/Users/blogenist/electron-app/dist_electron/bundled/package.json • author is missed in the package.json appPackageFile=/Users/blogenist/electron-app/dist_electron/bundled/package.json • writing effective config file=dist_electron/builder-effective-config.yaml • packaging platform=darwin arch=x64 electron=6.0.7 appOutDir=dist_electron/mac • default Electron icon is used reason=application icon is not set • skipped macOS application code signing reason=cannot find valid \u0026#34;Developer ID Application\u0026#34; identity or custom non-Apple code signing certificate, see https://electron.build/code-signing allIdentities= 1) 29560279B124B3E8ED4F245BB71C75A1C8D7D79B \u0026#34;member: A5AD2CF9-9D93-47E3-A0B7-4EB980E6340E 04B7A6F3-03ED-4CE0-B498-72101C605FFF\u0026#34; (CSSMERR_TP_NOT_TRUSTED) 1 identities found Valid identities only 0 valid identities found • building target=macOS zip arch=x64 file=dist_electron/electron-app-0.1.0-mac.zip • building target=DMG arch=x64 file=dist_electron/electron-app-0.1.0.dmg • building block map blockMapFile=dist_electron/electron-app-0.1.0.dmg.blockmap • building embedded block map file=dist_electron/electron-app-0.1.0-mac.zip DONE Build complete! ✨ Done in 39.89s. すると、が生成されその中に成果物が出力されています。\ntree dist_electron -L 2 dist_electron/ ├── builder-effective-config.yaml ├── bundled │ ├── background.js │ ├── css │ ├── favicon.ico │ ├── img │ ├── index.html │ ├── js │ ├── manifest.json │ ├── node_modules │ ├── package.json │ ├── precache-manifest.b1ab04c5225d9806f86209d073594343.js │ ├── robots.txt │ └── service-worker.js ├── electron-app-0.1.0-mac.zip ├── electron-app-0.1.0.dmg ├── electron-app-0.1.0.dmg.blockmap ├── index.js ├── mac │ └── electron-app.app └── package.json いたせりつくせりですね・・・！\n試しに、electron-app-0.1.0.dmgを実行してみましょう。\n無事にインストーラーが起動され、Applicationsに入れることでAlfred2の検索にもヒットし起動しました♪\n2年前にReactで生のElectronを自前で実装していた時は、このビルド周りを整えるのにめちゃくちゃ苦戦していた記憶があるので幸せ過ぎます・・・！！！\nもちろん、設定を変えることでアイコンやアプリ名を変えれるはずなのでそれはまた次回以降に試してみたいと思います♪\n終わりに 以上のように、vue-cliを使えばベースプロジェクトの作成及び起動までは全てcli操作のみで完結しました。\nあとはこのプロジェクトをベースに実装を進めていけば良いので、皆さんもオリジナルデスクトップアプリケーションを作ってみてはいかがでしょうか♪\n","date":"2019-09-05T22:45:08+09:00","image":"/wp-content/uploads/2019/09/electronWithVueEye.png","permalink":"/2019/09/05/9076/","title":"【デスクトップアプリ】Electron+Vueの環境構築をvue-cliのみで完結してみた【エディターいらず】"},{"content":"yarnを使おう npmはNode.js標準のパッケージマネージャー 皆さんはNode.js使ってますか？\nフロントエンドエンジニアの方はもちろん、最近ではサーバーサイドの方もNode.jsを使うケースが増えてきていると思います。\nそして、Node.jsを取り扱う上で避けて通れないのはパッケージ(モジュール)管理ですよね。\nNode.jsはnpmというパッケージマネージャーを標準で搭載しています。\nBuild amazing things\rEssential JavaScript development tools that help you go to market faster and build powerful applications using modern open source code.npm | build amazing things\nyarnの登場 そして、長らくnpm一強でしたがyarnというパッケージマネージャーが登場し、脚光を浴び始めています。\n高速で、信頼性が高く、そして安全な依存関係の管理\rYarn はダウンロードしたパッケージをキャッシュするので、再ダウンロードは不要です。さらにリソースを最大限利用できるように処理を並列化するので、インストール時間はかつてないほど高速です。nYarn\n手順 Homebrewでインストール yarnはHomebrewでインストールする事が出来ます。\nbrew install yarn ==\u0026gt; Installing yarn ==\u0026gt; Downloading https://yarnpkg.com/downloads/1.17.3/yarn-v1.17.3.tar.gz ==\u0026gt; Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/49970642/114f8b80-a477-11e9-9a08-70f1f8027b9e?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026amp;X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20190902%2Fus ######################################################################## 100.0% 🍺 /usr/local/Cellar/yarn/1.17.3: 14 files, 5MB, built in 9 seconds 簡単にインストール完了です。\n確認 以下のコマンドで確認可能です。\nyarn --version 1.17.3 init まずは初期化をしましょう。\n以下のコマンドで対話式で設定を求められます。\nyarn init yarn init v1.17.3 question name (SampleApp): question version (1.0.0): question description: Sample App. question entry point (index.js): question repository url (git@github.com:XXX/YYY.git): question author: Blogenist question license (MIT): question private: success Saved package.json ✨ Done in 41.74s. すると以下のようなpackage.jsonが生成されると思います。\npackage.json { \u0026#34;name\u0026#34;: \u0026#34;SampleApp\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;Sample App.\u0026#34;, \u0026#34;main\u0026#34;: \u0026#34;index.js\u0026#34;, \u0026#34;repository\u0026#34;: \u0026#34;git@github.com:XXX/YYY.git\u0026#34;, \u0026#34;author\u0026#34;: \u0026#34;Blogenist\u0026#34;, \u0026#34;license\u0026#34;: \u0026#34;MIT\u0026#34; } 基本的なコマンドの比較 yarnの基本的なコマンドは以下の通りです。\n[adsense-responsive]\rコマンド\r用途\ryarnまたはyarn install\rpackage.jsonを元にモジュールをインストール\ryarn install --flat\r複数のモジュールでバージョンの異なるモジュールを読み込んでいた場合に\ryarn install --force\r強制的に再インストール\ryarn install --production\rdevDependenciesに記載しているパッケージはインストールしない。\nまた、NODE_ENVにproductionが設定されていればこのオプションをつけなくても、自動的にproduction用インストールがされます。\ryarn global add {モジュール名}\rグローバルにパッケージ追加\ryarn add {モジュール名}\rパッケージ追加\ryarn add --dev|-D {モジュール名}\rdevDependenciesにパッケージ追加\ryarn remove {package}\rパッケージ削除\r他にも、yarn upgradeやyarn config、yarn cacheなどの便利なコマンドがありますが、基本的には上記のコマンドを使っていく事になると思います。\n終わりに 以上のように、npmがより使いやすく高速になったものがyarnと覚えておくと良いでしょう。\n今後のNode.js開発ではnpmではなくyarnを使うようにしてみてください♪\n","date":"2019-09-04T02:53:58+09:00","image":"/wp-content/uploads/2019/09/yarnInstallEye.png","permalink":"/2019/09/04/9063/","title":"【パッケージ管理ツール】npmではなくyarnを使ってモジュール管理をしよう【Node.js】"},{"content":"MySQLのgeometry型を使ってみよう double型でも実現は可能 先日、緯度経度を用いた近隣検索を実現する際に、MySQLのdouble型に緯度経度をそれぞれ保存して実現する方法をご紹介しました。\n関連記事 【MySQL】geometry型ではなくdouble型の緯度経度から2点間距離を計算して算出する方法【GPS位置情報】 2019/08/31 4167文字 約9分で読めます しかし、せっかく位置情報を取り扱いやすくするためのgeometry型が用意されているのであれば、せっかくなので使ってみよう！という事で、試してみようと思います。\nやり方 前提 今回はMySQL5.7を使用し、前回使用した県庁所在地テーブルにpointというgeometryカラムを追加し、操作を行ってみようと思います。\ncreate_table_prefectural_office.sql CREATE TABLE `prefectural_office` ( `id` BIGINT(20) NOT NULL COMMENT \u0026#39;県庁所在地ID\u0026#39;, `prefectureName` VARCHAR(256) NOT NULL COMMENT \u0026#39;都道府県名\u0026#39;, `latitude` DOUBLE(9 , 6 ) COMMENT \u0026#39;緯度\u0026#39;, `longitude` DOUBLE(9 , 6 ) COMMENT \u0026#39;経度\u0026#39;, `point` geometry NOT NULL COMMENT \u0026#39;位置情報\u0026#39;, -- 追加 `createdAt` DATETIME NOT NULL COMMENT \u0026#39;作成日\u0026#39;, `updatedAt` DATETIME NOT NULL COMMENT \u0026#39;更新日\u0026#39;, PRIMARY KEY (`id`) ) ENGINE=INNODB DEFAULT CHARSET=UTF8MB4 COMMENT=\u0026#39;県庁所在地テーブル\u0026#39;; geomety型から取得したデータの比較のために、前回のlatitudeとlongitudeのカラムは残しています。\nサンプルデータはこんな感じ。\ninsert_prefectural_office.sql INSERT INTO `prefectural_office` (`id`,`prefectureName`,`latitude`,`longitude`, `point`,`createdAt`,`updatedAt`) VALUES (\t1\t,\u0026#34;北海道\u0026#34;,\t43.064281\t,\t141.346797\t,ST_GEOMFROMTEXT(\u0026#39;POINT(141.346797 43.064281)\u0026#39;),NOW(),NOW()), (\t2\t,\u0026#34;青森県\u0026#34;,\t40.824354\t,\t140.739966\t,ST_GEOMFROMTEXT(\u0026#39;POINT(140.739966 40.824354)\u0026#39;),NOW(),NOW()), (\t3\t,\u0026#34;岩手県\u0026#34;,\t39.703584\t,\t141.152709\t,ST_GEOMFROMTEXT(\u0026#39;POINT(141.152709 39.703584)\u0026#39;),NOW(),NOW()), (\t4\t,\u0026#34;宮城県\u0026#34;,\t38.268926\t,\t140.872006\t,ST_GEOMFROMTEXT(\u0026#39;POINT(140.872006 38.268926)\u0026#39;),NOW(),NOW()), (\t5\t,\u0026#34;秋田県\u0026#34;,\t39.718031\t,\t140.103178\t,ST_GEOMFROMTEXT(\u0026#39;POINT(140.103178 39.718031)\u0026#39;),NOW(),NOW()), (\t6\t,\u0026#34;山形県\u0026#34;,\t38.240489\t,\t140.363428\t,ST_GEOMFROMTEXT(\u0026#39;POINT(140.363428 38.240489)\u0026#39;),NOW(),NOW()), (\t7\t,\u0026#34;福島県\u0026#34;,\t37.74998\t,\t140.467582\t,ST_GEOMFROMTEXT(\u0026#39;POINT(140.467582 37.74998)\u0026#39;),NOW(),NOW()), (\t8\t,\u0026#34;茨城県\u0026#34;,\t36.3416\t,\t140.446619\t,ST_GEOMFROMTEXT(\u0026#39;POINT(140.446619 36.3416)\u0026#39;),NOW(),NOW()), (\t9\t,\u0026#34;栃木県\u0026#34;,\t36.565485\t,\t139.883086\t,ST_GEOMFROMTEXT(\u0026#39;POINT(139.883086 36.565485)\u0026#39;),NOW(),NOW()), (\t10\t,\u0026#34;群馬県\u0026#34;,\t36.390601\t,\t139.060436\t,ST_GEOMFROMTEXT(\u0026#39;POINT(139.060436 36.390601)\u0026#39;),NOW(),NOW()), (\t11\t,\u0026#34;埼玉県\u0026#34;,\t35.856928\t,\t139.648787\t,ST_GEOMFROMTEXT(\u0026#39;POINT(139.648787 35.856928)\u0026#39;),NOW(),NOW()), (\t12\t,\u0026#34;千葉県\u0026#34;,\t35.604589\t,\t140.123183\t,ST_GEOMFROMTEXT(\u0026#39;POINT(140.123183 35.604589)\u0026#39;),NOW(),NOW()), (\t13\t,\u0026#34;東京都\u0026#34;,\t35.689567\t,\t139.691722\t,ST_GEOMFROMTEXT(\u0026#39;POINT(139.691722 35.689567)\u0026#39;),NOW(),NOW()), (\t14\t,\u0026#34;神奈川県\u0026#34;,\t35.447711\t,\t139.642536\t,ST_GEOMFROMTEXT(\u0026#39;POINT(139.642536 35.447711)\u0026#39;),NOW(),NOW()), (\t15\t,\u0026#34;新潟県\u0026#34;,\t37.902435\t,\t139.023825\t,ST_GEOMFROMTEXT(\u0026#39;POINT(139.023825 37.902435)\u0026#39;),NOW(),NOW()), (\t16\t,\u0026#34;富山県\u0026#34;,\t36.695374\t,\t137.211194\t,ST_GEOMFROMTEXT(\u0026#39;POINT(137.211194 36.695374)\u0026#39;),NOW(),NOW()), (\t17\t,\u0026#34;石川県\u0026#34;,\t36.594283\t,\t136.625714\t,ST_GEOMFROMTEXT(\u0026#39;POINT(136.625714 36.594283)\u0026#39;),NOW(),NOW()), (\t18\t,\u0026#34;福井県\u0026#34;,\t36.065422\t,\t136.221833\t,ST_GEOMFROMTEXT(\u0026#39;POINT(136.221833 36.065422)\u0026#39;),NOW(),NOW()), (\t19\t,\u0026#34;山梨県\u0026#34;,\t35.663944\t,\t138.568386\t,ST_GEOMFROMTEXT(\u0026#39;POINT(138.568386 35.663944)\u0026#39;),NOW(),NOW()), (\t20\t,\u0026#34;長野県\u0026#34;,\t36.651314\t,\t138.180997\t,ST_GEOMFROMTEXT(\u0026#39;POINT(138.180997 36.651314)\u0026#39;),NOW(),NOW()), (\t21\t,\u0026#34;岐阜県\u0026#34;,\t35.391192\t,\t136.722153\t,ST_GEOMFROMTEXT(\u0026#39;POINT(136.722153 35.391192)\u0026#39;),NOW(),NOW()), (\t22\t,\u0026#34;静岡県\u0026#34;,\t34.976911\t,\t138.383025\t,ST_GEOMFROMTEXT(\u0026#39;POINT(138.383025 34.976911)\u0026#39;),NOW(),NOW()), (\t23\t,\u0026#34;愛知県\u0026#34;,\t35.180197\t,\t136.906742\t,ST_GEOMFROMTEXT(\u0026#39;POINT(136.906742 35.180197)\u0026#39;),NOW(),NOW()), (\t24\t,\u0026#34;三重県\u0026#34;,\t34.730275\t,\t136.508597\t,ST_GEOMFROMTEXT(\u0026#39;POINT(136.508597 34.730275)\u0026#39;),NOW(),NOW()), (\t25\t,\u0026#34;滋賀県\u0026#34;,\t35.004392\t,\t135.868303\t,ST_GEOMFROMTEXT(\u0026#39;POINT(135.868303 35.004392)\u0026#39;),NOW(),NOW()), (\t26\t,\u0026#34;京都府\u0026#34;,\t35.021281\t,\t135.755636\t,ST_GEOMFROMTEXT(\u0026#39;POINT(135.755636 35.021281)\u0026#39;),NOW(),NOW()), (\t27\t,\u0026#34;大阪府\u0026#34;,\t34.68632\t,\t135.520022\t,ST_GEOMFROMTEXT(\u0026#39;POINT(135.520022 34.68632)\u0026#39;),NOW(),NOW()), (\t28\t,\u0026#34;兵庫県\u0026#34;,\t34.691102\t,\t135.182852\t,ST_GEOMFROMTEXT(\u0026#39;POINT(135.182852 34.691102)\u0026#39;),NOW(),NOW()), (\t29\t,\u0026#34;奈良県\u0026#34;,\t34.684714\t,\t135.832771\t,ST_GEOMFROMTEXT(\u0026#39;POINT(135.832771 34.684714)\u0026#39;),NOW(),NOW()), (\t30\t,\u0026#34;和歌山県\u0026#34;,\t34.226035\t,\t135.167494\t,ST_GEOMFROMTEXT(\u0026#39;POINT(135.167494 34.226035)\u0026#39;),NOW(),NOW()), (\t31\t,\u0026#34;鳥取県\u0026#34;,\t35.503637\t,\t134.238198\t,ST_GEOMFROMTEXT(\u0026#39;POINT(134.238198 35.503637)\u0026#39;),NOW(),NOW()), (\t32\t,\u0026#34;島根県\u0026#34;,\t35.472217\t,\t133.050531\t,ST_GEOMFROMTEXT(\u0026#39;POINT(133.050531 35.472217)\u0026#39;),NOW(),NOW()), (\t33\t,\u0026#34;岡山県\u0026#34;,\t34.661764\t,\t133.9349\t,ST_GEOMFROMTEXT(\u0026#39;POINT(133.9349 34.661764)\u0026#39;),NOW(),NOW()), (\t34\t,\u0026#34;広島県\u0026#34;,\t34.396275\t,\t132.459375\t,ST_GEOMFROMTEXT(\u0026#39;POINT(132.459375 34.396275)\u0026#39;),NOW(),NOW()), (\t35\t,\u0026#34;山口県\u0026#34;,\t34.185802\t,\t131.47155\t,ST_GEOMFROMTEXT(\u0026#39;POINT(131.47155 34.185802)\u0026#39;),NOW(),NOW()), (\t36\t,\u0026#34;徳島県\u0026#34;,\t34.065733\t,\t134.559489\t,ST_GEOMFROMTEXT(\u0026#39;POINT(134.559489 34.065733)\u0026#39;),NOW(),NOW()), (\t37\t,\u0026#34;香川県\u0026#34;,\t34.340035\t,\t134.043279\t,ST_GEOMFROMTEXT(\u0026#39;POINT(134.043279 34.340035)\u0026#39;),NOW(),NOW()), (\t38\t,\u0026#34;愛媛県\u0026#34;,\t33.841644\t,\t132.766103\t,ST_GEOMFROMTEXT(\u0026#39;POINT(132.766103 33.841644)\u0026#39;),NOW(),NOW()), (\t39\t,\u0026#34;高知県\u0026#34;,\t33.559756\t,\t133.531117\t,ST_GEOMFROMTEXT(\u0026#39;POINT(133.531117 33.559756)\u0026#39;),NOW(),NOW()), (\t40\t,\u0026#34;福岡県\u0026#34;,\t33.606261\t,\t130.418117\t,ST_GEOMFROMTEXT(\u0026#39;POINT(130.418117 33.606261)\u0026#39;),NOW(),NOW()), (\t41\t,\u0026#34;佐賀県\u0026#34;,\t33.249328\t,\t130.298806\t,ST_GEOMFROMTEXT(\u0026#39;POINT(130.298806 33.249328)\u0026#39;),NOW(),NOW()), (\t42\t,\u0026#34;長崎県\u0026#34;,\t32.74509\t,\t129.873641\t,ST_GEOMFROMTEXT(\u0026#39;POINT(129.873641 32.74509)\u0026#39;),NOW(),NOW()), (\t43\t,\u0026#34;熊本県\u0026#34;,\t32.789765\t,\t130.741662\t,ST_GEOMFROMTEXT(\u0026#39;POINT(130.741662 32.789765)\u0026#39;),NOW(),NOW()), (\t44\t,\u0026#34;大分県\u0026#34;,\t33.238123\t,\t131.61259\t,ST_GEOMFROMTEXT(\u0026#39;POINT(131.61259 33.238123)\u0026#39;),NOW(),NOW()), (\t45\t,\u0026#34;宮崎県\u0026#34;,\t31.911007\t,\t131.423882\t,ST_GEOMFROMTEXT(\u0026#39;POINT(131.423882 31.911007)\u0026#39;),NOW(),NOW()), (\t46\t,\u0026#34;鹿児島県\u0026#34;,\t31.56022\t,\t130.558281\t,ST_GEOMFROMTEXT(\u0026#39;POINT(130.558281 31.56022)\u0026#39;),NOW(),NOW()), (\t47\t,\u0026#34;沖縄県\u0026#34;,\t26.212375\t,\t127.680981\t,ST_GEOMFROMTEXT(\u0026#39;POINT(127.680981 26.212375)\u0026#39;),NOW(),NOW()) ; GEOMFROMTEXTは非推奨 INSERTする際に、GEOMFROMTEXT('POINT(xxx yyy)')を使いように記載されているブログがあると思いますが、現在は非推奨となっており、ST_GEOMFROMTEXTを使うように警告が出ると思います。\nSQL警告文 \u0026#39;GEOMFROMTEXT\u0026#39; is deprecated and will be removed in a future release. Please use ST_GEOMFROMTEXT instead これから新しく実装する方はST_GEOMFROMTEXTを使うようにしましょう。\nSQL geometry型から緯度経度を取得 まずはgeometry型から緯度経度をそれぞれ取得してみましょう。\n取得するにはX関数とY関数を利用します。\n[adsense-responsive]\r関数名\r関数名\rX関数\r経度\rY関数\r緯度\r気をつけるべきは、Xが経度(longitude)、Yが緯度(latitude)なので緯度経度という呼び方と混乱して逆にならないように気をつけましょう!\rSELECT id, prefectureName, latitude, Y(point),longitude, X(point), ASTEXT(geometry) FROM prefectural_office; +----+----------------+-----------+-------------+------------+-------------+-----------------------------+ | id | prefectureName | latitude | Y(point) | longitude | X(point) | ASTEXT(geometry) | +----+----------------+-----------+-------------+------------+-------------+-----------------------------+ | 1 | 北海道 | 43.064281 | 43.064281 | 141.346797 | 141.346797 | POINT(141.346797 43.064281) | | 2 | 青森県 | 40.824354 | 40.824354 | 140.739966 | 140.739966 | POINT(140.739966 40.824354) | | 3 | 岩手県 | 39.703584 | 39.703584 | 141.152709 | 141.152709 | POINT(141.152709 39.703584) | | 4 | 宮城県 | 38.268926 | 38.268926 | 140.872006 | 140.872006 | POINT(140.872006 38.268926) | | 5 | 秋田県 | 39.718031 | 39.718031 | 140.103178 | 140.103178 | POINT(140.103178 39.718031) | | 6 | 山形県 | 38.240489 | 38.240489 | 140.363428 | 140.363428 | POINT(140.363428 38.240489) | | 7 | 福島県 | 37.749980 | 37.74998 | 140.467582 | 140.467582 | POINT(140.467582 37.74998) | | 8 | 茨城県 | 36.341600 | 36.3416 | 140.446619 | 140.446619 | POINT(140.446619 36.3416) | | 9 | 栃木県 | 36.565485 | 36.565485 | 139.883086 | 139.883086 | POINT(139.883086 36.565485) | | 10 | 群馬県 | 36.390601 | 36.390601 | 139.060436 | 139.060436 | POINT(139.060436 36.390601) | | 11 | 埼玉県 | 35.856928 | 35.856928 | 139.648787 | 139.648787 | POINT(139.648787 35.856928) | | 12 | 千葉県 | 35.604589 | 35.604589 | 140.123183 | 140.123183 | POINT(140.123183 35.604589) | | 13 | 東京都 | 35.689567 | 35.689567 | 139.691722 | 139.691722 | POINT(139.691722 35.689567) | | 14 | 神奈川県 | 35.447711 | 35.447711 | 139.642536 | 139.642536 | POINT(139.642536 35.447711) | | 15 | 新潟県 | 37.902435 | 37.902435 | 139.023825 | 139.023825 | POINT(139.023825 37.902435) | | 16 | 富山県 | 36.695374 | 36.695374 | 137.211194 | 137.211194 | POINT(137.211194 36.695374) | | 17 | 石川県 | 36.594283 | 36.594283 | 136.625714 | 136.625714 | POINT(136.625714 36.594283) | | 18 | 福井県 | 36.065422 | 36.065422 | 136.221833 | 136.221833 | POINT(136.221833 36.065422) | | 19 | 山梨県 | 35.663944 | 35.663944 | 138.568386 | 138.568386 | POINT(138.568386 35.663944) | | 20 | 長野県 | 36.651314 | 36.651314 | 138.180997 | 138.180997 | POINT(138.180997 36.651314) | | 21 | 岐阜県 | 35.391192 | 35.391192 | 136.722153 | 136.722153 | POINT(136.722153 35.391192) | | 22 | 静岡県 | 34.976911 | 34.976911 | 138.383025 | 138.383025 | POINT(138.383025 34.976911) | | 23 | 愛知県 | 35.180197 | 35.180197 | 136.906742 | 136.906742 | POINT(136.906742 35.180197) | | 24 | 三重県 | 34.730275 | 34.730275 | 136.508597 | 136.508597 | POINT(136.508597 34.730275) | | 25 | 滋賀県 | 35.004392 | 35.004392 | 135.868303 | 135.868303 | POINT(135.868303 35.004392) | | 26 | 京都府 | 35.021281 | 35.021281 | 135.755636 | 135.755636 | POINT(135.755636 35.021281) | | 27 | 大阪府 | 34.686320 | 34.68632 | 135.520022 | 135.520022 | POINT(135.520022 34.68632) | | 28 | 兵庫県 | 34.691102 | 34.691102 | 135.182852 | 135.182852 | POINT(135.182852 34.691102) | | 29 | 奈良県 | 34.684714 | 34.684714 | 135.832771 | 135.832771 | POINT(135.832771 34.684714) | | 30 | 和歌山県 | 34.226035 | 34.226035 | 135.167494 | 135.167494 | POINT(135.167494 34.226035) | | 31 | 鳥取県 | 35.503637 | 35.503637 | 134.238198 | 134.238198 | POINT(134.238198 35.503637) | | 32 | 島根県 | 35.472217 | 35.472217 | 133.050531 | 133.050531 | POINT(133.050531 35.472217) | | 33 | 岡山県 | 34.661764 | 34.661764 | 133.934900 | 133.9349 | POINT(133.9349 34.661764) | | 34 | 広島県 | 34.396275 | 34.396275 | 132.459375 | 132.459375 | POINT(132.459375 34.396275) | | 35 | 山口県 | 34.185802 | 34.185802 | 131.471550 | 131.47155 | POINT(131.47155 34.185802) | | 36 | 徳島県 | 34.065733 | 34.065733 | 134.559489 | 134.559489 | POINT(134.559489 34.065733) | | 37 | 香川県 | 34.340035 | 34.340035 | 134.043279 | 134.043279 | POINT(134.043279 34.340035) | | 38 | 愛媛県 | 33.841644 | 33.841644 | 132.766103 | 132.766103 | POINT(132.766103 33.841644) | | 39 | 高知県 | 33.559756 | 33.559756 | 133.531117 | 133.531117 | POINT(133.531117 33.559756) | | 40 | 福岡県 | 33.606261 | 33.606261 | 130.418117 | 130.418117 | POINT(130.418117 33.606261) | | 41 | 佐賀県 | 33.249328 | 33.249328 | 130.298806 | 130.298806 | POINT(130.298806 33.249328) | | 42 | 長崎県 | 32.745090 | 32.74509 | 129.873641 | 129.873641 | POINT(129.873641 32.74509) | | 43 | 熊本県 | 32.789765 | 32.789765 | 130.741662 | 130.741662 | POINT(130.741662 32.789765) | | 44 | 大分県 | 33.238123 | 33.238123 | 131.612590 | 131.61259 | POINT(131.61259 33.238123) | | 45 | 宮崎県 | 31.911007 | 31.911007 | 131.423882 | 131.423882 | POINT(131.423882 31.911007) | | 46 | 鹿児島県 | 31.560220 | 31.56022 | 130.558281 | 130.558281 | POINT(130.558281 31.56022) | | 47 | 沖縄県 | 26.212375 | 26.212375 | 127.680981 | 127.680981 | POINT(127.680981 26.212375) | +----+----------------+-----------+-------------+------------+-------------+-----------------------------+ 47 rows in set, 3 warnings (0.00 sec) しっかりと同じ値が関数経由でも取得出来ていますね♪\n2点間距離の取得 次は2点間距離を算出してみましょう。\n試しに東京タワーからの距離を出してみます。\n2点間距離の算出SQL SELECT id, prefectureName, ASTEXT(point), ( 6371 * acos( cos(radians(35.658581)) * cos(radians(latitude)) * cos(radians(longitude) - radians(139.745433)) + sin(radians(35.658581)) * sin(radians(latitude)) ) ) AS distanceFromDouble, GLENGTH(GEOMFROMTEXT( CONCAT(\u0026#39;LINESTRING(139.745433 35.658581, \u0026#39;, X( point ),\u0026#39; \u0026#39;,Y( point ), \u0026#39;)\u0026#39; )) ) AS distanceFromGemetry FROM prefectural_office; 実行結果 +----+----------------+-----------------------------+--------------------+---------------------+ | id | prefectureName | ASTEXT(point) | distanceFromDouble(km) | distanceFromGemetry(度) | +----+----------------+-----------------------------+--------------------+---------------------+ | 1 | 北海道 | POINT(141.346797 43.064281) | 834.8571378337715 | 7.57685681206238 | | 2 | 青森県 | POINT(140.739966 40.824354) | 580.9247160833129 | 5.260637468560065 | | 3 | 岩手県 | POINT(141.152709 39.703584) | 466.502623601523 | 4.282811577712122 | | 4 | 宮城県 | POINT(140.872006 38.268926) | 307.0225258167587 | 2.8430736436740482 | | 5 | 秋田県 | POINT(140.103178 39.718031) | 452.4852998510215 | 4.075182914609486 | | 6 | 山形県 | POINT(140.363428 38.240489) | 292.29790529837885 | 2.6548383642867983 | | 7 | 福島県 | POINT(140.467582 37.74998) | 241.296943791094 | 2.2125661471246487 | | 8 | 茨城県 | POINT(140.446619 36.3416) | 98.72580516123963 | 0.9788650371511958 | | 9 | 栃木県 | POINT(139.883086 36.565485) | 101.59838451303102 | 0.9172912370806819 | | 10 | 群馬県 | POINT(139.060436 36.390601) | 102.07904543386358 | 1.0025338749433719 | | 11 | 埼玉県 | POINT(139.648787 35.856928) | 23.71671427178685 | 0.2206399368314828 | | 12 | 千葉県 | POINT(140.123183 35.604589) | 34.6637438158627 | 0.3815890440827873 | | 13 | 東京都 | POINT(139.691722 35.689567) | 5.950625481171745 | 0.06200809396360393 | | 14 | 神奈川県 | POINT(139.642536 35.447711) | 25.22783961062546 | 0.23463578053868245 | | 15 | 新潟県 | POINT(139.023825 37.902435) | 257.6462044373321 | 2.3570317942234045 | | 16 | 富山県 | POINT(137.211194 36.695374) | 254.9981890193849 | 2.7381210773028157 | | 17 | 石川県 | POINT(136.625714 36.594283) | 298.8700798944938 | 3.2570208583558413 | | 18 | 福井県 | POINT(136.221833 36.065422) | 320.7195086989554 | 3.54700952342687 | | 19 | 山梨県 | POINT(138.568386 35.663944) | 106.33948479828305 | 1.1770592177023085 | | 20 | 長野県 | POINT(138.180997 36.651314) | 178.63884533543978 | 1.852829945619674 | | 21 | 岐阜県 | POINT(136.722153 35.391192) | 275.1986596888009 | 3.035081355700535 | | 22 | 静岡県 | POINT(138.383025 34.976911) | 144.99856059861196 | 1.5234269090980253 | | 23 | 愛知県 | POINT(136.906742 35.180197) | 262.663603602861 | 2.878718090563385 | | 24 | 三重県 | POINT(136.508597 34.730275) | 311.6940135546833 | 3.367322277497639 | | 25 | 滋賀県 | POINT(135.868303 35.004392) | 359.1309463878057 | 3.9319334028720463 | | 26 | 京都府 | POINT(135.755636 35.021281) | 368.7410271001972 | 4.040375154760861 | | 27 | 大阪府 | POINT(135.520022 34.68632) | 398.9483006847132 | 4.3358262846938205 | | 28 | 兵庫県 | POINT(135.182852 34.691102) | 428.37485993933143 | 4.664028408682985 | | 29 | 奈良県 | POINT(135.832771 34.684714) | 371.72686754619974 | 4.032039292954977 | | 30 | 和歌山県 | POINT(135.167494 34.226035) | 446.5892595756499 | 4.796844121903156 | | 31 | 鳥取県 | POINT(134.238198 35.503637) | 498.2740045758765 | 5.509414214629427 | | 32 | 島根県 | POINT(133.050531 35.472217) | 605.8028384722828 | 6.697495377385474 | | 33 | 岡山県 | POINT(133.9349 34.661764) | 539.6319451989946 | 5.895416683795804 | | 34 | 広島県 | POINT(132.459375 34.396275) | 677.9409956240623 | 7.394596514820802 | | 35 | 山口県 | POINT(131.47155 34.185802) | 771.658681940248 | 8.403940616194864 | | 36 | 徳島県 | POINT(134.559489 34.065733) | 505.1378956725802 | 5.4250511446658045 | | 37 | 香川県 | POINT(134.043279 34.340035) | 539.5901864769002 | 5.852616832992892 | | 38 | 愛媛県 | POINT(132.766103 33.841644) | 668.7080193259349 | 7.211955858910192 | | 39 | 高知県 | POINT(133.531117 33.559756) | 614.5919508932951 | 6.5591759946262265 | | 40 | 福岡県 | POINT(130.418117 33.606261) | 882.9671997424465 | 9.550436699243438 | | 41 | 佐賀県 | POINT(130.298806 33.249328) | 906.1897556389888 | 9.749013370343565 | | 42 | 長崎県 | POINT(129.873641 32.74509) | 963.3773037576652 | 10.292750220341743 | | 43 | 熊本県 | POINT(130.741662 32.789765) | 886.7054081831598 | 9.449761767489008 | | 44 | 大分県 | POINT(131.61259 33.238123) | 792.5108882098315 | 8.485384622538488 | | 45 | 宮崎県 | POINT(131.423882 31.911007) | 874.2327147262182 | 9.12647368544264 | | 46 | 鹿児島県 | POINT(130.558281 31.56022) | 964.5350593543586 | 10.05983721326667 | | 47 | 沖縄県 | POINT(127.680981 26.212375) | 1555.5654256120438 | 15.322591486257789 | +----+----------------+-----------------------------+--------------------+---------------------+ 47 rows in set, 5 warnings (0.00 sec) 実行結果の単位が違う ここで注意すべきは、doubule型から取得した結果の単位がkmである事に対し、GLENGTH関数の結果は度である事です。\nこれは、地球の外周の1/360となっています。\nkm単位で取得する そこで利用するのがST_Distance_Sphere関数です。\n[adsense-responsive]\rこちらを利用する事で2点間距離をメートルで簡単に算出する事が出来ます。\nあとはこちらの結果を1000で割ればkmに変換する事が出来ますね。\nSQL SELECT id, prefectureName, ASTEXT(geometry), ( 6371 * acos( cos(radians(35.658581)) * cos(radians(latitude)) * cos(radians(longitude) - radians(139.745433)) + sin(radians(35.658581)) * sin(radians(latitude)) ) ) AS distanceFromDouble, ST_Distance_Sphere( GeomFromText(ASTEXT(point)), GeomFromText(\u0026#39;POINT(139.745433 35.658581)\u0026#39;) ) / 1000 AS distanceFromGemetry FROM prefectural_office; 実行結果 +----+----------------+-----------------------------+--------------------+---------------------+ | id | prefectureName | ASTEXT(point) | distanceFromDouble | distanceFromGemetry | +----+----------------+-----------------------------+--------------------+---------------------+ | 1 | 北海道 | POINT(141.346797 43.064281) | 834.8571378337715 | 834.8553032709167 | | 2 | 青森県 | POINT(140.739966 40.824354) | 580.9247160833129 | 580.9234395261007 | | 3 | 岩手県 | POINT(141.152709 39.703584) | 466.502623601523 | 466.50159848196625 | | 4 | 宮城県 | POINT(140.872006 38.268926) | 307.0225258167587 | 307.02185114788983 | | 5 | 秋田県 | POINT(140.103178 39.718031) | 452.4852998510215 | 452.4843055339215 | | 6 | 山形県 | POINT(140.363428 38.240489) | 292.29790529837885 | 292.2972629862389 | | 7 | 福島県 | POINT(140.467582 37.74998) | 241.296943791094 | 241.29641355137736 | | 8 | 茨城県 | POINT(140.446619 36.3416) | 98.72580516123963 | 98.72558821551446 | | 9 | 栃木県 | POINT(139.883086 36.565485) | 101.59838451303102 | 101.59816125492286 | | 10 | 群馬県 | POINT(139.060436 36.390601) | 102.07904543386358 | 102.07882111954436 | | 11 | 埼玉県 | POINT(139.648787 35.856928) | 23.71671427178685 | 23.7166621553297 | | 12 | 千葉県 | POINT(140.123183 35.604589) | 34.6637438158627 | 34.6636676438572 | | 13 | 東京都 | POINT(139.691722 35.689567) | 5.950625481171745 | 5.950612404637792 | | 14 | 神奈川県 | POINT(139.642536 35.447711) | 25.22783961062546 | 25.227784173458527 | | 15 | 新潟県 | POINT(139.023825 37.902435) | 257.6462044373321 | 257.6456382708381 | | 16 | 富山県 | POINT(137.211194 36.695374) | 254.9981890193849 | 254.997628671788 | | 17 | 石川県 | POINT(136.625714 36.594283) | 298.8700798944938 | 298.86942314027294 | | 18 | 福井県 | POINT(136.221833 36.065422) | 320.7195086989554 | 320.7188039315493 | | 19 | 山梨県 | POINT(138.568386 35.663944) | 106.33948479828305 | 106.3392511218679 | | 20 | 長野県 | POINT(138.180997 36.651314) | 178.63884533543978 | 178.6384527842367 | | 21 | 岐阜県 | POINT(136.722153 35.391192) | 275.1986596888009 | 275.1980549515127 | | 22 | 静岡県 | POINT(138.383025 34.976911) | 144.99856059861196 | 144.9982419704254 | | 23 | 愛知県 | POINT(136.906742 35.180197) | 262.663603602861 | 262.66302641082103 | | 24 | 三重県 | POINT(136.508597 34.730275) | 311.6940135546833 | 311.6933286204252 | | 25 | 滋賀県 | POINT(135.868303 35.004392) | 359.1309463878057 | 359.13015721290344 | | 26 | 京都府 | POINT(135.755636 35.021281) | 368.7410271001972 | 368.7402168075464 | | 27 | 大阪府 | POINT(135.520022 34.68632) | 398.9483006847132 | 398.94742401289693 | | 28 | 兵庫県 | POINT(135.182852 34.691102) | 428.37485993933143 | 428.3739186039041 | | 29 | 奈良県 | POINT(135.832771 34.684714) | 371.72686754619974 | 371.72605069231264 | | 30 | 和歌山県 | POINT(135.167494 34.226035) | 446.5892595756499 | 446.5882782148477 | | 31 | 鳥取県 | POINT(134.238198 35.503637) | 498.2740045758765 | 498.27290964006875 | | 32 | 島根県 | POINT(133.050531 35.472217) | 605.8028384722828 | 605.8015072464628 | | 33 | 岡山県 | POINT(133.9349 34.661764) | 539.6319451989946 | 539.6307593808863 | | 34 | 広島県 | POINT(132.459375 34.396275) | 677.9409956240623 | 677.9395058777228 | | 35 | 山口県 | POINT(131.47155 34.185802) | 771.658681940248 | 771.6569862532981 | | 36 | 徳島県 | POINT(134.559489 34.065733) | 505.1378956725802 | 505.13678565366786 | | 37 | 香川県 | POINT(134.043279 34.340035) | 539.5901864769002 | 539.5890007505598 | | 38 | 愛媛県 | POINT(132.766103 33.841644) | 668.7080193259349 | 668.7065498686708 | | 39 | 高知県 | POINT(133.531117 33.559756) | 614.5919508932951 | 614.5906003537763 | | 40 | 福岡県 | POINT(130.418117 33.606261) | 882.9671997424465 | 882.9652594597918 | | 41 | 佐賀県 | POINT(130.298806 33.249328) | 906.1897556389888 | 906.1877643257634 | | 42 | 長崎県 | POINT(129.873641 32.74509) | 963.3773037576652 | 963.375186777247 | | 43 | 熊本県 | POINT(130.741662 32.789765) | 886.7054081831598 | 886.70345968595 | | 44 | 大分県 | POINT(131.61259 33.238123) | 792.5108882098315 | 792.5091467010454 | | 45 | 宮崎県 | POINT(131.423882 31.911007) | 874.2327147262182 | 874.230793637222 | | 46 | 鹿児島県 | POINT(130.558281 31.56022) | 964.5350593543586 | 964.5329398298231 | | 47 | 沖縄県 | POINT(127.680981 26.212375) | 1555.5654256120438 | 1555.5620073235557 | +----+----------------+-----------------------------+--------------------+---------------------+ 47 rows in set, 4 warnings (0.00 sec) これでdouble型から算出した距離(km)にかなり近づきましたね！\n多少の差異は出ていますが、誤差の範囲と考えて良いでしょう。\n終わりに 以上のように、double型を利用するよりもSQLがスッキリしました。\n皆さんも、緯度経度をMySQLで管理する際はgeometry型を使ってみてはいかがでしょうか♪\n","date":"2019-09-02T16:58:10+09:00","image":"/wp-content/uploads/2019/09/gpsWithGeometryEye.png","permalink":"/2019/09/02/9037/","title":"【位置情報】MySQLのgeometry型を使って緯度経度の2点間距離をkmで計算・算出する方法【ST_GEOMFROMTEXT】"},{"content":"位置情報を使ったマーケティング強し 利用者からしたらとても便利な機能 スマホアプリやECサイトを使っていると、GPS情報を用いた現在地点を軸にした検索機能が搭載されるようになってきています。\n近隣情報を簡単に検索する事が出来るので利用者側からしたらとても便利な機能ですよね♪\n未経験開発者からしたら謎の技術 しかし、この機能を実現する上でGPSや緯度経度の位置情報を用いた機能を実装した事がない人からすると、\nどうやって実現すればええんじゃ・・・。orz\nと、不安になると思います。\nなので、今回はMySQLに登録されている緯度経度情報と、利用者の緯度経度情報を用いた近隣検索時の方法をご紹介しようと思います。\n手順 前提 今回はMySQL5.7を使用し、以下の県庁所在地テーブルを用意して、操作を行ってみようと思います。\ncreate_table_prefectural_office.sql CREATE TABLE `prefectural_office` ( `id` BIGINT(20) NOT NULL COMMENT \u0026#39;県庁所在地ID\u0026#39;, `prefectureName` VARCHAR(256) NOT NULL COMMENT \u0026#39;都道府県名\u0026#39;, `latitude` DOUBLE(9 , 6 ) COMMENT \u0026#39;緯度\u0026#39;, `longitude` DOUBLE(9 , 6 ) COMMENT \u0026#39;経度\u0026#39;, `createdAt` DATETIME NOT NULL COMMENT \u0026#39;作成日\u0026#39;, `updatedAt` DATETIME NOT NULL COMMENT \u0026#39;更新日\u0026#39;, PRIMARY KEY (`id`) ) ENGINE=INNODB DEFAULT CHARSET=UTF8MB4 COMMENT=\u0026#39;県庁所在地テーブル\u0026#39;; MySQL5.7にはgeometry型なる緯度経度を取扱う際にとても便利な型があるとの事ですが、今回はdouble型でそれぞれを管理してみようと思います。\nサンプルデータはこんな感じ。\ninsert_prefectural_office.sql INSERT INTO `prefectural_office` (`id`,`prefectureName`,`latitude`,`longitude`,`createdAt`,`updatedAt`) VALUES (\t1\t,\u0026#34;北海道\u0026#34;,\t43.06428056\t,\t141.3467972\t,NOW(),NOW()), (\t2\t,\u0026#34;青森県\u0026#34;,\t40.82435392\t,\t140.7399662\t,NOW(),NOW()), (\t3\t,\u0026#34;岩手県\u0026#34;,\t39.70358439\t,\t141.152709\t,NOW(),NOW()), (\t4\t,\u0026#34;宮城県\u0026#34;,\t38.26892558\t,\t140.8720061\t,NOW(),NOW()), (\t5\t,\u0026#34;秋田県\u0026#34;,\t39.71803056\t,\t140.1031778\t,NOW(),NOW()), (\t6\t,\u0026#34;山形県\u0026#34;,\t38.24048889\t,\t140.3634278\t,NOW(),NOW()), (\t7\t,\u0026#34;福島県\u0026#34;,\t37.74997969\t,\t140.4675816\t,NOW(),NOW()), (\t8\t,\u0026#34;茨城県\u0026#34;,\t36.34159972\t,\t140.4466188\t,NOW(),NOW()), (\t9\t,\u0026#34;栃木県\u0026#34;,\t36.56548547\t,\t139.8830857\t,NOW(),NOW()), (\t10\t,\u0026#34;群馬県\u0026#34;,\t36.39060111\t,\t139.0604359\t,NOW(),NOW()), (\t11\t,\u0026#34;埼玉県\u0026#34;,\t35.85692781\t,\t139.6487866\t,NOW(),NOW()), (\t12\t,\u0026#34;千葉県\u0026#34;,\t35.60458889\t,\t140.1231833\t,NOW(),NOW()), (\t13\t,\u0026#34;東京都\u0026#34;,\t35.68956667\t,\t139.6917222\t,NOW(),NOW()), (\t14\t,\u0026#34;神奈川県\u0026#34;,\t35.44771111\t,\t139.6425361\t,NOW(),NOW()), (\t15\t,\u0026#34;新潟県\u0026#34;,\t37.90243547\t,\t139.0238251\t,NOW(),NOW()), (\t16\t,\u0026#34;富山県\u0026#34;,\t36.69537383\t,\t137.2111942\t,NOW(),NOW()), (\t17\t,\u0026#34;石川県\u0026#34;,\t36.594283\t,\t136.6257139\t,NOW(),NOW()), (\t18\t,\u0026#34;福井県\u0026#34;,\t36.06542211\t,\t136.2218332\t,NOW(),NOW()), (\t19\t,\u0026#34;山梨県\u0026#34;,\t35.66394444\t,\t138.5683861\t,NOW(),NOW()), (\t20\t,\u0026#34;長野県\u0026#34;,\t36.65131389\t,\t138.1809972\t,NOW(),NOW()), (\t21\t,\u0026#34;岐阜県\u0026#34;,\t35.39119222\t,\t136.7221532\t,NOW(),NOW()), (\t22\t,\u0026#34;静岡県\u0026#34;,\t34.97691111\t,\t138.383025\t,NOW(),NOW()), (\t23\t,\u0026#34;愛知県\u0026#34;,\t35.18019722\t,\t136.9067417\t,NOW(),NOW()), (\t24\t,\u0026#34;三重県\u0026#34;,\t34.730275\t,\t136.5085972\t,NOW(),NOW()), (\t25\t,\u0026#34;滋賀県\u0026#34;,\t35.00439167\t,\t135.8683028\t,NOW(),NOW()), (\t26\t,\u0026#34;京都府\u0026#34;,\t35.02128056\t,\t135.7556361\t,NOW(),NOW()), (\t27\t,\u0026#34;大阪府\u0026#34;,\t34.68631997\t,\t135.5200224\t,NOW(),NOW()), (\t28\t,\u0026#34;兵庫県\u0026#34;,\t34.69110236\t,\t135.1828524\t,NOW(),NOW()), (\t29\t,\u0026#34;奈良県\u0026#34;,\t34.68471414\t,\t135.8327707\t,NOW(),NOW()), (\t30\t,\u0026#34;和歌山県\u0026#34;,\t34.22603522\t,\t135.1674939\t,NOW(),NOW()), (\t31\t,\u0026#34;鳥取県\u0026#34;,\t35.50363722\t,\t134.2381983\t,NOW(),NOW()), (\t32\t,\u0026#34;島根県\u0026#34;,\t35.47221683\t,\t133.0505309\t,NOW(),NOW()), (\t33\t,\u0026#34;岡山県\u0026#34;,\t34.66176389\t,\t133.9349\t,NOW(),NOW()), (\t34\t,\u0026#34;広島県\u0026#34;,\t34.396275\t,\t132.459375\t,NOW(),NOW()), (\t35\t,\u0026#34;山口県\u0026#34;,\t34.18580211\t,\t131.4715498\t,NOW(),NOW()), (\t36\t,\u0026#34;徳島県\u0026#34;,\t34.06573333\t,\t134.5594889\t,NOW(),NOW()), (\t37\t,\u0026#34;香川県\u0026#34;,\t34.34003492\t,\t134.0432789\t,NOW(),NOW()), (\t38\t,\u0026#34;愛媛県\u0026#34;,\t33.84164444\t,\t132.7661028\t,NOW(),NOW()), (\t39\t,\u0026#34;高知県\u0026#34;,\t33.55975556\t,\t133.5311167\t,NOW(),NOW()), (\t40\t,\u0026#34;福岡県\u0026#34;,\t33.60626111\t,\t130.4181167\t,NOW(),NOW()), (\t41\t,\u0026#34;佐賀県\u0026#34;,\t33.24932778\t,\t130.2988056\t,NOW(),NOW()), (\t42\t,\u0026#34;長崎県\u0026#34;,\t32.74508975\t,\t129.8736411\t,NOW(),NOW()), (\t43\t,\u0026#34;熊本県\u0026#34;,\t32.78976539\t,\t130.7416619\t,NOW(),NOW()), (\t44\t,\u0026#34;大分県\u0026#34;,\t33.23812308\t,\t131.6125898\t,NOW(),NOW()), (\t45\t,\u0026#34;宮崎県\u0026#34;,\t31.91100714\t,\t131.4238818\t,NOW(),NOW()), (\t46\t,\u0026#34;鹿児島県\u0026#34;,\t31.56022022\t,\t130.5582808\t,NOW(),NOW()), (\t47\t,\u0026#34;沖縄県\u0026#34;,\t26.212375\t,\t127.6809806\t,NOW(),NOW() ); SQL SQLのテンプレートは以下の形になります。\n[adsense-responsive]\r2点間距離算出SQL SELECT id, prefectureName, latitude, longitude, ( 6371 * acos( -- km単位 cos(radians({緯度})) * cos(radians(latitude)) * cos(radians(longitude) - radians({経度})) + sin(radians({緯度})) * sin(radians(latitude)) ) ) AS distance FROM prefectural_office ; この式を実行するとdistance項目に2点間距離がkm単位で取得出来るので、ORDER BYやWHERE条件にも使えます。\n確認 東京タワーから sql SELECT id, prefectureName, latitude, longitude, ( 6371 * acos( cos(radians(35.658581)) * cos(radians(latitude)) * cos(radians(longitude) - radians(139.745433)) + sin(radians(35.658581)) * sin(radians(latitude)) ) ) AS distance FROM prefectural_office ORDER BY distance ; 実行結果 +----+----------------+-----------+------------+--------------------+ | id | prefectureName | latitude | longitude | distance | +----+----------------+-----------+------------+--------------------+ | 13 | 東京都 | 35.689567 | 139.691722 | 5.950625481171745 | | 11 | 埼玉県 | 35.856928 | 139.648787 | 23.71671427178685 | | 14 | 神奈川県 | 35.447711 | 139.642536 | 25.22783961062546 | | 12 | 千葉県 | 35.604589 | 140.123183 | 34.6637438158627 | | 8 | 茨城県 | 36.341600 | 140.446619 | 98.72580516123963 | | 9 | 栃木県 | 36.565485 | 139.883086 | 101.59838451303102 | | 10 | 群馬県 | 36.390601 | 139.060436 | 102.07904543386358 | | 19 | 山梨県 | 35.663944 | 138.568386 | 106.33948479828305 | | 22 | 静岡県 | 34.976911 | 138.383025 | 144.99856059861196 | | 20 | 長野県 | 36.651314 | 138.180997 | 178.63884533543978 | | 7 | 福島県 | 37.749980 | 140.467582 | 241.296943791094 | | 16 | 富山県 | 36.695374 | 137.211194 | 254.9981890193849 | | 15 | 新潟県 | 37.902435 | 139.023825 | 257.6462044373321 | | 23 | 愛知県 | 35.180197 | 136.906742 | 262.663603602861 | | 21 | 岐阜県 | 35.391192 | 136.722153 | 275.1986596888009 | | 6 | 山形県 | 38.240489 | 140.363428 | 292.29790529837885 | | 17 | 石川県 | 36.594283 | 136.625714 | 298.8700798944938 | | 4 | 宮城県 | 38.268926 | 140.872006 | 307.0225258167587 | | 24 | 三重県 | 34.730275 | 136.508597 | 311.6940135546833 | | 18 | 福井県 | 36.065422 | 136.221833 | 320.7195086989554 | | 25 | 滋賀県 | 35.004392 | 135.868303 | 359.1309463878057 | | 26 | 京都府 | 35.021281 | 135.755636 | 368.7410271001972 | | 29 | 奈良県 | 34.684714 | 135.832771 | 371.72686754619974 | | 27 | 大阪府 | 34.686320 | 135.520022 | 398.9483006847132 | | 28 | 兵庫県 | 34.691102 | 135.182852 | 428.37485993933143 | | 30 | 和歌山県 | 34.226035 | 135.167494 | 446.5892595756499 | | 5 | 秋田県 | 39.718031 | 140.103178 | 452.4852998510215 | | 3 | 岩手県 | 39.703584 | 141.152709 | 466.502623601523 | | 31 | 鳥取県 | 35.503637 | 134.238198 | 498.2740045758765 | | 36 | 徳島県 | 34.065733 | 134.559489 | 505.1378956725802 | | 37 | 香川県 | 34.340035 | 134.043279 | 539.5901864769002 | | 33 | 岡山県 | 34.661764 | 133.934900 | 539.6319451989946 | | 2 | 青森県 | 40.824354 | 140.739966 | 580.9247160833129 | | 32 | 島根県 | 35.472217 | 133.050531 | 605.8028384722828 | | 39 | 高知県 | 33.559756 | 133.531117 | 614.5919508932951 | | 38 | 愛媛県 | 33.841644 | 132.766103 | 668.7080193259349 | | 34 | 広島県 | 34.396275 | 132.459375 | 677.9409956240623 | | 35 | 山口県 | 34.185802 | 131.471550 | 771.658681940248 | | 44 | 大分県 | 33.238123 | 131.612590 | 792.5108882098315 | | 1 | 北海道 | 43.064281 | 141.346797 | 834.8571378337715 | | 45 | 宮崎県 | 31.911007 | 131.423882 | 874.2327147262182 | | 40 | 福岡県 | 33.606261 | 130.418117 | 882.9671997424465 | | 43 | 熊本県 | 32.789765 | 130.741662 | 886.7054081831598 | | 41 | 佐賀県 | 33.249328 | 130.298806 | 906.1897556389888 | | 42 | 長崎県 | 32.745090 | 129.873641 | 963.3773037576652 | | 46 | 鹿児島県 | 31.560220 | 130.558281 | 964.5350593543586 | | 47 | 沖縄県 | 26.212375 | 127.680981 | 1555.5654256120438 | +----+----------------+-----------+------------+--------------------+ 47 rows in set (0.00 sec) 東京ディズニーランド」 [adsense-responsive]\rSQL SELECT id, prefectureName, latitude, longitude, ( 6371 * acos( cos(radians(35.632896)) * cos(radians(latitude)) * cos(radians(longitude) - radians(139.880394)) + sin(radians(35.632896)) * sin(radians(latitude)) ) ) AS distance FROM prefectural_office ORDER BY distance ; 実行結果 +----+----------------+-----------+------------+--------------------+ | id | prefectureName | latitude | longitude | distance | +----+----------------+-----------+------------+--------------------+ | 13 | 東京都 | 35.689567 | 139.691722 | 18.17280019714266 | | 12 | 千葉県 | 35.604589 | 140.123183 | 22.17062746619568 | | 14 | 神奈川県 | 35.447711 | 139.642536 | 29.785652991722298 | | 11 | 埼玉県 | 35.856928 | 139.648787 | 32.51876968720438 | | 8 | 茨城県 | 36.341600 | 140.446619 | 93.83719890141437 | | 9 | 栃木県 | 36.565485 | 139.883086 | 103.69944748414214 | | 10 | 群馬県 | 36.390601 | 139.060436 | 111.97130395204431 | | 19 | 山梨県 | 35.663944 | 138.568386 | 118.59972289249698 | | 22 | 静岡県 | 34.976911 | 138.383025 | 154.2163634010414 | | 20 | 長野県 | 36.651314 | 138.180997 | 190.02196594148577 | | 7 | 福島県 | 37.749980 | 140.467582 | 241.15901199823207 | | 15 | 新潟県 | 37.902435 | 139.023825 | 263.6391672208879 | | 16 | 富山県 | 36.695374 | 137.211194 | 267.1438549272756 | | 23 | 愛知県 | 35.180197 | 136.906742 | 274.1532252820788 | | 21 | 岐阜県 | 35.391192 | 136.722153 | 287.1064923662216 | | 6 | 山形県 | 38.240489 | 140.363428 | 293.1106773787993 | | 4 | 宮城県 | 38.268926 | 140.872006 | 306.0653796283301 | | 17 | 石川県 | 36.594283 | 136.625714 | 311.2739615971568 | | 24 | 三重県 | 34.730275 | 136.508597 | 322.4352233215935 | | 18 | 福井県 | 36.065422 | 136.221833 | 333.2152705971605 | | 25 | 滋賀県 | 35.004392 | 135.868303 | 370.6338570662051 | | 26 | 京都府 | 35.021281 | 135.755636 | 380.296832785984 | | 29 | 奈良県 | 34.684714 | 135.832771 | 382.7356249393663 | | 27 | 大阪府 | 34.686320 | 135.520022 | 410.08535462108114 | | 28 | 兵庫県 | 34.691102 | 135.182852 | 439.632617655556 | | 5 | 秋田県 | 39.718031 | 140.103178 | 454.6687476761153 | | 30 | 和歌山県 | 34.226035 | 135.167494 | 457.17781767896673 | | 3 | 岩手県 | 39.703584 | 141.152709 | 466.2712271514309 | | 31 | 鳥取県 | 35.503637 | 134.238198 | 510.46056137594127 | | 36 | 徳島県 | 34.065733 | 134.559489 | 515.783440546053 | | 37 | 香川県 | 34.340035 | 134.043279 | 550.7544795494472 | | 33 | 岡山県 | 34.661764 | 133.934900 | 551.15715583364 | | 2 | 青森県 | 40.824354 | 140.739966 | 582.1166669748246 | | 32 | 島根県 | 35.472217 | 133.050531 | 618.0060937034976 | | 39 | 高知県 | 33.559756 | 133.531117 | 625.05497118578 | | 38 | 愛媛県 | 33.841644 | 132.766103 | 679.7199471549961 | | 34 | 広島県 | 34.396275 | 132.459375 | 689.4895945575495 | | 35 | 山口県 | 34.185802 | 131.471550 | 783.2035644592869 | | 44 | 大分県 | 33.238123 | 131.612590 | 803.3114317853348 | | 1 | 北海道 | 43.064281 | 141.346797 | 835.8568342321929 | | 45 | 宮崎県 | 31.911007 | 131.423882 | 883.9704195918114 | | 40 | 福岡県 | 33.606261 | 130.418117 | 894.2952839629211 | | 43 | 熊本県 | 32.789765 | 130.741662 | 897.393020853011 | | 41 | 佐賀県 | 33.249328 | 130.298806 | 917.3065174157102 | | 42 | 長崎県 | 32.745090 | 129.873641 | 974.2494607741061 | | 46 | 鹿児島県 | 31.560220 | 130.558281 | 974.3396415763573 | | 47 | 沖縄県 | 26.212375 | 127.680981 | 1563.260125986337 | +----+----------------+-----------+------------+--------------------+ 47 rows in set (0.00 sec) ユニバーサルスタジオジャパン SQL SELECT id, prefectureName, latitude, longitude, ( 6371 * acos( cos(radians(34.665442)) * cos(radians(latitude)) * cos(radians(longitude) - radians(135.432338)) + sin(radians(34.665442)) * sin(radians(latitude)) ) ) AS distance FROM prefectural_office ORDER BY distance ; 実行結果 +----+----------------+-----------+------------+--------------------+ | id | prefectureName | latitude | longitude | distance | +----+----------------+-----------+------------+--------------------+ | 27 | 大阪府 | 34.686320 | 135.520022 | 8.347566778513 | | 28 | 兵庫県 | 34.691102 | 135.182852 | 22.99128820980341 | | 29 | 奈良県 | 34.684714 | 135.832771 | 36.68053132565563 | | 26 | 京都府 | 35.021281 | 135.755636 | 49.35652934358986 | | 30 | 和歌山県 | 34.226035 | 135.167494 | 54.56255511489153 | | 25 | 滋賀県 | 35.004392 | 135.868303 | 54.80634189341269 | | 24 | 三重県 | 34.730275 | 136.508597 | 98.65552465883087 | | 36 | 徳島県 | 34.065733 | 134.559489 | 104.23598440584891 | | 37 | 香川県 | 34.340035 | 134.043279 | 132.32895828916233 | | 33 | 岡山県 | 34.661764 | 133.934900 | 136.9526926807346 | | 21 | 岐阜県 | 35.391192 | 136.722153 | 142.49426996787943 | | 31 | 鳥取県 | 35.503637 | 134.238198 | 143.15151600464213 | | 23 | 愛知県 | 35.180197 | 136.906742 | 146.10011358033697 | | 18 | 福井県 | 36.065422 | 136.221833 | 171.34080802954392 | | 39 | 高知県 | 33.559756 | 133.531117 | 213.88917489522728 | | 32 | 島根県 | 35.472217 | 133.050531 | 234.58667000229642 | | 17 | 石川県 | 36.594283 | 136.625714 | 240.06357228174784 | | 38 | 愛媛県 | 33.841644 | 132.766103 | 261.6002041122604 | | 22 | 静岡県 | 34.976911 | 138.383025 | 271.55808151699966 | | 34 | 広島県 | 34.396275 | 132.459375 | 273.96679636138555 | | 16 | 富山県 | 36.695374 | 137.211194 | 277.0482771922017 | | 19 | 山梨県 | 35.663944 | 138.568386 | 305.91143906304444 | | 20 | 長野県 | 36.651314 | 138.180997 | 332.2802193427927 | | 35 | 山口県 | 34.185802 | 131.471550 | 367.1534391112997 | | 10 | 群馬県 | 36.390601 | 139.060436 | 380.21064743798485 | | 44 | 大分県 | 33.238123 | 131.612590 | 386.38142924304543 | | 14 | 神奈川県 | 35.447711 | 139.642536 | 392.93585249737043 | | 13 | 東京都 | 35.689567 | 139.691722 | 403.48593571831134 | | 11 | 埼玉県 | 35.856928 | 139.648787 | 405.0613079334491 | | 12 | 千葉県 | 35.604589 | 140.123183 | 439.10891768057496 | | 9 | 栃木県 | 36.565485 | 139.883086 | 454.3548599849104 | | 40 | 福岡県 | 33.606261 | 130.418117 | 476.22556598796143 | | 43 | 熊本県 | 32.789765 | 130.741662 | 481.25076502077144 | | 45 | 宮崎県 | 31.911007 | 131.423882 | 482.23347578635526 | | 15 | 新潟県 | 37.902435 | 139.023825 | 482.80623579842376 | | 8 | 茨城県 | 36.341600 | 140.446619 | 490.5932563469201 | | 41 | 佐賀県 | 33.249328 | 130.298806 | 498.8947131076346 | | 42 | 長崎県 | 32.745090 | 129.873641 | 556.6640089687979 | | 7 | 福島県 | 37.749980 | 140.467582 | 567.0608788621107 | | 46 | 鹿児島県 | 31.560220 | 130.558281 | 570.2127524749369 | | 6 | 山形県 | 38.240489 | 140.363428 | 593.5724408674877 | | 4 | 宮城県 | 38.268926 | 140.872006 | 629.9975475284301 | | 5 | 秋田県 | 39.718031 | 140.103178 | 697.4878644657354 | | 3 | 岩手県 | 39.703584 | 141.152709 | 755.060116327493 | | 2 | 青森県 | 40.824354 | 140.739966 | 828.3431528753739 | | 1 | 北海道 | 43.064281 | 141.346797 | 1064.3887047685812 | | 47 | 沖縄県 | 26.212375 | 127.680981 | 1197.2651815201575 | +----+----------------+-----------+------------+--------------------+ ハウステンボス SQL SELECT id, prefectureName, latitude, longitude, ( 6371 * acos( cos(radians(33.089428)) * cos(radians(latitude)) * cos(radians(longitude) - radians(129.793823)) + sin(radians(33.089428)) * sin(radians(latitude)) ) ) AS distance FROM prefectural_office ORDER BY distance ; 実行結果 +----+----------------+-----------+------------+--------------------+ | id | prefectureName | latitude | longitude | distance | +----+----------------+-----------+------------+--------------------+ | 42 | 長崎県 | 32.745090 | 129.873641 | 39.006781737299406 | | 41 | 佐賀県 | 33.249328 | 130.298806 | 50.25251025637944 | | 40 | 福岡県 | 33.606261 | 130.418117 | 81.64137237972476 | | 43 | 熊本県 | 32.789765 | 130.741662 | 94.51964220169204 | | 44 | 大分県 | 33.238123 | 131.612590 | 170.09849547640988 | | 46 | 鹿児島県 | 31.560220 | 130.558281 | 184.5877329538185 | | 35 | 山口県 | 34.185802 | 131.471550 | 197.4427959258778 | | 45 | 宮崎県 | 31.911007 | 131.423882 | 201.33641358776467 | | 34 | 広島県 | 34.396275 | 132.459375 | 286.0973317466086 | | 38 | 愛媛県 | 33.841644 | 132.766103 | 288.1057552058132 | | 39 | 高知県 | 33.559756 | 133.531117 | 351.13263065584806 | | 32 | 島根県 | 35.472217 | 133.050531 | 399.62028179620415 | | 37 | 香川県 | 34.340035 | 134.043279 | 416.8775350373696 | | 33 | 岡山県 | 34.661764 | 133.934900 | 420.3347949356522 | | 36 | 徳島県 | 34.065733 | 134.559489 | 454.5958942707968 | | 31 | 鳥取県 | 35.503637 | 134.238198 | 488.52976177734905 | | 30 | 和歌山県 | 34.226035 | 135.167494 | 513.0918965144793 | | 28 | 兵庫県 | 34.691102 | 135.182852 | 528.2595175551966 | | 27 | 大阪府 | 34.686320 | 135.520022 | 557.4898311292636 | | 29 | 奈良県 | 34.684714 | 135.832771 | 584.8648213347923 | | 26 | 京都府 | 35.021281 | 135.755636 | 589.614030615892 | | 25 | 滋賀県 | 35.004392 | 135.868303 | 598.6692957893513 | | 24 | 三重県 | 34.730275 | 136.508597 | 645.8051777989417 | | 18 | 福井県 | 36.065422 | 136.221833 | 674.936294482572 | | 21 | 岐阜県 | 35.391192 | 136.722153 | 686.1698985892883 | | 23 | 愛知県 | 35.180197 | 136.906742 | 694.508354750148 | | 17 | 石川県 | 36.594283 | 136.625714 | 734.9633916802294 | | 16 | 富山県 | 36.695374 | 137.211194 | 786.0317808537424 | | 47 | 沖縄県 | 26.212375 | 127.680981 | 791.4183104194316 | | 22 | 静岡県 | 34.976911 | 138.383025 | 818.5317594981125 | | 19 | 山梨県 | 35.663944 | 138.568386 | 854.257447240117 | | 20 | 長野県 | 36.651314 | 138.180997 | 861.1205510125395 | | 10 | 群馬県 | 36.390601 | 139.060436 | 922.3328307429138 | | 14 | 神奈川県 | 35.447711 | 139.642536 | 941.7587818306522 | | 13 | 東京都 | 35.689567 | 139.691722 | 952.6166412260941 | | 11 | 埼玉県 | 35.856928 | 139.648787 | 953.8219996389495 | | 12 | 千葉県 | 35.604589 | 140.123183 | 988.1147598054422 | | 15 | 新潟県 | 37.902435 | 139.023825 | 991.507859962948 | | 9 | 栃木県 | 36.565485 | 139.883086 | 998.0663983359384 | | 8 | 茨城県 | 36.341600 | 140.446619 | 1037.9360355789986 | | 7 | 福島県 | 37.749980 | 140.467582 | 1096.2901656515048 | | 6 | 山形県 | 38.240489 | 140.363428 | 1112.3675058713052 | | 4 | 宮城県 | 38.268926 | 140.872006 | 1153.313393046397 | | 5 | 秋田県 | 39.718031 | 140.103178 | 1179.5036322380151 | | 3 | 岩手県 | 39.703584 | 141.152709 | 1253.1151896285637 | | 2 | 青森県 | 40.824354 | 140.739966 | 1296.456991543648 | | 1 | 北海道 | 43.064281 | 141.346797 | 1498.0510581340395 | +----+----------------+-----------+------------+--------------------+ 47 rows in set (0.00 sec) 終わりに 以上のように、緯度経度さえDBに登録しておけば2点間距離を簡単に算出する事が出来ました。\n近隣検索方法について悩んでいる方はぜひ参考にしてみてください♪\n","date":"2019-08-31T17:05:33+09:00","image":"/wp-content/uploads/2019/08/gpsWithSqlEye.png","permalink":"/2019/08/31/9019/","title":"【MySQL】geometry型ではなくdouble型の緯度経度から2点間距離を計算して算出する方法【GPS位置情報】"},{"content":"To Be Continuedとは？ 皆さんは「To Be Continued」という動画をご存知でしょうか？\n現在、TwitterやTic TokなどでTo Be Continuedのパロディ動画が流行っています。\n今回はTo Be Continuedの元ネタや話題のパロディ動画をご紹介してみようと思います♪\n元ネタ ジョジョの奇妙な冒険のエンディング前の演出 To Be Continuedはアニメ「ジョジョの奇妙な冒険」のエンディング前の演出が元ネタとなっています。\nhttps://youtu.be/Ik6ML3cKIhE\rこちらはエンディングソングの「YES」というアーティストの「ROUNDABOUT」のイントロ部分がエンディング前に流れ始まり、アニメの終わりとともに「To Be Continued」という演出が入ります。\nこの演出によって、話の続きが気になるような終わり方になっています。\nまた、イントロ部分が単純にかっこいいので印象に残りやすい、という点もありますね♪\nなぜ流行ったのか？ では、なぜこのTo Be Continuedを使ったパロディ動画が流行ったのでしょうか？\nそれは、動画の山場であえてジョジョのような静止画に切り替わる演出を行うだけで、動画の続きに対する想像を引き立てられる動画が作れてしまう点でしょう。\n基本的には面白動画を使った編集をするのが流行っています。\nこの演出を加えるだけで、シュールさが5割り増しになるのです！！！笑\n素材用動画 編集用の素材動画をアップロードしたのでご自由にお使いください！\nよかったらチャンネル登録・高評価してもらえると嬉しいです♪\nhttps://www.youtube.com/watch?v=NoqLFfp8YoE\r終わりに 以上のように、To Be Continuedを加える事で絶妙なシュール動画に変身します。\n他にも面白いTo Be Continuedのパロディ動画がネット上にありますので、気になる方は探してみてはいかがでしょうか♪\n","date":"2019-08-16T20:20:18+09:00","image":"/wp-content/uploads/2019/08/toBeContinuedEye.png","permalink":"/2019/08/16/9004/","title":"【シュールの極み】TwitterやTikTok、YouTubeで話題の「To Be Continued」の元ネタや由来まとめ【面白動画】"},{"content":"アドセンスのホーム画面にこんな警告が 謎の警告 いつものように日々の広告収入を確認しようとGoogleAdsenseのホーム画面にアクセスしたところ以下のような警告が表示されている事に気づきました。\nなんぞこれ？\nads.txtをおく必要がある どうやら、GoogleAdsenseの仕様の変更により、認定デジタル販売者の宣言が必要になりました。\nads.txt で認定販売者を宣言する\rads.txt による認定デジタル販売者（Authorized Digital Sellers）の宣言は IAB によるイニシアチブで、コンテンツ内のデジタル広告枠が、そのコンテンツのパブリッシャー（ウェブサイトならばサイト運営者）が認定した販売者（AdSense など）を通してのみ販売されるようにするものです。サイト運営者様は ads.txt を独自に作成することで、自サイトの広告枠の販売者を厳密に管理し、偽の広告枠が広告主に提供されるのを防ぐことができます。\rads.txt は、使用することを強くおすすめします。ads.txt を使用すれば、購入者が偽の広告枠を判別できるため、サイト運営者様としても偽の広告枠に収益が流れるのを阻止し、その分収益を増やすことができるというメリットがあります。 ads.txt で認定販売者を宣言する - AdSense ヘルプ\n天下のGoogle様が置け！言うのであれば我々は忠実に従うまでです。笑\n配置方法自体はとても簡単なので手順をご紹介致します♪\n手順 ads.txtの作成 まずはads.txtを作成しましょう。\nテキストファイルに決まった形でサクッと書くだけです。\nads.txt google.com, pub-XXXXXXXXXXXXXX, DIRECT, f08c47fec0942fa0 XXXXXXXXXXXの部分だけ各自のサイト運営者IDを指定してください。\nf08~の部分はそのままで良いです。\nドメインルートに配置 あとはこのads.txtをドメインルートに配置するだけです。\nFTPなり管理ツールなりで配置しちゃってください。\n当ブログで言えば、ads.txt\u0026nbsp;\nちなみに、このサイト運営者IDは第三者に見られても問題無いので気にせず配置しちゃいましょう。\n確認 数日ほどで警告が消えればads.txtが正式に反映され、警告が消えると思います。\n簡単でしたね♪\n終わりに 以上のようにちょっと怖い警告ですが、原因と対応方法さえ分かれば特に気にせず解決することが出来ます。\n警告が出たまま放置すると、収益が貰えなくなるかもしれないので必ず解決するようにしてください！\n","date":"2019-07-27T22:26:46+09:00","image":"/wp-content/uploads/2019/07/adsenseAdsTxtEye.png","permalink":"/2019/07/27/8987/","title":"【GoogleAdsense】ads.txtの問題を修正しろと言う警告が出たので配置のやり方をまとめてみた【認定デジタル販売者】"},{"content":"SwaggerUIにつぐ新たな勢力 以前、Swaggerに関する記事をご紹介しました。\n関連記事 【炎上回避】APIドキュメントはSwaggerで定義すると幸せになれる説 2018/08/04 1111文字 約3分で読めます そして、先日SwaggerUIに取って代わりそうな新たなUIツールを発見したのでご紹介しようと思います。\nReDoc What\u0026rsquo;s? ReDocとは、SwaggerSpecで書かれた定義を元に、Htmlベースのドキュメントページを作成してくれるツールとなっています。\nOpenAPI/Swagger-generated API Reference DocumentationRedocly/redoc: 📘 OpenAPI/Swagger-generated API Reference Documentation\nSwaggerUIとの違いは？ ここだけの説明を見ると、SwaggerUIと同じじゃん！と思う方もいると思いますが、とりあえずDEMOページ\u0026nbsp;を見てみてください。\nちなみにSwaggerUIはDEMOページ\u0026nbsp;と比較してみてください。\n感性は人それぞれですが、少なくとも筆者はReDocの方が見やすく感じました。\n3カラムに分けられており、それぞれのカラム内の項目も見やすく情報が整理されています。\nなんとなくですがフォントやデザインも今風な気がしますね。笑\nさらにReDocの方はカスタマイズもしやすいとの事！\n使い方も簡単 では、実際にどうやって使うの？！というと、SwaggerUIと同様に特定のhtmlを配置してその中からSwaggerSpecを読み込むだけです。\nなので、SwaggerUIからの乗り換えも可能ですし、両方を共存させることが可能です！\nそれでは、実際にReDocを導入するために必要なHtmlを用意してみましょう。\n手順 Htmlファイルを用意 ReDocを表示するためのHtmlを用意しましょう。\n公式ページにあるサンプルをベースにする形で良いです。\n一旦はこのような形になりました。\nindex.html \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;ReDoc\u0026lt;/title\u0026gt; \u0026lt;!-- needed for adaptive design --\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;/\u0026gt; \u0026lt;meta name=\u0026#34;viewport\u0026#34; content=\u0026#34;width=device-width, initial-scale=1\u0026#34;\u0026gt; \u0026lt;link href=\u0026#34;https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700\u0026#34; rel=\u0026#34;stylesheet\u0026#34;\u0026gt; \u0026lt;!-- ReDoc doesn\u0026#39;t change outer page styles --\u0026gt; \u0026lt;style\u0026gt; body { margin: 0; padding: 0; } \u0026lt;/style\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;redoc spec-url=\u0026#34;../spec.yaml\u0026#34;\u0026gt;\u0026lt;/redoc\u0026gt;\u0026lt;!-- Specへのパス --\u0026gt; \u0026lt;script src=\u0026#34;https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js\u0026#34;\u0026gt; \u0026lt;/script\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; 準備はたったこれだけ。\nCDNで必要なスクリプト類を読み込めるのでめちゃくちゃ簡単です！\nSwaggerUIの場合は関連する各ファイルもサーバーに配置して管理する必要があったので、この辺もとても導入しやすくなっていますね。\nあとは、サーバーにSpeckファイルと合わせて配置するだけで簡単にAPIドキュメントをブラウザ管理する事が出来ちゃいます。\n終わりに 以上のように、同じSpecファイルを元にイケてるAPIドキュメントページを作成する事が出来ました。\nこれからAPIドキュメントを作成する方は、SwaggerUIではなくReDocを試してみてはいかがでしょうか♪\n","date":"2019-07-21T20:22:14+09:00","image":"/wp-content/uploads/2019/07/redocInstallEye.png","permalink":"/2019/07/21/8963/","title":"【SwaggerUIはもう古い？！】今時のイケてるデザインなAPIドキュメントツール「ReDoc」の導入方法と使い方【簡単】"},{"content":"Nuxt.jsならAPI呼び出しも簡単 前回の記事では、Nuxt.jsプロジェクトにTypeScriptを導入するところまで進めました。\n関連記事 【Nuxt.js】プロジェクトに後から自前でTypeScriptを導入する方法【yarnでサクッと簡単】 2019/06/17 1924文字 約4分で読めます 今回は、Nuxt.js内部で外部APIへのリクエストを行って、そのレスポンスを画面に表示するところまでを作ってみようと思います。\n手順 モジュールをインストール まずは例の如くyarnコマンドでモジュールをインストールしましょう。\n今回はNuxt.jsから公開されている@nuxtjs/axiosをインストールします。\nyarn add @nuxtjs/axios yarn add v1.16.0 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 10 new dependencies. info Direct dependencies └─ @nuxtjs/axios@5.5.4 info All dependencies ├─ @nuxtjs/axios@5.5.4 ├─ @nuxtjs/proxy@1.3.3 ├─ axios-retry@3.1.2 ├─ axios@0.19.0 ├─ eventemitter3@3.1.2 ├─ follow-redirects@1.5.10 ├─ http-proxy-middleware@0.19.1 ├─ http-proxy@1.17.0 ├─ is-retry-allowed@1.1.0 └─ requires-port@1.0.0 Done in 124.66s. axiosとは？ axios\u0026nbsp;とは、様々なブラウザやNode.js環境で使う事の出来るプロミスベースのHttpクライアントです。\n今時のフロントエンドでは、axiosを使ってHttpリクエストを行うのがデファクトとなっています。\nPromise based HTTP client for the browser and node.jsaxios/axios: Promise based HTTP client for the browser and node.js\nまた、Nuxt.jsは今回インストールした@nuxtjs/axiosモジュールによって、よりNuxt.js内で使いやすくなっているので、基本的にはこちらを使う事になります。\nnuxt.config.jsの編集 次に、インストールしたモジュールを利用する設定を追記します。\nnuxt.config.js module.exports = { modules: [ \u0026#39;@nuxtjs/style-resources\u0026#39;, \u0026#39;@nuxtjs/axios\u0026#39; // 追加 ], ... (略) ... } asyncDataの修正 次に、実際にaxiosを使ってAPIから値を取得する部分を記述してみましょう。\npages/accounts/_id/index.ts import { Component, Vue, Prop } from \u0026#39;vue-property-decorator\u0026#39; @Component({ components: { }, async asyncData ({app,params}) { // 分割代入引数にappを追加 const data = await app.$axios.$get(`http://localhost:3001/accounts/${params.id}`) // appの中の$axiosを使用 return {data}; } }) export default class Index extends Vue {} axiosをimportすることなく、インジェクションしたapp経由で簡単に利用することが出来ます。\nちなみに、今回はMockoonを使って以下のレスポンスを返すStubを用意してそちらにアクセスしようと思います。\n関連記事 【簡単オススメMockAPI】Mockoonを使って爆速でMacやWindowsマシンのローカル環境にStubサーバーを作ってみよう【Node.js】 2019/06/14 2276文字 約5分で読めます Mockoonレスポンス { \u0026#34;id\u0026#34;: \u0026#34;{{urlParam \u0026#39;id\u0026#39;}}\u0026#34;, \u0026#34;name\u0026#34; : \u0026#34;Stub\u0026#34;, \u0026#34;age\u0026#34;: 999 } 確認 では、実際にhttp://localhost:3000/accounts/12345\u0026nbsp;へアクセスしてみましょう。\n正常に外部APIへリクエストを投げて、レスポンスを表示出来ましたね♪\n終わりに 以上のように、Nuxt.jsであればaxiosを導入するのも一瞬でした。\n基本的には、このように外部サーバーへのアクセスを行ってレスポンスを取り扱うことになると思うので、是非参考にしてみてください♪\n","date":"2019-07-19T23:25:08+09:00","image":"/wp-content/uploads/2019/07/axiosUseByNuxtjsEye.png","permalink":"/2019/07/19/8774/","title":"【SSR】Nuxt.jsで@nuxtjs/axiosを使って外部APIにリクエストを投げてレスポンスを取得・表示してみよう【Vue.js】"},{"content":"JavaのバージョンはOracleのせいで闇が深い 皆さんはJava言語を使って開発をしたことはありますか？\nRubyやPHPなどの他の言語と同様に、バージョンの概念を持っていますが、Oracleが絡んでいるのでJavaのバージョンについてはちょっと一癖あります。\nしかし、そんなめんどくさいJavaにも他の言語と同様に「jenv」と呼ばれる便利なバージョン管理ツールが出ています。\n今回はそちらのインストール方法と使い方をご紹介していこうと思います。\n手順 前提 今回は、以前ご紹介したanyenv経由でjenvをインストールしようと思っていますので、まずはそちらを見て頂ければなと思います。\n関連記事 【JavaやRuby含めほとんどの言語に対応】Homebrewで「anyenv」をインストールしてhodenvを使ってバージョン管理をする方法まとめ【fish shellも対応】 2019/06/27 1985文字 約4分で読めます jenvのインストール ではまずはanyenv経由でjenvをインストールしましょう。\nanyenv install jenv /var/folders/5k/s10ppj590d534615rmtkm9cm0000gn/T/jenv.20190619153804.29063 ~ Cloning https://github.com/jenv/jenv.git master to jenv... Cloning into \u0026#39;jenv\u0026#39;... remote: Enumerating objects: 15, done. remote: Counting objects: 100% (15/15), done. remote: Compressing objects: 100% (15/15), done. remote: Total 1088 (delta 2), reused 5 (delta 0), pack-reused 1073 Receiving objects: 100% (1088/1088), 414.45 KiB | 424.00 KiB/s, done. Resolving deltas: 100% (478/478), done. ~ Install jenv succeeded! Please reload your profile (exec $SHELL -l) or open a new session. 環境変数の設定 次に環境変数を設定します。\n~/.config/fish/config.fis ... (略) ... #jenv set -x JENV_ROOT $ANYENV_ROOT/envs/jenv/ set -x PATH $JENV_ROOT/bin $PATH set -x PATH $JENV_ROOT/shims $PATH ... (略) ... 確認 jenv jenv 0.5.2-4-gd8ffd5b Usage: jenv \u0026lt;command\u0026gt; [\u0026lt;args\u0026gt;] Some useful jenv commands are: commands List all available jenv commands local Set or show the local application-specific Java version global Set or show the global Java version shell Set or show the shell-specific Java version rehash Rehash jenv shims (run this after installing executables) version Show the current Java version and its origin versions List all Java versions available to jenv which Display the full path to an executable whence List all Java versions that contain the given executable add Add JDK into jenv. A alias name will be generated by parsing \u0026#34;java -version\u0026#34; See `jenv help \u0026lt;command\u0026gt;\u0026#39; for information on a specific command. For full documentation, see: https://github.com/hikage/jenv#readme brew tap caskroom/versionsの設定 今回はHomebrewで複数のJavaを管理したいので、caskroom/versionsを導入します。\nbrew tap caskroom/versions ==\u0026gt; Tapping caskroom/versions Cloning into \u0026#39;/usr/local/Homebrew/Library/Taps/caskroom/homebrew-versions\u0026#39;... remote: Enumerating objects: 202, done. remote: Counting objects: 100% (202/202), done. remote: Compressing objects: 100% (198/198), done. remote: Total 202 (delta 10), reused 32 (delta 1), pack-reused 0 Receiving objects: 100% (202/202), 86.17 KiB | 418.00 KiB/s, done. Resolving deltas: 100% (10/10), done. Tapped 173 casks (220 files, 329.7KB). \u0010\u0010\rJDKのダウンロード 次はJDKをダウンロードしましょう。今回はJava8とJava11を用意します。\nJava8 Java8はライセンスの関係で2019年6月19日時点でインストール不可能なので、後述のいずれかで代用する必要があります。\nちなみに、後述の作業で分かるのですが今回インストールした時点ではいずれも中身は同じopenjdk64-1.8.0.212のようでした。\nAdoptOpenJDK 8 関連記事 【オラクルのJava有償化問題】無償のJDK「AdoptOpenJDK」をmacにインストールする方法【やり方紹介】 2018/10/22 1843文字 約4分で読めます brew cask install adoptopenjdk8 ==\u0026gt; Satisfying dependencies ==\u0026gt; Downloading https://github.com/AdoptOpenJDK/openjdk8-binaries/releases/download/jdk8u212-b03/OpenJDK8U-jdk_x64_mac_hotspot_8u212b03.pkg ==\u0026gt; Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/140418865/07e4b900-61d1-11e9-96f2-868c40733c49?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026amp;X-Amz-Credential=AKIAIWNJYAX4CSV ######################################################################## 100.0% ==\u0026gt; Verifying SHA-256 checksum for Cask \u0026#39;adoptopenjdk8\u0026#39;. ==\u0026gt; Installing Cask adoptopenjdk8 ==\u0026gt; Running installer for adoptopenjdk8; your password may be necessary. ==\u0026gt; Package installers may write to any location; options such as --appdir are ignored. Password: installer: Package name is AdoptOpenJDK installer: Installing at base path / installer: The install was successful. 🍺 adoptopenjdk8 was successfully installed! Corretto 8 brew cask install corretto8 ==\u0026gt; Satisfying dependencies ==\u0026gt; Downloading https://d3pxv6yz143wms.cloudfront.net/8.212.04.2/amazon-corretto-8.212.04.2-macosx-x64.pkg ######################################################################## 100.0% ==\u0026gt; Verifying SHA-256 checksum for Cask \u0026#39;corretto8\u0026#39;. ==\u0026gt; Installing Cask corretto8 ==\u0026gt; Running installer for corretto8; your password may be necessary. ==\u0026gt; Package installers may write to any location; options such as --appdir are ignored. installer: Package name is Amazon Corretto 8 installer: Installing at base path / installer: The install was successful. 🍺 corretto8 was successfully installed! Java 11 brew cask install java11 ==\u0026gt; Satisfying dependencies ==\u0026gt; Downloading https://download.oracle.com/java/GA/jdk11/9/GPL/openjdk-11.0.2_osx-x64_bin.tar.gz ######################################################################## 100.0% ==\u0026gt; Verifying SHA-256 checksum for Cask \u0026#39;java11\u0026#39;. ==\u0026gt; Installing Cask java11 ==\u0026gt; Moving Generic Artifact \u0026#39;jdk-11.0.2.jdk\u0026#39; to \u0026#39;/Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk\u0026#39;. Password: 🍺 java11 was successfully installed! 確認 /usr/libexec/java_home -V Matching Java Virtual Machines (3): 11.0.2, x86_64:\t\u0026#34;OpenJDK 11.0.2\u0026#34;\t/Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home 1.8.0_212, x86_64:\t\u0026#34;Amazon Corretto 8\u0026#34;\t/Library/Java/JavaVirtualMachines/amazon-corretto-8.jdk/Contents/Home 1.8.0_212, x86_64:\t\u0026#34;AdoptOpenJDK 8\u0026#34;\t/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home jenvの管理対象に追加 インストールしたJDKをjenvの管理対象として追加していきましょう。\nJDK追加 jenv add /Library/Java/JavaVirtualMachines/openjdk-11.0.2.jdk/Contents/Home openjdk64-11.0.2 added 11.0.2 added 11.0 added jenv add /Library/Java/JavaVirtualMachines/amazon-corretto-8.jdk/Contents/Home openjdk64-1.8.0.212 added 1.8.0.212 added 1.8 added jenv add /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home openjdk64-1.8.0.212 already present, skip installation 1.8.0.212 already present, skip installation 1.8 already present, skip installation # 内部的に同じopenjdkを使っているらしいので、スキップされた 確認 jenv versions * system 1.8 (set by /Users/blogenist/.anyenv/envs/jenv/version) 1.8.0.212 11.0 11.0.2 openjdk64-1.8.0.212 openjdk64-11.0.2 バージョンの変更 グローバルの場合 コマンド jenv global 1.8 確認 java -version openjdk version \u0026#34;1.8.0_212\u0026#34; OpenJDK Runtime Environment Corretto-8.212.04.2 (build 1.8.0_212-b04) OpenJDK 64-Bit Server VM Corretto-8.212.04.2 (build 25.212-b04, mixed mode) ローカルの場合 コマンド jenv local 11.0 カレントディレクトリに以下のlocal用の設定ファイルが生成されます。\n.java-version 11.0 確認 java -version openjdk version \u0026#34;11.0.2\u0026#34; 2019-01-15 OpenJDK Runtime Environment 18.9 (build 11.0.2+9) OpenJDK 64-Bit Server VM 18.9 (build 11.0.2+9, mixed mode) 終わりに 以上のように簡単にJavaのバージョンも切り替える事が可能になりました。\nJavaのバージョン切り替えは環境変数を都度変えたりする必要があったりととてもめんどくさかったので、jenvを使って幸せになってみてください♪\n","date":"2019-06-30T16:50:30+09:00","image":"/wp-content/uploads/2019/06/installJenvEye.png","permalink":"/2019/06/30/8863/","title":"【オラクルの呪い】「jenv」を使ってJavaのバージョンをコマンド一つで切り替えよう【Homebrew/anyenv】"},{"content":"言語のバージョン管理の決定版 皆さんは言語のバージョン管理は行っていますか？\n有名なのはpyenvやnodenvなどですね。\nしかし、各言語ごとにバージョン管理システムを落として管理するのはとてもめんどくさいと思います。\n今回はほとんどの開発言語のバージョン管理を可能にしてくれるanyenvについてご紹介しようと思います。\nanyenv anyenvとはXXenv関連のモジュールをまとめて一限管理してくれるモジュールとなっています。\nanyenv - All in one for **env\rThis is a simple wrapper for rbenv style environment managers. You don't have to git clone or modify your shell profile for each **env anymore if you install anyenv.anyenv/anyenv: All in one for **env\nこちらを使うと、anyenv経由でpyenvやnodenvを取扱う事が可能になるので、とても便利です。\nインストール方法や使い方もとても簡単なので、ご紹介しようと思います。\n手順 anyenvのインストール まずはメインとなるanyenvをお馴染みHomebrewを使ってインストールしましょう。\n[adsense-responsive]\rbrew install anyenv ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/anyenv-1.1.1.mojave.bottle.tar.gz Already downloaded: /Users/blogenist/Library/Caches/Homebrew/downloads/8bf4362e86fa71924c51fe1833bcf52d2f1ec89b67dd2aa570e65faa7ad3bf99--anyenv-1.1.1.mojave.bottle.tar.gz ==\u0026gt; Pouring anyenv-1.1.1.mojave.bottle.tar.gz 🍺 /usr/local/Cellar/anyenv/1.1.1: 23 files, 29.6KB 環境変数の設定 インストールが完了したら環境変数にANYENV_ROOT=~/.anyenvを追加しておきましょう。\n確認 anyenv -v anyenv 1.1.1 init この状態で以下のコマンドを実行すると、エラーが表示されます。\nanyenv install -l ANYENV_DEFINITION_ROOT(/Users/blogenist/.config/anyenv/anyenv-install) doesn\u0026#39;t exist. You can initialize it by: \u0026gt; anyenv install --init これは、anyenv用の作業ディレクトリが無いから、anyenv install --initで初期化して！というメッセージなので言われた通りに実行しましょう。\nanyenv install --init Manifest directory doesn\u0026#39;t exist: /Users/blogenist/.config/anyenv/anyenv-install Do you want to checkout ? [y/N]: y Cloning https://github.com/anyenv/anyenv-install.git master to /Users/blogenist/.config/anyenv/anyenv-install... Cloning into \u0026#39;/Users/blogenist/.config/anyenv/anyenv-install\u0026#39;... remote: Enumerating objects: 48, done. remote: Counting objects: 100% (48/48), done. remote: Compressing objects: 100% (42/42), done. remote: Total 48 (delta 2), reused 45 (delta 1), pack-reused 0 Unpacking objects: 100% (48/48), done. Completed! 確認 これで必要な準備が出来たのでもう一度コマンドを打ってみましょう。\nanyenv install -l Renv crenv denv erlenv exenv goenv hsenv jenv luaenv nodenv phpenv plenv pyenv rbenv sbtenv scalaenv swiftenv tfenv 正常に通りましたね♪\nこのリストが管理出来る各言語のようです。\nほとんど網羅していますね・・・！\nnodenvのインストール 今回は試しにnodenvを使ってみようと思います。\n[adsense-responsive]\ranyenv install nodenv /var/folders/5k/s10ppj590d534615rmtkm9cm0000gn/T/nodenv.20190619141332.24018 ~ Cloning https://github.com/nodenv/nodenv.git master to nodenv... Cloning into \u0026#39;nodenv\u0026#39;... remote: Enumerating objects: 35, done. remote: Counting objects: 100% (35/35), done. remote: Compressing objects: 100% (30/30), done. remote: Total 3719 (delta 15), reused 21 (delta 5), pack-reused 3684 Receiving objects: 100% (3719/3719), 662.32 KiB | 495.00 KiB/s, done. Resolving deltas: 100% (2465/2465), done. ~ ~/.anyenv/envs/nodenv/plugins ~ Cloning https://github.com/nodenv/node-build.git master to node-build... Cloning into \u0026#39;node-build\u0026#39;... remote: Enumerating objects: 64, done. remote: Counting objects: 100% (64/64), done. remote: Compressing objects: 100% (45/45), done. remote: Total 17211 (delta 21), reused 54 (delta 11), pack-reused 17147 Receiving objects: 100% (17211/17211), 2.99 MiB | 703.00 KiB/s, done. Resolving deltas: 100% (11090/11090), done. ~ ~/.anyenv/envs/nodenv/plugins ~ Cloning https://github.com/nodenv/nodenv-default-packages.git master to nodenv-default-packages... Cloning into \u0026#39;nodenv-default-packages\u0026#39;... remote: Enumerating objects: 13, done. remote: Counting objects: 100% (13/13), done. remote: Compressing objects: 100% (11/11), done. remote: Total 264 (delta 6), reused 4 (delta 2), pack-reused 251 Receiving objects: 100% (264/264), 58.20 KiB | 505.00 KiB/s, done. Resolving deltas: 100% (119/119), done. ~ ~/.anyenv/envs/nodenv/plugins ~ Cloning https://github.com/nodenv/nodenv-vars.git master to nodenv-vars... Cloning into \u0026#39;nodenv-vars\u0026#39;... remote: Enumerating objects: 211, done. remote: Total 211 (delta 0), reused 0 (delta 0), pack-reused 211 Receiving objects: 100% (211/211), 31.82 KiB | 237.00 KiB/s, done. Resolving deltas: 100% (76/76), done. ~ Install nodenv succeeded! Please reload your profile (exec $SHELL -l) or open a new session. 確認 nodenv -v nodenv 1.3.0 対象バージョンのインストール 現在インストール可能なバージョン一覧をみてみましょう。\nnodenv install -l Available versions: 0.1.14 0.1.15 0.1.16 0.1.17 0.1.18 0.1.19 0.1.20 0.1.21 0.1.22 0.1.23 0.1.24 0.1.25 0.1.26 0.1.27 0.1.28 0.1.29 0.1.30 0.1.31 0.1.32 0.1.33 0.1.90 0.1.91 0.1.92 0.1.93 0.1.94 0.1.95 0.1.96 0.1.97 0.1.98 0.1.99 0.1.100 0.1.101 0.1.102 0.1.103 0.1.104 0.2.0 0.2.1 0.2.2 0.2.3 0.2.4 0.2.5 0.2.6 0.3.0 0.3.1 0.3.2 0.3.3 0.3.4 0.3.5 0.3.6 0.3.7 0.3.8 0.4.0 0.4.1 0.4.2 0.4.3 0.4.4 0.4.5 0.4.6 0.4.7 0.4.8 0.4.9 0.4.10 0.4.11 0.4.12 0.5.0 0.5.1 0.5.2 0.5.3 0.5.4 0.5.5 0.5.6 0.5.7 0.5.8 0.5.9 0.5.10 0.6.0 0.6.1 0.6.2 0.6.3 0.6.4 0.6.5 0.6.6 0.6.7 0.6.8 0.6.9 0.6.10 0.6.11 0.6.12 0.6.13 0.6.14 0.6.15 0.6.16 0.6.17 0.6.18 0.6.19 0.6.20 0.6.21 0.7.0 0.7.1 0.7.2 0.7.3 0.7.4 0.7.5 0.7.6 0.7.7 0.7.8 0.7.9 0.7.10 0.7.11 0.7.12 0.8.0 0.8.1 0.8.2 0.8.3 0.8.4 0.8.5 0.8.6 0.8.7 0.8.8 0.8.9 0.8.10 0.8.11 0.8.12 0.8.13 0.8.14 0.8.15 0.8.16 0.8.17 0.8.18 0.8.19 0.8.20 0.8.21 0.8.22 0.8.23 0.8.24 0.8.25 0.8.26 0.8.27 0.8.28 0.9.0 0.9.1 0.9.2 0.9.3 0.9.4 0.9.5 0.9.6 0.9.7 0.9.8 0.9.9 0.9.10 0.9.11 0.9.12 0.10.0 0.10-dev 0.10-next 0.10.1 0.10.2 0.10.3 0.10.4 0.10.5 0.10.6 0.10.7 0.10.8 0.10.9 0.10.10 0.10.11 0.10.12 0.10.13 0.10.14 0.10.15 0.10.16 0.10.17 0.10.18 0.10.19 0.10.20 0.10.21 0.10.22 0.10.23 0.10.24 0.10.25 0.10.26 0.10.27 0.10.28 0.10.29 0.10.30 0.10.31 0.10.32 0.10.33 0.10.34 0.10.35 0.10.36 0.10.37 0.10.38 0.10.39 0.10.40 0.10.41 0.10.42 0.10.43 0.10.44 0.10.45 0.10.46 0.10.47 0.10.48 0.11.0 0.11.1 0.11.2 0.11.3 0.11.4 0.11.5 0.11.6 0.11.7 0.11.8 0.11.9 0.11.10 0.11.11 0.11.12 0.11.13 0.11.14 0.11.15 0.11.16 0.12.0 0.12-dev 0.12-next 0.12.1 0.12.2 0.12.3 0.12.4 0.12.5 0.12.6 0.12.7 0.12.8 0.12.9 0.12.10 0.12.11 0.12.12 0.12.13 0.12.14 0.12.15 0.12.16 0.12.17 0.12.18 4.0.0 4.x-dev 4.x-next 4.1.0 4.1.1 4.1.2 4.2.0 4.2.1 4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 4.3.0 4.3.1 4.3.2 4.4.0 4.4.1 4.4.2 4.4.3 4.4.4 4.4.5 4.4.6 4.4.7 4.5.0 4.6.0 4.6.1 4.6.2 4.7.0 4.7.1 4.7.2 4.7.3 4.8.0 4.8.1 4.8.2 4.8.3 4.8.4 4.8.5 4.8.6 4.8.7 4.9.0 4.9.1 5.0.0 5.x-next 5.1.0 5.1.1 5.2.0 5.3.0 5.4.0 5.4.1 5.5.0 5.6.0 5.7.0 5.7.1 5.8.0 5.9.0 5.9.1 5.10.0 5.10.1 5.11.0 5.11.1 5.12.0 6.0.0 6.x-dev 6.x-next 6.1.0 6.2.0 6.2.1 6.2.2 6.3.0 6.3.1 6.4.0 6.5.0 6.6.0 6.7.0 6.8.0 6.8.1 6.9.0 6.9.1 6.9.2 6.9.3 6.9.4 6.9.5 6.10.0 6.10.1 6.10.2 6.10.3 6.11.0 6.11.1 6.11.2 6.11.3 6.11.4 6.11.5 6.12.0 6.12.1 6.12.2 6.12.3 6.13.0 6.13.1 6.14.0 6.14.1 6.14.2 6.14.3 6.14.4 6.15.0 6.15.1 6.16.0 6.17.0 6.17.1 7.0.0 7.x-dev 7.x-next 7.1.0 7.2.0 7.2.1 7.3.0 7.4.0 7.5.0 7.6.0 7.7.0 7.7.1 7.7.2 7.7.3 7.7.4 7.8.0 7.9.0 7.10.0 7.10.1 8.0.0 8.x-dev 8.x-next 8.1.0 8.1.1 8.1.2 8.1.3 8.1.4 8.2.0 8.2.1 8.3.0 8.4.0 8.5.0 8.6.0 8.7.0 8.8.0 8.8.1 8.9.0 8.9.1 8.9.2 8.9.3 8.9.4 8.10.0 8.11.0 8.11.1 8.11.2 8.11.3 8.11.4 8.12.0 8.13.0 8.14.0 8.14.1 8.15.0 8.15.1 8.16.0 9.0.0 9.x-dev 9.x-next 9.1.0 9.2.0 9.2.1 9.3.0 9.4.0 9.5.0 9.6.0 9.6.1 9.7.0 9.7.1 9.8.0 9.9.0 9.10.0 9.10.1 9.11.0 9.11.1 9.11.2 10.0.0 10.x-dev 10.x-next 10.1.0 10.2.0 10.2.1 10.3.0 10.4.0 10.4.1 10.5.0 10.6.0 10.7.0 10.8.0 10.9.0 10.10.0 10.11.0 10.12.0 10.13.0 10.14.0 10.14.1 10.14.2 10.15.0 10.15.1 10.15.2 10.15.3 10.16.0 11.0.0 11.x-dev 11.x-next 11.1.0 11.2.0 11.3.0 11.4.0 11.5.0 11.6.0 11.7.0 11.8.0 11.9.0 11.10.0 11.10.1 11.11.0 11.12.0 11.13.0 11.14.0 11.15.0 12.0.0 12.x-dev 12.x-next 12.1.0 12.2.0 12.3.0 12.3.1 12.4.0 chakracore-dev chakracore-nightly chakracore-8.1.2 chakracore-8.1.4 chakracore-8.2.1 chakracore-8.3.0 chakracore-8.4.0 chakracore-8.6.0 chakracore-8.9.4 chakracore-8.10.0 chakracore-8.11.1 chakracore-10.0.0 chakracore-10.1.0 chakracore-10.6.0 chakracore-10.13.0 graal+ce-1.0.0-rc1 graal+ce-1.0.0-rc10 graal+ce-1.0.0-rc11 graal+ce-1.0.0-rc12 graal+ce-1.0.0-rc13 graal+ce-1.0.0-rc14 graal+ce-1.0.0-rc15 graal+ce-1.0.0-rc16 graal+ce-1.0.0-rc2 graal+ce-1.0.0-rc3 graal+ce-1.0.0-rc4 graal+ce-1.0.0-rc5 graal+ce-1.0.0-rc6 graal+ce-1.0.0-rc7 graal+ce-1.0.0-rc8 graal+ce-1.0.0-rc9 iojs-0.12.0-dev iojs-1.0.0 iojs-1.x-dev iojs-1.0.1 iojs-1.0.2 iojs-1.0.3 iojs-1.0.4 iojs-1.1.0 iojs-1.2.0 iojs-1.3.0 iojs-1.4.1 iojs-1.4.2 iojs-1.4.3 iojs-1.5.0 iojs-1.5.1 iojs-1.6.0 iojs-1.6.1 iojs-1.6.2 iojs-1.6.3 iojs-1.6.4 iojs-1.7.1 iojs-1.8.1 iojs-1.8.2 iojs-1.8.3 iojs-1.8.4 iojs-2.0.0 iojs-2.0.1 iojs-2.0.2 iojs-2.1.0 iojs-2.2.0 iojs-2.2.1 iojs-2.3.0 iojs-2.3.1 iojs-2.3.2 iojs-2.3.3 iojs-2.3.4 iojs-2.4.0 iojs-2.5.0 iojs-3.0.0 iojs-3.1.0 iojs-3.2.0 iojs-3.3.0 iojs-3.3.1 nightly node-dev rc v8-canary ありすぎぃ！！！！\nとりあえず無難に11系の最新版を落としておきましょう。\nnodenv install 11.15.0 Downloading node-v11.15.0-darwin-x64.tar.gz... -\u0026gt; https://nodejs.org/dist/v11.15.0/node-v11.15.0-darwin-x64.tar.gz WARNING: node-v11.15.0-darwin-x64 is past its end of life and is now unsupported. It no longer receives bug fixes or security updates. Installing node-v11.15.0-darwin-x64... Installed node-v11.15.0-darwin-x64 to /Users/blogenist/.config/anyenv/envs/nodenv/versions/11.15.0 Installed default packages for 11.15.0 確認 nodenv versions 11.15.0 バージョンの適用 グローバルの場合 マシン全体として共通のバージョンを設定したい場合はnodenv global {バージョン}コマンドで適用出来ます\n[adsense-responsive]\r確認 node -v v11.15.0 ローカルの場合 そのディレクトリ内でのみ反映したい場合はnodenv local {バージョン}コマンドで適用出来ます\nすると以下のようなファイルがカレントディレクトリに作成されます。\n.node-version 10.16.0 確認 node -v v10.16.0 fish: Unknown command nodeが出る場合 fish shellを使っている方は以下をfish.configに追加する必要がありますので、ご注意です。\n~/.config/fish/config.fish ... (略) ... set -x NODENV_ROOT $ANYENV_ROOT/envs/nodenv/ set -x PATH $NODENV_ROOT/bin $PATH set -x PATH $NODENV_ROOT/shims $PATH ... (略) ... 終わりに 以上のように様々な言語のバージョン管理をanyenvで行う事が可能になりました。\n今やバージョン管理はどの言語もマストで必要な作業なので、是非anyenvで一括管理してみてはいかがでしょうか♪\n","date":"2019-06-27T20:53:30+09:00","image":"/wp-content/uploads/2019/06/anyenvInstallEye.png","permalink":"/2019/06/27/8842/","title":"【JavaやRuby含めほとんどの言語に対応】Homebrewで「anyenv」をインストールしてhodenvを使ってバージョン管理をする方法まとめ【fish shellも対応】"},{"content":"Docker for macが動かない 先日、MacBookPro 2019を購入したのですが、Docker環境を整えようとHomebrew CaskでDocker for macを入れて起動しようと思ったのですが、なぜかDocker Desktop is Starting...のまま先に進まない現象が発生しました。orz\n特に変な作業をしたわけでもないため、なぜなのか原因が分からず解決出来なかったため、自前でDockerホストを動かすことでなんとかDockerを使えるようになりました。\n今回はその時の対応方法を備忘録として記事にまとめてみようと思います。\n手順 前提 Docker関連については、以下のコマンドのみ実行し、dockerやdocker-compose、docker-machineなどはHomebrewでは入れずにDocker for macの中でインストールさせています。\n[adsense-responsive]\rまた、環境としてはそれぞれのコマンドは使えるが、以下のようにDockerへの接続が出来ない状態となっています。\ndocker ps Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running? Virtualboxのインストール 解決するには、自前でdocker-machineでDocker Engineを整える必要がありそうでした。\nなので、まずはvirtualboxをインストールしましょう。\nbrew cask install virtualbox ==\u0026gt; Caveats To install and/or use virtualbox you may need to enable its kernel extension in: System Preferences → Security \u0026amp; Privacy → General For more information refer to vendor documentation or this Apple Technical Note: https://developer.apple.com/library/content/technotes/tn2459/_index.html ==\u0026gt; Satisfying dependencies ==\u0026gt; Downloading https://download.virtualbox.org/virtualbox/6.0.8/VirtualBox-6.0.8-130520-OSX.dmg Already downloaded: /Users/blogenist/Library/Caches/Homebrew/downloads/130d78b88001e8d144b4c39fedf0caa739515abf930f870f90f440eaf644ea8c--VirtualBox-6.0.8-130520-OSX.dmg ==\u0026gt; Verifying SHA-256 checksum for Cask \u0026#39;virtualbox\u0026#39;. ==\u0026gt; Installing Cask virtualbox ==\u0026gt; Running installer for virtualbox; your password may be necessary. ==\u0026gt; Package installers may write to any location; options such as --appdir are ignored. Password: installer: Package name is Oracle VM VirtualBox installer: Upgrading at base path / installer: The upgrade was successful. 🍺 virtualbox was successfully installed! docker-machineにdefaultを作成 次に、dockerr-machineにdefaultのDocker Engineを作成します。\n以下のコマンドで作成しましょう。\ndocker-machine create --driver virtualbox default Running pre-create checks... Creating machine... (default) Copying /Users/blogenist/.docker/machine/cache/boot2docker.iso to /Users/blogenist/.docker/machine/machines/default/boot2docker.iso... (default) Creating VirtualBox VM... (default) Creating SSH key... (default) Starting the VM... (default) Check network to re-create if needed... (default) Waiting for an IP... Waiting for machine to be running, this may take a few minutes... Detecting operating system of created instance... Waiting for SSH to be available... Detecting the provisioner... Provisioning with boot2docker... Copying certs to the local machine directory... Copying certs to the remote machine... Setting Docker configuration on the remote daemon... Checking connection to Docker... Docker is up and running! To see how to connect your Docker Client to the Docker Engine running on this virtual machine, run: docker-machine env default 環境変数の登録 次に、先ほど作成したdefault環境の各変数を以下のコマンドで反映しましょう。\n今回はfish shellを使っているので以下のコマンドとなります。\n[adsense-responsive]\r反映コマンド eval (docker-machine env default) ここまで行うことで、以下のコマンドでDockerへの接続が通るようになります。\ndocker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 確認 では、実際に適当なdocker-compose.ymlを作成して起動してみましょう。\ndocker-compose up -d Creating network \u0026#34;sample_default\u0026#34; with the default driver Building app Step 1/7 : FROM node:10.8.0-stretch ... (略) ... Successfully built 8cb3c66f9f22 Successfully tagged sample_app:latest Creating sample_app_1 ... done docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 092031f2edfe sample_app \u0026#34;node\u0026#34; 4 seconds ago Up 4 seconds 0.0.0.0:3000-\u0026gt;3000/tcp sample_app_1 正常に動きましたね♪\n終わりに Docker for macが使えないときはどうなるかと思いましたが、とりあえずこれでDockerを使った開発は出来そうなので一件落着です。\n原因については分かったら追記しますが、同じようにお困りの方がいましたらぜひ参考にしてみてください♪\n","date":"2019-06-21T22:55:54+09:00","image":"/wp-content/uploads/2019/06/dockerDesctopIsStartingErrorEye.png","permalink":"/2019/06/21/8771/","title":"【MacBookPro2019 Mojave】Docker for macで「docker desktop is starting」のまま起動しない場合の解決方法【Homebrew】"},{"content":"fish shellを使ってみよう シェルには様々なな種類が存在しています。\nshやbash、zsh、cshなどなど。。。\nそれぞれメリットデメリットが存在しますが、今回はその中でも割と新しめでおすすめのシェル、「fish」を紹介致します。\nfish shell What\u0026rsquo;s? fishとは、Friendly interactive shellの略称です。\nFinally, a command\rline shell for the 90s\rfish is a smart and user-friendly command line\rshell for Linux, macOS, and the rest of the family.fish shell\nユーザーフレンドリーな使いやすさ、対話ベースの操作などなど他のシェルの良いところは吸収し、使いにくいところは改善しています。\n今回はmacへの導入方法と、簡単な初期設定をご紹介致します\n手順 fishのインストール まずはfish shellをHomebrewでインストールしましょう。\nbrew install fish ==\u0026gt; Installing fish ==\u0026gt; Downloading https://github.com/fish-shell/fish-shell/releases/download/3.0.2/fish-3.0.2.tar.gz ==\u0026gt; Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/4279682/90c0cc00-3490-11e9-8ea9-29db33a32b24?X-Amz-Algorithm=AWS4-HMAC- ######################################################################## 100.0% ==\u0026gt; cmake . -DCMAKE_C_FLAGS_RELEASE=-DNDEBUG -DCMAKE_CXX_FLAGS_RELEASE=-DNDEBUG -DCMAKE_INSTALL_PREFIX=/usr/local/Cellar/fish/3.0.2 -DCMAKE_BUILD_TYPE=Relea ==\u0026gt; make install ==\u0026gt; Caveats You will need to add: /usr/local/bin/fish to /etc/shells. Then run: chsh -s /usr/local/bin/fish to make fish your default shell. ==\u0026gt; Summary :beer: /usr/local/Cellar/fish/3.0.2: 953 files, 8.2MB, built in 1 minute 15 seconds 確認 以下のコマンドで確認しましょう。\nfish -v fish, version 3.0.2 fish shellを起動シェルに設定 次に、chsh -s /usr/local/bin/fishでデフォルトのシェルとしてfishを設定します。\n[adsense-responsive]\rエラーが出た場合 もし、ここでエラーが出た場合は、sudo vi /etc/shellsコマンドで、末尾に/usr/local/bin/fishを追加しましょう。\n確認 これで一旦ターミナルアプリを再起動すると、fish shellに切り替わっていると思います。\n再起動後 Last login: Wed Jun 19 11:32:07 on ttys000 Welcome to fish, the friendly interactive shell [11:40:58] blogenist@120 /Users/blogenist (0) \u0026gt; 各種設定 レイアウト fish shellはGUIベースで見た目をカスタマイズすることが出来ます。\nfish_configと打ってみてください。\nすると、ブラウザが立ち上がると思います。\nテンプレートが複数あるので、Set Themeボタンを押すだけで反映されてしまいます！\n簡単過ぎて恐ろしいですね・・・！\nもちろん各テーマもさらにカスタマイズ出来ます！\n他にもエイリアスや関数などをGUIで管理出来るのでとても使いやすいです！\nbashやzshの場合は自分で設定ファイルを記述したり、切り替えをしないといけなかったので確認がめんどくさかったですよね。orz\nfisher(fisherman)のインストール 次に、fish shellのためのプラグインマネージャーであるfisher(fisherman)をインストールしましょう。\nこちらを使うことで、fish shellをカスタマイズする際に自分で記述する必要が無くなります！\nfisherはHomebrewでは落とせないのでcurl https://git.io/fisher --create-dirs -sLo ~/.config/fish/functions/fisher.fishで直接インストールしましょう。\n確認 以下のコマンドでインストールを確認しましょう。\nfisher -v fisher version 3.2.9 ~/.config/fish/functions/fisher.fish pecoプラグインの導入 fishはpecoのプラグインも用意されているので簡単に導入出来ます。\nあらかじめpecoはインストールしておきましょう。\n関連記事 【ターミナルの使いやすさ抜群に】標準出力に対する最強の検索ツール「Peco」をインストールしたら幸せになった【バイバイgrep/find】 2018/10/16 1245文字 約3分で読めます fisher add oh-my-fish/plugin-pecoでプラグインをインストールします。\nインストールしたら設定ファイルに以下を記述します。\n~/.config/fish/config.fish #peco function fish_user_key_bindings bind \\cr peco_select_history end これでCtrl + Rでfish上でpecoを使った履歴検索が動くようになります。\ntheme-bobthefishプラグインの導入 次はtheme-bobthefishをインストールしましょう。\nこちらはターミナル上にGitの現在のブランチや差分状況をわかりやすく表示してくれるプラグインなので、gitを使っている方ならマストです！\nfisher add oh-my-fish/theme-bobthefish created new fishfile in ~/.config/fish/fishfile fetching https://codeload.github.com/oh-my-fish/theme-bobthefish/tar.gz/master linking ~/.config/fish/functions/__bobthefish_colors.fish linking ~/.config/fish/functions/__bobthefish_display_colors.fish linking ~/.config/fish/functions/__bobthefish_glyphs.fish linking ~/.config/fish/functions/bobthefish_display_colors.fish linking ~/.config/fish/functions/fish_greeting.fish linking ~/.config/fish/functions/fish_mode_prompt.fish linking ~/.config/fish/functions/fish_prompt.fish linking ~/.config/fish/functions/fish_right_prompt.fish linking ~/.config/fish/functions/fish_title.fish added 1 package in 1.43s 文字化けする場合 インストール完了するとすぐに反映されますが、文字化けする場合があります。\n[adsense-responsive]\rその場合はPowerline-fontsをインストールする必要がありますので、以下の手順を行ってフォントをインストールしてください。/p\u003e\rpowerline-fontsのインストール手順 git clone https://github.com/powerline/fonts.git cd fonts ./install.sh cd ../ rm -rf ./fonts 次に、iTeam2にて、インストールしたpowerline-fontsを使うように設定しましょう。\niTerm2 \u003e Preferences \u003e Profiles \u003e Text \u003e Change Fontから、Literation Mono Powerlineを選択しましょう。\nこれで文字化けが消えてアイコンが表示されるようになります。\nブランチ名が表示されていない場合 文字化けが解消されたが、現在のブランチ名が出てない場合があります。\nその場合は、config.fishにset -g theme_display_git_master_branch yesを追記して再読み込みすることで表示されるようになります。\n綺麗に表示されていますね♪\nディレクトリを省略したくない場合 デフォルトでは、以下のようにカレントディレクトリ以外は省略されています。\n[adsense-responsive]\rデフォルト # ~/Develop/git/github/powerline/fonts ~/D/g/g/p/fonts 省略させたくない場合は、config.fishにset -g fish_prompt_pwd_dir_length 0を追記しましょう。\nこれで省略されなくなりました♪\n終わりに 以上のように、bashやzshに比べてカスタマイズがとてもしやすく、使いやすいシェルです。\n割と最新のシェルでまだまだ開発が活発なようなので、気になる方は是非導入してみてください。\n","date":"2019-06-20T21:32:20+09:00","image":"/wp-content/uploads/2019/06/installFishShellEye.png","permalink":"/2019/06/20/8807/","title":"【期待の最新シェル】使いやすくてオススメな「fish shell」の導入方法と使い方まとめ【zshから乗り換えよう】"},{"content":"ぼくのかんがえたさいきょうのMacBookPro環境 先日、MacBookPro2019を購入したので諸々の初期設定を行ったのですが、その際に行った初期設定やインストールしたアプリケーション達をご紹介します。\nせっかくなので2019年の流行りを取り入れつつピックアップしてみました♪\n初期設定 スクリーンキャプチャの名称変更 デフォルトでは日本語名になってしまっているので、アルファベットに変更しました。\n関連記事 【標準お便利機能】Macのスクリーンショットの名称を変える 2018/03/21 665文字 約2分で読めます スクリーンキャプチャの保存先変更 デフォルトではデスクトップに保存されてしまうので、専用のディレクトリを作成し、そちらに保存されるように変更しました。\n関連記事 【フォルダ整理におすすめ】Macのスクリーンショット保存先変更 2018/05/26 911文字 約2分で読めます マウスカーソルのスピード設定 デフォルトでは、トラックパッドによるカーソルスピードが遅いので、好みのスピードに変更しましょう。\n右クリックの設定 デフォルトでは、2本指でクリックしたした際にコンテキストメニュー(右クリック)を表示するようになっていますが、これをトラックパッドの右下をクリックした際に表示するように変えます。\nキーリピートの爆速化 デフォルトではキー押しっぱなしの際の連続入力やカーソル移動が遅くてもどかしいので、脳死で爆速設定にします。\nGithubのSSH設定 sshでGithubにアクセス出来るように設定しましょう。\n~/.ssh/config Host github github.com HostName github.com IdentityFile {公開鍵のパス} user git Spotlightショートカットの無効化 後ほどSpotlightの上位互換のAlfredを導入するので無効化しておきましょう。\nDockを自動的に非表示 常に出ている必要はないので、自動で消えるようにしましょう。\n[adsense-responsive]\rタッチバーにファンクションキーを常に表示 デフォルトだとTouch Barに表示されるアイコンは自動で切り替わりますが、それだと開発がしにくい(IDEなどでは常にF1,F2などを出しておきたい)ので、常にファンクションキーを表示するように変えました。\nちなみにFnキーを押せばTouch Barの表示アイコンを切り替えれるのでご安心を。\nインストールアプリ 前提として無料のアプリのみ 今回ご紹介するものは全て無料のアプリケーションのみをご紹介します。\n有料のものでおすすめのものがありましたが、別の記事にてご紹介しようと思います♪\nHomebrew まずは定番のHomebrewをインストールしましょう。\nこれがなければ始まらないレベルです！笑\nHomebrew\rmacOS 用パッケージマネージャーmacOS 用パッケージマネージャー — Homebrew\nコマンド /usr/bin/ruby -e \u0026#34;$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\u0026#34; Homebrew Cask こちらはHomebrewの拡張で、主にChromeやAtom、SlackなどのGUIアプリケーションをHomebrew経由でインストールする際に使用します。\nHomebrew Cask\r“To install, drag this icon…” no more!\rHomebrew Cask extends Homebrew and brings its elegance, simplicity, and speed to the installation and management of GUI macOS applications such as Atom and Google Chrome.\nWe do this by providing a friendly CLI workflow for the administration of macOS applications distributed as binaries.Homebrew/homebrew-cask: 🍻 A CLI workflow for the administration of macOS applications distributed as binaries\nコマンド brew install cask iTeam2 Mac標準のターミナルは使い勝手がとても悪いので、99%の開発者はこちらのターミナルアプリを愛用していると思います。\nWhat is iTerm2?\riTerm2 is a replacement for Terminal and the successor to iTerm. It works on Macs with macOS 10.12 or newer. iTerm2 brings the terminal into the modern age with features you never knew you always wantediTerm2 - macOS Terminal Replacement\nコマンド brew cask install iterm2 Git もはや説明不要のバージョン管理システムですね。\nGit is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.Git\nコマンド brew install git fish zsh以上にカスタマイズ性が高く、保管などもとても使いやすい割と最近登場したシェルです。\nFinally, a command\rline shell for the 90s\rfish is a smart and user-friendly command line\rshell for Linux, macOS, and the rest of the family.fish shell\n関連記事 【期待の最新シェル】使いやすくてオススメな「fish shell」の導入方法と使い方まとめ【zshから乗り換えよう】 2019/06/20 1933文字 約4分で読めます [adsense-responsive]\rコマンド brew install fish karabiner-elements Macのキーバインドを自由にいじれるので、マストです！\nKarabiner\rA powerful and stable keyboard customizer for macOS.\rKarabiner - Software for macOS\nコマンド brew cask install karabiner-elements HyperSwitch アプリケーション単位ではなく、ウィンドウ単位で切り替えれるので作業効率が大幅に上がります。\nHyperSwitch Yet another keyboard window switcher for your MacHyperSwitch\nコマンド brew cask install hyperswitch Alfred Mac内のアプリケーションを簡単に検索・実行をすることが出来るアプリです。\n使いやす過ぎて標準のSpotLightを使う必要が無くなります。\nAlfred 4 for Mac\rAlfred is an award-winning app for macOS which boosts your efficiency with hotkeys, keywords, text expansion and more. Search your Mac and the web, and be more productive with custom actions to control your Mac.Alfred - Productivity App for macOS\nコマンド brew cask install alfred Google Chrome 説明不要のインターネットブラウザですね。\n新しい Chrome で毎日をもっと快適に\rGoogle の最先端技術を搭載し、さらにシンプル、安全、高速になった Chrome をご活用ください。Google Chrome ウェブブラウザ\nコマンド brew cask install google-chrome FireFox こちらも定番のインターネットブラウザです。\nChromeとの差異の確認や、ローカルでのHTMLファイル(ChromeではCORSのエラーが出る)見るために入れておくことをお勧めします。\n新しい Firefox\rこの速さ、どこまでも。\rFirefox をダウンロード — 無料ウェブブラウザー — Mozilla\nコマンド brew cask install firefox Anyenv pyenvやphpenv、rbenv、nodenvに加え、jenvなどもまとめて管理することが出来る神アプリ！\nanyenv - All in one for **env\rThis is a simple wrapper for rbenv style environment managers. You don't have to git clone or modify your shell profile for each **env anymore if you install anyenv.\ranyenv/anyenv: All in one for **env\n関連記事 【JavaやRuby含めほとんどの言語に対応】Homebrewで「anyenv」をインストールしてhodenvを使ってバージョン管理をする方法まとめ【fish shellも対応】 2019/06/27 1985文字 約4分で読めます コマンド brew install anyenv Tree こちらもターミナル操作をする方には必須のアプリですね。\nディレクトリ構造を出力してくれるのでドキュメント生成時にとても役に立ちます♪\n関連記事 【めちゃくそ便利】treeコマンドでディレクトリ構造を出力しよう！【オプション多数】 2018/04/14 2841文字 約6分で読めます コマンド brew install tree Docker for mac macでDocker環境を取扱う際に、virtualboxや関連モジュールのインストールを勝手にやってくれる神アプリ！\nGet started with Docker Desktop for Mac\rEstimated reading time: 16 minutes Welcome to Docker Desktop for Mac! Docker is a full development platform for creating containerized apps, and Docker Desktop for Mac is the best way to get started with Docker on a Mac.Get started with Docker Desktop for Mac | Docker Documentation\nコマンド brew install cask docker MySQL 定番のRDB。\nとりあえず一般的な5.7を入れました。\nMySQL について\rMySQL は 1億以上のダウンロード数を誇る、世界でもっとも普及しているオープンソースデータベースソフトウェアです。抜群のスピードと信頼性、使いやすさが備わった MySQL は、ダウンタイム、メンテナンス、管理、サポートに関するさまざまな問題を解決することができるため、Web、Web2.0、SaaS、ISV、通信関連企業の 先見的なIT 責任者の方々から大変な好評を博しています。\rMySQL\nコマンド brew install mysql@5.7 MySQL Workbench MySQLのGUIツールと言えばWorkBenchですよね！\nMySQL Workbench は、データベースアーキテクト、開発者、DBA のための統合ビジュアルツールです。MySQL Workbench は、データ・モデリング、SQL 開発、およびサーバー設定、ユーザー管理、バックアップなどの包括的な管理ツールを提供します。MySQL Workbench は Windows、Linux、Mac OS X で利用可能です。MySQL :: MySQL Workbench\nコマンド brew cask install mysqlworkbench Peco ターミナルを格段に使いやすくキーワード検索アプリケーションです。\npeco\rSimplistic interactive filtering tool\rNOTE: If you are viewing this on Github, this document refers to the state of peco in whatever current branch you are viewing, not necessarily the state of a currently released version. Please make sure to checkout the Changes file for features and changes.\nThis README is long and comprehensive. Use the Table of Contents to navigate to the section that interests you. It has been placed at the bottom of the README file because of its length.peco/peco: Simplistic interactive filtering tool\n関連記事 【ターミナルの使いやすさ抜群に】標準出力に対する最強の検索ツール「Peco」をインストールしたら幸せになった【バイバイgrep/find】 2018/10/16 1245文字 約3分で読めます [adsense-responsive]\rコマンド brew install peco Skitch 簡単な画像加工をするにはオススメです！\nSkitch\r矢印や図形、スタンプなどの注釈を描き込めば、言葉で説明するよりも、素早く、明確にメッセージが伝わります。Skitch | Evernote\nコマンド brew cask install skitch Eclipse 総合開発IDEと言ったらEclipseですよね！\nThe Platform for Open\rInnovation and Collaboration\rThe Eclipse Foundation provides our global community of individuals and organizations with a mature, scalable and commercially-friendly environment for open source software collaboration and innovation.Enabling Open Innovation \u0026 Collaboration | The Eclipse Foundation\nコマンド brew cask install eclipse-ide IntelliJ Eclipseと並んで使われているIDEです！\n無料版と有償版がありますが、無料のCommunity Editionをインストールします。\nENJOY PRODUCTIVE JAVA\rEvery aspect of IntelliJ IDEA is specifically designed to maximize developer productivity.\rTogether, the powerful static code analysis and ergonomic design make development not only productive but also an enjoyable experience.IntelliJ IDEA: The Java IDE for Professional Developers by JetBrains\nコマンド brew cask install intellij-idea-ce Adobe Creative Cloud Adobe製品を使うならこちらもマストです！\n※こちらはあくまでインストーラーのダウンロードなので、別途アカウントは必要です\nCreative Cloudは、PhotoshopやIllustratorといった定番アプリをはじめ、フォントなどのサービス、クラウドならではの機能を統合。初心者からプロまで、あらゆるクリエイティブ分野であなたのアイデアを叶えます。Adobe Creative Cloud | プロのクリエイター向けソフトウェアとサービス\nコマンド brew cask install adobe-creative-cloud Postman GUIから簡単に様々なリクエストを投げることが出来るので、API開発をしている際には必須レベルです！\nDesign APIs Directly in Postman\rManage all of your organization's APIs in Postman, with the industry's most complete API development environment.\rPostman | API Development Environment\nコマンド brew cask install postman Anker 大容量モバイルバッテリー Amazon Anker PowerCore 10000 (10000mAh 最小最軽量 大容量 モバイルバッテリー/PSE認証済) iPhone\u0026amp;Android 対応 *2019年5月時点 (ブラック) 備えあれば憂いなし！！！\nAnker モバイルバッテリー搭載 USB急速充電器 Amazon Anker PowerCore Fusion 5000 (5000mAh モバイルバッテリー搭載 USB急速充電器) 【PSE認証済/PowerIQ搭載/折りたたみ式プラグ搭載】 iPhone、iPad、Android各種対応 (ブラック) これさえあればどこでも充電可能！\n日清 カップヌードル Amazon 日清 カップヌードル 77g×20個 神が作ったカップ麺！\n終わりに 以上のように、基本的にはHomebrewでインストール出来てしまいます。\n他にもオススメのアプリケーションがあったら追記していこうと思います♪\n","date":"2019-06-19T23:56:42+09:00","image":"/wp-content/uploads/2019/06/macBookPro2019SettingAndAppEye.png","permalink":"/2019/06/19/8695/","title":"【アプリ開発者向け】MacBookPro2019を購入した際にやるべき初期設定とインストールすべきアプリまとめ【Homebrew】"},{"content":"Dockerコンテナ内のNuxt.jsをデバッグしてみよう 先日、Docker環境を用いたNuxt.jsの開発環境構築についてご紹介しました。\n関連記事 【Docker環境構築編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】 2019/06/10 1795文字 約4分で読めます 今回はVSCodeを用いたデバッグ方法についてご紹介したいと思います。\n手順 前提 今回やりたいことは以下の通りです。\n要件\rVSCodeはホスト側のディレクトリを参照\rNuxt.jsはコンテナ側でデバッグ起動しているところにアタッチする\rデバッガーを仕込み、ホスト側のChromeブラウザでアクセスした際にVSCode側で引っかかる\rdocker-compose.ymlにデバッグ用ポートの追加 まずは、docker-compose.ymlにデバッグで使用するポートを指定しましょう。\n[adsense-responsive]\rdocker-compose.yml version: \u0026#39;3\u0026#39; services: nuxt_sample_app: build: . ports: - \u0026#34;3000:3000\u0026#34; - \u0026#34;9229:9229\u0026#34; # 追加 volumes: - \u0026#34;.:/projects\u0026#34; tty: true launch.jsonの作成 次にVSCodeのデバッグ起動用設定ファイルを用意しましょう。\n.vscode/launch.json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 \u0026#34;version\u0026#34;: \u0026#34;0.2.0\u0026#34;, \u0026#34;configurations\u0026#34;: [ { \u0026#34;type\u0026#34;: \u0026#34;node\u0026#34;, // nodeを指定 \u0026#34;request\u0026#34;: \u0026#34;attach\u0026#34;, // 起動済みのシステムに繋げるのでattachを指定 \u0026#34;name\u0026#34;: \u0026#34;Attach to Nuxt.js in Docker \u0026#34;, // VSCode上で表示される名称 \u0026#34;port\u0026#34;: 9229, // デバッグポートを指定 \u0026#34;address\u0026#34;: \u0026#34;localhost\u0026#34;, // デバッグ先のホストを指定 \u0026#34;localRoot\u0026#34;: \u0026#34;${workspaceFolder}\u0026#34;, // ホスト側のプロジェクトルートを指定(専用の変数を使用) \u0026#34;remoteRoot\u0026#34;: \u0026#34;/projects/sample\u0026#34;, // コンテナ側のプロジェクトルートを指定 \u0026#34;protocol\u0026#34;: \u0026#34;inspector\u0026#34; } ] } package.jsonにデバッグ起動のタスクを追加 次は、package.jsonにデバッグ起動するためのタスクを追加しましょう。\npackage.json { ... (略) ... \u0026#34;scripts\u0026#34;: { \u0026#34;dev\u0026#34;: \u0026#34;nuxt\u0026#34;, \u0026#34;build\u0026#34;: \u0026#34;nuxt build\u0026#34;, \u0026#34;start\u0026#34;: \u0026#34;nuxt start\u0026#34;, \u0026#34;generate\u0026#34;: \u0026#34;nuxt generate\u0026#34;, \u0026#34;lint\u0026#34;: \u0026#34;eslint --ext .js,.vue --ignore-path .gitignore .\u0026#34;, \u0026#34;precommit\u0026#34;: \u0026#34;npm run lint\u0026#34;, \u0026#34;debug\u0026#34;: \u0026#34;node --inspect=0.0.0.0:9229 node_modules/nuxt/bin/nuxt\u0026#34; // 追加 }, ... (略) ... } ポイントは、--inspect=0.0.0.0:9229の部分です。\nここを他の方の記事にあるように-inspect=9229だけでは、ホスト側からデバッグ接続出来ないので注意です。\n確認 では、実際にデバッグしてみましょう。\nまずは、コンテナ側でNuxt.jsをデバッグ起動しておきましょう。\n[adsense-responsive]\ryarn debug yarn run v1.16.0 $ node --inspect=0.0.0.0:9229 node_modules/nuxt/bin/nuxt Debugger listening on ws://0.0.0.0:9229/2a53a25c-c810-45f2-8f8c-06eb0a807023 For help, see: https://nodejs.org/en/docs/inspector ╭─────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.8.1 │ │ Running in development mode (universal) │ │ │ │ Listening on: http://172.24.0.2:3000/ │ │ │ ╰─────────────────────────────────────────────╯ ℹ Preparing project for development 07:14:01 ℹ Initial build may take a while 07:14:01 ✔ Builder initialized 07:14:01 ✔ Nuxt files generated 07:14:01 ✔ Client Compiled successfully in 15.94s ✔ Server Compiled successfully in 13.72s ℹ Waiting for file changes 07:14:23 ℹ Memory usage: 135 MB (RSS: 222 MB) 正常にデバッグモードで起動出来ました！\nDebugger listening on ws://0.0.0.0:9229/2a53a25c-c810-45f2-8f8c-06eb0a807023\nこの状態でChromeでchrome://inspect/#devices\u0026nbsp;にアクセスすると、Remote TargetにNuxt.jsが表示されていると思います。\nこれでデバッグ接続の準備は出来ました。\nVSCodeからコンテナ内のNuxt.jsにアタッチ では、実際にVSCodeからデバッグ接続してみましょう。\n左のデバッグメニューから、先ほど作成した設定を選択して実行ボタンをクリックしましょう。\n正常にアタッチ出来るとデバッグ用のツールバーが表示されます。\nまた、Nuxt.js側のサーバーログにもDebugger attached.と出力されます。\n確認 では実際にデバッグをしてみましょう。\nデバッグしたい行にdebuggerを埋め込みます。\npages/index.js import AppLogo from \u0026#39;~/components/AppLogo.vue\u0026#39; export default { components: { AppLogo }, async asyncData ({ context }) { var hoge = \u0026#34;fuga\u0026#34;; debugger console.log(hoge) return } } この状態でブラウザからアクセスしてみましょう。\n正常に仕込んだポイントで引っかかりました！！！\n変数なども参照出来ます♪\nもちろん、変数の値を変えて処理を続ける事も出来ます。\n課題 一応、それっぽい事が出来るようになりましたが、いくつか課題が残っています。\n未確認のブレークポイント(unverified breakpoint) 今回はdebuggerを仕込む事でデバッグする事が可能になりましたが、VSCodeのブレイクポイントではうまく動作しません。\nどうやら、実行時のソースと編集時のソースの関連性がうまく設定出来ていないためブレイクポイントがうまく動作しないようです。\n一応、next.config.jsにconfig.devtool = '#source-map' を追加したりはしてみましたが、ダメでした。。。\ndebuggerを仕込む=ソースに手を加える事になるのであまりオススメはしない方法ですのでなんとか解決したいですね。orz\n解決方法がわかったら追記か別記事にまとめます!!!\n終わりに 以上のように、VSCode上でデバッグを行えるようになりました。\nDockerコンテナを使った開発をしている関係か、ちょっと特殊だったり動きが怪しい部分もあったりしますが、取り急ぎこれでデバッグは出来るので、お困りの方は試してみてください♪\n","date":"2019-06-18T20:05:38+09:00","image":"/wp-content/uploads/2019/06/vsCodeDebugInDocker.png","permalink":"/2019/06/18/8607/","title":"【VSCoe】VisualStudioCodeでDockerのNode.jsにリモートデバッグしてみよう【Nust.js/Vue.js】"},{"content":"TypeScriptを導入しよう Nuxt.jsを使ってアプリケーションを開発する際、TypeScriptを使った静的型付けを行うのが当たり前になってきています。\nJavaScript that scales. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.\nAny browser. Any host. Any OS. Open source.\nTypeScript - JavaScript that scales.\nもちろん、Nuxt.jsはTypeScriptの導入についても手厚くサポートしています。\n静的型付けは、とりわけアプリケーションが大きく成長したするにつれて、多くの潜在的なランタイムエラーを防ぐのに役立ちます。\rそれこそが Nuxt の新しい @nuxt/typescript パッケージがビルトインで TypeScript ツールをサポートする理由です:TypeScript サポート - Nuxt.js\n今回も自前でTypeScriptを導入してみましたので、手順をご紹介致します。\n手順 前提 Typescriptを導入した際に、lint周りで以下のようなエラーログが出るようになりました。\n謎のエラー ERROR Failed to compile with 1 errors friendly-errors 08:56:17 Module build failed (from ./node_modules/eslint-loader/index.js): friendly-errors 08:56:17 Error: Failed to load plugin @typescript-eslint: Cannot find module \u0026#39;eslint-plugin-@typescript-eslint\u0026#39; at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.resolve (internal/modules/cjs/helpers.js:30:19) at Plugins.load (/projects/sample/node_modules/eslint/lib/config/plugins.js:106:29) at Array.forEach (\u0026lt;anonymous\u0026gt;) at Plugins.loadAll (/projects/sample/node_modules/eslint/lib/config/plugins.js:166:21) at loadFromDisk (/projects/sample/node_modules/eslint/lib/config/config-file.js:501:35) at Object.load (/projects/sample/node_modules/eslint/lib/config/config-file.js:559:20) at Config.getLocalConfigHierarchy (/projects/sample/node_modules/eslint/lib/config.js:227:44) at Config.getConfigHierarchy (/projects/sample/node_modules/eslint/lib/config.js:179:43) at Config.getConfigVector (/projects/sample/node_modules/eslint/lib/config.js:286:21) at Config.getConfig (/projects/sample/node_modules/eslint/lib/config.js:329:29) at processText (/projects/sample/node_modules/eslint/lib/cli-engine.js:163:33) at CLIEngine.executeOnText (/projects/sample/node_modules/eslint/lib/cli-engine.js:620:17) at lint (/projects/sample/node_modules/eslint-loader/index.js:263:17) at Object.module.exports (/projects/sample/node_modules/eslint-loader/index.js:258:21) friendly-errors 08:56:17 You may use special comments to disable some warnings. friendly-errors 08:56:17 Use // eslint-disable-next-line to ignore the next line. friendly-errors 08:56:17 Use /* eslint-disable */ to ignore all warnings in a file. ちょっと調べてみましたが、いまいち原因が分からなかったので、一旦ビルド時のlint関連を無効にする事で動作確認をとっています。orz\nFailed to load plugin @typescript-eslint: Cannot find module 'eslint-plugin-@typescript-eslint'webpack - Failed to load plugin @typescript-eslint: Cannot find module 'eslint-plugin-@typescript-eslint' - Stack Overflow\nNuxt.jsにlintを入れるところは改めて作業をして記事にまとめようと思っています。\nモジュールのインストール まずは関連するモジュールをインストールしていきましょう。\n@nuxt/typescript Nuxt.jsの公式TypeScript用のモジュールをインストールします。\nyarn add -D @nuxt/typescript yarn add v1.16.0 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 36 new dependencies. info Direct dependencies └─ @nuxt/typescript@2.8.1 info All dependencies ... (略) ... Done in 112.12s. ts-node 次に、ts-nodeをインストールします。\nこちらは、typescriptのコードをコンパイルする事なく直接node上で実行してくれるものです。\n自分でコンパイルする必要が無くなるのはデカイですね。\nyarn add ts-node yarn add v1.16.0 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved 1 new dependency. info Direct dependencies └─ ts-node@8.2.0 info All dependencies └─ ts-node@8.2.0 Done in 111.66s. vue-property-decorator 次は、vue-property-decoratorです。\nこちらはVueの記述をデコレーターを使って記述できるようにしてくれるものです\nyarn add -D vue-property-decorator yarn add v1.16.0 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved 1 new dependency. info Direct dependencies └─ vue-property-decorator@8.1.1 info All dependencies ├─ vue-class-component@7.1.0 └─ vue-property-decorator@8.1.1 Done in 112.44s. ファイルのTypeScript対応 では、次に既存のファイルをTypeScript化していきましょう。\nnuxt.config.js nuxt.config.jsをnuxt.config.tsとリネームしましょう。\nファイルの中身はそのままで問題ありません。\ntsconfig.json 次にtouch tsconfig.jsonでファイルを作成しましょう。\nこちらのファイルの内容は起動時に自動で記述されるので空の状態で問題ありません。\npages/index.js 次に、index.jsをindex.tsにリネームした上で内容を変えていきましょう。\n(修正前)pages/index.js import AppLogo from \u0026#39;~/components/AppLogo.vue\u0026#39; export default { components: { AppLogo }, async asyncData () { let hoge = \u0026#34;fuga\u0026#34; let data = { hoge } return { data } } } (修正後)pages/index.ts import { Component, Vue, Prop } from \u0026#39;vue-property-decorator\u0026#39; @Component({ components: { AppLogo: () =\u0026gt; import(\u0026#39;~/components/AppLogo.vue\u0026#39;) }, async asyncData () { let hoge = \u0026#34;fuga\u0026#34; let data = { hoge } return { data } } }) export default class Index extends Vue {} pages/index.vue 次にpages/index.vueを修正しましょう。\npages/index.vue \u0026lt;template lang=\u0026#34;pug\u0026#34; src=\u0026#34;./index.pug\u0026#34; /\u0026gt; \u0026lt;script src=\u0026#34;./index.ts\u0026#34; lang=\u0026#34;ts\u0026#34; /\u0026gt; // 属性を追加し、読み込みファイルをindex.tsに修正 \u0026lt;style lang=\u0026#34;scss\u0026#34; scoped src=\u0026#34;./index.scss\u0026#34; /\u0026gt; 確認 これでTypeScript化の準備は出来たので、実際に確認してみましょう。\nyarn dev yarn run v1.16.0 $ nuxt ╭─────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.8.1 │ │ Running in development mode (universal) │ │ TypeScript support is enabled │ │ │ │ Listening on: http://172.25.0.2:3000/ │ │ │ ╰─────────────────────────────────────────────╯ ℹ Preparing project for development 10:37:49 ℹ Initial build may take a while 10:37:49 ✔ Builder initialized 10:37:49 ✔ Nuxt files generated 10:37:49 ℹ Starting type checking service... 10:37:59 ℹ Using 1 worker with 2048MB memory limit 10:37:59 ✔ Client Compiled successfully in 38.10s ✔ Server Compiled successfully in 34.73s ℹ No type errors found 10:38:37 ℹ Version: typescript 3.5.2 10:38:37 ℹ Time: 34162ms 10:38:37 ℹ Waiting for file changes 10:38:38 ℹ Memory usage: 193 MB (RSS: 297 MB) 起動ログに、TypeScript support is enabledが追加され、No type errors foundが出力されたので正常に起動しましたね♪\n記述エラー時 試しに以下のようなエラーが発生する状態(String型の変数に数値を代入)にソースを変えると、、、\npages/index.ts import { Component, Vue, Prop } from \u0026#39;vue-property-decorator\u0026#39; @Component({ components: { AppLogo: () =\u0026gt; import(\u0026#39;~/components/AppLogo.vue\u0026#39;) }, async asyncData () { let hoge = \u0026#34;fuga\u0026#34; hoge = 1 // TypeScriptエラー let data = { hoge } return { data } } }) export default class Index extends Vue {} ビルドエラー ℹ Type checking in progress... 10:42:43 ERROR ERROR in /projects/sample/pages/index.ts 10:42:46 9:5 Type \u0026#39;1\u0026#39; is not assignable to type \u0026#39;string\u0026#39;. 7 | async asyncData () { 8 | let hoge = \u0026#34;fuga\u0026#34; \u0026gt; 9 | hoge = 1 | ^ 10 | let data = { hoge } 11 | return { 12 | data ℹ Version: typescript 3.5.2 10:42:47 ℹ Time: 4091ms 期待通りチェックしてくれるようになりましたね♪\ntsconfig.jsonの内容 tsconfig.jsonは以下のような記述が生成されています。\ntsconfig.json { \u0026#34;compilerOptions\u0026#34;: { \u0026#34;target\u0026#34;: \u0026#34;esnext\u0026#34;, \u0026#34;module\u0026#34;: \u0026#34;esnext\u0026#34;, \u0026#34;moduleResolution\u0026#34;: \u0026#34;node\u0026#34;, \u0026#34;lib\u0026#34;: [ \u0026#34;esnext\u0026#34;, \u0026#34;esnext.asynciterable\u0026#34;, \u0026#34;dom\u0026#34; ], \u0026#34;esModuleInterop\u0026#34;: true, \u0026#34;experimentalDecorators\u0026#34;: true, \u0026#34;allowJs\u0026#34;: true, \u0026#34;sourceMap\u0026#34;: true, \u0026#34;strict\u0026#34;: true, \u0026#34;noImplicitAny\u0026#34;: false, \u0026#34;noEmit\u0026#34;: true, \u0026#34;baseUrl\u0026#34;: \u0026#34;.\u0026#34;, \u0026#34;paths\u0026#34;: { \u0026#34;~/*\u0026#34;: [ \u0026#34;./*\u0026#34; ], \u0026#34;@/*\u0026#34;: [ \u0026#34;./*\u0026#34; ] }, \u0026#34;types\u0026#34;: [ \u0026#34;@types/node\u0026#34;, \u0026#34;@nuxt/vue-app\u0026#34; ] } } 終わりに 以上のように、Nuxt.jsのTypeScript化についても依存関係を追加することで簡単に実現することが出来ました。\nJavaScriptを使ったフロントエンドの開発においては、TypeScriptはほぼマストの技術となっていますので、是非試してみてください♪\n","date":"2019-06-17T01:25:25+09:00","image":"/wp-content/uploads/2019/06/nuxtJsWithTypeScriptEye.png","permalink":"/2019/06/17/8667/","title":"【Nuxt.js】プロジェクトに後から自前でTypeScriptを導入する方法【yarnでサクッと簡単】"},{"content":"遂にXperiaの最新モデルが発売！ 先日遂に、Xperiaの最新モデル、「Xperia 1 SO-03L（エクスペリア ワン)」が発売されましたね！\n筆者もドコモオンラインショップにて購入して、先ほど受け取ってきましたので早速レビューしていこうと思います♪\nスペック等は公式サイトに詳しく載っていますのでそちらを参考にしてみてください。\n世界初※1 4K※2 有機ELシネマワイドTM\rディスプレイ。\r革新のXperiaで日常に新しい体験を。\rXperia初のトリプルレンズカメラによる\r圧倒的な表現力。\rXperia 1 SO-03L | スマートフォン | 製品 | NTTドコモ\n合わせて買っておくべきアクセサリ Xperia 1 耐衝撃ケース Amazon 【Spigen】 スマホケース Xperia 1 ケース SO-03L SOV40 対応 ストラップホール 耐衝撃 衝撃 吸収 指紋防止 TPU クリア 薄型 軽量 リキッド・クリスタル G15CS26202 (クリスタル・クリア) Amazon 【Spigen】 スマホケース Xperia 1 ケース SO-03L SOV40 TPU 耐衝撃 米軍MIL規格取得 衝撃吸収 指紋防止 ラギッド・アーマー G15CS26201 (マット・ブラック) Xperia 1 ガラスフィルム 全面保護 Amazon 『3D全面』AUNEOS Xperia 1 フィルム SO-03L SOV40 日本製旭硝子材 Xperia 1 ガラスフィルム 全面保護 超薄い 3D熱彎技術 耐衝撃 9H エクスペリア 1 強化ガラス Xperia 1 背面カメラレンズ保護フィルム Amazon エレコム Xperia 1 ガラスライクフィルム SO-03L SOV40 カメラレンズ保護 【高硬度9Hのガラスコーティングを採用】 microSDXCカード Amazon 【Amazon.co.jp 限定】Samsung microSDXCカード 512GB EVO Plus Class10 UHS-I U3対応 Nintendo Switch 動作確認済 (最大読出速度100MB/s:最大書込速度90MB/s) MB-MC512GA/ECO [adsense-responsive]\rAmazon SanDisk microSDXC 100MB/s 256GB Ultra SD変換アダプター付属 サンディスク SDSQUAR-256G 海外パッケージ品 ［並行輸入品］ 開封の儀 外観 早速ドコモショップにて受け取ってきました。\n初めてドコモオンラインショップにて申し込みをしたのですが、発売前の6月12日に予約をして、6月15日に店舗受け取り出来たので思っていたより早く到着しました。\nオンライン上でポチポチするだけで注文出来てしまうので、店舗で待つ必要がないのがとても便利です♪\nパッケージはこちら。\n「これまでのXperiaを一新する」と言う意味を込めた新シリーズの「1」がシンプルでかっこいいですよね！\n早速開封していきましょう！\nパカッ。\n付属品 付属品は以下です。\n付属品\rXperia 1 本体\rクイックスターターガイド\r取扱説明書\r3.5mmイヤホン変換・テレビアンテナケーブル\r充電用のUSBケーブルは付属されていないので、注意ですね。\n本体 それでは本体を見ていきましょう。\nまずはビニールに丁寧に梱包されています。\n取り出すと、全面・背面に梱包用の保護フィルムが貼られています。\n実際に使い始めるにはこのシートを取らないといけないので、専用の保護フィルムはあらかじめ用意しておきましょう。\n今回は購入時にドコモショップのガラスフィルムを購入しました。\nインターフェース 全面 全面にはインカメラがあり、その周囲には通知LEDや近接/照明センサー。受話口/スピーカーがあります。\n背面 背面にはトリプルレンズカメラやフォトライトがあります。\n[adsense-responsive]\r右サイド 右サイド下部には電源キー、中部には音量キーが用意されており、その間は指紋センサーとなっています。\nまた、下部にはカメラキーが付いており、長押しすることでスリープ状態でも即座にカメラアプリが起動します。\n起動まで1秒もかからないのでとっさにカメラを構えても取り逃がすことがなくなりそうです♪\n左サイド 左サイドには特にボタン等は用意されていません。\n上部 上部にはmicroSDカードとSIMカードを入れるスロットが用意されています。\nスロット自体は完全に取り出せるので、microSDカードとSIMカードをしっかりセットしてから挿入しましょう。\n下部 下部にはUSB Type-Cを接続する端子と送話口/マイク、スピーカーが用意されています。\n機能レビュー 世界初の4K有機ELディスプレイ まず注目は、「世界初の4K有機ELディスプレイ」ですね。\n試しに、YouTubeの4K映像を再生してスクリーンキャプチャを撮ってみたのですが、めちゃくちゃ綺麗です・・・！\n※画像サイズを軽くするためにかなり品質を下げているため、実際はもっと鮮明なはずですが、それでも十分綺麗ですね！\nトリプルレンズ そしてやはり気になるのは、カメラ機能ですね。\n実際に3つのそれぞれのレンズについて簡単にご紹介していきます。\nx1レンズ こちらは通常倍率のレンズとなっています。\n人形の有野課長にも瞳フォーカスが効いています！\n動画の場合はこんな感じ。\nx2レンズ 次は望遠レンズです。\nかなり寄ってますね。\n動画の場合はこんな感じ。\nWレンズ 次は広角レンズです。\nかなり画角が広がっています！\n広角特有の魚眼の歪みも若干出ているので好みが分かれそうですね。\nちなみに、広角レンズの場合はフラッシュ機能が使えないので注意です！\nGoPro好きな筆者としては、GoProのような映像をフラッシュ有りで撮れるのでは！？と思っていたのでこれは正直残念ですねorz\n動画の場合はこんな感じ。\n動画の場合は他のレンズと比べてかなり画角が狭まっていますね。\n終わりに 待ちに待ったXperiaの最新モデルが手元に届きました。\nこれからいろいろ触ってみてこちらの記事に追記していこうと思っていますので、興味がある方は楽しみにしていてください♪\n","date":"2019-06-16T00:17:17+09:00","image":"/wp-content/uploads/2019/06/xperia1ReviewEye.png","permalink":"/2019/06/16/8705/","title":"【2019年夏最新モデル】Xperia 1SO-03Lを購入したので開封レビューしていくよ！【期待のトリプルレンズスマホ】"},{"content":"ファイルを細分化しよう 皆さんはNuxt.jsを使って開発をしていますか？\nNuxt.jsを使ってWebアプリケーションを開発していると、デフォルトでは一つのvueファイルの中に様々な記述をすることになると思います。\n基本的には、コンポーネントやページ単位で例として以下のような記述でテンプレートが作成されます。\npages/index.vue \u0026lt;template lang=\u0026#34;pug\u0026#34; \u0026gt; section.container div app-logo h1.title.scoped--sample | Demo h2.subtitle | Demo Project .links a.button--green(href=\u0026#39;https://nuxtjs.org/\u0026#39;, target=\u0026#39;_blank\u0026#39;) Documentation a.button--grey(href=\u0026#39;https://github.com/nuxt/nuxt.js\u0026#39;, target=\u0026#39;_blank\u0026#39;) GitHub \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; import AppLogo from \u0026#39;~/components/AppLogo.vue\u0026#39; export default { components: { AppLogo } } \u0026lt;/script\u0026gt; \u0026lt;style\u0026gt; .container { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .title { font-family: \u0026#34;Quicksand\u0026#34;, \u0026#34;Source Sans Pro\u0026#34;, -apple-system, BlinkMacSystemFont, \u0026#34;Segoe UI\u0026#34;, Roboto, \u0026#34;Helvetica Neue\u0026#34;, Arial, sans-serif; /* 1 */ display: block; font-weight: 300; font-size: 100px; color: #35495e; letter-spacing: 1px; } .subtitle { font-weight: 300; font-size: 42px; color: #526488; word-spacing: 5px; padding-bottom: 15px; } .links { padding-top: 15px; } \u0026lt;/style\u0026gt; よく見ると、\u0026lt;template\u0026gt;タグのHTML部分と\u0026lt;script\u0026gt;タグのJavaScript部分と\u0026lt;style\u0026gt;タグのCSS部分の3構成になっていますね。\nもちろん、このまま手を加えていっても良いのですが、DDD(ドメイン駆動設計)脳としては、コンテキスト単位でファイルを分けたくなってしまいます。。。orz\n今回で言うと、HTML/JavaScirpt/CSSの言語単位がコンテキスト境界線ですかね。\n細分化は正義。(脳死)\nしかしご安心を。\nNuxt.jsでは簡単にそれぞれをファイル分割して読み込むことが可能です。\n公式でもこの手法が紹介されています。\nソースのインポート\rもし *.vue コンポーネントを複数のファイルに分割したい場合は、src 属性を使って言語ブロック用の外部ファイルをインポートすることが出来ます:Vue Component の仕様 · vue-loader\n今回はそのやり方と筆者のサンプルをご紹介しようと思います。\n手順 それぞれを外部ファイル化 まずはそれぞれを外部ファイル化していきましょう。\nHTML(pug) まずはHTML部分を外部ファイル化していきましょう。\n[adsense-responsive]\r今回はindex.pugと言う名前で外部ファイル化します。\npages/index.pug section.container div app-logo h1.title.scoped--sample | Demo h2.subtitle | Demo Project .links a.button--green(href=\u0026#39;https://nuxtjs.org/\u0026#39;, target=\u0026#39;_blank\u0026#39;) Documentation a.button--grey(href=\u0026#39;https://github.com/nuxt/nuxt.js\u0026#39;, target=\u0026#39;_blank\u0026#39;) GitHub JavaScript 次にJavaScript部分をindex.jsと言う名前で外部ファイル化します。\npages/index.js import AppLogo from \u0026#39;~/components/AppLogo.vue\u0026#39; export default { components: { AppLogo } } CSS(Sass) 次にCSS部分を外部ファイル化しましょう。\n今回はscss記法を使っているので、index.scssとして外部ファイル化します。\npages/index.scss h1.scoped--sample{ color: #F00; } .container { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .title { font-family: \u0026#34;Quicksand\u0026#34;, \u0026#34;Source Sans Pro\u0026#34;, -apple-system, BlinkMacSystemFont, \u0026#34;Segoe UI\u0026#34;, Roboto, \u0026#34;Helvetica Neue\u0026#34;, Arial, sans-serif; /* 1 */ display: block; font-weight: 300; font-size: 100px; color: $priorityColor; letter-spacing: 1px; } .subtitle { font-weight: 300; font-size: 42px; color: $secondaryColor; word-spacing: 5px; padding-bottom: 15px; } .links { padding-top: 15px; } それぞれの外部ファイルを読み込む HTML/JavaScript/CSSの外部ファイル化が出来たらそれぞれをindex.vueから読み込みましょう。\npages/index.vue \u0026lt;template lang=\u0026#34;pug\u0026#34; src=\u0026#34;./index.pug\u0026#34; /\u0026gt; \u0026lt;script src=\u0026#34;./index.js\u0026#34; /\u0026gt; \u0026lt;style lang=\u0026#34;scss\u0026#34; scoped src=\u0026#34;./index.scss\u0026#34; /\u0026gt; [adsense-responsive]\rかなりスッキリですね！\n確認 では、この状態でサーバーを起動して表示確認をしてみましょう。\n正常に読み込まれて表示されましたね♪\n終わりに 以上のように、細分化して管理することで、修正範囲や影響範囲を絞る事が出来ました。\n一つのファイルにすべて詰め込むのも悪いとは言いませんが、細かく分けた方が保守や開発がしやすくなるので、興味のある方は試してみてください♪\n","date":"2019-06-15T16:19:23+09:00","image":"/wp-content/uploads/2019/06/nuxtJsOuterFileEye.png","permalink":"/2019/06/15/8586/","title":"【Nuxt.js】vueファイルからJavaScript(TypeScript)/CSS(Sass)/Template(Pug)を外部ファイル化して読み込む方法【ベストプラクティス？】"},{"content":"爆速でMockサーバーを構築しよう 簡単なStubを用意したいだけなのに・・・ 技術調査や初期開発フェーズでは、自由にリクエストを投げれるサーバーが存在しない事が多く、そのためにMockサーバーを用意するという事は少なく無いと思います。\nしかし、そのためにサーバーを借りたり、Mockサーバー構築のためのプログラムを構築したりと、やりたい事に対する作業ボリュームが多いですよね。orz\nそんな時は、今回紹介するMockoonを使って爆速でローカルマシンにMockサーバーを構築しちゃいましょう！\nMockoon What\u0026rsquo;s? Mockoonとは、GUIベースのモックサーバーを構築するためのアプリケーションとなっています。\nMock API in seconds\rMockoon is the easiest and quickest way to run mock APIs locally. No remote deployment, no account required, open source.Mock API in seconds - Mockoon\n要約すると、「Mockoonを使えばMockAPIをローカルで構築する事が出来るよ！」との事です！\nすごい自信ですね！！！笑\nしかし、実際にそのくらい簡単爆速でローカルにMockAPIを構築する事が出来たので、あながち間違いでは無いですね。\nまた、内部的にはNode.jsを使ってElectronで作成しているようですね。\nサーバーは同じくNode.jsのExpressです。\nまた、ネーミングはRaccoon(たぬき)から来ているようです。\n意味は特になさそうなのであくまで語感で名前をつけた感じですかね？ロゴもたぬきの顔っぽくて可愛い！笑\nGUIなので分かりやすい GUIアプリケーションからサーバーを立てたりエンドポイントを追加編集出来るので、とても直感的で簡単です。\n小難しいところはアプリケーション内部がよしなにやってくれるので、簡単に導入出来てしまうところが便利ですよね♪\nまた、GUIのため作成したエンドポイントの一覧や詳細がとても見やすくなっています。\nHttpMethodやHttpStatusも選択式なのでポチポチで設定変更出来ちゃうのも楽ですよね♪\nホットリロード機能 モックサーバーを起動した状態でレスポンスを編集すると、再起動すること無く変更が反映されます。\n再起動する手間がないのはとても便利ですよね♪\nただ、エンドポイントを変える場合はリロードが必須なので注意です。\n手順 インストール Homebrew 定番のHomebrewからのインストールにも対応しています。\nbrew cask install mockoon ==\u0026gt; Satisfying dependencies ==\u0026gt; Downloading https://github.com/mockoon/mockoon/releases/download/v1.4.0/mockoon.setup.1.4.0.dmg ==\u0026gt; Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/97478419/b3611c00-765e-11e9-9c45-264f028d28b3?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026amp;X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20190702%2Fus-east-1%2Fs3%2Faws4_r ######################################################################## 100.0% ==\u0026gt; Verifying SHA-256 checksum for Cask \u0026#39;mockoon\u0026#39;. ==\u0026gt; Installing Cask mockoon ==\u0026gt; Moving App \u0026#39;Mockoon.app\u0026#39; to \u0026#39;/Applications/Mockoon.app\u0026#39;. 🍺 mockoon was successfully installed! インストーラー Homebrewが使えない場合は、公式サイト\u0026nbsp;からOSに合わせたインストーラーをダウンロードしましょう。\n[adsense-responsive]\rダウンロードしたインストーラーを実行する事で設定等をする必要なくインストールは完了します。\n起動 インストールが完了したらアプリケーションを起動してみましょう。\n小難しい初期設定等もなくアプリケーションが起動したと思います。\nサーバー起動 では、試しにMockサーバーを起動してみましょう。緑の実行ボタンをクリックする事でサーバーが起動します。\nこの状態でリクエストを投げてみましょう。\nデフォルトではportが3000で/anserが有効になっています。\n\u003c curl -v \u0026#39;http://localhost:3000/answer\u0026#39; \u0026lt; HTTP/1.1 200 OK \u0026lt; X-Powered-By: Express \u0026lt; Content-Type: text/plain; charset=utf-8 \u0026lt; Content-Length: 0 \u0026lt; ETag: W/\u0026#34;0-2jmj7l5rSw0yVb/vlWAYkK/YBwk\u0026#34; \u0026lt; Date: Wed, 12 Jun 2019 09:00:17 GMT \u0026lt; Connection: keep-alive \u0026lt; * Connection #0 to host localhost left intact はい、爆速で完成です。\n機能紹介 動的なレスポンスを生成可能 Stubサーバーの場合、基本的にはある程度固定のレスポンスしか返せないのが普通ですが、Mockoonであればある程度動的なレスポンスを返却する仕組みが備わっています。\n具体的には、リクエストの情報をレスポンスに含めたり簡単なケース文を指定出来るのでリクエスト/レスポンスのリアルに近い動きが見えやすくなるというメリットがあります。\n動的レスポンスサンプル { \u0026#34;userId\u0026#34;: \u0026#34;{{ urlParam \u0026#39;id\u0026#39;}}\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;{{ queryParam \u0026#39;name\u0026#39; \u0026#39;John\u0026#39; }}\u0026#34;, \u0026#34;lang\u0026#34;: \u0026#34;{{{header \u0026#39;Accept-Language\u0026#39; \u0026#39;en\u0026#39;}}}\u0026#34;, \u0026#34;elementTitle\u0026#34;: \u0026#34;{{ body \u0026#39;elements.0.title\u0026#39; \u0026#39;default\u0026#39; }}\u0026#34;, \u0026#34;ip\u0026#34;: \u0026#34;{{ ip }}\u0026#34;, \u0026#34;method\u0026#34;: \u0026#34;{{ method }}\u0026#34;, \u0026#34;hostname\u0026#34;: \u0026#34;{{ hostname }}\u0026#34;, \u0026#34;friends\u0026#34;: [ {{#repeat 2}} { \u0026#34;id\u0026#34;: {{@index}}, \u0026#34;name\u0026#34;: \u0026#34;{{ firstName }} {{ lastName }}\u0026#34; } {{/ repeat}} ], \u0026#34;oneItem\u0026#34;: \u0026#34;{{ oneOf(array \u0026#39;item1\u0026#39; \u0026#39;item2\u0026#39; \u0026#39;item3\u0026#39;) }}\u0026#34;, \u0026#34;someItems\u0026#34;: \u0026#34;{{ someOf(array \u0026#39;item1\u0026#39; \u0026#39;item2\u0026#39; \u0026#39;item3\u0026#39;) 1 2 }}\u0026#34;, \u0026#34;userName\u0026#34;: {{#switch (urlParam \u0026#39;id\u0026#39;)}} {{#case \u0026#34;1\u0026#34;}}\u0026#34;John\u0026#34;{{/case}} {{#case \u0026#34;2\u0026#34;}}\u0026#34;Jack\u0026#34;{{/case}} {{#default}}\u0026#34;Peter\u0026#34;{{/default }} {{/switch}} } もちろん複雑な動的レスポンスの生成は厳しそうですが、これだけでも十分Stubサーバーとしては便利な機能となっています。\nレスポンスヘッダーもカスタム可能 モックAPIのレスポンスヘッダーも簡単にカスタム可能です。\ncurl -v \u0026#39;http://localhost:3001/accounts\u0026#39; \u0026lt; HTTP/1.1 200 OK \u0026lt; X-Powered-By: Express \u0026lt; Content-Type: application/json; charset=utf-8 \u0026lt; HOGE: FUGA # 追加されている \u0026lt; Content-Length: 121 \u0026lt; ETag: W/\u0026#34;79-NunjB3DzdDmDDPMzc1O3Wx2nv10\u0026#34; \u0026lt; Date: Fri, 14 Jun 2019 13:06:34 GMT \u0026lt; Connection: keep-alive レスポンスヘッダーにMockoonで定義した項目が追加されていますね♪\n設定ファイル管理が可能 このMockoonの設定については、設定ファイルでの管理が可能です。\nexport 現在の設定をすべて出力する場合はTools \u003e Export all environmentsでファイル出力可能です。\n[adsense-responsive]\rこれでJsonファイルが生成されます。\n\u0026lt;設定ファイル\u0026gt;.json { \u0026#34;id\u0026#34;: \u0026#34;mockoon_export\u0026#34;, \u0026#34;appVersion\u0026#34;: \u0026#34;1.4.0\u0026#34;, \u0026#34;checksum\u0026#34;: \u0026#34;7f2a84418b3d15e583fd9925a5f7830a\u0026#34;, \u0026#34;subject\u0026#34;: \u0026#34;full\u0026#34;, \u0026#34;data\u0026#34;: [ { \u0026#34;uuid\u0026#34;: \u0026#34;d6fb1690-8cf0-11e9-8ffc-611e08794da7\u0026#34;, \u0026#34;name\u0026#34;: \u0026#34;LocalMock\u0026#34;, \u0026#34;endpointPrefix\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;latency\u0026#34;: 0, \u0026#34;port\u0026#34;: 3001, \u0026#34;routes\u0026#34;: [ { \u0026#34;uuid\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;documentation\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;method\u0026#34;: \u0026#34;get\u0026#34;, \u0026#34;endpoint\u0026#34;: \u0026#34;accounts\u0026#34;, \u0026#34;body\u0026#34;: \u0026#34;{\\n \\\u0026#34;accounts\\\u0026#34;: [\\n {\\n \\\u0026#34;id\\\u0026#34;: 1001,\\n \\\u0026#34;name\\\u0026#34; : \\\u0026#34;Taro\\\u0026#34;,\\n \\\u0026#34;age\\\u0026#34;: 20\\n },{\\n \\\u0026#34;id\\\u0026#34;: 1002,\\n \\\u0026#34;name\\\u0026#34; : \\\u0026#34;Jiro\\\u0026#34;,\\n \\\u0026#34;age\\\u0026#34;: 19\\n },{\\n \\\u0026#34;id\\\u0026#34;: 1003,\\n \\\u0026#34;name\\\u0026#34; : \\\u0026#34;Hanako\\\u0026#34;,\\n \\\u0026#34;age\\\u0026#34;: 18\\n }\\n ]\\n}\u0026#34;, \u0026#34;latency\u0026#34;: 0, \u0026#34;statusCode\u0026#34;: \u0026#34;200\u0026#34;, \u0026#34;headers\u0026#34;: [ { \u0026#34;key\u0026#34;: \u0026#34;HOGE\u0026#34;, \u0026#34;value\u0026#34;: \u0026#34;FUGA\u0026#34; } ], \u0026#34;filePath\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;sendFileAsBody\u0026#34;: false }, { \u0026#34;uuid\u0026#34;: \u0026#34;7f4942c0-8cf3-11e9-8ffc-611e08794da7\u0026#34;, \u0026#34;documentation\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;method\u0026#34;: \u0026#34;get\u0026#34;, \u0026#34;endpoint\u0026#34;: \u0026#34;blogs\u0026#34;, \u0026#34;body\u0026#34;: \u0026#34;{\\n \\\u0026#34;blogs\\\u0026#34;: [\\n {\\n \\\u0026#34;id\\\u0026#34;: 2001,\\n \\\u0026#34;title\\\u0026#34; : \\\u0026#34;爆速\\\u0026#34;,\\n \\\u0026#34;author\\\u0026#34;: \\\u0026#34;Taro\\\u0026#34;\\n },{\\n \\\u0026#34;id\\\u0026#34;: 2002,\\n \\\u0026#34;name\\\u0026#34; : \\\u0026#34;モック\\\u0026#34;,\\n \\\u0026#34;author\\\u0026#34;: \\\u0026#34;Jiro\\\u0026#34;\\n },{\\n \\\u0026#34;id\\\u0026#34;: 2003,\\n \\\u0026#34;name\\\u0026#34; : \\\u0026#34;サーバー\\\u0026#34;,\\n \\\u0026#34;author\\\u0026#34;: \\\u0026#34;Hanako\\\u0026#34;\\n }\\n ]\\n}\u0026#34;, \u0026#34;latency\u0026#34;: 0, \u0026#34;statusCode\u0026#34;: \u0026#34;200\u0026#34;, \u0026#34;headers\u0026#34;: [ { \u0026#34;key\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;value\u0026#34;: \u0026#34;\u0026#34; } ], \u0026#34;filePath\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;sendFileAsBody\u0026#34;: false } ], \u0026#34;proxyMode\u0026#34;: false, \u0026#34;proxyHost\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;https\u0026#34;: false, \u0026#34;cors\u0026#34;: true, \u0026#34;headers\u0026#34;: [ { \u0026#34;key\u0026#34;: \u0026#34;Content-Type\u0026#34;, \u0026#34;value\u0026#34;: \u0026#34;application/json\u0026#34; } ] } ] } import では、exportした設定ファイルをTools \u003e Import all environments fro fileから読み込んでみましょう。\nこれで正常に同じ設定のモックが再現されると思います。\n設定をjsonファイルで管理出来るのでGitなどで管理すれば、開発者間で同じ設定でMockを取り扱えるので開発がスムーズになりますね♪\nアクセスログが出力される Mockoonで立てたサーバーにリクエストが走ると、リクエストヘッダーなどの情報がログとして蓄積されていきます。\n何も設定せずにリクエストログを確認出来るのはかなり便利だと思います！\n終わりに 以上のように、爆速でMockサーバーを用意することが出来ました。\n技術調査や勉強、初期開発フェーズにて毎回Mockサーバーの構築に手間がかかっている場合は是非試してみてはいかがでしょうか♪\n","date":"2019-06-14T20:02:18+09:00","image":"/wp-content/uploads/2019/06/installMockoonEye.png","permalink":"/2019/06/14/8625/","title":"【簡単オススメMockAPI】Mockoonを使って爆速でMacやWindowsマシンのローカル環境にStubサーバーを作ってみよう【Node.js】"},{"content":"おさらい 前回は、Nuxt.jsプロジェクトでsassを取り扱えるようにカスタマイズしました。\n関連記事 【sass導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】 2019/06/12 1943文字 約4分で読めます 今回はpugを使えるようにカスタマイズしていこうと思います♪\npubとは What\u0026rsquo;s? Pugとは、HTMLを書くためのJavaScriptテンプレートエンジンです。\n以前はJadeとも呼ばれていました。\nThe general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data.Getting Started – Pug\n記述量が爆発的に減る このPugですが、なにが良いかというとHTMLの記述量がかなり少なくなるという点です。\nPug記述 doctype html html(lang=\u0026#34;en\u0026#34;) head title= pageTitle script(type=\u0026#39;text/javascript\u0026#39;). if (foo) bar(1 + 5) body h1 Pug - node template engine #container.col if youAreUsingPug p You are amazing else p Get on it! p. Pug is a terse and simple templating language with a strong focus on performance and powerful features. 出力HTML \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;Pug\u0026lt;/title\u0026gt; \u0026lt;script type=\u0026#34;text/javascript\u0026#34;\u0026gt; if (foo) bar(1 + 5) \u0026lt;/script\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; # Pug - node template engine \u0026lt;div id=\u0026#34;container\u0026#34; class=\u0026#34;col\u0026#34;\u0026gt; \u0026lt;p\u0026gt;You are amazing\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;Pug is a terse and simple templating language with a strong focus on performance and powerful features.\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; タグを使わない代わりに、改行やインデントを利用してコードを書いていきます。\nこれにより閉じタグが不要になり結果として記述量の大幅削減が実現出来ています。\nより詳しい記述方法については公式ドキュメント\u0026nbsp;を読んでみると良いでしょう♪\nHamlの影響を受けている 前述の通り、PugはJST（JavaScript Templates）の一種です。\nまた、Ruby On Railsのテンプレートエンジンとして有名なHamlと呼ばれるHTMLテンプレートエンジンの影響を受けたと言われています。\nBeautifully DRY,\rwell-indented, clear markup:\rtemplating haiku.Haml\nこちらもタグではなくインデントによる記法が特徴的で、記述量が少なくなることで人気を博しました。\nNuxt.jsもPugを簡単に導入可能 そして、Nuxt.jsももちろん簡単にPugを導入する事が可能です。\nそれでは早速導入していきましょう。\n手順 必要ライブラリのインストール まずは、yarnを使って必要ライブラリを追加していきましょう。\nyarn add pug pug-plain-loader yarn add v1.16.0 [1/4] Resolving packages... [2/4] Fetching packages... info fsevents@2.0.7: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@2.0.7\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.9: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@1.2.9\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning \u0026#34; \u0026gt; eslint-loader@2.1.2\u0026#34; has unmet peer dependency \u0026#34;webpack@\u0026gt;=2.0.0 \u0026lt;5.0.0\u0026#34;. warning \u0026#34; \u0026gt; sass-loader@7.1.0\u0026#34; has unmet peer dependency \u0026#34;webpack@^3.0.0 || ^4.0.0\u0026#34;. [4/4] Building fresh packages... success Saved lockfile. success Saved 33 new dependencies. info Direct dependencies ├─ pug-plain-loader@1.0.0 └─ pug@2.0.3 info All dependencies ... (略) ... Done in 109.83s. 無事インストール完了です♪\nテンプレートファイルをpug形式に変更 次に、index.vueファイルをpug形式に書き換えていきましょう。\n[adsense-responsive]\r(修正後)pages/index.vue \u0026lt;template lang=\u0026#34;pug\u0026#34;\u0026gt; section.container div app-logo h1.title.scoped--sample | Demo h2.subtitle | Demo Project .links a.button--green(href=\u0026#39;https://nuxtjs.org/\u0026#39;, target=\u0026#39;_blank\u0026#39;) Documentation a.button--grey(href=\u0026#39;https://github.com/nuxt/nuxt.js\u0026#39;, target=\u0026#39;_blank\u0026#39;) GitHub \u0026lt;/template\u0026gt; ... (略) ... 確認 準備はたったこれだけです。\n実際にサーバーを起動してアクセスしてみましょう。\n正常に描写されましたね♪\n終わりに 今回は依存ライブラリさえインストールしてしまえば、nuxt.config.jsに手を加えることなくpugの導入が出来てしまいます。\n生のHTMLを書くメリットはほとんど無いと思うので、Nuxt.jsを使っているのであれば是非Pugを使って記述をしてみてはいかがでしょうか♪\n","date":"2019-06-13T22:44:59+09:00","image":"/wp-content/uploads/2019/06/nuxtJsWithPugEye.png","permalink":"/2019/06/13/8558/","title":"【pug導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】"},{"content":"おさらい 前回までで、ローカルでのサーバー起動・動作確認まで行うことが出来ました。\n関連記事 【プロジェクト作成編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】 2019/06/11 1848文字 約4分で読めます 今回は、プロジェクトへのsassの導入を進めていこうと思います。\nSassとは？ What\u0026rsquo;s? 導入をする前に簡単にですが、Sassについておさらいです。\nSassとは、Syntactically(構文が) Awesome(イカした) StyleSheet(スタイルシート)の略です。\nなにそれかっこいい！\nSass is the most mature, stable, and powerful professional grade CSS extension language in the world.Sass: Syntactically Awesome Style Sheets\n具体的には、「SASS」記法と、「SCSS」記法の二種類が用意されています。\nSCSSもSassなので混乱しないように気をつけましょう。\nいずれも、構造化記述が可能なのでセレクターに対するスタイル指定の関係性がとても分かりやすくなります。\n記述方法のサンプル 今回は以下のCSSをそれぞれの記法で書いてみようと思います。\nCSS div{ background-color: gray; margin: 0 auto; } div p{ color: black; } div p span{ font-size: 3em; } より細かい記法についてはドキュメントを参照してください。\nSass Basics\rBefore you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first.Sass: Sass Basics\nSASS記法 SASS記法は以下のようなRubyのような記述量の少ない書き方となっています。\nSASS記法 div background-color: gray margin: 0 auto p color: black span font-size: 3em インデントにより階層を表すので見やすいのも特徴ですね。\nSCSS記法 SCSS記法は通常のCSS記述に近く、そのまま使えるので互換性と可読性が高いのが特徴です。\nSCSS記法 div{ background-color: gray; margin: 0 auto; p{ color: black; span{ font-size: 3em; } } } 手順 必要ライブラリのインストール まずは、sassを利用するための必要ライブラリをインストールしていきましょう。\n[adsense-responsive]\ryarn add -D sass-loader node-sass yarn add v1.16.0 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 33 new dependencies. ... (略) ... Done in 98.25s. yarn add @nuxtjs/style-resources yarn add v1.16.0 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 45 new dependencies. ... (略) ... Done in 67.13s. こんな感じで完了すると思います。\nsassファイルの作成 では、実際にsassファイルを作成してみましょう。\n今回は簡単な変数を定義して、その変数をページ側で参照するようにしてみます。\nまずは、assets/sassディレクトリを追加し、その中にvariable.sassを作成しましょう。\nassets/sass/variable.sass $priorityColor: #35495e; $secondaryColor: #526488; こちらは、sassで利用する変数を定義するファイルとなります。\npagesのstyle修正 次に、pages/index.vueの中にあるstyleタグの中身を修正していきましょう。\npages/index.vue \u0026lt;template\u0026gt; ... (略) ... \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; ... (略) ... \u0026lt;/script\u0026gt; \u0026lt;style lang=\u0026#34;scss\u0026#34; scoped\u0026gt; // langの指定とscopedの追加 .container { min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .title { font-family: \u0026#34;Quicksand\u0026#34;, \u0026#34;Source Sans Pro\u0026#34;, -apple-system, BlinkMacSystemFont, \u0026#34;Segoe UI\u0026#34;, Roboto, \u0026#34;Helvetica Neue\u0026#34;, Arial, sans-serif; /* 1 */ display: block; font-weight: 300; font-size: 100px; color: $priorityColor; // sassで定義した変数に差し替え letter-spacing: 1px; } .subtitle { font-weight: 300; font-size: 42px; color: $secondaryColor; // sassで定義した変数に差し替え word-spacing: 5px; padding-bottom: 15px; } .links { padding-top: 15px; } \u0026lt;/style\u0026gt; lang=scss ここでstyleタグにlang属性でscssと追加しました。\nこれは、vue-loaderのプリプロセッサと呼ばれる機能で、「この中はscssによる記述なのでコンパイルが必要だよ！」と教えるための記載となるのでsassを使う場合は必須です。\nvue-loader のおかげで、ただ lang 属性を使うだけで \u0026lt;template\u0026gt; や \u0026lt;script\u0026gt; あるいは \u0026lt;style\u0026gt; などのためのプリプロセッサを使うことができます。プリプロセッサ - Nuxt.js\nこちらを指定しないと、コンパイルが走らないので変数展開がされずにCSSが適用されなくなってしまいます。\nscoped scopedについては、この指定がないとグローバルなcssとして反映されてしまいます。\n基本的にpagesの中のテンプレート内で指定したcssは自分自身(pages)と参照しているコンポーネントに反映するのが理想ですが、scoped属性を指定しないと、親レイアウトにまで影響が出てしまいます。\n試しに、layouts/default.vueの中と、pages/index.vueの中にそれぞれh1.scoped--sampleに該当する要素を作成し、以下のような指定をしてみます。\nscoped有り pages/index.vue ... (略) ... \u0026lt;style lang=\u0026#34;scss\u0026#34; scoped\u0026gt; h1.scoped--sample{ color: #F00; } ... (略) ... 自動でdata-v-XXX属性に対するセレクタが追加されるので、親レイアウトには適用されないようにコンパイルされています。\nscoped無し pages/index.vue ... (略) ... \u0026lt;style lang=\u0026#34;scss\u0026#34;\u0026gt; h1.scoped--sample{ color: #F00; } ... (略) ... クラスセレクタのみのCSSになっているのでグローバルに適用されてしまい、親レイアウトに影響が出てしまっています。\nnuxt.config.jsの修正 次に、nuxt.config.jsに変更を加えていきます。\n[adsense-responsive]\rnuxt.config.js module.exports = { ... (略) ... modules: [ \u0026#39;@nuxtjs/style-resources\u0026#39; // モジュールの追加 ], styleResources: { sass: [ \u0026#39;~/assets/sass/variable.scss\u0026#39; // sassファイルの追加 ] }, ... (略) ... } 確認 では、準備が出来ましたので実際に起動してみましょう。\n正常に変数が展開されて適用されていますね！\n終わりに 以上のように、モジュールを追加するだけでsassの対応が出来てしまいました。\n今時は生のcssを書くことはほとんどないと思いますし、sassなどのcssコンパイラーを使う方が格段にメリットがあるので、是非導入してみてください♪\n","date":"2019-06-12T23:55:56+09:00","image":"/wp-content/uploads/2019/06/nuxtJsWithSassEye.png","permalink":"/2019/06/12/8533/","title":"【sass導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】"},{"content":"前回のおさらい 前回は、Dockerを用いてNuxt.jsの開発を行うための環境を構築する所までご紹介しました。\n関連記事 【Docker環境構築編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】 2019/06/10 1795文字 約4分で読めます 今回は実際にNuxt.jsプロジェクトを作成し、起動して動作確認する所までをご紹介して行こうと思います。\n手順 vue-cliでプロジェクトを作成 まずはコンテナの/projectsディレクトリにて、以下のコマンドを実行してプロジェクトを作成しましょう。\nvue init nuxt-community/starter-template \u0026lt;ディレクトリ名\u0026gt; {ディレクトリ名} ``` ? Project name {プロジェクト名} ? Project description (Nuxt.js project) {説明} ? Author {作成者} vue-cli · Generated \u0026#34;{ディレクトリ名}\u0026#34;. To get started: cd {ディレクトリ名} npm install # Or yarn npm run dev 対話式でいろいろ求められるのでよしなに入力してください。\n[adsense-responsive]\r完了すると、以下のようなディレクトリ構造が生成されると思います。\ntree . -a |-- Dockerfile |-- README.md |-- docker-compose.yml `-- sample |-- .editorconfig |-- .eslintrc.js |-- .gitignore |-- README.md |-- assets | `-- README.md |-- components | |-- AppLogo.vue | `-- README.md |-- layouts | |-- README.md | `-- default.vue |-- middleware | `-- README.md |-- nuxt.config.js |-- package.json |-- pages | |-- README.md | `-- index.vue |-- plugins | `-- README.md |-- static | |-- README.md | `-- favicon.ico `-- store `-- README.md 必要モジュールをインストール 次に、プロジェクトルートに移動し必要なモジュールをインストールしましょう。\n今回はyarnを使おうと思っているので、yarn installと打ちましょう。\nyarn install yarn install v1.16.0 info No lockfile found. [1/4] Resolving packages... warning nuxt \u0026gt; @nuxt/webpack \u0026gt; postcss-preset-env \u0026gt; postcss-color-functional-notation \u0026gt; postcss-values-parser \u0026gt; flatten@1.0.2: I wrote this module a very long time ago; you should use something else. warning eslint \u0026gt; file-entry-cache \u0026gt; flat-cache \u0026gt; circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor. [2/4] Fetching packages... info fsevents@2.0.7: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@2.0.7\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. info fsevents@1.2.9: The platform \u0026#34;linux\u0026#34; is incompatible with this module. info \u0026#34;fsevents@1.2.9\u0026#34; is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] Linking dependencies... warning \u0026#34; \u0026gt; eslint-loader@2.1.2\u0026#34; has unmet peer dependency \u0026#34;webpack@\u0026gt;=2.0.0 \u0026lt;5.0.0\u0026#34;. [4/4] Building fresh packages... success Saved lockfile. Done in 131.50s. Done in 131.50s.みたいなログが出ればインストール完了です。\n起動 では、実際にサーバーを起動してみましょう。\nyarn dev yarn run v1.16.0 $ nuxt ╭─────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.8.1 │ │ Running in development mode (universal) │ │ │ │ Listening on: http://172.20.0.2:3000/ │ │ │ ╰─────────────────────────────────────────────╯ ℹ Preparing project for development 08:22:51 ℹ Initial build may take a while 08:22:51 ✔ Builder initialized 08:22:51 ✔ Nuxt files generated 08:22:51 ✔ Client Compiled successfully in 16.16s ✔ Server Compiled successfully in 13.60s ℹ Waiting for file changes 08:23:13 ℹ Memory usage: 177 MB (RSS: 246 MB) 08:23:13 こんなログが出れば起動完了です。\nブラウザでhttp://localhost:3000\u0026nbsp;にアクセスしてみましょう。\n正常にページが表示されましたね♪\nNuxt.jsの便利機能 ホットリロード 今回作成したプロジェクトには、ホットリロード機能が搭載されています。\nホットリロードとは、コードやファイルを変更した際に、手動で再起動しなくても自動で再リロードをして適用してくれる機能になります。\nこれが地味に便利過ぎてとても助かります。\nアジャイル開発をする上では必須の機能ですよね。\nルーティングの自動設定 こちらも、Nuxt.jsの強力な機能と言えるルーティングについてです。\nNuxt.jsでは、設定ファイルへのルーティング定義は不要です。\nその代わりに、pagesディレクトリ配下のツリー構造によって自動でルーティングの定義が行われます。\nNuxt.js は pages ディレクトリ内の Vue ファイルの木構造に沿って、自動的に vue-router の設定を生成します。ルーティング - Nuxt.js\n例えば、pagesディレクトリ配下に以下のようにchildディレクトリを作成してみます。\ntree. pages ├── README.md ├── child //追加 │ └── index.vue //追加 └── index.vue そして、ブラウザでhttp://localhost:3000/child\u0026nbsp;にアクセスすると追加したindex.vueの内容が表示されると思います。\n設定と実ファイルを二十管理する必要が無いのは開発者としてスッキリしますね♪\n便利なコマンドが用意されている Nuxt.jsを使う利点として、最初から開発・本番それぞれに適したコマンドが用意されている点が言えます。\nNuxt.js は便利コマンドのセットを備えています。開発時に役立つものも、プロダクション用途のものもあります。コマンド - Nuxt.js\n例えば、今回使ったyarn devコマンドは、内部的にnuxtコマンドを実行しています。\nそして、本番デプロイ用にnuxt buildとnuxt startコマンドも用意されています。\nまた、静的ホスティング向けのnuxt generateという言うコマンドもあります。\n[adsense-responsive]\rそれぞれのコマンドの意味は以下の通りです。\nコマンド\r役割\rnuxt\r開発サーバーを localhost:3000 で起動します。このサーバーはホットリローディングします\rnuxt build\rアプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにミニファイします\rnuxt start\rプロダクションモードでサーバーを起動します（nuxt build 後に実行してください）\rnuxt generate\rアプリケーションをビルドして、ルートごとに HTML ファイルを生成します（静的ファイルのホスティングに用います）\rビルド用のスクリプトを組むことなく、用意されたコマンドを叩くだけでビルドとデプロイが出来るのはとてもありがたいですね。。。！\n終わりに 以上のように、コマンドベースで簡単にプロジェクトを作成し、起動するところまで出来ました。\n次回はプロジェクトへのsassの導入方法についてご紹介していこうと思います。\n","date":"2019-06-11T19:56:46+09:00","image":"/wp-content/uploads/2019/06/nuxtJsGetStartEye.png","permalink":"/2019/06/11/8493/","title":"【プロジェクト作成編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】"},{"content":"Nuxt.jsがアツい フロントエンド戦争は落ち着き始めている？ 近年のフロントサイドの技術は目まぐるしく進化を遂げていますね。\nAngularJSからReact、Node.jsなどなど。。。\nそして、そんなフロントエンド戦争に終止符を打つべく登場したのが、Vue.jsです。\nVue.js？ Vue.jsとは、描写(View)に重きを置いたシンプルなフレームワークです。\nThe Progressive JavaScript Framework\r親しみやすい\rすでに HTML、CSS そして JavaScript を知っていますか？\rガイドを読んで、すぐにモノ作りを開始しましょう！\r融通が効く ライブラリと完全な機能を備えたフレームワークの間で拡張できる徐々に採用可能なエコシステム\n高性能 20KB min+gzip コンパクトなランタイム。 猛烈に速い Virtual DOM 。 最小限のみ成果で最適化が可能。Vue.js\n要するに、扱いやすくカスタマイズ性が高く高速なフレームワーク、と言う事ですね。\nAngular.jsなどはフルスタックフレームワークとなっているため、やれる事は多いのですが設定や記述が複雑なのが弱みです。\n日本語ドキュメントが充実しているところもポイントです♪\nそして、そんなVue.jsをさらに扱いやすくするフレームワークがNuxt.jsです。\nNuxt.js？ Nuxt.jsとは、Vue.jsを用いたWebアプリケーションを簡単に作るために考え出されたフレームワークです。\nNuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。はじめに - Nuxt.js\nVue.js単体でWebアプリケーションを作る際に必要だった設定等を何も指定せずによしなにやってくれるため、導入しやすいのがメリットです。\nVue.jsと同様に、こちらも日本語ドキュメントが充実しています♪\nNuxtの読み方はナクスト ちなみに、初見だと悩んでしまう読み方ですが、ナクストと読みます。\nこれからは胸を張ってナクストと言っていきましょう！笑\n英語が弱めな筆者はヌクストと読んでいた。\nSSR(サーバーサイドレンダリング)が可能 そして、一番注目されているのがサーバーサイドレンダリングが簡単に出来る、と言う点ですね。\n今回はSSRについての説明は割愛しますが、簡単に言うとパフォーマンスがさらに向上しSEO対策にも効果がある、と言われています。\nDocker環境でサクッと開発しよう フロントエンドの開発を行う際にも、最近ではコマンドを駆使して進める事が多くなっていると思います。\nしかし、複数のアプリケーション開発をしているとモジュールのバージョン違いなどでうまく動かなかったり、マシンの環境変数やコマンドが汚れてしまう恐れがあります\nそこで今回は、実際にNuxt.jsを開発するためのDocker環境を構築するところまでをご紹介していこうと思います。\nDockerを使うことでバージョン違いやグローバルを汚す恐れを気にすることなく環境を構築する事が可能になるのでオススメです♪\n手順 前提 今回のホスト側のDocker環境は以下の通りです。\ndocker\rDocker version 18.06.1-ce, build e68fc7a\rdocker-compose\rdocker-compose version 1.22.0, build f46880f\rDockerfileの作成 まずはDockerfileを用意しましょう。\n[adsense-responsive]\r内容は以下をコピペで問題ありません。\nDockerfile FROM node:10.8.0-stretch RUN npm install --global yarn RUN yarn global add @vue/cli RUN yarn global add @vue/cli-init WORKDIR /projects ENV HOST 0.0.0.0 ENV PORT 3000 Nuxt.jsプロジェクトを構築するために必要なもののみインストールしておきます。\ndocker-compose.ymlの作成 次に、docker-compose.ymlを作成します。\nこちらも基本的には以下の内容をそのままコピペで問題ありません。\ndocker-compose.yml version: \u0026#39;3\u0026#39; services: nuxt_sample_app: build: . ports: - \u0026#34;3000:3000\u0026#34; volumes: - \u0026#34;.:/projects\u0026#34; tty: true ファイル群をホスト側で編集出来るように、Dockerfileで作成したprojectsフォルダをマウントしておきます。\n実行 それでは、docker-composeコマンドで起動しましょう。\ndocker-compose up -d Creating network \u0026#34;study-nuxt_default\u0026#34; with the default driver Building nuxt_sample_app Step 1/7 : FROM node:10.8.0-stretch ---\u0026gt; 383051761be5 Step 2/7 : RUN npm install --global yarn ---\u0026gt; Using cache ---\u0026gt; 3b160886b7be Step 3/7 : RUN yarn global add @vue/cli ---\u0026gt; Using cache ---\u0026gt; 88ee573a9597 Step 4/7 : RUN yarn global add @vue/cli-init ---\u0026gt; Using cache ---\u0026gt; 17c9a11855ad Step 5/7 : WORKDIR /projects ---\u0026gt; Using cache ---\u0026gt; 69fee8cfe82d Step 6/7 : ENV HOST 0.0.0.0 ---\u0026gt; Using cache ---\u0026gt; 75400c251c28 Step 7/7 : ENV PORT 3000 ---\u0026gt; Using cache ---\u0026gt; 74c1f1050678 Successfully built 74c1f1050678 Successfully tagged study-nuxt_nuxt_sample_app:latest Starting study-nuxt_nuxt_sample_app_1 ... done 以上のようにStarting study-nuxt_nuxt_sample_app_1 ... doneと出ていれば起動は完了です。\n確認 では、起動したコンテナに以下のコマンドで入ってみましょう。\ndocker-compose exec nuxt_sample_app bash root@627ac282256c:/projects# 正常にrootユーザーで入る事が出来たかと思います。\nyarn --version 1.16.0 yarnも正常にインストールされていますね♪\n終わりに これで、Vue.jsやNuxt.jsをDocker環境で開発するための準備が出来ました。\n次回は実際にNuxt.jsのプロジェクトを作成するところを進めていきたいと思います。\n","date":"2019-06-10T20:10:49+09:00","image":"/wp-content/uploads/2019/06/nuxtJsWithDockerEye.png","permalink":"/2019/06/10/8501/","title":"【Docker環境構築編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】"},{"content":"突如発売された新型MacBookPro2019 2019年5月22日にMacBookPro2019モデルが発売されました。\nMacBook Pro\rもっとパワーを。\rもっとパフォーマンスを。\rもっとプロのために。\rMacBook Pro - Apple（日本）\n筆者は2015年モデルの13インチのフルカスタマイズモデルを使っているのですが、最近は強制シャットダウンしたり動きがもっさりしたりと不満を感じていたのでとても良いタイミングでの発売でした！\n普段から持ち運びをするため、13インチでメモリを32GB乗せれれば理想でしたが今回は実現出来なかったので、15インチを購入しました。\n13インチに比べれば持ち運びの負担が上がりますが、現在使っている2015年モデルの13インチと比べてもちょっとだけ重くなるくらいだったので、15インチにしちゃいました！\n合わせて買うべきアクセサリ 耐衝撃 ラップトップ スリーブ 15インチ Amazon tomtoc 360°保護 耐衝撃 ラップトップ スリーブ 15インチ New MacBook Pro Touch Bar搭載 Late 2016 - 2018 (A1990 A1707)| 14インチ ThinkPad T-Series / X1 Carbon 第1-4世代 | 14インチ HP Acer Chromebook 対応 15インチ ラップトップ タブレット バッグ、 撥水加工、 ブラックブルー UTASU USB Typ-C ハブ 6in1 Amazon UTASU USB Type C ハブ 6in1 USB C ハブ HUB ウルトラスリムドッキングステーションPD充電 USB 3.0ポート*2 SD/Micro SD カードリーダー マイクロ タイプC 変換アダプター MacBook/MacBook Pro 2016 2017 2018/Macbook Air 18対応 Bluelounge Kickflip Amazon 【国内正規代理店】Bluelounge Kickflip MacBook Pro ( 15-inch, Late 2016, Touch Bar 対応 ) 用フリップスタンド 15インチ ブラック エレコム 液晶保護フィルム Amazon エレコム 液晶保護フィルム macbook Pro 15インチ 光沢 指紋防止 EF-MBP15FLFANG 今回のスペック 今回もカスタマイズ希望だったので、AppleStoreから注文です。\nスペックはこんな感じ！\n約44万！！！\n外部ストレージを使う前提なので、ストレージ領域は小さめの512GB SSDを選びましたが、開発効率アップのためのメモリ増設と、映像編集効率アップのためのGPUを上げた結果、このお値段になりました。笑\nじ、自己投資や。。。！！！\nそして先日ついに手元に届きましたので開封の儀をしてきたいと思います！\n開封の儀 外観 注文してから1週間ほどで用意が出来たよ！というメールが届いたので、道玄坂のアップルストアで受け取ってきました！\nアップルらしいおしゃれな袋ですね。\nこちらがパッケージ。\nこちらもシンプルなデザインです。\n早速開けていきましょう。\nパカッ。\n梱包物 美しい。。。！\n[adsense-responsive]\r梱包物は以下の3つです。\nPoint\rMacBook Pro本体\r取扱説明書\r充電アダプター\rUSB Type-Cケーブル\r取扱説明書 取扱説明書の中にはステッカーや保証書などもまとめて入れらています。\n日本語で書かれているのでさらっと目を通しておくと良いでしょう。\n充電アダプター\u0026amp;USB Type-Cケーブル お次は充電アダプターとUSB Type-Cケーブルです。\n充電アダプターはケーブルを取り付ける事でACコンセントから充電する事が可能になります。\nUSBは両方がType-Cの毛状になっています。\nMacBook Pro本体 さて、メインの本体をみていきましょう。\n相変わらずの洗礼されたデザイン・・・。\nりんごマークもより一層輝いています。\n端子は左右にUSB Type-Cが2つずつ用意されています。\nイヤホンジャックも搭載されています。\nキーボードは第三世代のバタフライキーボードです。\nトラックパッドも15インチなので広めです。\nそしてこちらが賛否が別れるタッチバーです。\n正直ファンクションキーはそこまで触ることはないので、気にならないと思いますが実際に使っていく中で向き不向きが分かれるのでしょうか。\nセットアップは簡単 本体を開くと自動で電源が入り、初期セットアップが始まります。\n特に難しいこともないので、そのままポチポチ進めていけばセットアップ完了です!\nアクセサリーの取り付け 次は、MacbookPro2019を使うにあたって合わせて購入したほうが良いアクセサリをつけていきましょう。\nフィルム まずは画面の保護フィルムをつけていきましょう。\nこれは一番最初にやっておいたほうがいいので忘れずに用意しておきましょう。\nフリップスタンド 次はフリップスタンドをつけていきます。\n[adsense-responsive]\rこちらは以前紹介した角度をつける事で手首への負担や排熱効果を向上させてくれる効果があるアクセサリです。\n筆者は以前から愛用しています♪\n関連記事 【タイピング速度向上】手首の負担軽減や排熱効果のある「Bluelounge Kickflip MacBook用フリップスタンド」を買ってみた 2018/08/29 1427文字 約3分で読めます USB Type-C ドッキングハブ 6in1 お次はこちらです。\nMacbookPro2019は左右にUSBポートが2個ずつの系4つしか端子がありません。\nなので、USBやSDカードなどを取り付けたい場合には専用のドッキングハブを用いる必要があります。\n今回購入したものは、一つで6個の役割をしてくれるのでオススメです♪\n左右どちらにも取り付けることが出来ます。\n正常に接続されると青いランプが開きます。\n正常にmicroSDカードが読み込まれましたね♪\n保護ケース 最後は持ち運び用の保護ケースです。\n15インチ対応でかつ耐衝撃のものを購入してみました。\nクッション材が思った以上にしっかりしていて、サイズもぴったりなのでこちらもオススメです。\n小物を入れるためのポケットもあるので、とても助かりますね♪\n終わりに 4年使っていたMacbookPro2015からついに新しいものに買い換えました！\nこれで作業効率が格段に上がると信じているので、使っていく中で何か気づいたことがあったら記事にしてご紹介していこうと思います♪\n","date":"2019-06-09T22:53:49+09:00","image":"/wp-content/uploads/2019/06/macBookPro2019ReviewEye.png","permalink":"/2019/06/09/8393/","title":"【新型MacBookPro2019】15インチMacBook Proの2.4GHz/メモリ32GBを購入してきた【2015モデルからの乗り換え】"},{"content":"Spockを使おう 時間がないからユニットテストを書かないは悪 皆さんはシステム開発をする際にユニットテストは書いていますでしょうか？\nスケジュールがパツパツだから、ユニットテストは後回し！といった感じの案件も正直少なくないと思います。\nしかし、ユニットテストがかかれないまま機能追加や機能改修が発生すると、結局ユニットテストを追加する余裕が出ずに、ユニットテストでカバー出来る部分をテスターさんが自分たちでやらないといけなくなってしまったりと、長い目で見た際に工数が結果として上がってしまう可能性がとても高いです。\nテスト駆動開発の流行\nさらに近年は、テスト駆動開発(TDD)という言葉が有名になってきているので、なおさらユニットテストを妥協するのはオススメ出来ません。\nテスト駆動開発 (てすとくどうかいはつ、test-driven development; TDD) とは、プログラム開発手法の一種で、プログラムに必要な各機能について、最初にテストを書き（これをテストファーストと言う）、そのテストが動作する必要最低限な実装をとりあえず行った後、コードを洗練させる、という短い工程を繰り返すスタイルである。多くのアジャイルソフトウェア開発手法、例えばエクストリーム・プログラミングにおいて強く推奨されている。近年はビヘイビア駆動開発へと発展を遂げている。テスト駆動開発 - Wikipedia\nJUnitとSpock では、ユニットテストを書く際に利用するのフレームワークは何を使えば良いのでしょうか。\nJava開発のユニットテストといえば、JUnitが有名ですよね。\n[adsense-responsive]\rJUnitとはJavaで開発されたプログラムにおいてユニットテスト（単体テスト）の自動化を行うためのフレームワークである。JUnit - Wikipedia\n最新バージョンはJUnit5であり、もちろんSpringBootもサポートしています。\nそんなJUnit一強時代を崩すべく登場したのがSpockです。\nSpock\rthe enterprise ready specification frameworkSpock\nSpockとは、Groovy言語で動作するテスティングフレームワークです。\nこちらは、当時JUnitが弱かったパラメータ化テスト(Parameterized Test)や、実施結果が直感的に分かりづらい、などといったデメリットを補うべくして生まれました。\nもちろん、SpringBootもSpockの利用を推奨しており、手厚いサポートをしているため導入しやすいです。\nさらには日本語ドキュメントも用意されています。\n最高かよ！！！\n今回はプロジェクトへの導入方法から簡単なコントローラークラスのテスト方法までをご紹介しようと思います。\n本来はtest用のprofileを用意したり、サービス層配下はStub化する必要がありますが、今回はその辺は触れないので次回以降に余裕があったら対応してみようと思います。\n手順 依存関係の追加 まずは依存関係をbuild.gradleに追加していきましょう。\ndevtools/build.gradle buildscript { apply from: \u0026#39;property.gradle\u0026#39; ... (略) ... dependencyManagement { } dependencies { implementation \u0026#34;org.springframework.boot:spring-boot-starter:${accountService.springBootVersion}\u0026#34; implementation \u0026#34;org.springframework.boot:spring-boot-starter-data-jpa:${accountService.springBootVersion}\u0026#34; implementation \u0026#34;org.springframework.boot:spring-boot-starter-json:${accountService.springBootVersion}\u0026#34; implementation \u0026#34;ch.qos.logback.contrib:logback-json-classic:${accountService.logbackJsonVersion}\u0026#34; implementation \u0026#34;ch.qos.logback.contrib:logback-jackson:${accountService.logbackJsonVersion}\u0026#34; testImplementation \u0026#34;org.springframework.boot:spring-boot-starter-test:${accountService.springBootVersion}\u0026#34; // 追加 testImplementation \u0026#34;org.spockframework:spock-core:${accountService.spockVersion}\u0026#34;// 追加 testImplementation \u0026#34;org.spockframework:spock-spring:${accountService.spockVersion}\u0026#34;// 追加 testCompileOnly \u0026#34;ch.qos.logback.contrib:logback-json-classic:${accountService.logbackJsonVersion}\u0026#34; testCompileOnly \u0026#34;ch.qos.logback.contrib:logback-jackson:${accountService.logbackJsonVersion}\u0026#34; } test { testLogging { events \u0026#39;started\u0026#39;, \u0026#39;skipped\u0026#39;, \u0026#39;passed\u0026#39;, \u0026#39;failed\u0026#39; } } } property.gradleにもSpockのバージョンを追加します。\ndevtools/property.gradle ext { accountService = [:] accountService.springBootVersion = \u0026#39;2.1.3.RELEASE\u0026#39; accountService.sourceCompatibility = 1.8 accountService.group = \u0026#39;tech.blogenist.service\u0026#39; accountService.version = \u0026#39;0.0.1-SNAPSHOT\u0026#39; accountService.lombokVersion = \u0026#39;1.18.6\u0026#39; accountService.flywayVersion = \u0026#39;5.1.3\u0026#39; accountService.postgresVersion = \u0026#39;42.2.5\u0026#39; accountService.snakeyamlVersion = \u0026#39;1.19\u0026#39; accountService.awsSdkVersion = \u0026#39;1.11.483\u0026#39; accountService.cloudWatchLogbackAppenderVersion = \u0026#39;1.11\u0026#39; accountService.logbackJsonVersion = \u0026#39;0.1.5\u0026#39; accountService.applicationYmlPath = \u0026#34;../api/src/main/resources/\u0026#34; accountService.spockVersion = \u0026#34;1.3-groovy-2.5\u0026#34; // 追加 } テストクラスの作成 次にテストクラスを作成しましょう。\nSpockはGroovy言語で作るので、 `src/test/groovy` 配下に作成する必要があります。\n例の如く、テスト対象と同パッケージ階層にする必要があるので気をつけましょう。\n今回はAccountDetailControllerのテストクラスを作成してみようと思います。\nテストクラスには、Specificationクラスを継承させる必要があります。\nまた、クラス名はSpecで終わらせるのがルールとなっています。\nAccountDetailControllerSpec package tech.blogenist.service.account.api.controller.account.detail import static org.hamcrest.CoreMatchers.*; import static org.junit.Assert.*; import static org.hamcrest.CoreMatchers.*; import static org.junit.Assert.*; import org.springframework.beans.factory.annotation.Autowired import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc import org.springframework.boot.test.context.SpringBootTest import org.springframework.test.web.servlet.MockMvc import org.springframework.test.web.servlet.request.MockMvcRequestBuilders import org.springframework.web.context.WebApplicationContext import groovy.json.JsonSlurper import spock.lang.Specification import spock.lang.Unroll import tech.blogenist.service.account.api.infrastructure.rest.path.RestPathConst import tech.blogenist.service.account.api.model.account.detail.response.AccountDetailResponseModel import tech.blogenist.service.account.value.account.AccountDisplayNameValue import tech.blogenist.service.account.value.account.AccountIdValue import tech.blogenist.service.account.value.account.AccountInfomationIdValue import tech.blogenist.service.account.value.account.AccountNameValue import tech.blogenist.service.account.value.account.AgeValue import tech.blogenist.service.account.value.common.datetime.MasterNameValue @AutoConfigureMockMvc @SpringBootTest class AccountDetailControllerSpec extends Specification { @Autowired protected MockMvc mvc @Unroll def \u0026#34;【正常系】#CASE : #ACCOUNT_ID + #HTTP_STATUS\u0026#34;() { setup: def TARGET_PATH = RestPathConst.PATH_SEPARATOR + RestPathConst.VersionPath.V1 + RestPathConst.CategoryPath.AccountPath.BASE_PATH + ACCOUNT_ID + RestPathConst.PATH_SEPARATOR def parser = new JsonSlurper() when: def actual = mvc.perform(MockMvcRequestBuilders.get(TARGET_PATH)) .andReturn() .getResponse() then: assertThat(actual.getStatus(), is(HTTP_STATUS)) def json = parser.parseText(actual.getContentAsString()) assertThat(json.accountId.value, is(RESPONSE_BODY.accountId.value)) where: CASE | ACCOUNT_ID || HTTP_STATUS | RESPONSE_BODY \u0026#34;対象のアカウントが存在する事\u0026#34; |10001|| 200 | AccountDetailResponseModel.builder() .accountId( AccountIdValue.of(10001) ) .accountInfomationId( AccountInfomationIdValue.of(20001 )) .name( AccountNameValue.of(\u0026#34;Test太郎\u0026#34; )) .age( AgeValue.of(20 )) .displayName( AccountDisplayNameValue.of(\u0026#34;表示名\u0026#34; )) .sex(MasterNameValue.of( \u0026#34;男性\u0026#34; )) .build(); \u0026#34;対象のアカウントが存在する事\u0026#34; |10002 || 200| AccountDetailResponseModel.builder() .accountId( AccountIdValue.of(10002) ) .accountInfomationId( AccountInfomationIdValue.of(20001 )) .name( AccountNameValue.of(\u0026#34;Test太郎\u0026#34; )) .age( AgeValue.of(20 )) .displayName( AccountDisplayNameValue.of(\u0026#34;表示名\u0026#34; )) .sex(MasterNameValue.of( \u0026#34;男性\u0026#34; )) .build(); } @Unroll def \u0026#34;【異常系】#CASE : #ACCOUNT_ID + #HTTP_STATUS\u0026#34;() { setup: def TARGET_PATH = RestPathConst.PATH_SEPARATOR + RestPathConst.VersionPath.V1 + RestPathConst.CategoryPath.AccountPath.BASE_PATH + ACCOUNT_ID + RestPathConst.PATH_SEPARATOR def parser = new JsonSlurper() when: def actual = mvc.perform(MockMvcRequestBuilders.get(TARGET_PATH)) .andReturn() .getResponse() then: assertThat(actual.getStatus(), is(HTTP_STATUS)) def json = parser.parseText(actual.getContentAsString()) assertThat(json.code, is(CODE)) assertThat(json.message, is(MESSAGE)) assertThat(json.timestamp, is(not(null))) where: CASE | ACCOUNT_ID || HTTP_STATUS | CODE | MESSAGE \u0026#34;対象のアカウントが存在しない事\u0026#34; |1 || 404| \u0026#34;404_00001\u0026#34; | \u0026#34;共通エラーメッセージ\u0026#34;; } } 要点の解説 @AutoConfigureMockMvc [adsense-responsive]\rサーバー起動せずに、MVCに関するテストを行えるようにするとても便利なアノテーション。\n@SpringBootTest SpringBootでユニットテストを行う際に、application.ymlを読み込んだりなどの準備をよしなにやってくれる魔法のアノテーション。\nMockMvc 上記のアノテーションを追加することで、利用可能になるモッククラスです。\nこちらを使うことで擬似的にリクエストを投げていると同等の動きを再現する事が可能になります。\n@Unroll 後述するパラメタライズテスト時に、そのパラメーター単位でテスト結果をログやレポートに出力してくれます。\nまた、ケースとなる関数名にパラメタライズで指定した変数をセットする事が可能なので、レポートもとても見やすくなります。\n実行ログ // @Unrollがある場合 tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10001 + 200 STARTED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10001 + 200 PASSED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10002 + 200 STARTED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10002 + 200 PASSED // @Unrollがない場合 tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】#CASE : #ACCOUNT_ID + #HTTP_STATUS STARTED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】#CASE : #ACCOUNT_ID + #HTTP_STATUS PASSED setup句 setup句ではテストを行うための事前処理を行う際に記述します。\nwhen句 実際に行う処理を記述します。\nthen句 処理結果の比較処理を行います。\nwhen句 パラメタライズテストを行う際にデータを定義する事が出来ます。\nSpockでは、マークダウンのテーブルのようにパイプ(|)で仕切る事で項目を定義する、データパイプと言う記法を使う事が出来ます。\n1行目には項目(ヘッダー)を指定し、2行目以降に実際のパラメーターを定義する事で、その行単位で関数がsetup句から実行されていきます。\n実行 では実際にユニットテストを実行してみましょう。\nSPRING_PROFILES_ACTIVE=local ./gradlew test \u0026gt; Task :api:test tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10001 + 200 STARTED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10001 + 200 PASSED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10002 + 200 STARTED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10002 + 200 PASSED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【異常系】対象のアカウントが存在しない事 : 1 + 404 STARTED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【異常系】対象のアカウントが存在しない事 : 1 + 404 PASSED すべて正常に完了すれば上記のようにすべてPASSEDになると思います。\nエラーがある場合はこんな感じになります。\nSPRING_PROFILES_ACTIVE=local ./gradlew test \u0026gt; Task :api:test tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10001 + 404 STARTED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10001 + 404 FAILED org.spockframework.runtime.ConditionFailedWithExceptionError at AccountDetailControllerSpec.groovy:54 Caused by: java.lang.AssertionError at AccountDetailControllerSpec.groovy:54 tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10002 + 200 STARTED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【正常系】対象のアカウントが存在する事 : 10002 + 200 PASSED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【異常系】対象のアカウントが存在しない事 : 1 + 404 STARTED tech.blogenist.service.account.api.controller.account.detail.AccountDetailControllerSpec \u0026gt; 【異常系】対象のアカウントが存在しない事 : 1 + 404 PASSED 3 tests completed, 1 failed \u0026gt; Task :api:test FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task \u0026#39;:api:test\u0026#39;. \u0026gt; There were failing tests. See the report at: file:///Users/blogenist/develop/git/github/service-account/api/build/reports/tests/test/index.html * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 20s 11 actionable tasks: 2 executed, 9 up-to-date エラーレポート そして、Spockの一番の強みがユニットテストレポート機能が標準搭載されている事です。\n[adsense-responsive]\rユニットテスト失敗時のログに出ているファイルにアクセスしてみましょう。\nおいおい神かよ。\nシンプルで見やすいレポートが生成されています。\n比較結果の詳細が記載されているので、調査がしやすいですね。\nもちろん、すべてPASSEDになると以下のようなレポートが生成されます。\nまた、HTML形式なのでCIツールと合わせて結果をサーバーなどにおけば、ユニットテストの結果が管理もしやすいです。\n終わりに 以上のように、今まではJUnit一択だったユニットテストですが、Spockと言う新しいフレームワークが登場した事でユニットテストの環境が変わってきています。\nなんにせよ、ユニットテストの後回しは自分の首を絞める事になるので必ず初期開発から導入するようにしてみると幸せになれると思います♪\n","date":"2019-05-31T19:11:54+09:00","image":"/wp-content/uploads/2019/05/springBootWithSpockEye.png","permalink":"/2019/05/31/8399/","title":"【SpringBoot2】JUniteに取って代わりそうな「Spock」を使ってコントローラーのユニットテストをやってみよう【TDD】"},{"content":"Eclipseでもリモートデバッグが可能 先日、SpringBootアプリケーションのInteliJに置けるリモートデバッグ方法についてご紹介しました。\n関連記事 【Dockerでも可能】IntelliJ IDEでSpringBootのリモートデバッグ(remote debug)を使ってみよう【開発スピードアップ】 2018/12/04 1962文字 約4分で読めます 今回は同様にEclipse環境でのリモートデバッグを行う方法をご紹介致します。\n手順 リモートデバッグのコンフィグ設定 まずはEclipse側でリモートデバッグ用のコンフィグ設定を追加しましょう。\nメニューからRun-\u003eDebug Configurationsを選択します。\n次に、Remote Java Applicationを選択した状態で右上の追加マークをクリックします。\n次に、任意の名称をつけ、portをデフォルトの5005に変更して、Applyボタンをクリックします。\nこれでリモートデバッグ用のコンフィグが作成出来ました。\n確認 では、実際に確認をしてみましょう。\n以前と同様に以下のコマンドで実行すると、5005ポートでリッスン状態となります。\n./gradlew bootrun --debug-jvm \u0026gt; Task :api:bootRun Listening for transport dt_socket at address: 5005 この状態で先ほど作成したコンフィグからDebug起動すると、正常にSpringBootシステムが起動し、ブレイクポイントに引っかかるようになります♪\n終わりに 以上のように、Eclipse上でもリモートデバッグが可能になりました。\nもちろん、こちらもDockerで動かしていてもリモートデバッグが可能です。\nぜひ試してみてください♪\n","date":"2019-05-29T20:08:18+09:00","image":"/wp-content/uploads/2019/05/springBootRemoteDebugFromEclipseEye.png","permalink":"/2019/05/29/8369/","title":"【SpringBoot2】Eclipseでリモートデバッグ(remote debug)を行う方法【Dockerでも簡単】"},{"content":"気になるアカウントのツイートをSlackに 皆さんはTwitterをやっていますか？\n気軽に始める事が出来るSNSとして、とても身近な存在ですよね。\n独り言から重要なお知らせまで幅広い情報を発信するTwitterですが、気になるアカウントの情報はいち早く知りたい！！と言うケースもありますよね。\n今回は、特定アカウントがツイートした際にチャットツールのSlackに自動で通知する方法をご紹介します。\n手順 Twitterアプリの連携 まずは、SlackのManage apps画面を開きます。\nデスクトップアプリを使っている方は、以下のメニューから遷移する事が出来ます。\nすると、連携アプリの設定画面が表示されるので、検索ボックスに「Twitter」と入力し、ヒットしたTwitterを選択しましょう。\nすると、Twitterアプリの設定画面が表示されるので、Installボタンをクリックします。\n連携アプリの概要が表示されるので、問題が無ければAdd Twitter Integrationボタンをクリックしましょう。/p\u003e\rアプリ連携を求められるので、そのまま承認で問題ありません。\nこれで連携設定は完了です。\n転送対象の設定 次に、転送させたいアカウント情報を登録していきましょう。\n今回はPokemonGOAppJP\u0026nbsp;アカウントのツイートを転送させてみようと思います。\n必要な項目にチェックを入れて、転送先のSlackチャンネルを指定して更新するだけです。\n[adsense-responsive]\r各項目は以下の通りです。\n項目\r概要\rPost tweets sent TO this account\rこのアカウント宛に投稿されたツイートをSlackに転送\rPost tweets sent FROM this account\rこのアカウントが投稿したツイートをSlackに転送\rExclude @replies sent from this account\rこのアカウントから送信された@リプライツイートを除外する\rShow Retweets sent from this account\rこのアカウントから送信されたリツイートをSlackに転送する\rすると、Slackの転送先チャンネル側に連携開始のメッセージが出力されるので、これで準備は完了です。\n確認 あとは、対象のアカウントがツイートするとSlackに転送がされると思います。\nとても簡単ですね♪\n終わりに 以上のように、ポチポチするだけで簡単にSlackへの転送が可能になりました。\nSlackの使い勝手はとても高く様々な外部サービスとの連携も強力なので、是非試してみてください♪\n","date":"2019-05-17T21:53:50+09:00","image":"/wp-content/uploads/2019/05/slackAddTwitterAppEye.png","permalink":"/2019/05/17/8317/","title":"【簡単】特定アカウントのツイートをSlackに自動で転送する方法【Twitter】"},{"content":"初めてのゲーミングキーボードを購入したった 打鍵感が心地良い 筆者は今まで、安価のBluetooth対応のキーボードを使ってFPSやPC作業をやってたのですが、ガチめにFPS等をやっている人に話を聞くと、やっぱりゲーミングキーボードを買うだけでも操作性が上がり、立ち回りがうまくなると言われました。\n確かに安いキーボードだと、キーの打鍵感がイマイチだったり、反応スピードが遅かったりなどはプレイして感じる事はあります。\nそこで今回は、様々なゲーミングキーボードを筆者なりに調べた結果、一番FPSに向いてそうな以下のようなキーボードを購入してみました。\nその他のLogicool製品 Logicoolの製品は他にも紹介しているので興味がありましたらそちらもみていただければなと思います♪\n関連記事 【快適マウスパッド】ゲーミングマウスにぴったりの「Logicool G240t」が滑らかすぎて快適エイムライフが送れそうな件【PUBG/Fortnite/ApexLegends/FPS/TPS】 2019/03/21 1968文字 約4分で読めます 関連記事 【最強ゲーミングマウス】PS4やSwitchでも使用可能な「Logicool ロジクール G502 HERO」の使い方と初期設定方法まとめ【フォートナイト/PUBG/ApexLegends/FPS/TPS】 2019/03/19 3535文字 約8分で読めます 関連記事 【Logicool】ゲーミングヘッドセットの「G533」を買ってみた【PUBG/フォートナイト/ApexLegend】 2019/11/05 3067文字 約7分で読めます 製品紹介 Logicool(ロジクール)ゲーミングキーボード Amazon Logicool ロジクール G PRO テンキーレス ゲーミング キーボード G-PKB-001ブラック メカニカル Romer-G RGB 着脱式ケーブル プロ仕様 PUBG JAPAN SERIES 2019 推奨モデル 国内正規品 2年間メーカー保証 こちらはご存知Logicoolから発売されているゲーミングキーボード\u0026nbsp;です。\n奥行き\r153mm\r横\r360mm\r高さ\r34.3mm\r重量（ケーブル除く）\r：980g\r特徴 目的は一つ\r製品名に「Pro」を冠した初のロジクールGキーボード。世界中のトップeスポーツアスリートの厳しいニーズに応えるデザインと品質を備えています。究極のパフォーマンスを実現した必勝ギアです。\rLogicool G Pro Tenkeyless Mechanical Gaming Keyboard\nポータブルなテンキーレス デザイン\r着脱式のケーブルとコンパクトなテンキーレスのデザインを採用。ケーブルを取り外せば、バッグに入れて楽に持ち運べます。小型な筐体で大会会場のデスクのスペースを節約できるので、低感度のマウスも動かしやすく、キーボードを好みの向きにセッティングできます。すべてのコンポーネントに高耐久の設計を採用し、非常に強固なスチール製バックプレートで補強することで、プレイに適した安定性と剛性を実現しました。\rLogicool G Pro Tenkeyless Mechanical Gaming Keyboard\nキーストローク信号処理\rスイッチの作動からUSB信号発信までのシーケンスの各ステップを効率化するキーストローク信号処理（KSP）は、総合的なパフォーマンスを向上させるテクノロジーです。PROの反応速度を極限まで高めるために、KSPを最適化し、競合製品と比較して最大10ms高速な反応を実現しました。\rLogicool G Pro Tenkeyless Mechanical Gaming Keyboard\n26キー ロールオーバー\r複数キーの同時押しに対応しているため、複雑な入力操作を毎回正しく実行できます。26キー ロールオーバーにより、複数のキーや修飾キー（Control、Alt、Shift）をどのような順序で同時押ししても、期待通りの結果が得られます。Logicool G Pro Tenkeyless Mechanical Gaming Keyboard\nLIGHTSYNC RGB\rLIGHTSYNC RGBは、ライトとゲーム内のアクションなどを連動させて没入感を演出する、次世代のRGBライトテクノロジーです。約1,680万色で好みの色にカスタマイズできるだけでなく、他のロジクールGデバイスとライトのアニメーションやエフェクトを同期することも可能です。カスタマイズは、Logicoolゲーム ソフトウェアで手軽に行えます。Logicool G Pro Tenkeyless Mechanical Gaming Keyboard\nカスタマイズ可能なゲーム モード\rWindowsキーの誤押下で100万ドルの賞金を失いたくはありません。ロジクール ゲーミング ソフトウェアを使用してゲームモードをカスタマイズし、不要なキーを無効化。Logicool G Pro Tenkeyless Mechanical Gaming Keyboard\nFキー マクロ\rロジクール ゲーミング ソフトウェアを使用して、F1～F12でカスタムボタン マクロをプログラムして、操作を簡単にしましょう。複雑なコマンドの発動だけでなく、タイミングを指定したアクションや呪文をボタン1つで発動できます。プロファイル設定にはG HUBが必要です。トーナメントでは一般的に、キーボード マクロは許可されていません。Logicool G Pro Tenkeyless Mechanical Gaming Keyboard\n3段階の角度調節\r3段階の角度調節機能により、キーボードの角度をフラット、4度、8度のいずれかに設定し、自分に合った最適な角度で使用できます。ラバーフィートによりキーボードが安定するので、激しいゲーム操作をしてもキーボードが滑りません。Logicool G Pro Tenkeyless Mechanical Gaming Keyboard\n開封の儀 パッケージ パッケージはこちらです。\nLogicoolさんのパッケージはやはりデザインセンスが好みです♪\nでは、早速中身を見ていきましょう！\nパカッ。\nさらにパカッ。\n梱包物 梱包物は以下の通りです。\n梱包物\rキーボード本体\rUSBケーブル\r取扱説明書・保証書\rUSBケーブル USBはマイクロUSBとなっています。\nまた、キーボードにフィットするような爪のような構造をしてます。\nまた、コードが広がらないようにバンドも標準搭載されているので助かりますね♪\nキーボード本体 キーボードはビニールが被せれています。\n出すとこんな感じ。\nUSB取り付け部分はこんな構造になっています。\n裏面にもロゴがバッチリ♪\nまた、スタンド用の足が隠されているので、こちらを立てることで角度をつけることが可能になります。\n手首への負担やタイピングのしやすさが向上します♪\n使用感 使い方は簡単で、特にインストールCDなどは不要でUSBでPC本体と繋げるだけで使用準備は完了になります。\nかっこいい。。。(小並感)\n筆者のPCデスク周りはLogicool製品で統一しているので、テンションも上がりますね♪\n関連記事 【最強ゲーミングマウス】PS4やSwitchでも使用可能な「Logicool ロジクール G502 HERO」の使い方と初期設定方法まとめ【フォートナイト/PUBG/ApexLegends/FPS/TPS】 2019/03/19 3535文字 約8分で読めます 関連記事 【快適マウスパッド】ゲーミングマウスにぴったりの「Logicool G240t」が滑らかすぎて快適エイムライフが送れそうな件【PUBG/Fortnite/ApexLegends/FPS/TPS】 2019/03/21 1968文字 約4分で読めます もちろん、打鍵感も心地よくタイピング音も良い感じでプレイが楽しくなります♪\n終わりに 以上のように、価格に伴った高クオリティのキーボードとなっています。\nゲーミングキーボードを買おうか悩んでいる方は、ぜひLogicoolのこちらのキーボードを購入してみてはいかがでしょうか♪\n","date":"2019-05-10T18:04:20+09:00","image":"/wp-content/uploads/2019/05/logicoolKeyBoardProEye.png","permalink":"/2019/05/10/8332/","title":"【ゲーミングキーボード】程よい打鍵感が癖になる「Logicool ロジクール G PRO テンキーレス」がオススメ【PUBG・フォートナイト・ApexLegends】"},{"content":"リクエストの所要時間をログに出そう 前回、SpringBoot2のCommonsRequestLoggingFilterと言う既存Filterを用いたリクエスト情報のログ出力についてご紹介しました。\n関連記事 【RequestBody/RequestHeader】SpringBoot2でリクエスト情報をログに出力する方法【CommonsRequestLoggingFilter】 2019/05/07 715文字 約2分で読めます 今回は、さらにもう一手間加え、リクエスト処理を完了するまでの時間をログに追加する方法をご紹介致します。\n手順 AbstractRequestLoggingFilterの継承クラスを実装 まずは、AbstractRequestLoggingFilterを継承したクラスを用意しましょう。\nRequestMilliSecFilter package tech.blogenist.service.account.api.infrastructure.filter.millisec; import javax.servlet.http.HttpServletRequest; import org.springframework.web.filter.AbstractRequestLoggingFilter; import lombok.extern.slf4j.Slf4j; @Slf4j public class RequestMilliSecFilter extends AbstractRequestLoggingFilter { private final String BEFORE_REQUEST_MILLI_SEC_KEY = this.getClass().getName(); @Override protected boolean shouldLog( HttpServletRequest request ) { return log.isDebugEnabled(); } @Override protected void beforeRequest( HttpServletRequest request, String message ) { log.debug( message ); request.setAttribute( BEFORE_REQUEST_MILLI_SEC_KEY, System.currentTimeMillis() ); } @Override protected void afterRequest( HttpServletRequest request, String message ) { Object beforeMilliTime = request.getAttribute( BEFORE_REQUEST_MILLI_SEC_KEY ); if( beforeMilliTime instanceof Long ) { long startMilliTime = ( long ) beforeMilliTime; long elapsedMilliTime = System.currentTimeMillis() - startMilliTime; log.debug( \u0026#34;latency {} ms {}\u0026#34;, elapsedMilliTime, message ); }else { log.debug( message ); } } } Beanの追加 次に、前回利用した@Configurationがついたクラスを修正します。\nFilterConfig package tech.blogenist.service.account.api.infrastructure.filter.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import tech.blogenist.service.account.api.infrastructure.filter.millisec.RequestMilliSecFilter; import tech.blogenist.service.account.api.infrastructure.filter.x_request_id.MdcXRequestIdFilter; import tech.blogenist.service.account.api.infrastructure.filter.x_request_id.ResponseHeaderAddXRequestIdFilter; @Configuration public class FilterConfig { @Bean public MdcXRequestIdFilter mdcXRequestIdFilter() { MdcXRequestIdFilter filter = new MdcXRequestIdFilter(); return filter; } @Bean public ResponseHeaderAddXRequestIdFilter responseHeaderAddXRequestIdFilter() { ResponseHeaderAddXRequestIdFilter filter = new ResponseHeaderAddXRequestIdFilter(); return filter; } @Bean public RequestMilliSecFilter requestMilliSecFilter() { RequestMilliSecFilter filter = new RequestMilliSecFilter(); // CommonsRequestLoggingFilterから変更 filter.setIncludeClientInfo( true ); filter.setIncludeQueryString( true ); filter.setIncludeHeaders( true ); filter.setIncludePayload( true ); return filter; } } これで準備は完了です。\n確認 では、実際にリクエストを投げて確認してみましょう。\nサーバーログ { \u0026#34;timestamp\u0026#34;:\u0026#34;2019-05-09T11:42:39.780+09:00\u0026#34;, \u0026#34;level\u0026#34;:\u0026#34;DEBUG\u0026#34;, \u0026#34;thread\u0026#34;:\u0026#34;http-nio-8080-exec-1\u0026#34;, \u0026#34;mdc\u0026#34;:{ \u0026#34;x-request-id\u0026#34;:\u0026#34;b9edaaf7-036e-4a59-84fb-f23d35ad98fc\u0026#34; }, \u0026#34;logger\u0026#34;:\u0026#34;tech.blogenist.service.account.api.infrastructure.filter.millisec.RequestMilliSecFilter\u0026#34;, \u0026#34;message\u0026#34;:\u0026#34;latency 56 ms After request [uri=/v1/accounts/10001/;client=0:0:0:0:0:0:0:1;headers=[host:\\\u0026#34;localhost:8080\\\u0026#34;, connection:\\\u0026#34;keep-alive\\\u0026#34;, user-agent:\\\u0026#34;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36\\\u0026#34;, header:\\\u0026#34;fuga\\\u0026#34;, cache-control:\\\u0026#34;no-cache\\\u0026#34;, postman-token:\\\u0026#34;4b63ac31-571e-9fc4-c81b-eaaf2ce64ade\\\u0026#34;, accept:\\\u0026#34;*/*\\\u0026#34;, accept-encoding:\\\u0026#34;gzip, deflate, br\\\u0026#34;, accept-language:\\\u0026#34;ja,en-US;q=0.9,en;q=0.8\\\u0026#34;, Content-Type:\\\u0026#34;application/json;charset=UTF-8\\\u0026#34;]]\u0026#34; } 正常にlatencyにミリ秒が出力されるようになりましたね♪\n終わりに 以上のように、用意されているクラスをカスタマイズするだけで、簡単に経過時間をログに出す事が出来ました。\nパフォーマンス改善やチューニング作業などにはこの情報はとても重要になる為、出力するようにしておくと幸せになれると思いますので、是非やってみてください。♪\n","date":"2019-05-09T20:16:54+09:00","image":"/wp-content/uploads/2019/05/springBootAddLatencyEye.png","permalink":"/2019/05/09/8272/","title":"【SpringBoot2】リクエストの処理時間をログに出力する方法【AbstractRequestLoggingFilter】"},{"content":"PCデスクを初めて購入 PCデスクも新しく購入 先日、遂にPCデスクを購入しました！\n筆者は今までPCデスクというものを使わずに、リビングテーブルや太ももに乗せて作業をしてましたが、やはり長時間作業には向いていなく、首が疲れたり排熱によって熱くなったりしていました。\n今回、PCデスクを購入することで作業時の姿勢も良くなり、特にPCゲームやPC作業をする上では必須だなと改めて感じました！\nさらに、レビュー記事執筆のための写真を撮る際などにも、スペースが広がり快適にレビュー作業も行う事が可能になったのでブロガーさんにもオススメです♪\nオススメPC周り商品 PCデスク Amazon Bauhutte（バウヒュッテ） 昇降式L字デスク ラージ 木目 幅39×奥行き82㎝ BHD-820H-WD 関連記事 【Bauhutte】開封作業の撮影スペースとしても使えるPC用昇降式L字デスクが使い勝手が良すぎた【PC環境】 2020/02/26 1648文字 約4分で読めます Amazon Bauhutte (バウヒュッテ) コントローラースタンド ヘッドホンハンガー BHP-S100 ブラック 幅20×奥行き13×高さ デスクマット Amazon Bauhutte (バウヒュッテ) デスクごとチェアマット BCM-160BK ブラック 特大サイズ160×130cm 厚さ1.5mm BCM-160BK 関連記事 【PC環境を整えよう】Bauhutteの「デスクごとチェアマット」を購入してみたので紹介してみる【ゲーミングPC/ゲーミングチェア】 2019/03/28 1778文字 約4分で読めます マイク付きヘッドセット Amazon Logicool G ゲーミングヘッドセット ワイヤレス 無線 G533 ブラック Dolby 7.1ch ノイズキャンセリング マイク 付き PC 軽量 国内正規品 2年間メーカー保証 キーボード Amazon Logicool ロジクール G PRO テンキーレス ゲーミング キーボード G-PKB-001ブラック メカニカル Romer-G RGB 着脱式ケーブル プロ仕様 PUBG JAPAN SERIES 2019 推奨モデル 国内正規品 2年間メーカー保証 PCモニター Amazon BenQ ゲーミングモニター ディスプレイ ZOWIE XL2411P 24インチ/フルHD/HDMI,DP,DVI端子/144Hz/1ms/ブルーライト軽減 ゲーミングチェア Amazon AKRACING ゲーミングチェア WOLF-GREY 灰 関連記事 【快適なPC作業を求め】ゲーミングチェア初心者にオススメな「AKRACING ゲーミングチェア WOLF-GREY」を購入したら大正解だった【ゲーミングPC】 2019/03/23 1937文字 約4分で読めます クッション Amazon Bauhutte (バウヒュッテ) ゲル\u0026amp;低反発 ずっと座りたいクッション BC-80G-BK 関連記事 【デスクワーク/テレワーク/在宅】PCゲーマーにもオススメの長時間座ってもお尻が痛くならないクッションを買ったので開封レビューしてみた【快適空間】 2020/10/17 1637文字 約4分で読めます マウス Amazon Logicool ロジクール G502 HERO ゲーミングマウス G502RGBh 【2年間保証付き】 ゲームパッド Amazon ワイヤレスコントローラー (DUALSHOCK 4) マグマ・レッド (CUH-ZCT2J11) 購入商品 購入した商品はこちらです！\nBauhutte (バウヒュッテ) PCデスク 昇降式 (幅120cm×奥行55cm) BHD-1200M Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅120cm×奥行55cm) BHD-1200M 横幅より奥行きが欲しい方は寸法違いのこちらのモデルをオススメします♪\nAmazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅100cm×奥行60cm) BHD-1000M Bauhutteはゲーミングチェアやオフィスデスクなど、数多くのPC用品を取り扱っている有名メーカーです。\nオフィスチェアブランドBauhutte（バウヒュッテ）の公式サイトです。オフィスチェア、ゲーミングチェア、スタンディングデスクなどの商品を展開しています。オフィスチェアブランド | Bauhutte\n他にもBauhutteでは、拡張性の高いPC用品も取り扱っているため、興味のある方は調べてみると良いでしょう♪\nオフィスチェアブランドBauhutte（バウヒュッテ）の公式サイトです。オフィスチェア、ゲーミングチェア、スタンディングデスクなどの商品を展開しています。オフィスチェアブランド | Bauhutte\n特徴 機能まとめ オフィスチェアブランド | Bauhutte\n上下昇降 [adsense-responsive]\r上下昇降幅は21cm\r一般的なPCデスクは床から天面までの高さ70cmが主流ですが、昇降式PCデスクシリーズは側59c～80cmの21cm幅で上下昇降が可能です。\r10 歳前後の小学生から、身長190cmの大柄な大人までフィットさせることができ、デスクワークに集中できる環境を作ります。\r簡単操作で上下昇降\nストッパーによって昇降部分が固定されているので解除します。天板の両サイドに2人で立ち、天板を引き上げます。 このとき、落下防止用の昇降ロックレバーを押しながら昇降するようにしてください。 お好みの高さまで移動したら昇降ロックレバーを離し、ストッパーを固定します。 オフィスチェアブランド | Bauhutte\nカラー カラー\rオフィス向けのホワイトと、自宅向きのブラックとウッド（木目）をラインナップしました。\r※ウッド（木目）カラーは、BHD-1200タイプのみになります。オフィスチェアブランド | Bauhutte\nサイズ サイズ\r24インチのデュアルモニターを設置できるデスク幅と奥行きで設計しています。\rオフィスチェアブランド | Bauhutte\nグラつきのない構造 タイピングするたびにデスクがグラついて落ち着かない…そんな経験はありませんか？\r「安定感」はデスク選びの重要ポイントです。本製品では4つの安定化パーツを同時採用することでデスクの安定性を高めています。\r※2017年2月の改良により、足元の底板の寸法・設置位置を見直しました。従来品より椅子を奥まで収納できるようになりました。\r豆知識: クロスバーは足を伸ばすときに邪魔になることがあります。 耐荷重には影響を与えないパーツですので、グラつきが気にならない方は省いてもらっても大丈夫です。 オフィスチェアブランド | Bauhutte\n天板 微粒面でざらざらとしたマットな仕上がりの加工となっております。\r光学式マウスに反応しやすく、見た目も落ち着きのある印象に仕上げています。\rオフィスチェアブランド | Bauhutte\n収納力 側面のパンチングボードに電源タップやルーターなどを結束バンドで固定できます。S字フックでバッグを掛けるのも便利です。\rオフィスチェアブランド | Bauhutte\nオフィスチェアもすっきり収納 脚部の底板はオフィスチェアを収納したときに邪魔にならないよう、脚の奥側になるよう配置しています。\rオフィスチェアブランド | Bauhutte\nそれでは早速開封していきましょう！\n開封の儀 外観 デスクはかなりでかめのダンボールに包まれて配送されてきます。\n腰をやらかすレベルの重さなのでぎっくり腰に注意です・・・！\nそれでは早速中身を見ていきましょう。\nパカッ。\n梱包物 中身はこんな感じです。\n説明書はとても丁寧に組み立て方法が書かれています！\n完成系 説明書を見ながら作業を進めれば、困ることなく組み立てることが出来たので組み立て工程は割愛致します。\n完成系はこんな感じ。\nかっこいい・・・！\n[adsense-responsive]\rBauhutteのプレートも美しいですね！\n天板部分は若干凹凸があるのでツルツルではありません。\n天板の高さも簡単に調整する事が可能な工夫がされています♪\n終わりに これでPC作業やゲームをやる際のデスクスペースを十分に確保することが出来るようになりました！\nマウスの操作域や姿勢の保ち方が格段に良くなりましたので、皆さんもPCデスクの新調をお考えの場合はBauhutteのPCデスクを購入してみてはいかがでしょうか♪\n","date":"2019-05-08T23:15:59+09:00","image":"/wp-content/uploads/2019/05/bauhuttePcDescUnboxingEye.png","permalink":"/2019/05/08/8280/","title":"【ゲーミングPCデスク】Bauhutteの「昇降式式PCデスク」が快適過ぎた【PC作業向け】"},{"content":"リクエストログを出力しよう サーバーのログ解析をする場合、どんなリクエストが飛んできた際のログなのか？という情報が重要になってきます。\n自前でインターセプターなどを使って実装しても良いのですが、SpringBootを使っていれば簡単に実現が可能です。\n手順 CommonsRequestLoggingFilterをBean登録 やり方は簡単です。\nまずは@Configurationがついているコンフィグクラスにて、以下のように@Bean定義を行いましょう。\nXRequestIdFilterConfig package tech.blogenist.service.account.api.infrastructure.filter.x_request_id; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.filter.CommonsRequestLoggingFilter; @Configuration public class XRequestIdFilterConfig { ... @Bean public CommonsRequestLoggingFilter requestLoggingFilter() { CommonsRequestLoggingFilter filter = new CommonsRequestLoggingFilter(); filter.setIncludeClientInfo( true ); filter.setIncludeQueryString( true ); filter.setIncludeHeaders( true ); filter.setIncludePayload( true ); return filter; } ... } 次に、application.ymlにて、以下の設定を追加しましょう。\nCommonsRequestLoggingFilterでは、DEBUGレベルで出力しているので、出力対象にする必要があります。\napplication.yml logging: level: org: springframework: web: filter: CommonsRequestLoggingFilter: DEBUG 確認 GETの場合 では、実際にGETリクエストを投げてみましょう。\nリクエスト curl -v -X GET \\ -H \u0026#39;Content-Type: application/json\u0026#39; \\ -H \u0026#39;hoge: fuga\u0026#39; \\ \u0026#39;http://localhost:8080/v1/accounts/10001/?query=blogenist\u0026#39; サーバーログ { \u0026#34;timestamp\u0026#34;:\u0026#34;2019-05-05T00:00:56.006+09:00\u0026#34;, \u0026#34;level\u0026#34;:\u0026#34;DEBUG\u0026#34;, \u0026#34;thread\u0026#34;:\u0026#34;http-nio-8080-exec-5\u0026#34;, \u0026#34;mdc\u0026#34;:{\u0026#34;x-request-id\u0026#34;:\u0026#34;4169a153-e26c-4275-a4d4-8391d5183e66\u0026#34;}, \u0026#34;logger\u0026#34;:\u0026#34;org.springframework.web.filter.CommonsRequestLoggingFilter\u0026#34;, \u0026#34;message\u0026#34;:\u0026#34;Before request [ uri=/v1/accounts/10001/?query=blogenist;client=0:0:0:0:0:0:0:1;headers=[ host:\\\u0026#34;localhost:8080\\\u0026#34;, user-agent:\\\u0026#34;curl/7.64.0\\\u0026#34;, accept:\\\u0026#34;*/*\\\u0026#34;, hoge:\\\u0026#34;fuga\\\u0026#34;, Content-Type:\\\u0026#34;application/json;charset=UTF-8\\\u0026#34; ] ]\u0026#34; }{ \u0026#34;timestamp\u0026#34;:\u0026#34;2019-05-05T00:00:56.020+09:00\u0026#34;, \u0026#34;level\u0026#34;:\u0026#34;DEBUG\u0026#34;, \u0026#34;thread\u0026#34;:\u0026#34;http-nio-8080-exec-5\u0026#34;, \u0026#34;mdc\u0026#34;:{\u0026#34;x-request-id\u0026#34;:\u0026#34;4169a153-e26c-4275-a4d4-8391d5183e66\u0026#34;}, \u0026#34;logger\u0026#34;:\u0026#34;org.springframework.web.filter.CommonsRequestLoggingFilter\u0026#34;, \u0026#34;message\u0026#34;:\u0026#34;After request [ uri=/v1/accounts/10001/?query=blogenist;client=0:0:0:0:0:0:0:1;headers=[ host:\\\u0026#34;localhost:8080\\\u0026#34;, user-agent:\\\u0026#34;curl/7.64.0\\\u0026#34;, accept:\\\u0026#34;*/*\\\u0026#34;, hoge:\\\u0026#34;fuga\\\u0026#34;, Content-Type:\\\u0026#34;application/json;charset=UTF-8\\\u0026#34; ] ]\u0026#34; } POSTの場合 次に、POSTリクエストを投げてみましょう。\nリクエスト curl -v -X POST \\ -H \u0026#39;Content-Type: application/json\u0026#39; \\ -H \u0026#39;hoge: fuga\u0026#39; \\ -d \u0026#39;{\u0026#34;fizz\u0026#34;: \u0026#34;bazz\u0026#34;}\u0026#39; \\ \u0026#39;http://localhost:8080/v1/accounts/\u0026#39; サーバーログ { \u0026#34;timestamp\u0026#34;:\u0026#34;2019-05-04T23:48:17.008+09:00\u0026#34;, \u0026#34;level\u0026#34;:\u0026#34;DEBUG\u0026#34;, \u0026#34;thread\u0026#34;:\u0026#34;http-nio-8080-exec-7\u0026#34;, \u0026#34;mdc\u0026#34;:{\u0026#34;x-request-id\u0026#34;:\u0026#34;9d1bb6cb-0a2b-45f9-957c-d5e1c027b160\u0026#34;}, \u0026#34;logger\u0026#34;:\u0026#34;org.springframework.web.filter.CommonsRequestLoggingFilter\u0026#34;, \u0026#34;message\u0026#34;:\u0026#34;Before request [ uri=/v1/accounts/;client=0:0:0:0:0:0:0:1;headers=[ host:\\\u0026#34;localhost:8080\\\u0026#34;, user-agent:\\\u0026#34;curl/7.64.0\\\u0026#34;, accept:\\\u0026#34;*/*\\\u0026#34;, hoge:\\\u0026#34;fuga\\\u0026#34;, content-length:\\\u0026#34;16\\\u0026#34;, Content-Type:\\\u0026#34;application/json; charset=UTF-8\\\u0026#34; ] ]\u0026#34; } { \u0026#34;timestamp\u0026#34;:\u0026#34;2019-05-04T23:48:17.010+09:00\u0026#34;, \u0026#34;level\u0026#34;:\u0026#34;DEBUG\u0026#34;, \u0026#34;thread\u0026#34;:\u0026#34;http-nio-8080-exec-7\u0026#34;, \u0026#34;mdc\u0026#34;:{\u0026#34;x-request-id\u0026#34;:\u0026#34;9d1bb6cb-0a2b-45f9-957c-d5e1c027b160\u0026#34;}, \u0026#34;logger\u0026#34;:\u0026#34;org.springframework.web.filter.CommonsRequestLoggingFilter\u0026#34;, \u0026#34;message\u0026#34;:\u0026#34;After request [ uri=/v1/accounts/;client=0:0:0:0:0:0:0:1;headers=[ host:\\\u0026#34;localhost:8080\\\u0026#34;, user-agent:\\\u0026#34;curl/7.64.0\\\u0026#34;, accept:\\\u0026#34;*/*\\\u0026#34;, hoge:\\\u0026#34;fuga\\\u0026#34;, content-length:\\\u0026#34;16\\\u0026#34;, Content-Type:\\\u0026#34;application/json; charset=UTF-8\\\u0026#34; ];payload={ \\\u0026#34;fizz\\\u0026#34;:\\\u0026#34;bazz\\\u0026#34; } ]\u0026#34; } 正常にリクエスト内容が出力されていますね♪\nちなみに、Payload(リクエストボディ)はBefore RequestではなくAfter Requestのみ出力されるので気をつけてください。\n終わりに 以上のように、簡単にリクエスト情報をログに出力する事が出来ました。\n運用が始まってからでは遅いので、初期開発時に忘れないように設定しておきましょう。\n","date":"2019-05-07T22:27:09+09:00","image":"/wp-content/uploads/2019/05/springBootLoggingRequestInfoEye.png","permalink":"/2019/05/07/8258/","title":"【RequestBody/RequestHeader】SpringBoot2でリクエスト情報をログに出力する方法【CommonsRequestLoggingFilter】"},{"content":"Json形式で見やすくしよう Logbackをそのまま利用していると、基本的には一行のテキストで、Formatパターンに沿ったログが出力されると思います。\nこんな感じ。\n[INFO ] [2019-05-04 12:41:26.322] [o.a.catalina.core.StandardService] - Starting service [Tomcat]\nしかし、一行の中に全ての情報が含まれていると、ログ解析時にちょっと見にくかったりとやや問題があります。\nそこで、logback-json-classicというライブラリを使う事で、logbackの出力ログをJson形式にする事が可能になりますので、設定方法をご紹介します。\n手順 依存関係の追加 build.gradleに以下の2つのライブラリの依存関係を追加します。\ndevtools/build.gradle buildscript { ... implementation \u0026#34;ch.qos.logback.contrib:logback-json-classic:${accountService.logbackJsonVersion}\u0026#34; implementation \u0026#34;ch.qos.logback.contrib:logback-jackson:${accountService.logbackJsonVersion}\u0026#34; ... } devtools/property.gradle ext { ... accountService.logbackJsonVersion = \u0026#39;0.1.5\u0026#39; ... } logback-spring.xmlの修正 次に、logback-spring.xmlを修正していきましょう。\n標準出力の場合 標準出力の場合は以下のように修正してください。\nlogback-spring.xml \u0026lt;?xml version=\u0026#34;1.0\u0026#34; encoding=\u0026#34;UTF-8\u0026#34;?\u0026gt; ... \u0026lt;appender name=\u0026#34;STDOUT\u0026#34; class=\u0026#34;ch.qos.logback.core.ConsoleAppender\u0026#34;\u0026gt; \u0026lt;encoder class=\u0026#34;ch.qos.logback.core.encoder.LayoutWrappingEncoder\u0026#34;\u0026gt; \u0026lt;layout class=\u0026#34;ch.qos.logback.contrib.json.classic.JsonLayout\u0026#34;\u0026gt; \u0026lt;jsonFormatter class=\u0026#34;ch.qos.logback.contrib.jackson.JacksonJsonFormatter\u0026#34;\u0026gt; \u0026lt;prettyPrint\u0026gt;true\u0026lt;/prettyPrint\u0026gt; \u0026lt;/jsonFormatter\u0026gt; \u0026lt;timestampFormat\u0026gt;yyyy-MM-dd\u0026#39;T\u0026#39;HH:mm:ss.SSSXXX\u0026lt;/timestampFormat\u0026gt; \u0026lt;includeContextName\u0026gt;false\u0026lt;/includeContextName\u0026gt; \u0026lt;appendLineSeparator\u0026gt;true\u0026lt;/appendLineSeparator\u0026gt; \u0026lt;/layout\u0026gt; \u0026lt;charset\u0026gt;UTF-8\u0026lt;/charset\u0026gt; \u0026lt;/encoder\u0026gt; \u0026lt;/appender\u0026gt; ... \u0026lt;/configuration\u0026gt; 確認 では、サーバーを起動してログを確認してみましょう。\nサーバーログ { \u0026#34;timestamp\u0026#34;:\u0026#34;2019-05-04T19:47:51.347+09:00\u0026#34;, \u0026#34;level\u0026#34;:\u0026#34;WARN\u0026#34;, \u0026#34;thread\u0026#34;:\u0026#34;http-nio-8080-exec-1\u0026#34;, \u0026#34;mdc\u0026#34;:{ \u0026#34;x-request-id\u0026#34;:\u0026#34;c3a80300-0953-4635-802f-72abceb67b35\u0026#34; }, \u0026#34;logger\u0026#34;:\u0026#34;org.springframework.web.servlet.mvc.method.annotation.ExceptionHandlerExceptionResolver\u0026#34;, \u0026#34;message\u0026#34;:\u0026#34;Resolved [ResourceNotFoundException(errorType=RESOURCE_NOT_FOUND_COMMON)]\u0026#34; } 正常にJson形式で出力されています。\n見やすいですし、MDCに設定したx-request-idも出力されていますね♪\n関連記事 【SpringBoot2】レスポンスヘッダーに独自の項目を追加する方法【X-Request-ID】 2019/05/01 893文字 約2分で読めます AWS CloudWatchLogsの場合 以前紹介したCloudWatchへの転送時にもJson形式にする事が出来ます。\n関連記事 【運用改善への近道】LogbackでAWSのCloudWatchに転送する方法【com.j256.cloudwatchlogbackappender】 2019/05/04 616文字 約2分で読めます logback-spring.xml \u0026lt;?xml version=\u0026#34;1.0\u0026#34; encoding=\u0026#34;UTF-8\u0026#34;?\u0026gt; ... \u0026lt;appender name=\u0026#34;CLOUDWATCH\u0026#34; class=\u0026#34;com.j256.cloudwatchlogbackappender.CloudWatchAppender\u0026#34;\u0026gt; \u0026lt;region\u0026gt;ap-northeast-1\u0026lt;/region\u0026gt; \u0026lt;accessKeyId\u0026gt;XXX\u0026lt;/accessKeyId\u0026gt; \u0026lt;secretKey\u0026gt;YYY\u0026lt;/secretKey\u0026gt; \u0026lt;logGroup\u0026gt;blogenist-loggroup\u0026lt;/logGroup\u0026gt; \u0026lt;logStream\u0026gt;${SPRING_PROFILE}.${RUN_TIME}\u0026lt;/logStream\u0026gt; \u0026lt;layout class=\u0026#34;ch.qos.logback.contrib.json.classic.JsonLayout\u0026#34;\u0026gt; \u0026lt;jsonFormatter class=\u0026#34;ch.qos.logback.contrib.jackson.JacksonJsonFormatter\u0026#34;\u0026gt; \u0026lt;prettyPrint\u0026gt;true\u0026lt;/prettyPrint\u0026gt; \u0026lt;/jsonFormatter\u0026gt; \u0026lt;timestampFormat\u0026gt;yyyy-MM-dd\u0026#39;T\u0026#39;HH:mm:ss.SSSXXX\u0026lt;/timestampFormat\u0026gt; \u0026lt;includeContextName\u0026gt;false\u0026lt;/includeContextName\u0026gt; \u0026lt;appendLineSeparator\u0026gt;true\u0026lt;/appendLineSeparator\u0026gt; \u0026lt;/layout\u0026gt; \u0026lt;maxBatchSize\u0026gt;32\u0026lt;/maxBatchSize\u0026gt; \u0026lt;/appender\u0026gt; ... \u0026lt;/configuration\u0026gt; 確認 こちらもサーバーを起動してリクエストを投げてみましょう。\nこちらも正常にCloudWatchLogs上でJson形式でまとめて見やすくなりました♪\n終わりに 以上のように、簡単にJson形式でログを出力出来るようになりました。\nJson形式にする事でログ解析作業の効率化に繋がるので、皆さんも参考にしてみてはいかがでしょうか♪\n","date":"2019-05-06T16:44:40+09:00","image":"/wp-content/uploads/2019/05/LogbackJsonFormatEye.png","permalink":"/2019/05/06/8254/","title":"【SpingBoot2】LogbackのログをJson形式にする方法【CloudWatch】"},{"content":"謎のエラーが発生 Jacksonのフォーマットエラー SpringBoot2を用いてAPIシステムを開発している際に、LocalDateやLocalDateTime、OffsetDateTimeの値をレスポンスとして返却した際に、以下のようなエラーが発生しました。\nエラーログ [ERROR] [] [2019-05-04 17:52:05.178] [o.a.c.c.C.[.[.[.[dispatcherServlet]] - Servlet.service() for servlet [dispatcherServlet] threw exception java.lang.NoSuchMethodError: com.fasterxml.jackson.datatype.jsr310.ser.JSR310FormattedSerializerBase.findFormatOverrides(Lcom/fasterxml/jackson/databind/SerializerProvider;Lcom/fasterxml/jackson/databind/BeanProperty;Ljava/lang/Class;)Lcom/fasterxml/jackson/annotation/JsonFormat$Value; at com.fasterxml.jackson.datatype.jsr310.ser.JSR310FormattedSerializerBase.createContextual(JSR310FormattedSerializerBase.java:123) at com.fasterxml.jackson.datatype.jsr310.ser.InstantSerializerBase.createContextual(InstantSerializerBase.java:40) at com.fasterxml.jackson.databind.SerializerProvider.handleSecondaryContextualization(SerializerProvider.java:944) at com.fasterxml.jackson.databind.SerializerProvider.findValueSerializer(SerializerProvider.java:495) at com.fasterxml.jackson.databind.ser.impl.PropertySerializerMap.findAndAddSecondarySerializer(PropertySerializerMap.java:90) at com.fasterxml.jackson.databind.ser.std.MapSerializer._findAndAddDynamic(MapSerializer.java:858) at com.fasterxml.jackson.databind.ser.std.MapSerializer.serializeFields(MapSerializer.java:556) at com.fasterxml.jackson.databind.ser.std.MapSerializer.serialize(MapSerializer.java:469) at com.fasterxml.jackson.databind.ser.std.MapSerializer.serialize(MapSerializer.java:29) at com.fasterxml.jackson.databind.ser.DefaultSerializerProvider.serializeValue(DefaultSerializerProvider.java:253) at com.fasterxml.jackson.databind.ObjectWriter$Prefetch.serialize(ObjectWriter.java:1384) at com.fasterxml.jackson.databind.ObjectWriter.writeValue(ObjectWriter.java:889) at org.springframework.http.converter.json.AbstractJackson2HttpMessageConverter.writeInternal(AbstractJackson2HttpMessageConverter.java:287) at org.springframework.http.converter.AbstractGenericHttpMessageConverter.write(AbstractGenericHttpMessageConverter.java:103) at org.springframework.web.servlet.mvc.method.annotation.AbstractMessageConverterMethodProcessor.writeWithMessageConverters(AbstractMessageConverterMethodProcessor.java:290) at org.springframework.web.servlet.mvc.method.annotation.HttpEntityMethodProcessor.handleReturnValue(HttpEntityMethodProcessor.java:223) at org.springframework.web.method.support.HandlerMethodReturnValueHandlerComposite.handleReturnValue(HandlerMethodReturnValueHandlerComposite.java:82) at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:119) at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:895) at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:800) at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87) at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1038) at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:942) at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1005) at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:897) at javax.servlet.http.HttpServlet.service(HttpServlet.java:634) at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:882) at javax.servlet.http.HttpServlet.service(HttpServlet.java:741) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:712) at org.apache.catalina.core.ApplicationDispatcher.processRequest(ApplicationDispatcher.java:461) at org.apache.catalina.core.ApplicationDispatcher.doForward(ApplicationDispatcher.java:384) at org.apache.catalina.core.ApplicationDispatcher.forward(ApplicationDispatcher.java:312) at org.apache.catalina.core.StandardHostValve.custom(StandardHostValve.java:394) at org.apache.catalina.core.StandardHostValve.status(StandardHostValve.java:253) at org.apache.catalina.core.StandardHostValve.throwable(StandardHostValve.java:348) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:173) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343) at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:408) at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66) at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:834) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1415) at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.lang.Thread.run(Thread.java:745) なにやら、jacksonでのエラーのようですね。。。\nちなみにJSR310とは、Java8で新たに追加された日付API(Date and Time API（JSR-310）)の事を指すようです。\n確かに今回の問題の型はJava8で追加されたクラスですね。\n原因 実はこれ、SpringBootがデフォルトで依存しているJacksonをそのまま使っている事によるエラーのようです。\n解決するには、後述のように専用のライブラリが用意されているので、そちらを追加するだけで解決可能になります。\n手順 依存関係を追加 build.gradleに以下の一文を追加するだけで良いです。\n[adsense-responsive]\rdevtools/build.gradle buildscript { ... implementation \u0026#34;org.springframework.boot:spring-boot-starter-json:${accountService.springBootVersion}\u0026#34;// 追加 ... これで、SpringBoot2系のバージョンにあったJacksonが扱えるようになるので、正常にレスポンスが変えるようになります。\n終わりに 以上のように、些細な事ですが意外と原因と解決方法が分からずにハマってしまいがちです。\nSpringBoot2系を使っていて同様のエラーが発生する場合には、こちらの方法を試してみてください。\n","date":"2019-05-05T01:20:12+09:00","image":"/wp-content/uploads/2019/05/springBootJacksonErrorFixedEye.png","permalink":"/2019/05/05/8248/","title":"【SpringBoot2】JSR310FormattedSerializerBase.findFormatOverridesエラーの原因と解決方法【Jackson】"},{"content":"CloudWatchにログを転送しよう 近年のサーバーシステムは、オンプレでサーバー構築をする事はほとんど無くなりました。\nそして、クラウドシステムとしてはAWSかGCPの二択になると思います。\n今回はcloudwatch-logback-appenderを利用して、AWSのCloudWatchにシステムログを転送する方法をご紹介します。\nCloudWatchを利用する事で、ログ解析が格段に行いやすくなるのでオススメです♪\n手順 前提 まずはAWSでCloudWatchへの権限があるIAMを用意しておいてください。\nそのユーザーのアクセスキーとシークレットキーを利用します。\n依存関係の追加 まずはgradleの依存関係を追加しましょう。\nproperty.gradle ext { ... accountService.awsSdkVersion = \u0026#39;1.11.483\u0026#39; accountService.cloudWatchLogbackAppenderVersion = \u0026#39;1.11\u0026#39; ... } build.gradle buildscript { .... compile \u0026#34;com.amazonaws:aws-java-sdk:${accountService.awsSdkVersion}\u0026#34; compile \u0026#34;com.j256.cloudwatchlogbackappender:cloudwatchlogbackappender:${accountService.cloudWatchLogbackAppenderVersion}\u0026#34; ... } logbackの設定を修正 次にlogback-spring.xmlにCloudWatch用の設定を追加します。\n[adsense-responsive]\rlogback-spring.xml \u0026lt;?xml version=\u0026#34;1.0\u0026#34; encoding=\u0026#34;UTF-8\u0026#34;?\u0026gt; ... \u0026lt;appender name=\u0026#34;CLOUDWATCH\u0026#34; class=\u0026#34;com.j256.cloudwatchlogbackappender.CloudWatchAppender\u0026#34;\u0026gt; \u0026lt;region\u0026gt;ap-northeast-1\u0026lt;/region\u0026gt; \u0026lt;accessKeyId\u0026gt;XXX\u0026lt;/accessKeyId\u0026gt; \u0026lt;secretKey\u0026gt;YYY\u0026lt;/secretKey\u0026gt; \u0026lt;logGroup\u0026gt;blogenist-loggroup\u0026lt;/logGroup\u0026gt; \u0026lt;logStream\u0026gt;blogenist-logstream\u0026lt;/logStream\u0026gt; \u0026lt;layout\u0026gt; \u0026lt;pattern\u0026gt;${FORMAT}\u0026lt;/pattern\u0026gt; \u0026lt;/layout\u0026gt; \u0026lt;maxBatchSize\u0026gt;32\u0026lt;/maxBatchSize\u0026gt; \u0026lt;/appender\u0026gt; \u0026lt;root level=\u0026#34;DEBUG\u0026#34;\u0026gt; \u0026lt;appender-ref ref=\u0026#34;STDOUT\u0026#34; /\u0026gt; \u0026lt;appender-ref ref=\u0026#34;FILE\u0026#34; /\u0026gt; \u0026lt;appender-ref ref=\u0026#34;CLOUDWATCH\u0026#34; /\u0026gt;\u0026lt;!-- 追加 --\u0026gt; \u0026lt;/root\u0026gt; \u0026lt;/configuration\u0026gt; 確認 設定はこれだけです。\nでは実際に、サーバーを起動してリクエストを投げてみましょう。\ncurl -v \u0026#39;http://localhost:8080/v1/accounts/10001/\u0026#39; # レスポンスヘッダー \u0026lt; HTTP/1.1 200 \u0026lt; x-request-id: 0523847d-68dc-4db8-8de0-00f65592f43a \u0026lt; Content-Type: application/json;charset=UTF-8 \u0026lt; Transfer-Encoding: chunked \u0026lt; Date: Sat, 04 May 2019 04:23:23 GMT 正常にCloudWatchに転送されていますね。\n[adsense-responsive]\rまた、以前埋め込んだX-Request-Idも正常に出力されているので、レスポンスヘッダーに含まれているx-request-idで絞り込む事で対象のログを絞り込めるのでとても調査がしやすいです！\n終わりに 以上のように、ライブラリを追加してちょっとした設定を追加するだけでとても簡単にCloudWatchにログを転送する事が出来ました。\nAWS環境でシステムを運用する場合は運用がとても便利になるので、是非試してみてください♪\n","date":"2019-05-04T13:40:53+09:00","image":"/wp-content/uploads/2019/05/springBootLoggingToCloudWatchEye.png","permalink":"/2019/05/04/8230/","title":"【運用改善への近道】LogbackでAWSのCloudWatchに転送する方法【com.j256.cloudwatchlogbackappender】"},{"content":"カスタムヘッダーも簡単に設定可能 SpringBootを使ってAPI開発をしている場合、簡単にレスポンスヘッダーへ独自項目を追加する事が可能です。\n今回は以前の記事でログに含めるために発行したX-Request-IDを、全リクエスト時のレスポンスヘッダーに自動で追加する方法をご紹介致します。\n関連記事 【SpringBoot2】UUIDを自動採番してX-Request-Idとしてlogbackのログに埋め込む方法【MDC】 2019/04/30 1541文字 約4分で読めます 例えば、アプリから呼ばれるAPIなどのシステムの場合は、お問い合わせ時やシステムエラーのフィードバック時にサーバーから返ってきたX-Request-IDを含ませる事で、容易にサーバーログを絞る事が出来るためよりスピーディーにログ調査が行えます。\n手順 OncePerRequestFilterを継承したFilterクラスを実装 まずは、前回のフィルターで発行されたX-Request-IdをMDCから取得し、レスポンスヘッダーに追加するFilterクラスを実装しましょう。\n[adsense-responsive]\rResponseHeaderAddXRequestIdFilter package tech.blogenist.service.account.api.infrastructure.filter.x_request_id; import java.io.IOException; import javax.servlet.FilterChain; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.slf4j.MDC; import org.springframework.web.filter.OncePerRequestFilter; public class ResponseHeaderAddXRequestIdFilter extends OncePerRequestFilter { @Override protected void doFilterInternal( HttpServletRequest request, HttpServletResponse response, FilterChain filterChain ) throws ServletException, IOException { String xRequestId = MDC.get( MdcXRequestIdFilter.KEY ); response.setHeader( MdcXRequestIdFilter.KEY, xRequestId ); filterChain.doFilter( request, response ); } } ConfigurationクラスでBean定義 次に、前回作ったConfigurationクラスにて新たにBeanとして追加しましょう。\nXRequestIdFilterConfig package tech.blogenist.service.account.api.infrastructure.filter.x_request_id; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; @Configuration public class XRequestIdFilterConfig { @Bean public MdcXRequestIdFilter mdcXRequestIdFilter() { MdcXRequestIdFilter filter = new MdcXRequestIdFilter(); return filter; } //追加 @Bean public ResponseHeaderAddXRequestIdFilter responseHeaderAddXRequestIdFilter() { ResponseHeaderAddXRequestIdFilter filter = new ResponseHeaderAddXRequestIdFilter(); return filter; } } 準備はこれだけです！\n確認 では、実際に確認してみましょう。\n[adsense-responsive]\rcurl \u0026#39;http://localhost:8080/v1/accounts/10001/\u0026#39; #サーバーログ [DEBUG] [23e55d17-7d0c-4a8c-82e6-256df17b670a] [2019-05-01 15:26:34.619] [o.h.engine.internal.TwoPhaseLoad] - Done materializing entity [tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity#component[value]{value=10001}] # レスポンスヘッダー \u0026lt; HTTP/1.1 200 \u0026lt; x-request-id: 23e55d17-7d0c-4a8c-82e6-256df17b670a \u0026lt; Content-Type: application/json;charset=UTF-8 \u0026lt; Transfer-Encoding: chunked \u0026lt; Date: Wed, 01 May 2019 06:26:34 GM サーバーログのX-Request-IDとレスポンスヘッダーのX-Request-IDの値が同じになっていますね♪\nもちろん、独自エラーのスロー時やシステムエラー時にもレスポンスヘッダーに追加されているので調査が捗りそうです。\nオススメの商品 Spring Boot 2 プログラミング入門 Amazon Spring Boot 2 プログラミング入門 日清 カップヌードル 77g×20個 Amazon 日清 カップヌードル 77g×20個 終わりに 以上のように、簡単なクラスを追加するだけでログ調査が何倍もやりやすくなります。\n何も仕込んでないログを漁るのは地獄なので、是非X-Request-IDを仕込んでみてください♪\n","date":"2019-05-01T15:40:59+09:00","image":"/wp-content/uploads/2019/05/springBootAddXRequestIdHeaderEye.png","permalink":"/2019/05/01/8215/","title":"【SpringBoot2】レスポンスヘッダーに独自の項目を追加する方法【X-Request-ID】"},{"content":"サーバーログを漁りやすくしよう リクエストを特定するIDは重要 APIシステムやWebシステムを開発していると、システム障害や調査のためにログを漁ることは頻繁にあると思います。\nその際に、同一リクエスト内のログを絞りこむための情報をあらかじめログのパターンに仕込んでおかないと、他のリクエストのログと混合してしまい厳密な調査が出来ません。\nしかし、SpringBootとLogbackを使っていれば、ライブラリを追加する事無くMDCと言う機能を使って簡単にログに独自の値を埋め込む事が可能です。\nMDCとは？ MDCとは、Mapped Diagnostic Contextsという機能の事を指し、ログ情報に対して独自の情報を付与して出力する事が可能になります。\n実際には、SLF4jの機能ですが、Logback自体もSLF4jの作者が作ったライブラリなので同様の機能が搭載されています。\n今回は、Filterで自動採番したUUIDをMDCとしてログパターンに埋め込む方法をご紹介致します♪\n手順 Filterの準備 まずは、MDCにUUIDを追加するFilterクラスを用意しましょう。\n[adsense-responsive]\rXRequestIdFilter package tech.blogenist.service.account.api.infrastructure.filter.x_request_id; import java.io.IOException; import java.util.UUID; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import org.slf4j.MDC; public class MdcXRequestIdFilter implements Filter { public static final String KEY = \u0026#34;x-request-id\u0026#34;; //logback内から取得する際のキー @Override public void doFilter( ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain ) throws IOException, ServletException { UUID uuid = UUID.randomUUID();//UUIDの発行 try { MDC.put( KEY, uuid.toString() );// MDCに追加 filterChain.doFilter( servletRequest, servletResponse ); }finally { MDC.remove( KEY ); } } } Configクラスの実装 次に、上記のクラスを@Configurationで適用させましょう。\nXRequestIdFilterConfig package tech.blogenist.service.account.api.infrastructure.filter.x_request_id; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; @Configuration public class XRequestIdFilterConfig { @Bean public MdcXRequestIdFilter mdcXRequestIdFilter() { MdcXRequestIdFilter filter = new MdcXRequestIdFilter(); return filter; } } logbackのパターンを修正 では、実際にlogbackのパターンにFilterクラスで追加したx-request-idを埋め込んでみましょう。\nlogback-spring.xml ... \u0026lt;!-- %X{x-request-id}を追加 --\u0026gt; \u0026lt;property name=\u0026#34;FORMAT\u0026#34; value=\u0026#34;[%-5level] [%X{x-request-id}] [%d{yyyy-MM-dd HH:mm:ss.SSS}] [%logger{36}] - %msg%n\u0026#34; /\u0026gt; ... 確認 では、実際にサーバーを起動してリクエストを投げてみましょう。\nちなみに、FilterにてMDCを追加しているので、起動ログは以下のように空白となりますので気をつけてください。\n[INFO ] [] [2019-04-30 20:11:40.848] [t.b.s.account.AccountApplication] - Started AccountApplication in 2.575 seconds (JVM running for 23.541)\r[adsense-responsive]\rリクエストを投げると以下のようなログが出力されると思います。\nサーバーログ(1回目) [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.005] [o.h.q.c.internal.CriteriaQueryImpl] - Rendered criteria query -\u0026gt; select generatedAlias0 from CurrentAccountInfomationsTableEntity as generatedAlias0 where generatedAlias0.accountId=:param0 [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.005] [org.hibernate.SQL] - select currentacc0_.account_id as account_1_2_, currentacc0_.account_infomation_id as account_4_2_, currentacc0_.created_at as created_2_2_, currentacc0_.updated_at as updated_3_2_ from account.current_account_infomations currentacc0_ where currentacc0_.account_id=? [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.010] [org.hibernate.loader.Loader] - Result set row: 0 [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.010] [org.hibernate.loader.Loader] - Result row: EntityKey[tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity#component[value]{value=10001}] [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.011] [o.h.engine.internal.TwoPhaseLoad] - Resolving associations for [tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity#component[value]{value=10001}] [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.011] [org.hibernate.SQL] - select accountinf0_.id as id1_0_0_, accountinf0_.account_id as account_7_0_0_, accountinf0_.age as age2_0_0_, accountinf0_.created_at as created_3_0_0_, accountinf0_.display_name as display_4_0_0_, accountinf0_.name as name5_0_0_, accountinf0_.sex_type as sex_type8_0_0_, accountinf0_.updated_at as updated_6_0_0_, accountsta1_.id as id1_1_1_, accountsta1_.created_at as created_2_1_1_, accountsta1_.updated_at as updated_3_1_1_, sextypesta2_.type as type1_3_2_, sextypesta2_.name as name2_3_2_ from account.account_infomations accountinf0_ left outer join account.accounts accountsta1_ on accountinf0_.account_id=accountsta1_.id left outer join account.sex_types sextypesta2_ on accountinf0_.sex_type=sextypesta2_.type where accountinf0_.id=? [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.014] [o.h.l.p.e.p.i.ResultSetProcessorImpl] - Starting ResultSet row #0 [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.014] [o.h.l.p.e.p.i.EntityReferenceInitializerImpl] - On call to EntityIdentifierReaderImpl#resolve, EntityKey was already known; should only happen on root returns with an optional identifier specified [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.015] [o.h.engine.internal.TwoPhaseLoad] - Resolving associations for [tech.blogenist.service.account.entity.db.account.AccountInfomationsTableEntity#component[value]{value=20002}] [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.016] [o.h.engine.internal.TwoPhaseLoad] - Done materializing entity [tech.blogenist.service.account.entity.db.account.AccountInfomationsTableEntity#component[value]{value=20002}] [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.016] [o.h.engine.internal.TwoPhaseLoad] - Resolving associations for [tech.blogenist.service.account.entity.db.account.AccountsTableEntity#component[value]{value=10001}] [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.016] [o.h.engine.internal.TwoPhaseLoad] - Done materializing entity [tech.blogenist.service.account.entity.db.account.AccountsTableEntity#component[value]{value=10001}] [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.017] [o.h.engine.internal.TwoPhaseLoad] - Resolving associations for [tech.blogenist.service.account.entity.db.account.SexTypesTableEntity#component[type]{type=MALE}] [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.017] [o.h.engine.internal.TwoPhaseLoad] - Done materializing entity [tech.blogenist.service.account.entity.db.account.SexTypesTableEntity#component[type]{type=MALE}] [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.017] [o.h.r.j.i.ResourceRegistryStandardImpl] - HHH000387: ResultSet\u0026#39;s statement was not registered [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.018] [o.h.l.e.p.AbstractLoadPlanBasedEntityLoader] - Done entity load : tech.blogenist.service.account.entity.db.account.AccountInfomationsTableEntity#AccountInfomationIdValue(value=20002) [DEBUG] [f31e75fa-e295-4318-b395-8daf9dc9ed3e] [2019-04-30 20:19:34.018] [o.h.engine.internal.TwoPhaseLoad] - Done materializing entity [tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity#component[value]{value=10001}] 念のため、もう一度同じリクエストを投げてみましょう。\nサーバーログ(2回目) [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.232] [o.h.q.c.internal.CriteriaQueryImpl] - Rendered criteria query -\u0026gt; select generatedAlias0 from CurrentAccountInfomationsTableEntity as generatedAlias0 where generatedAlias0.accountId=:param0 [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.232] [org.hibernate.SQL] - select currentacc0_.account_id as account_1_2_, currentacc0_.account_infomation_id as account_4_2_, currentacc0_.created_at as created_2_2_, currentacc0_.updated_at as updated_3_2_ from account.current_account_infomations currentacc0_ where currentacc0_.account_id=? [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.235] [org.hibernate.loader.Loader] - Result set row: 0 [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.235] [org.hibernate.loader.Loader] - Result row: EntityKey[tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity#component[value]{value=10001}] [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.237] [o.h.engine.internal.TwoPhaseLoad] - Resolving associations for [tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity#component[value]{value=10001}] [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.237] [org.hibernate.SQL] - select accountinf0_.id as id1_0_0_, accountinf0_.account_id as account_7_0_0_, accountinf0_.age as age2_0_0_, accountinf0_.created_at as created_3_0_0_, accountinf0_.display_name as display_4_0_0_, accountinf0_.name as name5_0_0_, accountinf0_.sex_type as sex_type8_0_0_, accountinf0_.updated_at as updated_6_0_0_, accountsta1_.id as id1_1_1_, accountsta1_.created_at as created_2_1_1_, accountsta1_.updated_at as updated_3_1_1_, sextypesta2_.type as type1_3_2_, sextypesta2_.name as name2_3_2_ from account.account_infomations accountinf0_ left outer join account.accounts accountsta1_ on accountinf0_.account_id=accountsta1_.id left outer join account.sex_types sextypesta2_ on accountinf0_.sex_type=sextypesta2_.type where accountinf0_.id=? [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.241] [o.h.l.p.e.p.i.ResultSetProcessorImpl] - Starting ResultSet row #0 [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.242] [o.h.l.p.e.p.i.EntityReferenceInitializerImpl] - On call to EntityIdentifierReaderImpl#resolve, EntityKey was already known; should only happen on root returns with an optional identifier specified [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.242] [o.h.engine.internal.TwoPhaseLoad] - Resolving associations for [tech.blogenist.service.account.entity.db.account.AccountInfomationsTableEntity#component[value]{value=20002}] [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.243] [o.h.engine.internal.TwoPhaseLoad] - Done materializing entity [tech.blogenist.service.account.entity.db.account.AccountInfomationsTableEntity#component[value]{value=20002}] [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.243] [o.h.engine.internal.TwoPhaseLoad] - Resolving associations for [tech.blogenist.service.account.entity.db.account.AccountsTableEntity#component[value]{value=10001}] [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.243] [o.h.engine.internal.TwoPhaseLoad] - Done materializing entity [tech.blogenist.service.account.entity.db.account.AccountsTableEntity#component[value]{value=10001}] [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.243] [o.h.engine.internal.TwoPhaseLoad] - Resolving associations for [tech.blogenist.service.account.entity.db.account.SexTypesTableEntity#component[type]{type=MALE}] [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.243] [o.h.engine.internal.TwoPhaseLoad] - Done materializing entity [tech.blogenist.service.account.entity.db.account.SexTypesTableEntity#component[type]{type=MALE}] [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.243] [o.h.r.j.i.ResourceRegistryStandardImpl] - HHH000387: ResultSet\u0026#39;s statement was not registered [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.243] [o.h.l.e.p.AbstractLoadPlanBasedEntityLoader] - Done entity load : tech.blogenist.service.account.entity.db.account.AccountInfomationsTableEntity#AccountInfomationIdValue(value=20002) [DEBUG] [5b6faa3d-17e4-4401-86cc-2663f2dccc96] [2019-04-30 20:20:29.243] [o.h.engine.internal.TwoPhaseLoad] - Done materializing entity [tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity#component[value]{value=10001}] 正しくUUIDが採番されていますね♪\n終わりに 以上のように、少ない実装で簡単にログにX-Request-IDを埋め込む事が出来ました。\nLogbackを導入する事でログ周りのカスマイズがとても簡単になるので、皆さんも是非試してみてください。\n","date":"2019-04-30T20:38:29+09:00","image":"/wp-content/uploads/2019/04/springBootAddXRequestIdEye.png","permalink":"/2019/04/30/8203/","title":"【SpringBoot2】UUIDを自動採番してX-Request-Idとしてlogbackのログに埋め込む方法【MDC】"},{"content":"エラーハンドリングを共通化しよう SpringBoot2を使っていAPI開発をしていると、システム内部で発生したException単位で共通処理を簡単に実装する事が出来ます\n実装するには@ControllerAdviceを使います。\n今回は独自定義したエラークラスを使った共通ハンドリングの実装方法をご紹介しようと思います。\n手順 目的 今回はHttpStatus単位のエラークラスと、その中のエラーメッセージ種別を定義して実装していこうと思います。\nこの粒度で用意しておけば、筆者的には汎用性はそれなりに高いかな？と思った次第です。\n独自エラークラスの作成 まずはハンドリングしたいエラークラスを作成しましょう。\nちなみに、独自のエラークラスでなくてもハンドリングは可能ですが、今回は分かりやすくするために実装します。\nResourceNotFoundException package tech.blogenist.service.account.api.infrastructure.error.exeption; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import tech.blogenist.service.account.api.infrastructure.message.ErrorMessageConst; @Builder @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @Data public class ResourceNotFoundException extends RuntimeException { private ErrorMessageConst.ErrorType errorType; public ResourceNotFoundException(Throwable cause, ErrorMessageConst.ErrorType errorType) { super( cause ); this.errorType = errorType; } } メッセージ用の定数クラスを追加 次に、呼び出し元でThrowする際にメッセージを出し分けるために渡す定数クラスを用意します。\n値はプロパティファイルのキーを定義しています。\nErrorMessageConst package tech.blogenist.service.account.api.infrastructure.message.error; import lombok.AllArgsConstructor; import lombok.Getter; public class ErrorMessageConst { public static final String JOIN_FORMAT = \u0026#34;%s.%s\u0026#34;; public static final String CODE = \u0026#34;code\u0026#34;; public static final String MESSAGE = \u0026#34;message\u0026#34;; @AllArgsConstructor public enum ErrorType { RESOURCE_NOT_FOUND_COMMON( \u0026#34;resourceNotFound.common\u0026#34; ); @Getter private String key; public String code() { return String.format( JOIN_FORMAT, key, CODE ); } public String message() { return String.format( JOIN_FORMAT, key, MESSAGE ); } } } Adviceクラスを実装 次に@ControllerAdviceを付与したクラスを実装します。\nResourceNotFoundExceptionAdvice package tech.blogenist.service.account.api.infrastructure.error.advice; import java.io.IOException; import java.time.OffsetDateTime; import java.util.HashMap; import java.util.Locale; import java.util.Map; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.MessageSource; import org.springframework.http.HttpStatus; import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.ResponseStatus; import lombok.extern.slf4j.Slf4j; import tech.blogenist.service.account.api.infrastructure.error.attributes.CustomErrorAttributes; import tech.blogenist.service.account.api.infrastructure.error.exeption.ResourceNotFoundException; import tech.blogenist.service.account.api.infrastructure.message.ErrorMessageConst; @Slf4j @ControllerAdvice // アノテーションを付与 public class ResourceNotFoundExceptionAdvice { @Autowired private MessageSource messageSource; // プロパティファイルから値を取るため @ExceptionHandler( value = ResourceNotFoundException.class )// ハンドリングしたエラークラスを指定 @ResponseStatus( HttpStatus.NOT_FOUND ) public @ResponseBody Map\u0026lt; String, Object \u0026gt; resourceNotFoundException( HttpServletResponse response, ResourceNotFoundException exception, Locale locale ) throws IOException { log.warn( this.getClass().getSimpleName(), exception ); Map\u0026lt; String, Object \u0026gt; errors = new HashMap\u0026lt;\u0026gt;(); String code = messageSource .getMessage( exception.getErrorType().code(), null, locale ); String message = messageSource .getMessage( exception.getErrorType().message(), null, locale ); errors.put( MessageSourceConst.CODE, code ); errors.put( MessageSourceConst.MESSAGE, message ); errors.put( CustomErrorAttributes.TIME_STAMP, OffsetDateTime.now() ); return errors; } } error.propertiesの用意 次にエラーメッセージを定義するプロパティファイルを用意しましょう。\nsrc/main/resources/messages/error/config.properties resourceNotFound.common.code=404_00001 resourceNotFound.common.message=共通エラーメッセージ なお、プロパティファイルの読み込みについては以下の記事でご紹介しているので、ベースパスにだけ今回のmessages/error階層を追加しておいてください。\n関連記事 【SpringBoot2】メッセージプロパティファイルをロジック内部から呼び出すための設定【他言語化対応】 2019/04/27 1074文字 約3分で読めます データソースを変更 次に、JPAのID指定の単一取得の戻り値をOptional型に変えましょう。\nそうすることで、呼び出し元のサービス層でのハンドリングが簡単になります。\nCurrentAccountInfomationsRepository package tech.blogenist.service.account.datasource.db.current_account.account_infomations; import java.util.List; import java.util.Optional; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; import tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity; import tech.blogenist.service.account.value.account.AccountIdValue; @Repository public interface CurrentAccountInfomationsRepository extends JpaRepository\u0026lt; CurrentAccountInfomationsTableEntity, AccountIdValue \u0026gt; { public List\u0026lt; CurrentAccountInfomationsTableEntity \u0026gt; findAll(); public Optional\u0026lt; CurrentAccountInfomationsTableEntity \u0026gt; findByAccountId( AccountIdValue id );// Optional型に変更 } サービスクラスにハンドリングを追加 最後に、サービス層でリソースデータが取得出来なかった場合のハンドリング処理を追加しましょう。\nAccountDetailService package tech.blogenist.service.account.api.service.account.detail; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import tech.blogenist.service.account.api.infrastructure.error.exeption.ResourceNotFoundException; import tech.blogenist.service.account.api.infrastructure.message.error.ErrorMessageConst; import tech.blogenist.service.account.api.model.account.detail.response.AccountDetailResponseModel; import tech.blogenist.service.account.datasource.db.current_account.account_infomations.CurrentAccountInfomationsRepository; import tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity; import tech.blogenist.service.account.value.account.AccountIdValue; @Service public class AccountDetailService { @Autowired private CurrentAccountInfomationsRepository currentAccountInfomationsRepository; public AccountDetailResponseModel findBy( AccountIdValue id ) { CurrentAccountInfomationsTableEntity entity = currentAccountInfomationsRepository .findByAccountId( id ) .orElseThrow( // ハンドリングを追加 () -\u0026gt; ResourceNotFoundException.of( ErrorMessageConst.ErrorType.RESOURCE_NOT_FOUND_COMMON ) ); // エラーメッセージ種別を渡す return AccountDetailResponseModel.builder() .accountId( entity.getAccountId() ) .accountInfomationId( entity.getAccountInfomations().getId() ) .name( entity.getAccountInfomations().getName() ) .age( entity.getAccountInfomations().getAge() ) .displayName( entity.getAccountInfomations().getDisplayName() ) .sex( entity.getAccountInfomations().getSexType().getName() ) .build(); } } 確認 では、これで実際にリクエストを投げてみましょう。\nリソースが存在する場合 /v1/accounts/10001/ { \u0026#34;accountId\u0026#34;: { \u0026#34;value\u0026#34;: 10001 }, \u0026#34;accountInfomationId\u0026#34;: { \u0026#34;value\u0026#34;: 20002 }, \u0026#34;name\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;山田　太郎\u0026#34; }, \u0026#34;age\u0026#34;: { \u0026#34;value\u0026#34;: 19 }, \u0026#34;sex\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;男性\u0026#34; }, \u0026#34;displayName\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;山田　ローカル　太郎(新)\u0026#34; } } リソースが存在しない場合 /v1/accounts/999/ { \u0026#34;code\u0026#34;: \u0026#34;404_00001\u0026#34;, \u0026#34;message\u0026#34;: \u0026#34;共通エラーメッセージ\u0026#34;, \u0026#34;timestamp\u0026#34;: \u0026#34;2019-04-27T10:16:04.396+09:00\u0026#34; } もちろん、サーバー側にはしっかりとログが出ているので調査も問題ありません。\nサーバーログ [local][WARN ] 2019-04-29 10:18:19.196 t.b.s.a.a.i.e.a.ResourceNotFoundExceptionAdvice - ResourceNotFoundExceptionAdvice tech.blogenist.service.account.api.infrastructure.error.exeption.ResourceNotFoundException: null at tech.blogenist.service.account.api.infrastructure.error.exeption.ResourceNotFoundException.of(ResourceNotFoundException.java:9) at tech.blogenist.service.account.api.service.account.detail.AccountDetailService.lambda$0(AccountDetailService.java:24) at java.util.Optional.orElseThrow(Optional.java:290) at tech.blogenist.service.account.api.service.account.detail.AccountDetailService.findBy(AccountDetailService.java:23) at tech.blogenist.service.account.api.controller.account.detail.AccountDetailController.detail(AccountDetailController.java:28) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) at org.springframework.web.method.support.InvocableHandlerMethod.doInvoke(InvocableHandlerMethod.java:189) at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:138) at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:102) at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:895) at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:800) at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87) at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1038) at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:942) at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1005) at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:897) at javax.servlet.http.HttpServlet.service(HttpServlet.java:634) at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:882) at javax.servlet.http.HttpServlet.service(HttpServlet.java:741) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:99) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:92) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:93) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:200) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:200) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:490) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343) at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:408) at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66) at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:834) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1415) at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.lang.Thread.run(Thread.java:745) [local][WARN ] 2019-04-29 10:18:19.227 o.s.w.s.m.m.a.ExceptionHandlerExceptionResolver - Resolved [ResourceNotFoundException(errorType=RESOURCE_NOT_FOUND_COMMON)] 参考 現場至上主義 Spring Boot2 徹底活用 Amazon 現場至上主義 Spring Boot2 徹底活用 【ケース販売】日清 カップヌードル シーフードヌードル 75g×20個 Amazon 【ケース販売】日清 カップヌードル シーフードヌードル 75g×20個 終わりに 以上のように、SpringBootの標準アノテーションを利用することで簡単にエラーハンドリングを実装することが出来ました。\nエラー時のハンドリングルールをしっかり行っておけば、開発や調査の効率化が狙えるので、ぜひ試してみてください♪\n","date":"2019-04-29T10:27:40+09:00","image":"/wp-content/uploads/2019/04/springBootCommonErrorHandlingEye.png","permalink":"/2019/04/29/8166/","title":"【SpringBoot2】ControllerAdviceを使ってエラーハンドリングを実装する方法【共通化】"},{"content":"ロギングを環境ごとに分けよう org.springframework.boot:spring-boot-starter-webの依存関係を追加してSpringBootで開発を行う場合、デフォルトでLogbackというロギングライブラリを採用します。\nLogbackとは、Log4jの開発者が作った新しめのJava製のロギングライブラリです。\nSpringBootとの親和性がとても高く、ログのフォーマット指定やローテート、出力先や環境ごとの切り替えなどがとても簡単に設定をすることが出来ますので、今回はそちらをご紹介していきます。\n手順 logback-spring.xmlの作成 まずはクラスパス配下にlogback-spring.xmlを配置しましょう。\n[adsense-responsive]\rlogback-spring.xml \u0026lt;?xml version=\u0026#34;1.0\u0026#34; encoding=\u0026#34;UTF-8\u0026#34;?\u0026gt; \u0026lt;configuration\u0026gt; \u0026lt;property name=\u0026#34;FORMAT\u0026#34; value=\u0026#34;[%-5level] %d{yyyy-MM-dd HH:mm:ss.SSS} %logger{36} - %msg%n\u0026#34; /\u0026gt; //共通のフォーマット定義 \u0026lt;property name=\u0026#34;LOG_DIR\u0026#34; value=\u0026#34;logs\u0026#34; /\u0026gt; //共通の出力先ベース定義 \u0026lt;property name=\u0026#34;FILNE_NAME\u0026#34; value=\u0026#34;account-service.log\u0026#34; /\u0026gt; //共通のファイル名定義 \u0026lt;springProfile name=\u0026#34;local\u0026#34;\u0026gt; //profileがlocalの場合 \u0026lt;include resource=\u0026#34;logback/local-layout.xml\u0026#34; /\u0026gt; \u0026lt;/springProfile\u0026gt; \u0026lt;springProfile name=\u0026#34;staging\u0026#34;\u0026gt; //profileがstagingの場合 \u0026lt;include resource=\u0026#34;logback/staging-layout.xml\u0026#34; /\u0026gt; \u0026lt;/springProfile\u0026gt; \u0026lt;springProfile name=\u0026#34;production\u0026#34;\u0026gt; //profileがproductionの場合 \u0026lt;include resource=\u0026#34;logback/production-layout.xml\u0026#34; /\u0026gt; \u0026lt;/springProfile\u0026gt; \u0026lt;/configuration\u0026gt; layout.xmlの作成 次に、上記ファイルでincludeしている各環境ごとのログレイアウトファイルを用意します。\n今回は各環境ごとのフォルダを生成してその中にログファイルを吐き出すようにしてみます。\nlocal-layout.xml \u0026lt;included\u0026gt; \u0026lt;appender name=\u0026#34;STDOUT\u0026#34; class=\u0026#34;ch.qos.logback.core.ConsoleAppender\u0026#34;\u0026gt; \u0026lt;encoder\u0026gt; \u0026lt;pattern\u0026gt;[local]${FORMAT}\u0026lt;/pattern\u0026gt; \u0026lt;/encoder\u0026gt; \u0026lt;/appender\u0026gt; \u0026lt;appender name=\u0026#34;FILE\u0026#34; class=\u0026#34;ch.qos.logback.core.rolling.RollingFileAppender\u0026#34;\u0026gt; \u0026lt;file\u0026gt;${LOG_DIR}/local/${FILNE_NAME}\u0026lt;/file\u0026gt; \u0026lt;rollingPolicy class=\u0026#34;ch.qos.logback.core.rolling.TimeBasedRollingPolicy\u0026#34;\u0026gt; \u0026lt;fileNamePattern\u0026gt;${LOG_DIR}/local/${FILNE_NAME}.%d{yyyy-MM-dd}.log.tar.gz\u0026lt;/fileNamePattern\u0026gt; \u0026lt;maxHistory\u0026gt;7\u0026lt;/maxHistory\u0026gt; \u0026lt;/rollingPolicy\u0026gt; \u0026lt;encoder\u0026gt; \u0026lt;pattern\u0026gt;[local]${FORMAT}\u0026lt;/pattern\u0026gt; \u0026lt;/encoder\u0026gt; \u0026lt;/appender\u0026gt; \u0026lt;root level=\u0026#34;DEBUG\u0026#34;\u0026gt; \u0026lt;appender-ref ref=\u0026#34;STDOUT\u0026#34; /\u0026gt; \u0026lt;appender-ref ref=\u0026#34;FILE\u0026#34; /\u0026gt; \u0026lt;/root\u0026gt; \u0026lt;/included\u0026gt; staging-layout.xml \u0026lt;included\u0026gt; \u0026lt;appender name=\u0026#34;STDOUT\u0026#34; class=\u0026#34;ch.qos.logback.core.ConsoleAppender\u0026#34;\u0026gt; \u0026lt;encoder\u0026gt; \u0026lt;pattern\u0026gt;[staging]${FORMAT}\u0026lt;/pattern\u0026gt; \u0026lt;/encoder\u0026gt; \u0026lt;/appender\u0026gt; \u0026lt;appender name=\u0026#34;FILE\u0026#34; class=\u0026#34;ch.qos.logback.core.rolling.RollingFileAppender\u0026#34;\u0026gt; \u0026lt;file\u0026gt;${LOG_DIR}/local/${FILNE_NAME}\u0026lt;/file\u0026gt; \u0026lt;rollingPolicy class=\u0026#34;ch.qos.logback.core.rolling.TimeBasedRollingPolicy\u0026#34;\u0026gt; \u0026lt;fileNamePattern\u0026gt;${LOG_DIR}/local/${FILNE_NAME}.%d{yyyy-MM-dd}.log.tar.gz\u0026lt;/fileNamePattern\u0026gt; \u0026lt;maxHistory\u0026gt;7\u0026lt;/maxHistory\u0026gt; \u0026lt;/rollingPolicy\u0026gt; \u0026lt;encoder\u0026gt; \u0026lt;pattern\u0026gt;[staging]${FORMAT}\u0026lt;/pattern\u0026gt; \u0026lt;/encoder\u0026gt; \u0026lt;/appender\u0026gt; \u0026lt;root level=\u0026#34;DEBUG\u0026#34;\u0026gt; \u0026lt;appender-ref ref=\u0026#34;STDOUT\u0026#34; /\u0026gt; \u0026lt;appender-ref ref=\u0026#34;FILE\u0026#34; /\u0026gt; \u0026lt;/root\u0026gt; \u0026lt;/included\u0026gt; production-layout.xml \u0026lt;included\u0026gt; \u0026lt;appender name=\u0026#34;STDOUT\u0026#34; class=\u0026#34;ch.qos.logback.core.ConsoleAppender\u0026#34;\u0026gt; \u0026lt;encoder\u0026gt; \u0026lt;pattern\u0026gt;[%-5level] %d{yyyy-MM-dd HH:mm:ss.SSS} %logger{36} - %msg%n\u0026lt;/pattern\u0026gt; \u0026lt;/encoder\u0026gt; \u0026lt;/appender\u0026gt; \u0026lt;appender name=\u0026#34;FILE\u0026#34; class=\u0026#34;ch.qos.logback.core.rolling.RollingFileAppender\u0026#34;\u0026gt; \u0026lt;file\u0026gt;${LOG_DIR}/production/account-service.log\u0026lt;/file\u0026gt; \u0026lt;rollingPolicy class=\u0026#34;ch.qos.logback.core.rolling.TimeBasedRollingPolicy\u0026#34;\u0026gt; \u0026lt;fileNamePattern\u0026gt;${LOG_DIR}/production/account-service.%d{yyyy-MM-dd}.log.tar.gz\u0026lt;/fileNamePattern\u0026gt; \u0026lt;maxHistory\u0026gt;7\u0026lt;/maxHistory\u0026gt; \u0026lt;/rollingPolicy\u0026gt; \u0026lt;encoder\u0026gt; \u0026lt;pattern\u0026gt;[%-5level] %d{yyyy-MM-dd HH:mm:ss.SSS} %logger{36} - %msg%n\u0026lt;/pattern\u0026gt; \u0026lt;/encoder\u0026gt; \u0026lt;/appender\u0026gt; \u0026lt;root level=\u0026#34;DEBUG\u0026#34;\u0026gt; \u0026lt;appender-ref ref=\u0026#34;FILE\u0026#34; /\u0026gt; \u0026lt;/root\u0026gt; \u0026lt;/included\u0026gt; 確認 この状態で各プロファイルごとにアプリケーションを実行すると、以下のように設定ファイルに沿ってログが出力されるようになります。\ntree api/logs ├── local │ └── account-service.log ├── production │ └── account-service.log └── staging └── account-service.log フォーマットも指定通りになっていますね♪\n[local][INFO ] 2019-04-28 12:15:26.777 o.a.coyote.http11.Http11NioProtocol - Starting ProtocolHandler [\"http-nio-8080\"]\n一つのファイルで環境分けする事も可能 今回はプロファイル単位でファイルを用意してincludeしていますが、一つのファイル内で完結させる事も可能です。\n[adsense-responsive]\rlogback-spring.xml \u0026lt;?xml version=\u0026#34;1.0\u0026#34; encoding=\u0026#34;UTF-8\u0026#34;?\u0026gt; \u0026lt;configuration\u0026gt; \u0026lt;property name=\u0026#34;FORMAT\u0026#34; value=\u0026#34;[%-5level] %d{yyyy-MM-dd HH:mm:ss.SSS} %logger{36} - %msg%n\u0026#34; /\u0026gt; \u0026lt;property name=\u0026#34;LOG_DIR\u0026#34; value=\u0026#34;logs\u0026#34; /\u0026gt; \u0026lt;property name=\u0026#34;FILNE_NAME\u0026#34; value=\u0026#34;account-service.log\u0026#34; /\u0026gt; \u0026lt;springProfile name=\u0026#34;local\u0026#34;\u0026gt; \u0026lt;property name=\u0026#34;SPRING_PROFILE\u0026#34; value=\u0026#34;local\u0026#34; /\u0026gt; \u0026lt;/springProfile\u0026gt; \u0026lt;springProfile name=\u0026#34;staging\u0026#34;\u0026gt; \u0026lt;property name=\u0026#34;SPRING_PROFILE\u0026#34; value=\u0026#34;staging\u0026#34; /\u0026gt; \u0026lt;/springProfile\u0026gt; \u0026lt;springProfile name=\u0026#34;production\u0026#34;\u0026gt; \u0026lt;property name=\u0026#34;SPRING_PROFILE\u0026#34; value=\u0026#34;production\u0026#34; /\u0026gt; \u0026lt;/springProfile\u0026gt; \u0026lt;appender name=\u0026#34;STDOUT\u0026#34; class=\u0026#34;ch.qos.logback.core.ConsoleAppender\u0026#34;\u0026gt; \u0026lt;encoder\u0026gt; \u0026lt;pattern\u0026gt;[${SPRING_PROFILE}]${FORMAT}\u0026lt;/pattern\u0026gt; \u0026lt;/encoder\u0026gt; \u0026lt;/appender\u0026gt; \u0026lt;appender name=\u0026#34;FILE\u0026#34; class=\u0026#34;ch.qos.logback.core.rolling.RollingFileAppender\u0026#34;\u0026gt; \u0026lt;file\u0026gt;${LOG_DIR}/${SPRING_PROFILE}/${FILNE_NAME}\u0026lt;/file\u0026gt; \u0026lt;rollingPolicy class=\u0026#34;ch.qos.logback.core.rolling.TimeBasedRollingPolicy\u0026#34;\u0026gt; \u0026lt;fileNamePattern\u0026gt;${LOG_DIR}/${SPRING_PROFILE}/${FILNE_NAME}.%d{yyyy-MM-dd}.log.tar.gz\u0026lt;/fileNamePattern\u0026gt; \u0026lt;maxHistory\u0026gt;7\u0026lt;/maxHistory\u0026gt; \u0026lt;/rollingPolicy\u0026gt; \u0026lt;encoder\u0026gt; \u0026lt;pattern\u0026gt;[${SPRING_PROFILE}]${FORMAT}\u0026lt;/pattern\u0026gt; \u0026lt;/encoder\u0026gt; \u0026lt;/appender\u0026gt; \u0026lt;root level=\u0026#34;DEBUG\u0026#34;\u0026gt; \u0026lt;appender-ref ref=\u0026#34;STDOUT\u0026#34; /\u0026gt; \u0026lt;appender-ref ref=\u0026#34;FILE\u0026#34; /\u0026gt; \u0026lt;/root\u0026gt; \u0026lt;/configuration\u0026gt; 終わりに 以上のように、簡単にログフォーマットの変更や環境ごとの設定を分けることが出来ました。\n他にもローテートの設定や保存期間の設定なども細かく出来るのでぜひ試してみてください♪\n","date":"2019-04-28T12:42:37+09:00","image":"/wp-content/uploads/2019/04/springBootWithLogBackEye.png","permalink":"/2019/04/28/8187/","title":"【SpringBoot2】Logbackで環境ごとにログファイルを出し分けするやり方【log4jの後継種】"},{"content":"独自プロパティファイルをソースから読み込みたい SpringBootではエラーメッセージなどをプロパティファイルなどに外出しして管理することが可能になります。\n呼び出すためには専用の設定を行う必要があるため、今回はその方法についてご紹介していきます。\n手順 message.propertiesの用意 まずは読み込ませたいプロパティファイルを用意しましょう。\nsrc/main/resources/custom/message.properties hoge=fuga メッセージファイルの読み込み設定 次に、上記で作成したプロパティファイルを読み取れるようにするための設定クラスを用意しましょう。\n[adsense-responsive]\rMessageSourceBean package tech.blogenist.service.account.api.infrastructure.message; import java.nio.charset.StandardCharsets; import org.springframework.context.MessageSource; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.context.support.MessageSourceAccessor; import org.springframework.context.support.ResourceBundleMessageSource; @Configuration public class MessageSourceBean { private String[] BASE_NAMES = { \u0026#34;custom/message\u0026#34; }; @Bean public MessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); messageSource.setBasenames( BASE_NAMES ); messageSource.setDefaultEncoding( StandardCharsets.UTF_8.name() ); return messageSource; } @Bean public MessageSourceAccessor messageSourceAccessor() { return new MessageSourceAccessor( messageSource() ); } } 確認 では、実際に以下のように読み出した値を標準出力に出してみましょう。\n[adsense-responsive]\rサンプルコード @Autowired private MessageSource messageSource;// 準備 ... String value = messageSource .getMessage( \u0026#34;hoge\u0026#34;, //Keyを指定 null, //　とりあえずnullで良い Locale.getDefault() );// Localもとりあえずはデフォルトで良い System.out.println( value ); // fuga では、これで実際にリクエストを投げてみましょう。\n標準出力 2019-04-27 10:42:02.075 INFO 4380 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring DispatcherServlet \u0026#39;dispatcherServlet\u0026#39; 2019-04-27 10:42:02.076 INFO 4380 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Initializing Servlet \u0026#39;dispatcherServlet\u0026#39; 2019-04-27 10:42:02.096 INFO 4380 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Completed initialization in 20 ms fuga 正しく取得出来ましたね♪\n他言語化対応 プロパティファイル名に{ファイル名}_{言語コード}とすることでLocaleに合わせたファイルを自動で読み込んでくれるようになります。\n以下のようなファイルを用意したとしましょう。\ntree api/src/main/resources/custom ├── message.properties ├── message.properties └── message.properties その上で、メッセージを取得する際の第三引数にLocaleを指定することで対応したプロパティファイルから値を取ってきてくれます。\nサンプルコード ... String jaValue = messageSource .getMessage( \u0026#34;hoge\u0026#34;, null, Locale.JAPANESE ); System.out.println( jaValue );// ふが String enValue = messageSource .getMessage( \u0026#34;hoge\u0026#34;, null, Locale.ENGLISH ); System.out.println( enValue );//fuga String zhValue = messageSource .getMessage( \u0026#34;hoge\u0026#34;, null, Locale.CHINA );// ふが System.out.println( zhValue ); 上記の例で、中国語用のファイルを用意してないのに日本語用のプロパティが読まれるのは、おそらくシステムのデフォルト言語が日本語になっているため、存在しない場合はそちらが適用されるからだと思います。\nなので、_jaのプロパティファイルを削除すると、無印のデフォルトのプロパティが呼び出されました。\nオススメの商品 現場至上主義 Spring Boot2 徹底活用 Amazon 現場至上主義 Spring Boot2 徹底活用 日清 カップヌードル 77g×20個 Amazon 日清 カップヌードル 77g×20個 夜食のお供に。\n終わりに 以上のように、SpringBootで簡単に独自エラーメッセージを読み込むことが出来ました。\nエラーメッセージなどもプロパティファイルに出して管理することで、保守や他言語化なども可能になるのでぜひ試してみてください♪\n","date":"2019-04-27T10:51:26+09:00","image":"/wp-content/uploads/2019/04/springBootLoadPropsFileEye.png","permalink":"/2019/04/27/8176/","title":"【SpringBoot2】メッセージプロパティファイルをロジック内部から呼び出すための設定【他言語化対応】"},{"content":"SpringBoot2のデフォルトのエラーレスポンスは危険 脆弱性の原因 SpringBoot2でシステム開発をする際は、APIを開発する事が多いと思います。\n@RestControllerをつけることで簡単に実装を進める事が出来るので、とても便利なフレームワークですよね。\nしかし、何も気にせずそのまま実装を進めると、システムエラーが発生した際に、システム内部の情報が含まれたレスポンスが返却されてしまうので、脆弱性に繋がる可能性があります。\nデフォルトのエラーレスポンス 実際にサーバー内部でエラーが起きると以下のようなレスポンスが返ります。\nエラーレスポンス { \u0026#34;timestamp\u0026#34;: \u0026#34;2019-04-23T09:00:46.014+0000\u0026#34;, \u0026#34;status\u0026#34;: 500, \u0026#34;error\u0026#34;: \u0026#34;Internal Server Error\u0026#34;, \u0026#34;message\u0026#34;: \u0026#34;No message available\u0026#34;, \u0026#34;trace\u0026#34;: \u0026#34;java.lang.NullPointerException\\n\\tat tech.blogenist.service.account.api.service.account.detail.AccountDetailService.findBy(AccountDetailService.java:23)\\n\\tat tech.blogenist.service.account.api.controller.account.detail.AccountDetailController.detail(AccountDetailController.java:28)\\n\\tat sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\\n\\tat sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\\n\\tat sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)\\n\\tat java.lang.reflect.Method.invoke(Method.java:498)\\n\\tat org.springframework.web.method.support.InvocableHandlerMethod.doInvoke(InvocableHandlerMethod.java:189)\\n\\tat org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:138)\\n\\tat org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:102)\\n\\tat org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:895)\\n\\tat org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:800)\\n\\tat org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87)\\n\\tat org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1038)\\n\\tat org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:942)\\n\\tat org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1005)\\n\\tat org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:897)\\n\\tat javax.servlet.http.HttpServlet.service(HttpServlet.java:634)\\n\\tat org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:882)\\n\\tat javax.servlet.http.HttpServlet.service(HttpServlet.java:741)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)\\n\\tat org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)\\n\\tat org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:99)\\n\\tat org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)\\n\\tat org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:92)\\n\\tat org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)\\n\\tat org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:93)\\n\\tat org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)\\n\\tat org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:200)\\n\\tat org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)\\n\\tat org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)\\n\\tat org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:200)\\n\\tat org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)\\n\\tat org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:490)\\n\\tat org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139)\\n\\tat org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)\\n\\tat org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74)\\n\\tat org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)\\n\\tat org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:408)\\n\\tat org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)\\n\\tat org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:834)\\n\\tat org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1415)\\n\\tat org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)\\n\\tat java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)\\n\\tat java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)\\n\\tat org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)\\n\\tat java.lang.Thread.run(Thread.java:745)\\n\u0026#34;, \u0026#34;path\u0026#34;: \u0026#34;/v1/accounts/999/\u0026#34; } パッケージ情報やエラー詳細、場合によってはパラメーターやDBのデータも出力されてしまうためとても危険です。\nカスタマイズ可能 そのままだと危険ですが、もちろんエラーレスポンスをカスタマイズすることが出来ます。\n今回はそのやり方をご紹介致します。\n手順 DefaultErrorAttributesの継承クラスを用意する やり方はとても簡単です。\n以下のようなDefaultErrorAttributesの継承クラスを用意して、getErrorAttributesメソッドをOverrideすれば良いだけです。\n今回は試しにpathとtimestampだけを返すようにしてみました。\n@Componentを忘れずに！\nCustomErrorAttributes package tech.blogenist.service.account.api.infrastructure.error.attributes; import java.time.OffsetDateTime; import java.util.HashMap; import java.util.Map; import org.springframework.boot.web.servlet.error.DefaultErrorAttributes; import org.springframework.stereotype.Component; import org.springframework.web.context.request.RequestAttributes; import org.springframework.web.context.request.WebRequest; @Component public class CustomErrorAttributes extends DefaultErrorAttributes { public static final String TIME_STAMP = \u0026#34;timestamp\u0026#34;; public static final String PATH = \u0026#34;path\u0026#34;; private final String PATH_ATTRIBUTE = \u0026#34;javax.servlet.error.request_uri\u0026#34;; @Override public Map\u0026lt; String, Object \u0026gt; getErrorAttributes( WebRequest webRequest, boolean includeStackTrace ) { Map\u0026lt; String, Object \u0026gt; customErrorAttribute = new HashMap\u0026lt; String, Object \u0026gt;(); String path = ( String ) webRequest .getAttribute( PATH_ATTRIBUTE, RequestAttributes.SCOPE_REQUEST ); customErrorAttribute.put( TIME_STAMP, OffsetDateTime.now() ); customErrorAttribute.put( PATH, path ); return customErrorAttribute; } } 確認 では、もう一度同じエラーを発生させてみましょう。\nエラーレスポンス { \u0026#34;path\u0026#34;: \u0026#34;/v1/accounts/999/\u0026#34;, \u0026#34;timestamp\u0026#34;: \u0026#34;2019-04-23T15:08:47.866+0000\u0026#34; } しっかりとカスタムエラーレスポンスが適用されるようになり、システム内部のエラーの詳細が返却されないようになりましたね♪\n参考 Spring Boot 2 プログラミング入門 Amazon Spring Boot 2 プログラミング入門 終わりに パッケージ情報やエラー詳細は脆弱性やハッキングに繋がるので必ずレスポンスに含まれないようにしましょう。\nまた、レスポンス項目も自由に追加することが可能なので、要件にあったエラーレスポンスを考えてみてください♪\n","date":"2019-04-24T00:28:27+09:00","image":"/wp-content/uploads/2019/04/springBootCustomErrorResponseEye.png","permalink":"/2019/04/24/8155/","title":"【SpringBoot2】エラーレスポンスを独自カスタマイズする方法【DefaultErrorAttributes】"},{"content":"JPAを使ってみよう O/R Mapperを使ってみよう 前回はFlywayを使ったDB構築の自動化についてご紹介しました。\n関連記事 【DBマイグレーション】GradleにFlywayを組み込んでパッチ適用を自動化しよう【SpringBoot2】 2019/04/16 3488文字 約7分で読めます 今回はJPAを利用したデータベースからの参照処理のO/R Mappingを実装してみようと思います。\nJPAとは？ JPAは正式にはJava Persistence APIと呼び、Java EE標準のO/R MappingおよびDAOの技術仕様の事を指します。\n[adsense-responsive]\rJava Persistence API（JPA）とは、関係データベースのデータを扱う Java SE および Java EE のアプリケーションを開発するためのJava用フレームワークである。\rJPA は、以下の3つの部分から成る。\nAPI（javax.persistence パッケージで定義されている） Java Persistence Query Language オブジェクト/関係メタデータJava Persistence API - Wikipedia\nまた、JPAはあくまで仕様なので実際にはEclipseLink,Hibernate ORM,Apache Open JPAなどのライブラリを使うことになると思います。\n今回は、SpringBootでJPAを利用する際にデフォルトで仕様されるHibernateを使ってみようと思います。\n手順 マッピングするテーブル構造 今回も前回作成したテーブル構造をベースにマッピングしていきます。\n今回の目的は、ユーザー一覧を取得するためにマッピングテーブルであるcurrent_account_infomationsテーブルを軸に取得してこようと思います\n今回利用するJPAアノテーション JPAは基本的にアノテーションベースでマッピングの設定をしていきます。\n今回登場するのは以下のアノテーションです。\nアノテーション\r概要\r@Column( name = {カラム名} )\rフィールドにマッピングするDBのカラム名をname属性で設定する\r@Enumerated( EnumType.STRING )\rEnumにカラムをマッピングしたい場合に設定する\r@Entity\rテーブルと対応するEntityクラスに設定する\r@Table( schema = {スキーマ名}, name = {テーブル名} )\rEntityクラスに紐付けたいテーブル情報を設定する\r@EmbeddedId\rPKカラムを紐付けたいクラスを参照する際に設定する\r@Embedded\rPKではないカラムを紐付けたいクラスを参照する際に設定する\r@OneToOne\r1...1のテーブルを結合したい際に設定する\n※今回はテーブル定義情報は1..1~nだが、こちらを使うことでやりたいことは実現出来た\r@ManyToOne\rN...0~1のテーブルを結合したい際に設定する\r@JoinColumn( name = {カラム名} )\r結合する際のFKカラム名を指定したい場合に設定する\r@AttributeOverride(name = {上書き対象フィールド}, column = @Column(name = {上書き後の値} ) )\r紐付けるEntity内のフィールドのカラム定義を上書きする\n※今回のテーブル定義としては自テーブルと参照元によって同じコンテキストでも冗長的記述を端折るために異なるカラム名を付与しているので利用しています\r開発用afterMigrateデータ 今回はローカル開発動作確認用として、以下のデータを投入します。\n期待値としてはマッピングテーブルを用いて(新)のものだけ取得出来ればOKです。\nローカル確認用データ -- #################### -- # アカウント1 -- #################### INSERT INTO account.accounts ( id ) VALUES ( (SELECT nextval(\u0026#39;account.account_id\u0026#39;)) ); INSERT INTO account.account_infomations ( id, account_id, name, age, sex_type, display_name ) values ( (SELECT nextval(\u0026#39;account.account_infomation_id\u0026#39;)), (SELECT MAX(id) FROM account.accounts), \u0026#39;山田　太郎\u0026#39;, 19, \u0026#39;MALE\u0026#39;, \u0026#39;山田　ローカル　太郎(古)\u0026#39; ); INSERT INTO account.account_infomations ( id, account_id, name, age, sex_type, display_name ) values ( (SELECT nextval(\u0026#39;account.account_infomation_id\u0026#39;)), (SELECT MAX(id) FROM account.accounts), \u0026#39;山田　太郎\u0026#39;, 19, \u0026#39;MALE\u0026#39;, \u0026#39;山田　ローカル　太郎(新)\u0026#39; ); INSERT INTO account.current_account_infomations ( account_id, account_infomation_id ) values ( (SELECT MAX(id) FROM account.accounts), (SELECT MAX(id) FROM account.account_infomations) ); -- #################### -- # アカウント2 -- #################### INSERT INTO account.accounts ( id ) VALUES ( (SELECT nextval(\u0026#39;account.account_id\u0026#39;)) ); INSERT INTO account.account_infomations ( id, account_id, name, age, sex_type, display_name ) values ( (SELECT nextval(\u0026#39;account.account_infomation_id\u0026#39;)), (SELECT MAX(id) FROM account.accounts), \u0026#39;田中　花子\u0026#39;, 20, \u0026#39;FEMALE\u0026#39;, \u0026#39;田中　ローカル　花子(古)\u0026#39; ); INSERT INTO account.account_infomations ( id, account_id, name, age, sex_type, display_name ) values ( (SELECT nextval(\u0026#39;account.account_infomation_id\u0026#39;)), (SELECT MAX(id) FROM account.accounts), \u0026#39;田中　花子\u0026#39;, 20, \u0026#39;FEMALE\u0026#39;, \u0026#39;田中　ローカル　花子(新)\u0026#39; ); INSERT INTO account.current_account_infomations ( account_id, account_infomation_id ) values ( (SELECT MAX(id) FROM account.accounts), (SELECT MAX(id) FROM account.account_infomations) ); -- #################### -- # アカウント3 -- #################### INSERT INTO account.accounts ( id ) VALUES ( (SELECT nextval(\u0026#39;account.account_id\u0026#39;)) ); INSERT INTO account.account_infomations ( id, account_id, name, age, sex_type, display_name ) values ( (SELECT nextval(\u0026#39;account.account_infomation_id\u0026#39;)), (SELECT MAX(id) FROM account.accounts), \u0026#39;山田　二郎\u0026#39;, 15, \u0026#39;NONE\u0026#39;, \u0026#39;山田　ローカル　二郎(古)\u0026#39; ); INSERT INTO account.account_infomations ( id, account_id, name, age, sex_type, display_name ) values ( (SELECT nextval(\u0026#39;account.account_infomation_id\u0026#39;)), (SELECT MAX(id) FROM account.accounts), \u0026#39;山田　二郎\u0026#39;, 15, \u0026#39;NONE\u0026#39;, \u0026#39;山田　ローカル　二郎(新)\u0026#39; ); INSERT INTO account.current_account_infomations ( account_id, account_infomation_id ) values ( (SELECT MAX(id) FROM account.accounts), (SELECT MAX(id) FROM account.account_infomations) ); 依存関係の追加 まずはgradleの依存関係にJPAを追加していきましょう。\n[adsense-responsive]\rdevtools/build.gradle buildscript { apply from: \u0026#39;property.gradle\u0026#39; ext { } repositories { mavenCentral() } dependencies { classpath(\u0026#34;org.springframework.boot:spring-boot-gradle-plugin:${accountService.springBootVersion}\u0026#34;) classpath \u0026#34;org.yaml:snakeyaml:${accountService.snakeyamlVersion}\u0026#34; classpath \u0026#34;org.postgresql:postgresql:${accountService.postgresVersion}\u0026#34; } } allprojects { apply plugin: \u0026#39;eclipse\u0026#39; } subprojects { apply plugin: \u0026#34;java\u0026#34; apply plugin: \u0026#34;io.spring.dependency-management\u0026#34; group = accountService.group version = accountService.version sourceCompatibility = accountService.sourceCompatibility repositories { mavenCentral() } dependencyManagement { } dependencies { implementation \u0026#34;org.springframework.boot:spring-boot-starter:${accountService.springBootVersion}\u0026#34; implementation \u0026#34;org.springframework.boot:spring-boot-starter-data-jpa:${accountService.springBootVersion}\u0026#34; // 追加 testImplementation \u0026#34;org.springframework.boot:spring-boot-starter-test:${accountService.springBootVersion}\u0026#34; } } Valueプロジェクトの修正 次にValueモデルを修正します。\nAccountIdValue package tech.blogenist.service.account.value.account; import java.io.Serializable; import javax.persistence.Column; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountIdValue implements Serializable { public static final String LAVEL = \u0026#34;会員ID\u0026#34;; public static final String COLUMN_NAME = \u0026#34;id\u0026#34;; public static final String FK_COLUMN_NAME = \u0026#34;account_id\u0026#34;; @Column( name = COLUMN_NAME ) private Integer value; } AccountInfomationIdValue package tech.blogenist.service.account.value.account; import java.io.Serializable; import javax.persistence.Column; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountInfomationIdValue implements Serializable { public static final String LAVEL = \u0026#34;会員情報ID\u0026#34;; public static final String COLUMN_NAME = \u0026#34;id\u0026#34;; public static final String FK_COLUMN_NAME = \u0026#34;account_infomation_id\u0026#34;; @Column( name = COLUMN_NAME ) private Integer value; } [adsense-responsive]\rAccountNameValue package tech.blogenist.service.account.value.account; import javax.persistence.Column; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountNameValue { public static final String LAVEL = \u0026#34;会員名\u0026#34;; public static final String COLUMN_NAME = \u0026#34;name\u0026#34;; @Column( name = COLUMN_NAME ) private String value; } AgeValue package tech.blogenist.service.account.value.account; import javax.persistence.Column; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AgeValue { public static final String LAVEL = \u0026#34;年齢\u0026#34;; public static final String COLUMN_NAME = \u0026#34;age\u0026#34;; @Column( name = COLUMN_NAME ) private Integer value; } SexValue package tech.blogenist.service.account.value.account; import java.io.Serializable; import javax.persistence.Column; import javax.persistence.EnumType; import javax.persistence.Enumerated; import lombok.AllArgsConstructor; import lombok.Data; import lombok.Getter; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class SexTypeValue implements Serializable { public static final String LAVEL = \u0026#34;性別\u0026#34;; public static final String COLUMN_NAME = \u0026#34;type\u0026#34;; public static final String FK_COLUMN_NAME = \u0026#34;sex_type\u0026#34;; @Enumerated( EnumType.STRING ) @Column( name = COLUMN_NAME ) private Type type; @AllArgsConstructor public enum Type { NONE( \u0026#34;未設定\u0026#34; ), MALE( \u0026#34;男性\u0026#34; ), FEMALE( \u0026#34;女性\u0026#34; ); @Getter private String lavel; } } CommonCreatedAtValue package tech.blogenist.service.account.value.common.datetime; import java.time.LocalDateTime; import javax.persistence.Column; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class CommonCreatedAtValue { public static final String LAVEL = \u0026#34;作成日時\u0026#34;; public static final String COLUMN_NAME = \u0026#34;created_at\u0026#34;; @Column( name = COLUMN_NAME ) private LocalDateTime value; } CommonUpdatedAtValue package tech.blogenist.service.account.value.common.datetime; import java.time.LocalDateTime; import javax.persistence.Column; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class CommonUpdatedAtValue { public static final String LAVEL = \u0026#34;更新日時\u0026#34;; public static final String COLUMN_NAME = \u0026#34;updated_at\u0026#34;; @Column( name = COLUMN_NAME ) private LocalDateTime value; } MasterNameValue package tech.blogenist.service.account.value.common.datetime; import javax.persistence.Column; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class MasterNameValue { public static final String LAVEL = \u0026#34;名称\u0026#34;; public static final String COLUMN_NAME = \u0026#34;name\u0026#34;; @Column( name = COLUMN_NAME ) private String value; } ValueFieldConst package tech.blogenist.service.account.value.infrastructure.field; public class ValueFieldConst { public static final String FIELD = \u0026#34;value\u0026#34;; } Entityプロジェクトの修正 次にEntityモデルを修正します。\nAccountsTableEntity package tech.blogenist.service.account.entity.db.account; import javax.persistence.Embedded; import javax.persistence.EmbeddedId; import javax.persistence.Entity; import javax.persistence.Table; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import tech.blogenist.service.account.value.account.AccountIdValue; import tech.blogenist.service.account.value.common.datetime.CommonCreatedAtValue; import tech.blogenist.service.account.value.common.datetime.CommonUpdatedAtValue; @Builder @Entity @Table( schema = AccountsTableEntity.SCHEMA_NAME, name = AccountsTableEntity.TABLE_NAME ) @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountsTableEntity { public static final String SCHEMA_NAME = \u0026#34;account\u0026#34;; public static final String TABLE_NAME = \u0026#34;accounts\u0026#34;; @EmbeddedId private AccountIdValue accountId; @Embedded private CommonCreatedAtValue createdAt; @Embedded private CommonUpdatedAtValue updatedAt; } [adsense-responsive]\rAccountInfomationsTableEntity package tech.blogenist.service.account.entity.db.account; import javax.persistence.Embedded; import javax.persistence.EmbeddedId; import javax.persistence.Entity; import javax.persistence.JoinColumn; import javax.persistence.ManyToOne; import javax.persistence.Table; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import tech.blogenist.service.account.value.account.Account\u0010DisplayNameValue; import tech.blogenist.service.account.value.account.AccountIdValue; import tech.blogenist.service.account.value.account.AccountInfomationIdValue; import tech.blogenist.service.account.value.account.AccountNameValue; import tech.blogenist.service.account.value.account.AgeValue; import tech.blogenist.service.account.value.account.SexTypeValue; import tech.blogenist.service.account.value.common.datetime.CommonCreatedAtValue; import tech.blogenist.service.account.value.common.datetime.CommonUpdatedAtValue; @Builder @Entity @Table( schema = AccountInfomationsTableEntity.SCHEMA_NAME, name = AccountInfomationsTableEntity.TABLE_NAME ) @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountInfomationsTableEntity { public static final String SCHEMA_NAME = \u0026#34;account\u0026#34;; public static final String TABLE_NAME = \u0026#34;account_infomations\u0026#34;; @EmbeddedId private AccountInfomationIdValue accountInfomationId; @ManyToOne @JoinColumn( name = AccountIdValue.FK_COLUMN_NAME ) private AccountsTableEntity accountEntity; @Embedded private AccountNameValue name; @Embedded private AgeValue age; @ManyToOne @JoinColumn( name = SexTypeValue.FK_COLUMN_NAME ) private SexTypesTableEntity sexType; @Embedded private Account\u0010DisplayNameValue displayName; @Embedded private CommonCreatedAtValue createdAt; @Embedded private CommonUpdatedAtValue updatedAt; } SexTypesTableEntity package tech.blogenist.service.account.entity.db.account; import javax.persistence.Embedded; import javax.persistence.EmbeddedId; import javax.persistence.Entity; import javax.persistence.Table; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import tech.blogenist.service.account.value.account.SexTypeValue; import tech.blogenist.service.account.value.common.datetime.MasterNameValue; @Builder @Entity @Table( schema = SexTypesTableEntity.SCHEMA_NAME, name = SexTypesTableEntity.TABLE_NAME ) @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class SexTypesTableEntity { public static final String SCHEMA_NAME = \u0026#34;account\u0026#34;; public static final String TABLE_NAME = \u0026#34;sex_types\u0026#34;; @EmbeddedId private SexTypeValue type; @Embedded private MasterNameValue name; } CurrentAccountInfomationsTableEntity package tech.blogenist.service.account.entity.db.account; import javax.persistence.AttributeOverride; import javax.persistence.Column; import javax.persistence.Embedded; import javax.persistence.EmbeddedId; import javax.persistence.Entity; import javax.persistence.JoinColumn; import javax.persistence.OneToOne; import javax.persistence.Table; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import tech.blogenist.service.account.value.account.AccountIdValue; import tech.blogenist.service.account.value.account.AccountInfomationIdValue; import tech.blogenist.service.account.value.common.datetime.CommonCreatedAtValue; import tech.blogenist.service.account.value.common.datetime.CommonUpdatedAtValue; import tech.blogenist.service.account.value.infrastructure.field.ValueFieldConst; @Builder @Entity @Table( schema = CurrentAccountInfomationsTableEntity.SCHEMA_NAME, name = CurrentAccountInfomationsTableEntity.TABLE_NAME ) @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class CurrentAccountInfomationsTableEntity { public static final String SCHEMA_NAME = \u0026#34;account\u0026#34;; public static final String TABLE_NAME = \u0026#34;current_account_infomations\u0026#34;; @AttributeOverride( name = ValueFieldConst.FIELD, column = @Column( name = AccountIdValue.FK_COLUMN_NAME ) ) @EmbeddedId private AccountIdValue accountId; @OneToOne @JoinColumn( name = AccountInfomationIdValue.FK_COLUMN_NAME, referencedColumnName = AccountInfomationIdValue.COLUMN_NAME ) private AccountInfomationsTableEntity accountInfomations; @Embedded private CommonCreatedAtValue createdAt; @Embedded private CommonUpdatedAtValue updatedAt; } Datasourceプロジェクトの修正 CurrentAccountInfomationsRepository package tech.blogenist.service.account.datasource.db.current_account.account_infomations; import java.util.List; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; import tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity; import tech.blogenist.service.account.value.account.AccountIdValue; @Repository public interface CurrentAccountInfomationsRepository extends JpaRepository\u0026lt; CurrentAccountInfomationsTableEntity, AccountIdValue \u0026gt; { public List\u0026lt; CurrentAccountInfomationsTableEntity \u0026gt; findAll(); } APIプロジェクトの修正 modelパッケージ AccountListingElementModel package tech.blogenist.service.account.api.model.account.listing.response; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import tech.blogenist.service.account.value.account.Account\u0010DisplayNameValue; import tech.blogenist.service.account.value.account.AccountIdValue; import tech.blogenist.service.account.value.account.AccountInfomationIdValue; import tech.blogenist.service.account.value.account.AccountNameValue; import tech.blogenist.service.account.value.account.AgeValue; import tech.blogenist.service.account.value.common.datetime.MasterNameValue; @Builder @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountListingElementModel { private AccountIdValue accountId; private AccountInfomationIdValue accountInfomationId; private AccountNameValue name; private AgeValue age; private MasterNameValue sex; private Account\u0010DisplayNameValue displayName; } AccountListingResponseModel package tech.blogenist.service.account.api.model.account.listing.response; import java.util.List; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; @Builder @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountListingResponseModel { private List\u0026lt; AccountListingElementModel \u0026gt; accounts; } serviceパッケージ AccountListingService package tech.blogenist.service.account.api.service.account.listing; import java.util.List; import java.util.stream.Collectors; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import tech.blogenist.service.account.api.model.account.listing.response.AccountListingElementModel; import tech.blogenist.service.account.api.model.account.listing.response.AccountListingResponseModel; import tech.blogenist.service.account.datasource.db.current_account.account_infomations.CurrentAccountInfomationsRepository; import tech.blogenist.service.account.entity.db.account.AccountInfomationsTableEntity; import tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity; import tech.blogenist.service.account.value.common.datetime.MasterNameValue; @Service public class AccountListingService { @Autowired private CurrentAccountInfomationsRepository currentAccountInfomationsRepository; public AccountListingResponseModel listing() { List\u0026lt; CurrentAccountInfomationsTableEntity \u0026gt; entities = currentAccountInfomationsRepository.findAll(); List\u0026lt; AccountListingElementModel \u0026gt; elements = entities.stream() .map( entity -\u0026gt; { AccountInfomationsTableEntity infomation = entity.getAccountInfomations(); AccountListingElementModel element = AccountListingElementModel.builder() .accountInfomationId( infomation.getId() ) .accountId( entity.getAccountId() ) .age( infomation.getAge() ) .name( infomation.getName() ) .sex( infomation.getSexType() == null ? MasterNameValue.empty() : infomation.getSexType().getName() ) .displayName( infomation.getDisplayName() ) .build(); return element; } ) .collect( Collectors.toList() ); return AccountListingResponseModel.of( elements ); } } AccountDetailService package tech.blogenist.service.account.api.service.account.detail; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import tech.blogenist.service.account.api.model.account.detail.response.AccountDetailResponseModel; import tech.blogenist.service.account.datasource.db.current_account.account_infomations.CurrentAccountInfomationsRepository; import tech.blogenist.service.account.entity.db.account.CurrentAccountInfomationsTableEntity; import tech.blogenist.service.account.value.account.AccountIdValue; @Service public class AccountDetailService { @Autowired private CurrentAccountInfomationsRepository currentAccountInfomationsRepository; public AccountDetailResponseModel findBy( AccountIdValue id ) { CurrentAccountInfomationsTableEntity entity = currentAccountInfomationsRepository .findByAccountId( id ); return AccountDetailResponseModel.builder() .accountId( entity.getAccountId() ) .accountInfomationId( entity.getAccountInfomations().getId() ) .name( entity.getAccountInfomations().getName() ) .age( entity.getAccountInfomations().getAge() ) .displayName( entity.getAccountInfomations().getDisplayName() ) .sex( entity.getAccountInfomations().getSexType().getName() ) .build(); } } apiパッケージ AccountListingController package tech.blogenist.service.account.api.controller.account.listing; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import tech.blogenist.service.account.api.infrastructure.rest.path.RestPathConst; import tech.blogenist.service.account.api.model.account.listing.response.AccountListingResponseModel; import tech.blogenist.service.account.api.service.account.listing.AccountListingService; @RestController @RequestMapping( RestPathConst.VersionPath.V1 + RestPathConst.CategoryPath.AccountPath.BASE_PATH ) public class AccountListingController { @Autowired private AccountListingService service; @GetMapping public AccountListingResponseModel listing() { AccountListingResponseModel response = service.listing(); return response; } } AccountDetailController package tech.blogenist.service.account.api.controller.account.detail; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import tech.blogenist.service.account.api.infrastructure.rest.path.RestPathConst; import tech.blogenist.service.account.api.model.account.detail.response.AccountDetailResponseModel; import tech.blogenist.service.account.api.service.account.detail.AccountDetailService; import tech.blogenist.service.account.value.account.AccountIdValue; @RestController @RequestMapping( RestPathConst.VersionPath.V1 + RestPathConst.CategoryPath.AccountPath.BASE_PATH ) public class AccountDetailController { @Autowired private AccountDetailService service; @GetMapping( path = RestPathConst.CategoryPath.AccountPath.RESOURCE_PATH ) public AccountDetailResponseModel detail( @PathVariable( RestPathConst.CategoryPath.AccountPath.PATH_VARIABLE ) Integer accountId ) { AccountDetailResponseModel response = service.findBy( AccountIdValue.of( accountId ) ); return response; } } 動作確認 では、実際にエンドポイントを叩いてみましょう！\n一覧 [adsense-responsive]\r/v1/accounts/ { \u0026#34;accounts\u0026#34;: [ { \u0026#34;accountId\u0026#34;: { \u0026#34;value\u0026#34;: 10001 }, \u0026#34;accountInfomationId\u0026#34;: { \u0026#34;value\u0026#34;: 20002 }, \u0026#34;name\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;山田　太郎\u0026#34; }, \u0026#34;age\u0026#34;: { \u0026#34;value\u0026#34;: 19 }, \u0026#34;sex\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;男性\u0026#34; }, \u0026#34;displayName\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;山田　ローカル　太郎(新)\u0026#34; } }, { \u0026#34;accountId\u0026#34;: { \u0026#34;value\u0026#34;: 10002 }, \u0026#34;accountInfomationId\u0026#34;: { \u0026#34;value\u0026#34;: 20004 }, \u0026#34;name\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;田中　花子\u0026#34; }, \u0026#34;age\u0026#34;: { \u0026#34;value\u0026#34;: 20 }, \u0026#34;sex\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;女性\u0026#34; }, \u0026#34;displayName\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;田中　ローカル　花子(新)\u0026#34; } }, { \u0026#34;accountId\u0026#34;: { \u0026#34;value\u0026#34;: 10003 }, \u0026#34;accountInfomationId\u0026#34;: { \u0026#34;value\u0026#34;: 20006 }, \u0026#34;name\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;山田　二郎\u0026#34; }, \u0026#34;age\u0026#34;: { \u0026#34;value\u0026#34;: 15 }, \u0026#34;sex\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;未設定\u0026#34; }, \u0026#34;displayName\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;山田　ローカル　二郎(新)\u0026#34; } } ] } 詳細 /v1/accounts/10001/ { \u0026#34;accountId\u0026#34;: { \u0026#34;value\u0026#34;: 10001 }, \u0026#34;accountInfomationId\u0026#34;: { \u0026#34;value\u0026#34;: 20002 }, \u0026#34;name\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;山田　太郎\u0026#34; }, \u0026#34;age\u0026#34;: { \u0026#34;value\u0026#34;: 19 }, \u0026#34;sex\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;男性\u0026#34; }, \u0026#34;displayName\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;山田　ローカル　太郎(新)\u0026#34; } } 無事にテーブル結合が行われて、複数テーブルのデータをレスポンスモデルに変換して取得することが出来ました♪\n参考 現場至上主義 Spring Boot2 徹底活用 Amazon 現場至上主義 Spring Boot2 徹底活用 Spring Data JPAプログラミング入門 Amazon Spring Data JPAプログラミング入門 終わりに 以上のように、JPAの仕組みやマッピング方法や結合方法さえわかれば、SQLを書くことなくデータの取得が可能になります。\n他にもJPAには便利な機能が搭載されていますので、是非使ってみてください♪\n","date":"2019-04-21T09:23:59+09:00","image":"/wp-content/uploads/2019/04/springBootWithJpaEye.png","permalink":"/2019/04/21/8071/","title":"【SQL不要】SpringBoot2で「JPA」を使ってテーブル結合(INNER JOIN)してデータベースの情報を取得しよう【アノテーションベース】"},{"content":"DBの設計書、保守するのめんどくさい問題 皆さんはシステム開発を行う際にDB設計をしたことはありますでしょうか？\nデータベースの種類はOracleやMySQL、PostgreSQL、MariaDBなど様々な種類がありますが、リレーショナルDBであれば基本的には設計の仕方は変わりません。\nまた、DBは大切なデータを蓄積し、システム側の様々な機能から呼び出されるのでしっかりと設計を行う必要があります。\nそして設計をするということはもちろん、設計書も必要になりますよね。\nしかし、このDB設計書というものはとても保守がめんどくさいのが実態です。orz\nエクセルで管理すると、自動反映が出来ないので常にソース(DDL文)と二重管理をする必要が出てしまったり、Gitによる差分管理も出来ません。\nERMasterやEnterprise Architect(有料)を使えば、ある程度は自動出力が出来ますが、やはりヒューマンエラーが発生する可能性があります。\n果たして、何が最善なのだろうか。。。\nと、悩んでいたところ良さそうなツールを見つけてしまいました！\nSchemaSpy SchemaSpyとは？ SchemaSpyとは、既存のDBをクローリングして自動でテーブル構造やカラム、PK/FKなどの定義をHTMLドキュメントとして吐き出してくれるツールとなっています！\nDo you hate starting on a new project and having to try to figure out someone else’s idea of a database? Or are you in QA and the developers expect you to understand all the relationships in their schema? If so then this tool’s for you.SchemaSpy — SchemaSpy 6.0.0 documentation\n[adsense-responsive]\r最高じゃん！！！\nメリット Point\rHTMLなのでGit管理可能\rUIが見やすい\rクリックで簡単に参照先のTBLを見ることが出来る\r様々なDBに対応\r自動化なのでヒューマンエラーが無い\rCIなどの自動化に組み込める\rDockerでサクッと使える SchemaSpyはJava製なので、Java8がインストールされている環境であれば簡単に実行することが出来ます。\nしかし、Javaのバージョン問題や描写をするための必須ライブラリ(graphviz)が必要な場合もあるため、準備がちょっとめんどくさいです。\n[adsense-responsive]\rそんな面倒くさがり屋さん向けに、Docker環境で簡単に実行するためのイメージがDocker Hubで公開されているので、そちらを使えばコマンド一発で実行する事が可能です！\n今回はDockerを使った実行方法についてご紹介していこうと思います。\n使い方 前提 今回はDockerがローカルで動く事が前提です。\ndocker -v Docker version 18.06.1-ce, build e68fc7a プロパティファイルの準備 まずはschemaSpy実行時に読み込む設定ファイルを用意しましょう。\nschemaspy.properties schemaspy.t=pgsql schemaspy.host=localhost schemaspy.port=5432 schemaspy.db=local_account_db schemaspy.u=root schemaspy.p=root Dockerで起動 あとは、Dockerコマンドが使える状態であれば、以下のコマンドを叩くだけで既存のデータベースをクローリングして自動でドキュメントを生成してくれます！\n[adsense-responsive]\rコマンド docker run \\ -v \u0026#34;{出力先パス}:/output\u0026#34; \\ -v \u0026#34;{プロパティファイルパス}:/schemaspy.properties\u0026#34; \\ schemaspy/schemaspy:latest 以下のような実行ログが出れば無事に生成されていると思います。\n実行ログ(成功) Running Main-Class org.springframework.boot.loader.JarLauncher With drivers:jtds-1.3.1.jar, mariadb-java-client-1.1.10.jar mysql-connector-java-6.0.6.jar, postgresql-42.1.1.jre7.jar ____ _ ____ / ___| ___| |__ ___ _ __ ___ __ _/ ___| _ __ _ _ \\___ \\ / __| \u0026#39;_ \\ / _ \\ \u0026#39;_ ` _ \\ / _` \\___ \\| \u0026#39;_ \\| | | | ___) | (__| | | | __/ | | | | | (_| |___) | |_) | |_| | |____/ \\___|_| |_|\\___|_| |_| |_|\\__,_|____/| .__/ \\__, | |_| |___/ 6.0.0-SNAPSHOT SchemaSpy generates an HTML representation of a database schema\u0026#39;s relationships. SchemaSpy comes with ABSOLUTELY NO WARRANTY. SchemaSpy is free software and can be redistributed under the conditions of LGPL version 3 or later. http://www.gnu.org/licenses/ INFO - Starting Main v6.0.0-SNAPSHOT with PID 1 (/schemaspy-6.0.0-SNAPSHOT.jar started by java in /) INFO - The following profiles are active: default INFO - Found configuration file: schemaspy.properties INFO - Started Main in 1.545 seconds (JVM running for 2.075) INFO - Starting schema analysis INFO - Connected to PostgreSQL - 10.1 INFO - Gathering schema details Gathering schema details....(0sec) Connecting relationships....(0sec) Writing/graphing summary.INFO - Gathered schema details in 0 seconds INFO - Writing/graphing summary .........(1sec) Writing/diagramming detailsINFO - Completed summary in 1 seconds INFO - Writing/diagramming details .(0sec) Wrote relationship details of 1 tables/views to directory \u0026#39;/output\u0026#39; in 2 seconds. View the results by opening /output/index.html INFO - Wrote table details in 0 seconds INFO - Wrote relationship details of 1 tables/views to directory \u0026#39;/output\u0026#39; in 2 seconds. INFO - View the results by opening /output/index.html 成果物 ディレクトリ構造 成果物は以下のようなディレクトリ構造になっています。(第２階層以降略)\ntree -L 1 docs. tree -L 1 . ├── anomalies.html ├── anomalies.js ├── bower ├── column.js ├── columns.html ├── constraint.js ├── constraints.html ├── deletionOrder.txt ├── diagrams ├── favicon.png ├── fonts ├── images ├── index.html ├── insertionOrder.txt ├── local_account_db.public.xml ├── main.js ├── orphans.html ├── relationships.html ├── relationships.js ├── routines ├── routines.html ├── routines.js ├── schemaSpy.css ├── schemaSpy.js └── tables UIもとても見やすく、クリックすることでテーブル構造の詳細画面に飛べるのでとても便利です！\npublicスキーマしか出力されない問題 原因 デフォルトだと、publicスキーマしか読み込まれないらしいです。\nぐぬぬ。。。\n全部のスキーマを出力することはオプションで可能 しかしご安心を。\nschemaspyのドキュメント\u0026nbsp;をみると、出力対象のスキーマを指定するコマンド引数が複数用意されていました。\n[adsense-responsive]\r引数\r概要\rキャプチャ\r-s {スキーマ名}\r特定の一つのスキーマを出力対象にする\r※この場合はスキーマ一覧画面は生成されない\r-schemas {スキーマ名A}[,{スキーマ名B}...]\r「,」区切りで複数のスキーマを出力対象にする\r-all\r対象DBのすべてのスキーマを出力対象にする\r※システム関連のスキーマも出力される\rとりあえずはこの3つの引数を使い分ければ良いでしょう。\n動作確認 では、試しに-allですべてのスキーマを出力してみましょう。\nコマンド docker run --network=\u0026#34;host\u0026#34; \\ -v \u0026#34;$PWD/docs:/output\u0026#34; \\ -v \u0026#34;$PWD/schemaspy.properties:/schemaspy.properties\u0026#34; \\ schemaspy/schemaspy:latest -all 実行ログ Running Main-Class org.springframework.boot.loader.JarLauncher With drivers:jtds-1.3.1.jar, mariadb-java-client-1.1.10.jar mysql-connector-java-6.0.6.jar, postgresql-42.1.1.jre7.jar ____ _ ____ / ___| ___| |__ ___ _ __ ___ __ _/ ___| _ __ _ _ \\___ \\ / __| \u0026#39;_ \\ / _ \\ \u0026#39;_ ` _ \\ / _` \\___ \\| \u0026#39;_ \\| | | | ___) | (__| | | | __/ | | | | | (_| |___) | |_) | |_| | |____/ \\___|_| |_|\\___|_| |_| |_|\\__,_|____/| .__/ \\__, | |_| |___/ 6.0.0-SNAPSHOT SchemaSpy generates an HTML representation of a database schema\u0026#39;s relationships. SchemaSpy comes with ABSOLUTELY NO WARRANTY. SchemaSpy is free software and can be redistributed under the conditions of LGPL version 3 or later. http://www.gnu.org/licenses/ INFO - Starting Main v6.0.0-SNAPSHOT with PID 1 (/schemaspy-6.0.0-SNAPSHOT.jar started by java in /) INFO - The following profiles are active: default INFO - Found configuration file: schemaspy.properties INFO - Started Main in 1.611 seconds (JVM running for 2.163) INFO - Analyzing schemas that match regular expression \u0026#39;.*\u0026#39;. (use -schemaSpec on command line or in .properties to exclude other schemas) INFO - Analyzing schemas: account information_schema pg_catalog public INFO - Analyzing account INFO - Starting schema analysis INFO - Connected to PostgreSQL - 10.1 INFO - Gathering schema details Gathering schema details......(0sec) Connecting relationships......(0sec) Writing/graphing summary.INFO - Gathered schema details in 0 seconds INFO - Writing/graphing summary ............(1sec) Writing/diagramming detailsINFO - Completed summary in 1 seconds INFO - Writing/diagramming details ...(0sec) Wrote relationship details of 3 tables/views to directory \u0026#39;/output\u0026#39; in 3 seconds. View the results by opening /output/index.html INFO - Wrote table details in 0 seconds INFO - Wrote relationship details of 3 tables/views to directory \u0026#39;/output/account\u0026#39; in 3 seconds. INFO - View the results by opening /output/account/index.html INFO - Analyzing information_schema INFO - Starting schema analysis INFO - Connected to PostgreSQL - 10.1 INFO - Gathering schema details Gathering schema details...(0sec) Connecting relationships...(0sec) Writing/graphing summary.WARN - No tables or views were found in schema \u0026#39;information_schema\u0026#39;. ERROR - The schema exists in the database, but the user you specified \u0026#39;root\u0026#39;might not have rights to read its contents. ERROR - Another possibility is that the regular expression that you specified for what to include (via -i) didn\u0026#39;t match any tables. INFO - Gathered schema details in 0 seconds INFO - Writing/graphing summary .........(1sec) Writing/diagramming detailsINFO - Completed summary in 1 seconds INFO - Writing/diagramming details INFO - No tables to output, nothing written to disk (0sec) Wrote relationship details of 0 tables/views to directory \u0026#39;/output\u0026#39; in 5 seconds. View the results by opening /output/index.html INFO - Wrote table details in 0 seconds INFO - Wrote relationship details of 0 tables/views to directory \u0026#39;/output/information_schema\u0026#39; in 5 seconds. INFO - View the results by opening /output/information_schema/index.html INFO - Analyzing pg_catalog INFO - Starting schema analysis INFO - Connected to PostgreSQL - 10.1 INFO - Gathering schema details Gathering schema details...(0sec) Connecting relationships...(0sec) Writing/graphing summary.WARN - No tables or views were found in schema \u0026#39;pg_catalog\u0026#39;. ERROR - The schema exists in the database, but the user you specified \u0026#39;root\u0026#39;might not have rights to read its contents. ERROR - Another possibility is that the regular expression that you specified for what to include (via -i) didn\u0026#39;t match any tables. INFO - Gathered schema details in 0 seconds INFO - Writing/graphing summary .........(1sec) Writing/diagramming detailsINFO - Completed summary in 1 seconds INFO - Writing/diagramming details INFO - No tables to output, nothing written to disk (0sec) Wrote relationship details of 0 tables/views to directory \u0026#39;/output\u0026#39; in 6 seconds. View the results by opening /output/index.html INFO - Wrote table details in 0 seconds INFO - Wrote relationship details of 0 tables/views to directory \u0026#39;/output/pg_catalog\u0026#39; in 6 seconds. INFO - View the results by opening /output/pg_catalog/index.html INFO - Analyzing public INFO - Starting schema analysis INFO - Connected to PostgreSQL - 10.1 INFO - Gathering schema details Gathering schema details....(0sec) Connecting relationships....(0sec) Writing/graphing summary.INFO - Gathered schema details in 0 seconds INFO - Writing/graphing summary .........(1sec) Writing/diagramming detailsINFO - Completed summary in 1 seconds INFO - Writing/diagramming details .(0sec) Wrote relationship details of 1 tables/views to directory \u0026#39;/output\u0026#39; in 7 seconds. View the results by opening /output/index.html INFO - Wrote table details in 0 seconds INFO - Wrote relationship details of 1 tables/views to directory \u0026#39;/output/public\u0026#39; in 7 seconds. INFO - View the results by opening /output/public/index.html 正常にすべてのスキーマが出力されていますね♪\nHTML構造なのでリンク先に飛べるのがとても便利ですしUIも見やすい！\nまた、S3などにおけばブラウザで閲覧出来るドキュメントにもなりますし、エクセルや画像出力では不可能だったgit管理での差分把握も可能になるので、開発/運用/保守としてもかなりスマートになりますね♪\n終わりに 以上のように、めんどくさいER図やリレーションの設計書起こしをやる手間が省けました！\nCIツールなどを使えば、開発者はDDLの設計だけに専念し、ローカルでDDLを適用してSchemaSpyでドキュメント出力したものをレビューして修正、のようなフローも可能になると思います。\n今回のようなリバースエンジニアリングは作業効率をとてもあげる手法なので、皆さんもぜひ使ってみてはいかがでしょうか♪\n","date":"2019-04-20T18:16:22+09:00","image":"/wp-content/uploads/2019/04/howToSchemaSpyEye.png","permalink":"/2019/04/20/8075/","title":"【さらばER図設計作業】docker-composeで「SchemaSpy」でデータベースのドキュメントを自動生成するやり方【DBリバースエンジニアリング】"},{"content":"SpringBootにおけるhibernateのpostgresエラー エラーの内容 SpringBootで実装をしている過程で、サーバー起動時に以下のようなエラーが発生するようになりました。\nエラーログ LobCreatorBuilderImpl : HHH000424: Disabling contextual LOB creation as createClob() method threw error : java.lang.reflect.InvocationTargetException java.lang.reflect.InvocationTargetException: null at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_91] at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_91] at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_91] at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_91] at org.hibernate.engine.jdbc.env.internal.LobCreatorBuilderImpl.useContextualLobCreation(LobCreatorBuilderImpl.java:113) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.engine.jdbc.env.internal.LobCreatorBuilderImpl.makeLobCreatorBuilder(LobCreatorBuilderImpl.java:54) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.engine.jdbc.env.internal.JdbcEnvironmentImpl.\u0026lt;init\u0026gt;(JdbcEnvironmentImpl.java:271) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.engine.jdbc.env.internal.JdbcEnvironmentInitiator.initiateService(JdbcEnvironmentInitiator.java:114) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.engine.jdbc.env.internal.JdbcEnvironmentInitiator.initiateService(JdbcEnvironmentInitiator.java:35) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.boot.registry.internal.StandardServiceRegistryImpl.initiateService(StandardServiceRegistryImpl.java:94) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.service.internal.AbstractServiceRegistryImpl.createService(AbstractServiceRegistryImpl.java:263) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.service.internal.AbstractServiceRegistryImpl.initializeService(AbstractServiceRegistryImpl.java:237) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.service.internal.AbstractServiceRegistryImpl.getService(AbstractServiceRegistryImpl.java:214) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.id.factory.internal.DefaultIdentifierGeneratorFactory.injectServices(DefaultIdentifierGeneratorFactory.java:152) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.service.internal.AbstractServiceRegistryImpl.injectDependencies(AbstractServiceRegistryImpl.java:286) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.service.internal.AbstractServiceRegistryImpl.initializeService(AbstractServiceRegistryImpl.java:243) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.service.internal.AbstractServiceRegistryImpl.getService(AbstractServiceRegistryImpl.java:214) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.boot.internal.InFlightMetadataCollectorImpl.\u0026lt;init\u0026gt;(InFlightMetadataCollectorImpl.java:179) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.boot.model.process.spi.MetadataBuildingProcess.complete(MetadataBuildingProcess.java:119) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.jpa.boot.internal.EntityManagerFactoryBuilderImpl.metadata(EntityManagerFactoryBuilderImpl.java:904) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.hibernate.jpa.boot.internal.EntityManagerFactoryBuilderImpl.build(EntityManagerFactoryBuilderImpl.java:935) [hibernate-core-5.3.7.Final.jar:5.3.7.Final] at org.springframework.orm.jpa.vendor.SpringHibernateJpaPersistenceProvider.createContainerEntityManagerFactory(SpringHibernateJpaPersistenceProvider.java:57) [spring-orm-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean.createNativeEntityManagerFactory(LocalContainerEntityManagerFactoryBean.java:365) [spring-orm-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.orm.jpa.AbstractEntityManagerFactoryBean.buildNativeEntityManagerFactory(AbstractEntityManagerFactoryBean.java:390) [spring-orm-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.orm.jpa.AbstractEntityManagerFactoryBean.afterPropertiesSet(AbstractEntityManagerFactoryBean.java:377) [spring-orm-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean.afterPropertiesSet(LocalContainerEntityManagerFactoryBean.java:341) [spring-orm-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.invokeInitMethods(AbstractAutowireCapableBeanFactory.java:1821) [spring-beans-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1758) [spring-beans-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:593) [spring-beans-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:515) [spring-beans-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:320) [spring-beans-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:222) ~[spring-beans-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:318) [spring-beans-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:199) [spring-beans-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.context.support.AbstractApplicationContext.getBean(AbstractApplicationContext.java:1105) ~[spring-context-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:867) ~[spring-context-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:549) ~[spring-context-5.1.5.RELEASE.jar:5.1.5.RELEASE] at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:142) ~[spring-boot-2.1.3.RELEASE.jar:2.1.3.RELEASE] at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:775) ~[spring-boot-2.1.3.RELEASE.jar:2.1.3.RELEASE] at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:397) ~[spring-boot-2.1.3.RELEASE.jar:2.1.3.RELEASE] at org.springframework.boot.SpringApplication.run(SpringApplication.java:316) ~[spring-boot-2.1.3.RELEASE.jar:2.1.3.RELEASE] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1260) ~[spring-boot-2.1.3.RELEASE.jar:2.1.3.RELEASE] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1248) ~[spring-boot-2.1.3.RELEASE.jar:2.1.3.RELEASE] at tech.blogenist.service.account.AccountApplication.main(AccountApplication.java:12) ~[main/:na] at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_91] at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_91] at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_91] at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_91] at org.springframework.boot.devtools.restart.RestartLauncher.run(RestartLauncher.java:49) ~[spring-boot-devtools-2.1.3.RELEASE.jar:2.1.3.RELEASE] Caused by: java.sql.SQLFeatureNotSupportedException: org.postgresql.jdbc.PgConnection.createClob() メソッドはまだ実装されていません。 at org.postgresql.Driver.notImplemented(Driver.java:688) ~[postgresql-42.2.5.jar:42.2.5] at org.postgresql.jdbc.PgConnection.createClob(PgConnection.java:1269) ~[postgresql-42.2.5.jar:42.2.5] ... 49 common frames omitted 発生するタイミングとしては、以下の依存関係を追加したタイミングで起き始めました。\n追加ライブラリ\rorg.postgresql:postgresql:42.2.5\rorg.springframework.boot:spring-boot-starter-data-jpa2.1.3.RELEASE\r原因 こちらは、起動時にcreateClobメソッドが存在するか否かのチェックを行い、メソッドが存在しない場合はcreateClobメソッドを使用しないようにしているらしく、システムの動き的には問題ないようです。\n[adsense-responsive]\r実際に上記エラーがログに出ている状態でもサーバーは起動しており、JPAを使ってPostgreSQLからのデータ取得は正常に出来ました。\nただ、エラーがスローされているため気になってしまいますよね。。。orz\nしかしご安心ください!!!\nhibernate用の設定ファイルを用意することでエラーが出力されないように制御出来ます♪\n手順 hibernate.propertiesを用意 対応方法はとても簡単です。\nクラスパス上にhibernate.propertiesというファイルを用意して、hibernate.jdbc.lob.non_contextual_creation=trueの一文を追加するだけでOKです。\nこれで、起動時に自動でこの設定値が読み込まれて不要な処理をしなくなるため、起動時エラーが出ないようになります。\n確認 では、実際にファイルを配置してアプリを起動してみましょう。\n起動ログ . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.3.RELEASE) 2019-04-17 16:18:03.506 INFO 8858 --- [ restartedMain] t.b.service.account.AccountApplication : Starting AccountApplication on xxx.xxx.xxx.xxx.static.zoot.jp with PID 8858 (/Users/blogenist/develop/git/github/service-account/api/bin/main started by blogenist in /Users/blogenist/develop/git/github/service-account/api) 2019-04-17 16:18:03.510 INFO 8858 --- [ restartedMain] t.b.service.account.AccountApplication : The following profiles are active: common,local 2019-04-17 16:18:03.608 INFO 8858 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : Devtools property defaults active! Set \u0026#39;spring.devtools.add-properties\u0026#39; to \u0026#39;false\u0026#39; to disable 2019-04-17 16:18:03.608 INFO 8858 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : For additional web related logging consider setting the \u0026#39;logging.level.web\u0026#39; property to \u0026#39;DEBUG\u0026#39; 2019-04-17 16:18:05.134 INFO 8858 --- [ restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data repositories in DEFAULT mode. 2019-04-17 16:18:05.266 INFO 8858 --- [ restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 120ms. Found 1 repository interfaces. 2019-04-17 16:18:05.854 INFO 8858 --- [ restartedMain] trationDelegate$BeanPostProcessorChecker : Bean \u0026#39;org.springframework.transaction.annotation.ProxyTransactionManagementConfiguration\u0026#39; of type [org.springframework.transaction.annotation.ProxyTransactionManagementConfiguration$$EnhancerBySpringCGLIB$$7a6336e1] is not eligible for getting processed by all BeanPostProcessors (for example: not eligible for auto-proxying) 2019-04-17 16:18:06.518 INFO 8858 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http) 2019-04-17 16:18:06.550 INFO 8858 --- [ restartedMain] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2019-04-17 16:18:06.551 INFO 8858 --- [ restartedMain] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.16] 2019-04-17 16:18:06.568 INFO 8858 --- [ restartedMain] o.a.catalina.core.AprLifecycleListener : The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: [/Users/blogenist/Library/Java/Extensions:/Library/Java/Extensions:/Network/Library/Java/Extensions:/System/Library/Java/Extensions:/usr/lib/java:.] 2019-04-17 16:18:06.778 INFO 8858 --- [ restartedMain] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2019-04-17 16:18:06.779 INFO 8858 --- [ restartedMain] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 3171 ms 2019-04-17 16:18:07.077 INFO 8858 --- [ restartedMain] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Starting... 2019-04-17 16:18:07.204 INFO 8858 --- [ restartedMain] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Start completed. 2019-04-17 16:18:07.305 INFO 8858 --- [ restartedMain] o.hibernate.jpa.internal.util.LogHelper : HHH000204: Processing PersistenceUnitInfo [ name: default ...] 2019-04-17 16:18:07.485 INFO 8858 --- [ restartedMain] org.hibernate.Version : HHH000412: Hibernate Core {5.3.7.Final} 2019-04-17 16:18:07.488 INFO 8858 --- [ restartedMain] org.hibernate.cfg.Environment : HHH000205: Loaded properties from resource hibernate.properties: {hibernate.bytecode.use_reflection_optimizer=false, hibernate.jdbc.lob.non_contextual_creation=true} 2019-04-17 16:18:07.686 INFO 8858 --- [ restartedMain] o.hibernate.annotations.common.Version : HCANN000001: Hibernate Commons Annotations {5.0.4.Final} 2019-04-17 16:18:07.980 INFO 8858 --- [ restartedMain] org.hibernate.dialect.Dialect : HHH000400: Using dialect: org.hibernate.dialect.PostgreSQL95Dialect 2019-04-17 16:18:08.264 INFO 8858 --- [ restartedMain] o.h.e.j.e.i.LobCreatorBuilderImpl : HHH000421: Disabling contextual LOB creation as hibernate.jdbc.lob.non_contextual_creation is true 2019-04-17 16:18:08.272 INFO 8858 --- [ restartedMain] org.hibernate.type.BasicTypeRegistry : HHH000270: Type registration [java.util.UUID] overrides previous : org.hibernate.type.UUIDBinaryType@545a22f1 2019-04-17 16:18:09.124 INFO 8858 --- [ restartedMain] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit \u0026#39;default\u0026#39; 2019-04-17 16:18:10.240 INFO 8858 --- [ restartedMain] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService \u0026#39;applicationTaskExecutor\u0026#39; 2019-04-17 16:18:10.340 WARN 8858 --- [ restartedMain] aWebConfiguration$JpaWebMvcConfiguration : spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning 2019-04-17 16:18:10.719 INFO 8858 --- [ restartedMain] o.s.b.d.a.OptionalLiveReloadServer : LiveReload server is running on port 35729 2019-04-17 16:18:10.842 INFO 8858 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path \u0026#39;\u0026#39; 2019-04-17 16:18:10.853 INFO 8858 --- [ restartedMain] t.b.service.account.AccountApplication : Started AccountApplication in 8.13 seconds (JVM running for 8.786) 無事に起動時エラーが出なくなりましたね。\n[adsense-responsive]\rもちろん、既存機能も問題なく動いています♪\n参考 Spring Boot 2 プログラミング入門 Amazon Spring Boot 2 プログラミング入門 Hibernate入門: 第２版 Javaフレームワーク入門 Amazon Hibernate入門: JPAModelGen、MetaModel、QueryDsl、Criteria API、HQL、Envers、Spring Framework、JMS/MQトランザクション対応：第２版 Javaフレームワーク入門 終わりに 以上のように、専用の設定ファイルを用意するだけでエラーが発生しなくなりました。\n原因がわからないといまいち解決出来ないようなエラー内容ですので、お困りの方はこちらの記事を参考にして頂ければなと思います。\n","date":"2019-04-17T23:33:56+09:00","image":"/wp-content/uploads/2019/04/hibernatePostgresErrorEye.png","permalink":"/2019/04/17/8057/","title":"【hibernate】「PgConnection.createClob() メソッドはまだ実装されていません。」エラーの原因と回避方法【SQLFeatureNotSupportedException】"},{"content":"パッチ管理を簡単にしよう 前回は、APIシステムをレイヤー構造にリファクタリングして動くところまでをご紹介しました。\n関連記事 【マイクロサービス】流行りのSpring Boot 2 \u0026#43; Gradle \u0026#43; Java8でマルチプロジェクトな個人開発をしていこう レイヤー構造化編【DDD(ドメイン駆動設計)】 2019/04/10 3090文字 約7分で読めます 今回は、データベース接続をするための準備として、DB定義用のパッチSQLファイルを用意し、Gradle経由でFlywayを用いて自動で適用させるところまでを整えていこうと思います。\nFlywayとは Flywayは、オープンソースで開発されているデータベースのマイグレーションツールです。\nVersion control for your database.\rRobust schema evolution across all your environments.\rWith ease, pleasure and plain SQL.Flyway by Boxfuse • Database Migrations Made Easy.\n特定のルールに沿ってパッチファイルを管理することで、コマンドライン一発でDBのマイグレーションを行うことが出来るので、当て忘れや順番を間違えたりなどのヒューマンエラーを避ける事が出来ます。\n[adsense-responsive]\rまた、簡単にデータベースをリセットしたり、afterMigrate機能を使って開発データを入れる事が出来るので開発においても非常に有効なツールとなっています。\n今回はGradleのSpringBootプロジェクトへのFlywayの導入方法と簡単なマイグレーション処理をご紹介していこうと思います。\n手順 完成系 今回は以下のような非常にシンプルなテーブル構造を作ってみようと思います。\nテーブル名\r用途\raccount.accounts\rアカウントのメインレコードを管理\raccount.account_infomations\rアカウントの基本情報を管理\raccount.sex_types\r性別マスター\raccount.current_account_infomations\r各アカウントの基本情報レコードは蓄積を想定するため、現在の有効な基本情報をマッピングするためのテーブル\rapplication-{profile}.ymlの設定 まずは、Flywayを実行するにあたって必要な項目をapplication-{profile}.ymlに定義していきます。\nなお、springbootには公式でFlywayの設定項目がありますが、今回は設定が反映されてしまって起動時に自動実行させたくないのもあるため、意図的にflywayMigrateという独自階層で定義していきます。\napi/src/main/resources/application-local.yml spring: flywayMigrate: # 独自項目 driver: org.postgresql.Driver url: jdbc:postgresql://localhost:5432/local_account_db username: root password: root encoding: UTF-8 sqlMigrationPrefix: patch_ migrateLocation: filesystem:../datasource/flyway/migration/migrate isAfterMigratable: true # afterMigrateは環境によっては実行したくないこともあると思うのでbool値を定義 afterMigrateLocation: filesystem:../datasource/flyway/migration/aftermigrate build.gradleの修正 datasourceプロジェクト 今回はシステム内部からFlywayを呼ぶことは想定していないので、dependenciesへの追加は不要です。\n代わりにGradleから実行するためにpluginsに指定をする必要があります。\ndatasource/build.gradleを以下のように修正してみました。\ndatasource/build.gradle plugins { id \u0026#34;org.flywaydb.flyway\u0026#34; version \u0026#34;5.1.3\u0026#34; // pluginsブロックはConstantの必要があるとのこと } def env = System.getenv( \u0026#39;SPRING_PROFILES_ACTIVE\u0026#39; ) // 実行時に定義した環境変数からprofileを取得 def path = \u0026#34;${accountService.applicationYmlPath}\u0026#34;; def applicationYml = new org.yaml.snakeyaml.Yaml().load( new File( path + \u0026#34;application-\u0026#34; + env +\u0026#34;.yml\u0026#34;).newInputStream() )// 対象プロファイルのymlを読み込み flyway { // flywayの初期設定 driver=\u0026#34;${applicationYml.spring.flywayMigrate.driver}\u0026#34; url = \u0026#34;${applicationYml.spring.flywayMigrate.url}\u0026#34; user = \u0026#34;${applicationYml.spring.flywayMigrate.username}\u0026#34; password = \u0026#34;${applicationYml.spring.flywayMigrate.password}\u0026#34; encoding = \u0026#34;${applicationYml.spring.flywayMigrate.encoding}\u0026#34; sqlMigrationPrefix = \u0026#34;${applicationYml.spring.flywayMigrate.sqlMigrationPrefix}\u0026#34; if(\u0026#34;${applicationYml.spring.flywayMigrate.isAfterMigratable}\u0026#34;.toBoolean()){ // afterMigrateをする場合のみafterMigrateのパスを追加 locations = [ \u0026#34;${applicationYml.spring.flywayMigrate.migrateLocation}\u0026#34;, \u0026#34;${applicationYml.spring.flywayMigrate.afterMigrateLocation}\u0026#34; ] }else{ locations = [ \u0026#34;${applicationYml.spring.flywayMigrate.migrateLocation}\u0026#34; ] } } dependencies { implementation project(\u0026#34;:value\u0026#34;) implementation project(\u0026#34;:entity\u0026#34;) } devtoolsプロジェクト devtools/build.gradleではgradle実行時に必要なPostgreSQLのドライバーとymlファイルを読み込むためのライブラリをクラスパスに追加します。\ndevtools/build.gradle buildscript { apply from: \u0026#39;property.gradle\u0026#39; ext { } repositories { mavenCentral() } dependencies { classpath(\u0026#34;org.springframework.boot:spring-boot-gradle-plugin:${accountService.springBootVersion}\u0026#34;) classpath \u0026#34;org.yaml:snakeyaml:${accountService.snakeyamlVersion}\u0026#34;// 追加 classpath \u0026#34;org.postgresql:postgresql:${accountService.postgresVersion}\u0026#34;// 追加 } } allprojects { apply plugin: \u0026#39;eclipse\u0026#39; } subprojects { apply plugin: \u0026#34;java\u0026#34; apply plugin: \u0026#34;io.spring.dependency-management\u0026#34; group = accountService.group version = accountService.version sourceCompatibility = accountService.sourceCompatibility repositories { mavenCentral() } dependencyManagement { } dependencies { implementation \u0026#34;org.springframework.boot:spring-boot-starter:${accountService.springBootVersion}\u0026#34; testImplementation \u0026#34;org.springframework.boot:spring-boot-starter-test:${accountService.springBootVersion}\u0026#34; } } パッチファイル 次にパッチファイルを用意しましょう。今回は以下のような形で用意しました。\n[adsense-responsive]\rtree .datasource ...　省略 └── flyway └── migration ├── afterMigrate │ └── afterMigrate.sql └── migrate └── 001 └── 000 ├── patch_001.000.001__create_schema_account.sql ├── patch_001.000.002__create_table_account.accounts.sql ├── patch_001.000.003__create_sequence_account.account_id.sql ├── patch_001.000.004__create_sequence_account.account_infomation_id.sql ├── patch_001.000.005__create_table_account.sex_type.sql ├── patch_001.000.006__insert_account.sex_type.sql └── patch_001.000.007__create_table_account.account_infomations.sql patch_001.000.001__create_schema_account.sql DROP SCHEMA IF EXISTS account CASCADE; CREATE SCHEMA IF NOT EXISTS account; COMMENT ON SCHEMA account IS \u0026#39;アカウント\u0026#39;; patch_001.000.002__create_table_account.accounts.sql CREATE TABLE account.accounts ( id integer NOT NULL, created_at timestamp without time zone NOT NULL DEFAULT now(), updated_at timestamp without time zone NOT NULL DEFAULT now(), CONSTRAINT pk_accounts PRIMARY KEY (id) ); COMMENT ON TABLE account.accounts IS \u0026#39;アカウント一覧\u0026#39;; COMMENT ON COLUMN account.accounts.id IS \u0026#39;ID\u0026#39;; COMMENT ON COLUMN account.accounts.created_at IS \u0026#39;作成日時\u0026#39;; COMMENT ON COLUMN account.accounts.updated_at IS \u0026#39;更新日時\u0026#39;; patch_001.000.003__create_sequence_account.account_id.sql CREATE SEQUENCE account.account_id START WITH 10001; patch_001.000.004__create_sequence_account.account_infomation_id.sql CREATE SEQUENCE account.account_infomation_id START WITH 20001; patch_001.000.005__create_table_account.sex_type.sql CREATE TABLE account.sex_types ( type character varying(50) NOT NULL, name character varying(50) NOT NULL, priority smallint NOT NULL, created_at timestamp without time zone NOT NULL DEFAULT now(), updated_at timestamp without time zone NOT NULL DEFAULT now(), CONSTRAINT pk_sex_types PRIMARY KEY (type) ); COMMENT ON TABLE account.sex_types IS \u0026#39;性別種別マスタ\u0026#39;; COMMENT ON COLUMN account.sex_types.type IS \u0026#39;性別種別\u0026#39;; COMMENT ON COLUMN account.sex_types.name IS \u0026#39;性別種別名\u0026#39;; COMMENT ON COLUMN account.sex_types.priority IS \u0026#39;優先度\u0026#39;; COMMENT ON COLUMN account.sex_types.created_at IS \u0026#39;作成日時\u0026#39;; COMMENT ON COLUMN account.sex_types.updated_at IS \u0026#39;更新日時\u0026#39;; patch_001.000.006__insert_account.sex_type.sql INSERT INTO account.sex_types ( type, name, priority ) VALUES ( \u0026#39;NONE\u0026#39;, \u0026#39;未設定\u0026#39;, 0 ),( \u0026#39;MALE\u0026#39;, \u0026#39;男性\u0026#39;, 1 ),( \u0026#39;FEMALE\u0026#39;, \u0026#39;女性\u0026#39;, 2 ); patch_001.000.007__create_table_account.account_infomations.sql CREATE TABLE account.account_infomations ( id integer NOT NULL, account_id integer NOT NULL, name character varying(50) NOT NULL, age integer NOT NULL, sex_type character varying(50) NOT NULL, display_name character varying(50) NOT NULL, created_at timestamp without time zone NOT NULL DEFAULT now(), updated_at timestamp without time zone NOT NULL DEFAULT now(), CONSTRAINT pk_account_infomations PRIMARY KEY (id), CONSTRAINT fk_this_accounts FOREIGN KEY (account_id) REFERENCES account.accounts (id) MATCH SIMPLE ON UPDATE CASCADE ON DELETE CASCADE, CONSTRAINT fk_this_sex_types FOREIGN KEY (sex_type) REFERENCES account.sex_types (type) MATCH SIMPLE ON UPDATE NO ACTION ON DELETE NO ACTION ); COMMENT ON TABLE account.account_infomations IS \u0026#39;アカウント情報\u0026#39;; COMMENT ON COLUMN account.account_infomations.id IS \u0026#39;ID\u0026#39;; COMMENT ON COLUMN account.account_infomations.account_id IS \u0026#39;アカウントID\u0026#39;; COMMENT ON COLUMN account.account_infomations.name IS \u0026#39;名前\u0026#39;; COMMENT ON COLUMN account.account_infomations.age IS \u0026#39;年齢\u0026#39;; COMMENT ON COLUMN account.account_infomations.sex_type IS \u0026#39;性別\u0026#39;; COMMENT ON COLUMN account.account_infomations.display_name IS \u0026#39;画面表示名称\u0026#39;; COMMENT ON COLUMN account.account_infomations.created_at IS \u0026#39;作成日時\u0026#39;; COMMENT ON COLUMN account.account_infomations.updated_at IS \u0026#39;更新日時\u0026#39;; patch_001.000.008__create_table_account.current_account_infomations.sql CREATE TABLE account.current_account_infomations ( account_id integer NOT NULL, CREATE TABLE account.current_account_infomations ( account_id integer NOT NULL, account_infomation_id integer NOT NULL, created_at timestamp without time zone NOT NULL DEFAULT now(), updated_at timestamp without time zone NOT NULL DEFAULT now(), CONSTRAINT pk_latest_account_infomations PRIMARY KEY (account_id), CONSTRAINT fk_this_accounts FOREIGN KEY (account_id) REFERENCES account.accounts (id) MATCH SIMPLE ON UPDATE CASCADE ON DELETE CASCADE, CONSTRAINT fk_this_account_infomations FOREIGN KEY (account_infomation_id) REFERENCES account.account_infomations (id) MATCH SIMPLE ON UPDATE CASCADE ON DELETE CASCADE, CONSTRAINT uq_current_account_infomations_account_infomation_id UNIQUE (account_infomation_id) ); COMMENT ON TABLE account.current_account_infomations IS \u0026#39;現行アカウント情報\u0026#39;; COMMENT ON COLUMN account.current_account_infomations.account_id IS \u0026#39;アカウントID\u0026#39;; COMMENT ON COLUMN account.current_account_infomations.account_infomation_id IS \u0026#39;アカウント情報ID\u0026#39;; COMMENT ON COLUMN account.current_account_infomations.created_at IS \u0026#39;作成日時\u0026#39;; COMMENT ON COLUMN account.current_account_infomations.updated_at IS \u0026#39;更新日時\u0026#39;; afterMigrateファイル 次にafterMigrateファイルを用意しましょう。\nafterMigrateとは、パッチファイルの適用が終了した際に一度だけ適用されるSQLファイルの事を指します。\nこちらを使うことで、各環境で同一データを使って動作確認を行ったり、簡単にデータベースのデータを同一の状態に戻すことが出来るのでとても便利です♪\nafterMigrate.sql -- #################### -- # アカウント1 -- #################### INSERT INTO account.accounts ( id ) VALUES ( (SELECT nextval(\u0026#39;account.account_id\u0026#39;)) ); INSERT INTO account.account_infomations ( id, account_id, name, age, sex_type, display_name ) values ( (SELECT nextval(\u0026#39;account.account_infomation_id\u0026#39;)), (SELECT MAX(id) FROM account.accounts), \u0026#39;山田　太郎\u0026#39;, 19, \u0026#39;MALE\u0026#39;, \u0026#39;山田　ローカル　太郎\u0026#39; ); INSERT INTO account.current_account_infomations ( account_id, account_infomation_id ) values ( (SELECT MAX(id) FROM account.accounts), (SELECT MAX(id) FROM account.account_infomations) ); -- #################### -- # アカウント2 -- #################### INSERT INTO account.accounts ( id ) VALUES ( (SELECT nextval(\u0026#39;account.account_id\u0026#39;)) ); INSERT INTO account.account_infomations ( id, account_id, name, age, sex_type, display_name ) values ( (SELECT nextval(\u0026#39;account.account_infomation_id\u0026#39;)), (SELECT MAX(id) FROM account.accounts), \u0026#39;田中　花子\u0026#39;, 20, \u0026#39;FEMALE\u0026#39;, \u0026#39;田中　ローカル　花子\u0026#39; ); INSERT INTO account.current_account_infomations ( account_id, account_infomation_id ) values ( (SELECT MAX(id) FROM account.accounts), (SELECT MAX(id) FROM account.account_infomations) ); -- #################### -- # アカウント3 -- #################### INSERT INTO account.accounts ( id ) VALUES ( (SELECT nextval(\u0026#39;account.account_id\u0026#39;)) ); INSERT INTO account.account_infomations ( id, account_id, name, age, sex_type, display_name ) values ( (SELECT nextval(\u0026#39;account.account_infomation_id\u0026#39;)), (SELECT MAX(id) FROM account.accounts), \u0026#39;山田　二郎\u0026#39;, 1, \u0026#39;NONE\u0026#39;, \u0026#39;山田　ローカル　二郎\u0026#39; ); INSERT INTO account.current_account_infomations ( account_id, account_infomation_id ) values ( (SELECT MAX(id) FROM account.accounts), (SELECT MAX(id) FROM account.account_infomations) ); 実行確認 以下のコマンドを実行してみてください。\nSPRING_PROFILES_ACTIVE=local ./gradlew flywayMigrate Starting a Gradle Daemon, 1 busy Daemon could not be reused, use --status for details BUILD SUCCESSFUL in 7s 2 actionable tasks: 2 executed 確認 それでは、DBの中身を見てみましょう。\nスキーマ一覧 local_account_db=# \\dn List of schemas Name | Owner ---------+---------- account | root public | postgres (2 rows) [adsense-responsive]\rテーブル一覧 local_account_db=# \\dt List of relations Schema | Name | Type | Owner ---------+-----------------------------+-------+------- account | account_infomations | table | root account | accounts | table | root account | current_account_infomations | table | root account | sex_types | table | root (4 rows) データ確認 local_account_db=# select * from account.accounts INNER JOIN account.account_infomations ON accounts.id = account_infomations.account_id INNER JOIN account.sex_types ON account_infomations.sex_type = sex_types.type INNER JOIN account.current_account_infomations ON accounts.id = current_account_infomations.account_id ; id | created_at | updated_at | id | account_id | name | age | sex_type | display_name | created_at | updated_at | type | name | priority | created_at | updated_at | account_id | account_infomation_id | created_at | updated_at -------+----------------------------+----------------------------+-------+------------+------------+-----+----------+----------------------+----------------------------+----------------------------+--------+--------+----------+----------------------------+----------------------------+------------+-----------------------+----------------------------+---------------------------- 10001 | 2019-04-20 20:29:26.320925 | 2019-04-20 20:29:26.320925 | 20001 | 10001 | 山田　太郎 | 19 | MALE | 山田　ローカル　太郎 | 2019-04-20 20:29:26.320925 | 2019-04-20 20:29:26.320925 | MALE | 男性 | 1 | 2019-04-20 20:29:26.269542 | 2019-04-20 20:29:26.269542 | 10001 | 20001 | 2019-04-20 20:29:26.320925 | 2019-04-20 20:29:26.320925 10002 | 2019-04-20 20:29:26.320925 | 2019-04-20 20:29:26.320925 | 20002 | 10002 | 田中　花子 | 20 | FEMALE | 田中　ローカル　花子 | 2019-04-20 20:29:26.320925 | 2019-04-20 20:29:26.320925 | FEMALE | 女性 | 2 | 2019-04-20 20:29:26.269542 | 2019-04-20 20:29:26.269542 | 10002 | 20002 | 2019-04-20 20:29:26.320925 | 2019-04-20 20:29:26.320925 10003 | 2019-04-20 20:29:26.320925 | 2019-04-20 20:29:26.320925 | 20003 | 10003 | 山田　二郎 | 1 | NONE | 山田　ローカル　二郎 | 2019-04-20 20:29:26.320925 | 2019-04-20 20:29:26.320925 | NONE | 未設定 | 0 | 2019-04-20 20:29:26.269542 | 2019-04-20 20:29:26.269542 | 10003 | 20003 | 2019-04-20 20:29:26.320925 | 2019-04-20 20:29:26.320925 (3 rows) 正常にデータベース構造が構築され、AfterMigrateのデータも登録されていることが分かりますね♪\nFlywayの適用状態はpublic.flyway_schema_historyが自動で生成されてそちらで管理されます。\nFlyway管理情報 local_account_db=# select * from public.flyway_schema_history; installed_rank | version | description | type | script | checksum | installed_by | installed_on | execution_time | success ----------------+-------------+-----------------------------------------------+------+---------------------------------------------------------------------- --------+-------------+--------------+----------------------------+----------------+--------- 1 | 001.000.001 | create schema account | SQL | 001/000/patch_001.000.001__create_schema_account.sql | -1992181989 | root | 2019-04-16 22:34:44.833448 | 10 | t 2 | 001.000.002 | create table account.accounts | SQL | 001/000/patch_001.000.002__create_table_account.accounts.sql | -1355234609 | root | 2019-04-16 22:34:44.860296 | 14 | t 3 | 001.000.003 | create sequence account.account id | SQL | 001/000/patch_001.000.003__create_sequence_account.account_id.sql | -1825999221 | root | 2019-04-16 22:34:44.886777 | 5 | t 4 | 001.000.004 | create sequence account.account infomation id | SQL | 001/000/patch_001.000.004__create_sequence_account.account_infomation_id.sql | 882609325 | root | 2019-04-16 22:34:44.908961 | 5 | t 5 | 001.000.005 | create table account.sex type | SQL | 001/000/patch_001.000.005__create_table_account.sex_type.sql | -326431366 | root | 2019-04-16 22:34:44.965301 | 20 | t 6 | 001.000.006 | insert account.sex type | SQL | 001/000/patch_001.000.006__insert_account.sex_type.sql | -1712490080 | root | 2019-04-16 22:34:45.005898 | 5 | t 7 | 001.000.007 | create table account.account infomations | SQL | 001/000/patch_001.000.007__create_table_account.account_infomations.sql | -1486580974 | root | 2019-04-16 22:34:45.034252 | 24 | t (7 rows) また、afterMigrateを行いたくない場合はisAfterMigratableをfalseにするだけでスキップされます。\n検証や本番ではfalseにしておくと良いでしょう。\n最初からDB定義を作り直したい場合 ローカル開発等で現在のデータベース構造をリセットして、最初からパッチやafterMigrateを当て直したい場合は、SPRING_PROFILES_ACTIVE=local ./gradlew flywayClean flywayMigrateで簡単に出来ちゃいます。\n終わりに これでDB定義の更新がコマンド一つでサクッと出来るようになりました。\n次回はStubにしているデータソースの処理を実際にDBから取得するように変えていきたいと思います。\n","date":"2019-04-16T22:57:23+09:00","image":"/wp-content/uploads/2019/04/gradleWithFlywayEye.png","permalink":"/2019/04/16/8028/","title":"【DBマイグレーション】GradleにFlywayを組み込んでパッチ適用を自動化しよう【SpringBoot2】"},{"content":"EclipseにおけるSpringBootデバック時の謎のエラー Eclipse環境でSpringBootのシステムを開発している場合、もちろんデバッグを行うと思うのですが、SilentExitException という、謎のエラーが発生すると思います。\npackage org.springframework.boot.devtools.restart.SilentExitExceptionHandler /* * Copyright 2012-2017 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the \u0026#34;License\u0026#34;); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an \u0026#34;AS IS\u0026#34; BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ package org.springframework.boot.devtools.restart; import java.lang.Thread.UncaughtExceptionHandler; import java.util.Arrays; /** * {@link UncaughtExceptionHandler} decorator that allows a thread to exit silently. * * @author Phillip Webb * @author Andy Wilkinson */ class SilentExitExceptionHandler implements UncaughtExceptionHandler { private final UncaughtExceptionHandler delegate; SilentExitExceptionHandler(UncaughtExceptionHandler delegate) { this.delegate = delegate; } @Override public void uncaughtException(Thread thread, Throwable exception) { if (exception instanceof SilentExitException) { if (isJvmExiting(thread)) { preventNonZeroExitCode(); } return; } if (this.delegate != null) { this.delegate.uncaughtException(thread, exception); } } private boolean isJvmExiting(Thread exceptionThread) { for (Thread thread : getAllThreads()) { if (thread != exceptionThread \u0026amp;\u0026amp; thread.isAlive() \u0026amp;\u0026amp; !thread.isDaemon()) { return false; } } return true; } protected Thread[] getAllThreads() { ThreadGroup rootThreadGroup = getRootThreadGroup(); Thread[] threads = new Thread[32]; int count = rootThreadGroup.enumerate(threads); while (count == threads.length) { threads = new Thread[threads.length * 2]; count = rootThreadGroup.enumerate(threads); } return Arrays.copyOf(threads, count); } private ThreadGroup getRootThreadGroup() { ThreadGroup candidate = Thread.currentThread().getThreadGroup(); while (candidate.getParent() != null) { candidate = candidate.getParent(); } return candidate; } protected void preventNonZeroExitCode() { System.exit(0); } public static void setup(Thread thread) { UncaughtExceptionHandler handler = thread.getUncaughtExceptionHandler(); if (!(handler instanceof SilentExitExceptionHandler)) { handler = new SilentExitExceptionHandler(handler); thread.setUncaughtExceptionHandler(handler); } } public static void exitCurrentThread() { throw new SilentExitException(); //　ここでエラーが発生 } private static class SilentExitException extends RuntimeException { } } ブレークポイントを貼っているわけでもないのに、毎回デバッグ起動時に引っかかるので、正直とても厄介ですorz\n実はこれ、spring-boot-devtoolsのバグのようです\u003e\u003c\nThis is unfortunately a know issue with the new spring-boot-devtools module (see https://github.com/spring-projects/spring-boot/issues/3100). We use this trick to kill the main thread so that we can replace it with a re-loadable version. So far I've not found a way to prevent the debug breakpoint from triggering.\rFor now, you can toggle the \u0026ldquo;suspend execution on uncaught exceptions\u0026rdquo; checkbox in Java -\u0026gt; Debug preferences to prevent it from happening.java - Breakpoint at \u0026ldquo;throw new SilentExitException()\u0026rdquo; in Eclipse + Spring Boot - Stack Overflow\nしかし安心してください。\nEclipseの設定を変えるだけでエラーが発生する事無くなるので、今回はその手順をご紹介致します。\n手順 Eclipseの設定変更 手順は簡単です。\nEclipseの設定からJava\u003eDebugを選択すると、Suspend execution on uncaught exceptionsにチェックが入っていると思います。\nこのチェックを外すだけでデバッグ起動時のエラーで引っかかる事がなくなります♪\n終わりに 以上のように、EclipseでSpringBoot開発をやる際には必ずやっておいたほうが良い設定です。\n小さな時間ロスも積み重なると作業時間を大量に無駄にしてしまうので、皆さんも早めに設定をしておくと良いでしょう♪\n","date":"2019-04-12T13:34:09+09:00","image":"/wp-content/uploads/2019/04/eclipseSpringBootDebugErrorFixEye.png","permalink":"/2019/04/12/7991/","title":"【Eclipse】SpringBootデバッグ時に発生するSilentExitExceptionの原因と対処方法【spring-boot-devtools】"},{"content":"土台は整ったのでAPIモジュールとして動かそう 前回の記事では、APIとして最低限動くところまでご紹介しました。\n関連記事 【マイクロサービス】流行りのSpring Boot 2 \u0026#43; Gradle \u0026#43; Java8でマルチプロジェクトな個人開発をしていこう API化編【DDD(ドメイン駆動設計)】 2019/04/06 1254文字 約3分で読めます 今回はレイヤー構造を整えていこうと思います。\n手順 プロジェクトの構成 まずは各プロジェクトの構成を整理していきましょう。\n今回は以下のような構造にしてみようと思います。\nプロジェクト\r説明\rapiプロジェクト\rRESTfulなユーザーインターフェースを管理\n※serviceやmodelはAPIやWEB、BATCH単位で異なるのでこの中にmodel/serviceパッケージを切っていきます\rdatasourceプロジェクト\rAPIアクセスやDBアクセスなどを管理\rentityプロジェクト\rDBテーブルなどのEntityを管理\rvalueプロジェクト\r項目単位のValueオブジェクトを管理\r果たしてこれが正解なのかは分かりませんが、一旦はこちらで進めてみようと思います。\n考え方によっては、ServiceとModelも別プロジェクトにして参照する場合もありますが、API用のモデルやサービスをWEBやBatchで使うことはなく、必要のない依存の結果無駄に容量が大きくなってしまうので、上記のようなプロジェクト構成にしています。\nただ、今回はレイヤー毎にプロジェクトを分けないだけで設計的にはMVC構造を考慮して行く想定でいます！\nvalueプロジェクト まずは一番コアとなるvalueプロジェクトです。\n[adsense-responsive]\rこのプロジェクトでは名前やメールアドレス、住所などの一項目レベルを管理していきます。\nモデル毎にフィールドを用意するとバリデーションや記述がばらけてしまうため、一元管理がしにくくなってしまいます。\nそこで、valueプロジェクトで管理することでそのサービスに登場する項目やバリデーションにブレがなくなるので、バグや仕様のねじれなども抑えることが出来るかな？と言う考えです。\nentityプロジェクト 次はentityプロジェクトです。\nこちらはデータ構造に対するentityモデルを管理するプロジェクトです。\n例えば、DBのテーブルモデル等はAPIやWEB、Batchから見て必ず同一である必要があるため、このentityプロジェクトで管理して行く想定です。\ndatasourceプロジェクト 次はdatasourceプロジェクトです。\nこちらは外部APIやDatabaseアクセスなどを行うクラスを管理するプロジェクトです。\nこちらも同じく、外部APIやデータベースは、APIやWeb、バッチで共通なのでプロジェクトとして切り出しています。\napiプロジェクト 最後にapiプロジェクトです。\nこちらはこれまでの手順で作ってありますが、この中にサブパッケージとして、controller/model/serviceパッケージを構築して行く想定です。\nmodelパッケージ entityモデルと違い、I/Oモデルは必ずしもentityと一致するわけではないので、そのクッションをこのmodelで吸収して、共通のEntityモデルへと変換する想定です。\nserviceパッケージ こちらはAPI単位の業務処理を管理して行きます。\n同じ会員登録でも、APIからの処理とバッチからの処理で業務内容が異なる可能性があるので、serviceも別プロジェクトにせずにAPIプロジェクトの一部として行きます。\ncontrollerパッケージ こちらは言わずもがなですが、RESTfulなAPIを構築するために必要不可欠なパッケージです。\ninfrastructureパッケージ 最後にinfrastructureパッケージです。\n[adsense-responsive]\rこちらはAPIモジュールに関する基盤周りの設定や共通定数等を管理していきます。\n各プロジェクトの作成 では、実際に各プロジェクトを追加していきましょう。\nディレクトリ構成 ディレクトリ構成は以下のような形になりました。\ntree -L 2 . ├── README.md ├── api │ ├── build.gradle │ └── src ├── datasource │ ├── build.gradle │ └── src ├── devtools │ ├── api │ ├── build.gradle │ ├── gradle │ ├── gradlew │ ├── gradlew.bat │ ├── property.gradle │ └── settings.gradle ├── entity │ ├── build.gradle │ └── src └── value ├── build.gradle └── src 各プロジェクトのビルド関連ファイル 次に、各プロジェクトのビルド関連ファイルの設定を見ていきましょう。\n今回はdevtoolsプロジェクトのbuild.grdleは特に変更ないので割愛します\ndevtoolsプロジェクト devtools/settings.gradle pluginManagement { repositories { gradlePluginPortal() } } rootProject.name = \u0026#39;devtools\u0026#39; includeFlat \u0026#39;value\u0026#39; includeFlat \u0026#39;entity\u0026#39; includeFlat \u0026#39;datasource\u0026#39; includeFlat \u0026#39;api\u0026#39; devtools/property.gradle ext { accountService = [:] accountService.springBootVersion = \u0026#39;2.1.3.RELEASE\u0026#39; accountService.sourceCompatibility = 1.8 accountService.group = \u0026#39;tech.blogenist.service\u0026#39; accountService.version = \u0026#39;0.0.1-SNAPSHOT\u0026#39; accountService.lombokVersion = \u0026#39;1.18.6\u0026#39; } apiプロジェクト api/build.gradle springBoot { mainClassName = \u0026#39;tech.blogenist.service.account.AccountApplication\u0026#39; } repositories { } dependencies { implementation project(\u0026#34;:value\u0026#34;) implementation project(\u0026#34;:entity\u0026#34;) implementation project(\u0026#34;:datasource\u0026#34;) implementation \u0026#34;org.springframework.boot:spring-boot-starter-web:${accountService.springBootVersion}\u0026#34; implementation \u0026#34;org.springframework.boot:spring-boot-devtools:${accountService.springBootVersion}\u0026#34; compileOnly \u0026#34;org.projectlombok:lombok:${accountService.lombokVersion}\u0026#34; annotationProcessor \u0026#34;org.projectlombok:lombok:${accountService.lombokVersion}\u0026#34; } datasourceプロジェクト datasource/build.gradle repositories { } dependencies { implementation project(\u0026#34;:value\u0026#34;) implementation project(\u0026#34;:entity\u0026#34;) } entityプロジェクト entity/build.gradle repositories { } dependencies { implementation project(\u0026#34;:value\u0026#34;) compileOnly \u0026#34;org.projectlombok:lombok:${accountService.lombokVersion}\u0026#34; annotationProcessor \u0026#34;org.projectlombok:lombok:${accountService.lombokVersion}\u0026#34; } valueプロジェクト value/build.gradle repositories { } dependencies { compileOnly \u0026#34;org.projectlombok:lombok:${accountService.lombokVersion}\u0026#34; annotationProcessor \u0026#34;org.projectlombok:lombok:${accountService.lombokVersion}\u0026#34; } ポイント [adsense-responsive]\rポイントは依存関係の優先度を考えて、dependencies句にてプロジェクトを参照する必要があります。\nまた、今回はlombokも使いたいので事前に依存関係に追加しています。\nAPIをそれぞれのレイヤーのクラスを使うように修正 では、プロジェクト構成が整ったところで前回作成したAPIを改修していきましょう。\n今回の修正で以下のようになります。\nvalueプロジェクト AccountIdValueクラス tech.blogenist.service.account.value.account.AccountIdValue package tech.blogenist.service.account.value.account; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountIdValue { private Integer value; } AccountNameValueクラス tech.blogenist.service.account.value.account.AccountNameValue package tech.blogenist.service.account.value.account; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountNameValue { private String value; } AgeValueクラス tech.blogenist.service.account.value.account.AgeValue package tech.blogenist.service.account.value.account; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AgeValue { private Integer value; } SexValueクラス tech.blogenist.service.account.value.account.SexValue package tech.blogenist.service.account.value.account; import lombok.AllArgsConstructor; import lombok.Getter; @AllArgsConstructor(staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor(staticName = \u0026#34;empty\u0026#34; ) @Data public class SexValue { private Type value; @AllArgsConstructor public enum Type { NONE( \u0026#34;未設定\u0026#34; ), MALE( \u0026#34;男性\u0026#34; ), FEMALE( \u0026#34;女性\u0026#34; ); @Getter private String lavel; } } entityプロジェクト AccountTableEntityクラス tech.blogenist.service.account.entity.db.account.AccountTableEntity package tech.blogenist.service.account.entity.db.account; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import tech.blogenist.service.account.value.account.AccountIdValue; import tech.blogenist.service.account.value.account.AccountNameValue; import tech.blogenist.service.account.value.account.AgeValue; import tech.blogenist.service.account.value.account.SexValue; @Builder @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountTableEntity { private AccountIdValue id; private AccountNameValue name; private AgeValue age; private SexValue sex; } datasourceプロジェクト AccountDataSourceクラス tech.blogenist.service.account.datasource.db.account.AccountDataSource package tech.blogenist.service.account.datasource.db.account; import java.util.Arrays; import java.util.List; import org.springframework.stereotype.Repository; import tech.blogenist.service.account.entity.db.account.AccountTableEntity; import tech.blogenist.service.account.value.account.AccountIdValue; import tech.blogenist.service.account.value.account.AccountNameValue; import tech.blogenist.service.account.value.account.AgeValue; import tech.blogenist.service.account.value.account.SexValue; @Repository public class AccountDataSource { public List\u0026lt; AccountTableEntity \u0026gt; findBy() { // 一旦Stub処理 return Arrays.asList( AccountTableEntity.builder() .id( AccountIdValue.of( 10001 ) ) .name( AccountNameValue.of( \u0026#34;山田　太郎\u0026#34; ) ) .age( AgeValue.of( 20 ) ) .sex( SexValue.of( SexValue.Type.MALE ) ) .build(), AccountTableEntity.builder() .id( AccountIdValue.of( 10002 ) ) .name( AccountNameValue.of( \u0026#34;山田　花子\u0026#34; ) ) .age( AgeValue.of( 18 ) ) .sex( SexValue.of( SexValue.Type.FEMALE ) ) .build() ); } } apiプロジェクト AccountListingElementModelクラス tech.blogenist.service.account.api.model.account.listing.response.AccountListingElementModel package tech.blogenist.service.account.api.model.account.listing.response; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import tech.blogenist.service.account.value.account.AccountIdValue; import tech.blogenist.service.account.value.account.AccountNameValue; import tech.blogenist.service.account.value.account.AgeValue; import tech.blogenist.service.account.value.account.SexValue; @Builder @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountListingElementModel { private AccountIdValue id; private AccountNameValue name; private AgeValue age; private SexValue sex; } AccountListingResponseModelクラス tech.blogenist.service.account.api.model.account.listing.response.AccountListingResponseModel package tech.blogenist.service.account.api.model.account.listing.response; import java.util.List; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; @Builder @AllArgsConstructor( staticName = \u0026#34;of\u0026#34; ) @NoArgsConstructor( staticName = \u0026#34;empty\u0026#34; ) @Data public class AccountListingResponseModel { private List\u0026lt; AccountListingElementModel \u0026gt; accounts; } AccountListingServiceクラス [adsense-responsive]\rtech.blogenist.service.account.apiservice.account.listing.AccountListingService package tech.blogenist.service.account.apiservice.account.listing; import java.util.List; import java.util.stream.Collectors; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import tech.blogenist.service.account.api.model.account.listing.response.AccountListingElementModel; import tech.blogenist.service.account.api.model.account.listing.response.AccountListingResponseModel; import tech.blogenist.service.account.datasource.db.account.AccountDataSource; import tech.blogenist.service.account.entity.db.account.AccountTableEntity; @Service public class AccountListingService { @Autowired private AccountDataSource accountDataSource; public AccountListingResponseModel findBy() { List\u0026lt; AccountTableEntity \u0026gt; entities = accountDataSource.findBy(); List\u0026lt; AccountListingElementModel \u0026gt; elements = entities.stream() .map( entity -\u0026gt; { AccountListing\u0010ElementModelelement = AccountListingElementModel.builder() .id( entity.getId() ) .name( entity.getName() ) .age( entity.getAge() ) .sex( entity.getSex() ) .build(); return element; } ) .collect( Collectors.toList() ); return AccountListingResponseModel.of( elements ); } } RestPathConstクラス tech.blogenist.service.account.api.infrastructure.rest.path.RestPathConst package tech.blogenist.service.account.api.infrastructure.rest.path; public class RestPathConst { public class VersionPath { public static final String V1 = \u0026#34;v1/\u0026#34;; } public class CategoryPath { public class AccountPath { public static final String BASE_PATH = \u0026#34;accounts/\u0026#34;; } } } AccountListingControllerクラス tech.blogenist.service.account.api.controller.account.listing.AccountListingController package tech.blogenist.service.account.api.controller.account.listing; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import tech.blogenist.service.account.api.infrastructure.rest.path.RestPathConst; import tech.blogenist.service.account.api.model.account.listing.response.AccountListingResponseModel; import tech.blogenist.service.account.apiservice.account.listing.AccountListingService; @RestController @RequestMapping( RestPathConst.VersionPath.V1 + RestPathConst.CategoryPath.AccountPath.BASE_PATH ) public class AccountListingController { @Autowired private AccountListingService service; @GetMapping public AccountListingResponseModel listing() { AccountListingResponseModel response = service.findBy(); return response; } } 動作確認 では、この状態でサーバーを起動して動作確認をしてみましょう。\n[adsense-responsive]\rGET: http://localhost:8080/v1/accounts/ { \u0026#34;accounts\u0026#34;: [ { \u0026#34;id\u0026#34;: { \u0026#34;value\u0026#34;: 10001 }, \u0026#34;name\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;山田　太郎\u0026#34; }, \u0026#34;age\u0026#34;: { \u0026#34;value\u0026#34;: 20 }, \u0026#34;sex\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;MALE\u0026#34; } }, { \u0026#34;id\u0026#34;: { \u0026#34;value\u0026#34;: 10002 }, \u0026#34;name\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;山田　花子\u0026#34; }, \u0026#34;age\u0026#34;: { \u0026#34;value\u0026#34;: 18 }, \u0026#34;sex\u0026#34;: { \u0026#34;value\u0026#34;: \u0026#34;FEMALE\u0026#34; } } ] } 正しく各レイヤーを通じてレスポンスが返ってくるようになりましたね♪\n終わりに これで各レイヤーを通るベースとなる処理が整いました。\n次回は実際にDBへアクセスする部分の準備としてFlywayの導入をしていこうと思います。\n","date":"2019-04-10T22:42:07+09:00","image":"/wp-content/uploads/2019/04/springBootDDDLayerEye.png","permalink":"/2019/04/10/7969/","title":"【マイクロサービス】流行りのSpring Boot 2 + Gradle + Java8でマルチプロジェクトな個人開発をしていこう レイヤー構造化編【DDD(ドメイン駆動設計)】"},{"content":"Atomではデフォルトで.gitignore対象のファイルは非表示 皆さんはテキストエディターはお使いでしょうか？\nレトロなさくらエディターやnotepad+、モダンなもので言えばAtomやVisualStudioなど今では多くのエディターがありますね。\n筆者はメモレベルはAtom、コーディング関連はVisualStudio、のように使い分けています。\nそんなAtomですが、デフォルトではgitignore対象のファイルがファイルツリー上に表示されません。\nですが、設定を変えることで問題なく表示することが出来ますので、今回はその手順をご紹介致します。\n手順 tree-viewパッケージの設定を変更 メニュー\u003epreferenceを選択し、Packagesナビで「treeview」と入力し、ヒットしたCorePackageのtree-viewのSettingsをクリックします。\nその中のHide VCS Ignored Filesにチェックが入っていると思うので、\nこのチェックを外すことでgitignore対象ファイルがtree-viewに表示されるようになります。\n終わりに 以上のように、簡単にgitignore対象のファイルをtree-viewで表示されるように出来ました。\ngitignore対象ファイルが見えないのはとても不便なので、お困りの方はこの設定を行うようにしましょう♪\n","date":"2019-04-08T22:08:52+09:00","image":"/wp-content/uploads/2019/04/atomGitignoreFileTreeShowEye.png","permalink":"/2019/04/08/7931/","title":"【瞬殺対応】Atomで.gitignoreに追加したファイルがツリーに表示されない場合の設定変更方法【オススメ設定】"},{"content":"土台は整ったのでAPIモジュールとして動かそう 前回の記事では、Eclipseプロジェクトとして読み込ませるところまでご紹介しました。\n関連記事 【マイクロサービス】流行りのSpring Boot 2 \u0026#43; Gradle \u0026#43; Java8でマルチプロジェクトな個人開発をしていこう Eclipseプロジェクト化編【DDD(ドメイン駆動設計)】 2019/04/05 664文字 約2分で読めます 今回はAPIとして動かすような修正を入れていこうと思います。\n手順 ライブラリを追加 APIを作成する際には、専用のライブラリが用意されているので、api/src/main/resources/build.gradleに以下の依存関係を追加しましょう。\napi/src/main/resources/build.gradle ... dependencies { implementation \u0026#34;org.springframework.boot:spring-boot-starter-web:${accountService.springBootVersion}\u0026#34; // 追加 } ... あとは起動するだけで必要なライブラリをダウンロードした上でAPIシステムとしてサーバーが起動します。\nsh bootrun.sh \u0026gt; Task :api:bootRun . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.3.RELEASE) 2019-04-03 18:03:13.260 INFO 4373 --- [ main] t.b.service.account.AccountApplication : Starting AccountApplication on xxx.xxx.xxx.xxx.static.zoot.jp with PID 4373 (/Users/blogenist/develop/git/github/service-account/api/build/classes/java/main started by blogenist in /Users/blogenist/develop/git/github/service-account/api) 2019-04-03 18:03:13.267 INFO 4373 --- [ main] t.b.service.account.AccountApplication : The following profiles are active: common,local 2019-04-03 18:03:14.920 INFO 4373 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http) 2019-04-03 18:03:14.965 INFO 4373 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2019-04-03 18:03:14.967 INFO 4373 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.16] 2019-04-03 18:03:14.984 INFO 4373 --- [ main] o.a.catalina.core.AprLifecycleListener : The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: [/Users/blogenist/Library/Java/Extensions:/Library/Java/Extensions:/Network/Library/Java/Extensions:/System/Library/Java/Extensions:/usr/lib/java:.] 2019-04-03 18:03:15.109 INFO 4373 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2019-04-03 18:03:15.110 INFO 4373 --- [ main] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 1779 ms 2019-04-03 18:03:15.494 INFO 4373 --- [ main] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService \u0026#39;applicationTaskExecutor\u0026#39; 2019-04-03 18:03:15.800 INFO 4373 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path \u0026#39;\u0026#39; 2019-04-03 18:03:15.805 INFO 4373 --- [ main] t.b.service.account.AccountApplication : Started AccountApplication in 3.318 seconds (JVM running for 3.763) 2019-04-03 18:03:49.453 INFO 4373 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring DispatcherServlet \u0026#39;dispatcherServlet\u0026#39; 2019-04-03 18:03:49.453 INFO 4373 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Initializing Servlet \u0026#39;dispatcherServlet\u0026#39; 2019-04-03 18:03:49.459 INFO 4373 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Completed initialization in 6 ms 簡単過ぎて神かよ。\n試しにhttp://localhost:8080/\u0026nbsp;にアクセスしてみましょう。\nSpringBootはこの辺のお手軽加減がたまりませんよね。。。！\n簡単なコントローラーを作ってみる では、実際にコントローラーを作ってみましょう。\n今回はGETリクエストに対してレスポンスを返すミニマムなコントローラーを作ってみます。\ntech.blogenist.service.account.api.controller.account.listing; package tech.blogenist.service.account.api.controller.account.listing; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Optional; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping( \u0026#34;/accounts\u0026#34; ) public class AccountListingController { @GetMapping(path=\u0026#34;/\u0026#34;) public ResponseEntity\u0026lt;Object\u0026gt; listing() { List\u0026lt;Map\u0026lt;String,Object\u0026gt;\u0026gt; responseList = new ArrayList\u0026lt;\u0026gt;(); Map\u0026lt;String, Object\u0026gt; taroMapData = new HashMap\u0026lt;\u0026gt;(); taroMapData.put(\u0026#34;id\u0026#34;, 101); taroMapData.put(\u0026#34;name\u0026#34;, \u0026#34;Taro\u0026#34;); taroMapData.put(\u0026#34;age\u0026#34;, 20); responseList.add(taroMapData); Map\u0026lt;String, Object\u0026gt; jiroMapData = new HashMap\u0026lt;\u0026gt;(); taroMapData.put(\u0026#34;id\u0026#34;, 102); jiroMapData.put(\u0026#34;name\u0026#34;, \u0026#34;Jiro\u0026#34;); jiroMapData.put(\u0026#34;age\u0026#34;, 18); responseList.add(jiroMapData); return ResponseEntity.of(Optional.of(responseList)); } } この状態でサーバーを起動してhttp://localhost:8080/accounts/\u0026nbsp;にアクセスしましょう。\n以下のようなJsonデータが表示されればOKです。\nGET: http://localhost:8080/accounts/ [ { \u0026#34;name\u0026#34;: \u0026#34;Taro\u0026#34;, \u0026#34;age\u0026#34;: 20 }, { \u0026#34;name\u0026#34;: \u0026#34;Jiro\u0026#34;, \u0026#34;age\u0026#34;: 18 } ] オートリロードを有効にする サーバーを起動した状態でクラスファイル等を編集しても、自動で再読み込みされずに手動で再起動しないと反映されない状態になっています。\nですが、spring-boot-devtoolsを依存関係に追加することで、ファイルの変更を検知して自動で再起動してくれるようになります。\nこれはとても便利な機能なのでマストで有効化すべきです！\n追加方法はとても簡単です。\n追加方法はとても簡単で、api/build.gradleに以下を追記します。\napi/build.gradle dependencies { implementation \u0026#34;org.springframework.boot:spring-boot-starter-web:${accountService.springBootVersion}\u0026#34; implementation \u0026#34;org.springframework.boot:spring-boot-devtools:${accountService.springBootVersion}\u0026#34; // 追加 } では、EclipseでAPIを起動したままファイル内容を変更してみましょう。\nすると以下のように自動で再起動がかかり、変更が反映されるようになります。\nこれは非常に便利ですね♪\n終わりに 以上のように依存関係を追加するだけで簡単にAPI化かつオートリロード化する事が出来ました。\n次はレイヤー構造化をしていこうと思います。\n","date":"2019-04-06T00:35:27+09:00","image":"/wp-content/uploads/2019/04/springBoot2WithGradleMakeApiEye.png","permalink":"/2019/04/06/7940/","title":"【マイクロサービス】流行りのSpring Boot 2 + Gradle + Java8でマルチプロジェクトな個人開発をしていこう API化編【DDD(ドメイン駆動設計)】"},{"content":"Eclipseで開発しよう 前回の記事では、マルチプロジェクトの土台を整えるところまでご紹介しました。\n関連記事 【マイクロサービス】流行りのSpring Boot 2 \u0026#43; Gradle \u0026#43; Java8でマルチプロジェクトな個人開発をしていこう 環境構築編【DDD(ドメイン駆動設計)】 2019/04/04 4435文字 約9分で読めます 今回は、IDEの定番Eclipseで開発するための作業を行っていきます。\n手順 build.gradleにeclipseプラグインを追加 まずは、devtools/build.gradleを以下のように修正します。\ndevtools/build.gradle ... allprojects { apply plugin: \u0026#39;eclipse\u0026#39; // 追加 } subprojects { ... 次に以下のコマンドを実行します。\n./gradlew eclipse BUILD SUCCESSFUL in 1m 37s 4 actionable tasks: 4 executed すると、各プロジェクトにEclipse関連のファイルが生成されると思います。\n※生成されたものだけ抜粋\ntree -L 3 -a . ├── api │ ├── .classpath │ ├── .project │ └── .settings │ └── org.eclipse.jdt.core.prefs └── devtools └── .project これでEclipseプロジェクトとして読み込むための準備は出来ました。\n次は実際にEclipseから取り込んでいきましょう。\nEclipseからプロジェクトをインポート Eclipseを開いたら、File\u003eImportを選択します。\n次に、General\u003eExisting Projects into Workspaceを選択してNext \u003eボタンをクリックします。\n次に、Select root directoryにルートディレクトリを指定すると、対象のプロジェクトが自動で選択されるのでそのままFinishボタンをクリックします。\nこれで正常にEclipseプロジェクトとして読み込まれるようになりました♪\nあとはガシガシ開発を進めていくだけです！！！\n終わりに 以上のように、Gradleを使っていれば簡単にEclipseプロジェクトとして読み込む事が可能になります。\nIDEは開発スピードを格段に上げてくれるので、是非試してみてください♪\n","date":"2019-04-05T00:38:43+09:00","image":"/wp-content/uploads/2019/04/springBoot2WithGradleAddEclipseProjectEye.png","permalink":"/2019/04/05/7947/","title":"【マイクロサービス】流行りのSpring Boot 2 + Gradle + Java8でマルチプロジェクトな個人開発をしていこう Eclipseプロジェクト化編【DDD(ドメイン駆動設計)】"},{"content":"お勉強のためのシステムを作ってみようと思った今日この頃 新鮮な知識を求めて 筆者は普段はJava+SpringBoot(1系)を取り扱ったシステム開発を行っています。\nSpring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can \"just run\".\rWe take an opinionated view of the Spring platform and third-party libraries so you can get started with minimum fuss. Most Spring Boot applications need very little Spring configuration.Spring Boot\n上記の環境については、それなりに知識がついてきていると思っています。\nしかし、日々進化するIT業界。。。\nいつまでも同じ技術だけで生きていけるはずはありません。\n個人事業主なら尚更です・・・！ｶﾞｸｶﾞｸ((( ;ﾟДﾟ)))ﾌﾞﾙﾌﾞﾙ\nSpring Boot2系を覚えよう とはいえ、今後もJavaを武器にしていきたい気持ちは変わりません。\nなんだかんだでメジャーな言語ですしね！\nそして、Javaのサーバーサイド開発といえば、今やSpringフレームワークが一強となってきているのもまた事実。\nそんな中SpringBoot2が最近リリースされまして、触ったことがなかったので勉強とアウトプットの目的を兼ねて、いろいろと個人開発をしながらやったことを記事にまとめていこうと思います！\n[adsense-responsive]\rゆくゆくはサーバーサイドKotlinやフロントエンドの勉強、AWSやGCPなどへのデプロイなどもご紹介していければなと思います♪\nそんなわけで、今回はSpringBoot2+Gradleを取り扱ったマルチプロジェクト開発の土台作りをご紹介していこうと思います♪\n手順 注意 今回は筆者の好みを踏まえたマルチプロジェクトの設定をご紹介していきます。\n筆者の理想の開発思想としては以下の点を念頭におくようにしています。\n設計思想\rDDD(ドメイン駆動設計)\rマイクロサービス\r極力疎結合\rソース=ドキュメント\rMVCレイヤー思想\rこんな感じですね。\nですので、あくまで皆さんの理想の開発環境構築を手助けするための参考程度に捉えて頂ければなと思います！！！\nSpring Initializrでプロジェクトの作成 今回はSpring Initializrを使ってプロジェクトの雛壇を作ろうと思います。\nSpring InitializrBootstrap your application · Github | Twitter. Help us improve the site! Take a quick survey. Project. Maven Project. Gradle Project. Language. Java. Kotlin. Groovy. Spring Boot. Spring Initializr\n今回は以下の通りのアーキで作成しました。\nProject\rGradle Project\rLanguage\r2.1.3\rPackaging\rJar\rJava Version\r8\rDependencies\r一旦無し(必要な時に理解しながら追加していく)\r[adsense-responsive]\rダウンロードしたzipを展開して、apiというフォルダ名に変更して作業ディレクトリに移動しました。\n確認 まずはこの状態でapiフォルダにディレクトリに入って以下のコマンドで動作確認をしてみましょう。\n./gradlew bootrun \u0026gt; Task :bootRun . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.3.RELEASE) 2019-04-01 17:35:35.376 INFO 43476 --- [ main] t.b.service.account.AccountApplication : Starting AccountApplication on xxx.xxx.xxx.xxx.static.zoot.jp with PID XXXXX (/Users/blogenist/develop/git/github/service-account/api/build/classes/java/main started by blogenist in /Users/blogenist/develop/git/github/service-account/api) 2019-04-01 17:35:35.381 INFO 43476 --- [ main] t.b.service.account.AccountApplication : No active profile set, falling back to default profiles: default 2019-04-01 17:35:36.854 INFO 43476 --- [ main] t.b.service.account.AccountApplication : Started AccountApplication in 2.342 seconds (JVM running for 3.301) BUILD SUCCESSFUL in 32s 3 actionable tasks: 3 executed 正しくビルド及び実行が出来ましたね。\ndevtoolsプロジェクトの作成 では、次にdevtoolsのプロジェクトを作りましょう。\napiプロジェクト内部で各コマンドを行っても良いですが、筆者の好みとしてapiプロジェクトはapiの事だけに専念してもらって、開発における操作をするためのdevtoolsプロジェクトを作るようにしています。\nローカル開発でのコマンドやFlywayなどを使ったマイグレーとなどもdevtoolsプロジェクトにてシェルなどにして管理すれば、開発スピードも上がるし、ファイルが混在するのも避けれますしね♪\nまずは作業ディレクトリに移動して、cp -R api devtoolsコマンドでapiディレクトリをdevtoolsとして再帰的にコピーしましょう。\nコピーが出来たら、まずapiディレクトリからは以下のファイルを削除します。\napiディレクトリで削除するファイル\rgradleディレクトリ\rgradlew\rgradlew.bat\rsettings.gradle\r次は、devtoolsディレクトリからは以下のファイルを削除します。\ndevtoolsディレクトリで削除するファイル\rsrcディレクトリ\rgradlew\rgradlew.bat\r[adsense-responsive]\r次に、api/build.gradleの内容を以下のように変更してください。\napi/build.gradle springBoot { mainClassName = \u0026#39;xxx.yyy.zzz.XXXApplication\u0026#39; } repositories { } dependencies { } 次に、devtools/settings.gradleを以下のようにしてください。\ndevtools/settings.gradle pluginManagement { repositories { gradlePluginPortal() } } rootProject.name = \u0026#39;devtools\u0026#39; //書き換え includeFlat \u0026#39;api\u0026#39; // 追加 そして、最後にdevtools/build.gradleの内容を以下のように変更してください。\ndevtools/build.gradle buildscript { ext { springBootVersion = \u0026#34;2.1.3.RELEASE\u0026#34; } repositories { mavenCentral() } dependencies { classpath(\u0026#34;org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}\u0026#34;) } } allprojects { } subprojects { apply plugin: \u0026#34;java\u0026#34; apply plugin: \u0026#34;org.springframework.boot\u0026#34; apply plugin: \u0026#34;io.spring.dependency-management\u0026#34; group = \u0026#39;xxx.yyy.zzz\u0026#39; version = \u0026#39;0.0.1-SNAPSHOT\u0026#39; sourceCompatibility = \u0026#39;1.8\u0026#39; repositories { mavenCentral() } dependencies { implementation \u0026#39;org.springframework.boot:spring-boot-starter\u0026#39; testImplementation \u0026#39;org.springframework.boot:spring-boot-starter-test\u0026#39; } } 確認 では、この状態でdevtoolsディレクトリに移動し、もう一度アプリケーションを実行してみましょう。\n./gradlew bootrun \u0026gt; Task :api:bootRun . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.3.RELEASE) 2019-04-01 18:37:16.982 INFO 47670 --- [ main] t.b.service.account.AccountApplication : Starting AccountApplication on xxx.xxx.xxx.xxx.static.zoot.jp with PID XXXXX (/Users/blogenist/develop/git/github/service-account/api/build/classes/java/main started by blogenist in /Users/blogenist/develop/git/github/service-account/api) 2019-04-01 18:37:16.986 INFO 47670 --- [ main] t.b.service.account.AccountApplication : No active profile set, falling back to default profiles: default 2019-04-01 18:37:17.734 INFO 47670 --- [ main] t.b.service.account.AccountApplication : Started AccountApplication in 1.154 seconds (JVM running for 1.592) BUILD SUCCESSFUL in 2s 3 actionable tasks: 1 executed, 2 up-to-date Task :api:bootRunとなっているため、正常にdevtoolsプロジェクトからapiプロジェクトのアプリケーションを起動出来るようになりましたね♪\ngradleプロパティ値の外部ファイル化 システムを開発していると、依存関係のあるライブラリやビルド情報などの設定値を設けるようになります。\n[adsense-responsive]\rこれらの値をdevtools/build.gradleに直接定義しても良いのですが、せっかくなので設定値のみをまとめたプロパティファイルを用意してそちらから読み込むようにしてみましょう。\nまず、devtoolsプロジェクトにproperty.gradleを作成しましょう。\ndevtools/property.gradle ext { accountService = [:] accountService.springBootVersion = \u0026#39;2.1.3.RELEASE\u0026#39; accountService.sourceCompatibility = 1.8 accountService.group = \u0026#39;xxx.yyy.zzz\u0026#39; accountService.version = \u0026#39;0.0.1-SNAPSHOT\u0026#39; } これは、Groovyの書き方で、空の連想配列を用意した上で各キーに対して設定値を定義している形になります。\nそして、devtools/build.gradleを以下のように修正します。\ndevtools/build.gradle buildscript { apply from: \u0026#39;property.gradle\u0026#39; // プロパティファイルの読み込み ext { //定義不要になる } repositories { mavenCentral() } dependencies { classpath(\u0026#34;org.springframework.boot:spring-boot-gradle-plugin:${accountService.springBootVersion}\u0026#34;) // 読み込んだ変数を展開 } } allprojects { apply plugin: \u0026#39;eclipse\u0026#39; } subprojects { apply plugin: \u0026#34;java\u0026#34; apply plugin: \u0026#34;org.springframework.boot\u0026#34; apply plugin: \u0026#34;io.spring.dependency-management\u0026#34; group = accountService.group// 読み込んだ変数を展開 version = accountService.version// 読み込んだ変数を展開 sourceCompatibility = accountService.sourceCompatibility// 読み込んだ変数を展開 repositories { mavenCentral() } dependencies { implementation \u0026#34;org.springframework.boot:spring-boot-starter:${accountService.springBootVersion}\u0026#34;// マシン毎のバージョン差異が出ないように指定追加 testImplementation \u0026#34;org.springframework.boot:spring-boot-starter-test:${accountService.springBootVersion}\u0026#34;// マシン毎のバージョン差異が出ないように指定追加 } } 確認 ではもう一度確認してみましょう。\n./gradlew bootrun \u0026gt; Task :api:bootRun . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.3.RELEASE) 2019-04-01 18:51:29.148 INFO 48393 --- [ main] t.b.service.account.AccountApplication : Starting AccountApplication on xxx.xxx.xxx.xxx.static.zoot.jp with PID 48393 (/Users/blogenist/develop/git/github/service-account/api/build/classes/java/main started by blogenist in /Users/blogenist/develop/git/github/service-account/api) 2019-04-01 18:51:29.151 INFO 48393 --- [ main] t.b.service.account.AccountApplication : No active profile set, falling back to default profiles: default 2019-04-01 18:51:29.958 INFO 48393 --- [ main] t.b.service.account.AccountApplication : Started AccountApplication in 1.205 seconds (JVM running for 1.628) BUILD SUCCESSFUL in 2s 3 actionable tasks: 1 executed, 2 up-to-date こちらも問題なく動きましたね。\nアプリケーションプロパティファイルの整理 次に、アプリケーションプロパティファイルを整理しましょう。\nデフォルトではapi/src/main/resrouces/application.propertiesが用意されています。\nもちろん、このままでもよいのですがSpringBootはyml形式のプロパティファイルをサポートしています。\nxml形式より格段に可読性が高く記述方法が簡単なのでyml形式がオススメです！\nまた、本番/検証/開発/ローカルごとに接続情報等は変わるので、その辺にも対応出来るような構造にしておきましょう。\nまずは、application.propertiesをapplication.ymlにリネームして、以下の記述を追記してください。\n[adsense-responsive]\rまた、環境ごとに差分がない設定値を定義するためのapplication-common.ymlを用意してください。\n今回の作業では特に内容は指定しませんが、今後こちらにも定義をしていこうと思っています。\nsrc/main/resources/application.yml #profileの指定が無い場合のデフォルトのprofile指定 spring: profiles: active: local include: common これはプロファイル指定を忘れた際に間違えて開発や検証、本番に向き先が行く事故を防ぐための設定となります。\n次に、api/src/main/resourcesディレクトリにapplication-local.ymlとapplication-local.yml.tmpを作成します。\nSpringでは、application-{profile名}.ymlを用意しておく事でそれぞれの環境にあったプロパティファイルを読み込んでくれます。\nまた、ローカル用のprofileに関しては設定が異なると思うので、application-local.yml.tmpをgit管理して、各自はそれをapplication-local.ymlにリネームコピーして設定を変えるようにしています。\nファイルの中身は一旦は空で良いです。\n確認(profile未指定) ではもう一度確認してみましょう。\n./gradlew bootrun \u0026gt; Task :api:bootRun . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.3.RELEASE) 2019-04-01 18:57:39.148 INFO 48393 --- [ main] t.b.service.account.AccountApplication : Starting AccountApplication on xxx.xxx.xxx.xxx.static.zoot.jp with PID 48393 (/Users/blogenist/develop/git/github/service-account/api/build/classes/java/main started by blogenist in /Users/blogenist/develop/git/github/service-account/api) 2019-04-01 18:57:39.151 INFO 48393 --- [ main] t.b.service.account.AccountApplication : The following profiles are active: common,local 2019-04-01 18:57:39.958 INFO 48393 --- [ main] t.b.service.account.AccountApplication : Started AccountApplication in 1.205 seconds (JVM running for 1.628) BUILD SUCCESSFUL in 2s 3 actionable tasks: 1 executed, 2 up-to-date ログにThe following profiles are active: localと出ているので、未指定時はデフォルトのプロパティファイルに指定したlocalが適用されるようになりましたね♪\n確認 上記で未指定時にはデフォルトのlocalが適用されるようになりましたが、本来はデプロイミス等を防ぐために、意図してprofileを指定する癖をつけておいたほうが良いでしょう。\n実行時に-Pargs=\"--spring.profiles.active={profile名}\"をつける事でプロファイルを指定する事が可能になります。\n以下のコマンドで確認しましょう。\n./gradlew bootrun -Pargs= \u0026gt; Task :api:bootRun . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.3.RELEASE) 2019-04-03 15:20:17.595 INFO 34962 --- [ main] t.b.service.account.AccountApplication : Starting AccountApplication on xxx.xxx.xxx.xxx.static.zoot.jp with PID 34962 (/Users/blogenist/develop/git/github/service-account/api/build/classes/java/main started by blogenist in /Users/blogenist/develop/git/github/service-account/api) 2019-04-03 15:20:17.599 INFO 34962 --- [ main] t.b.service.account.AccountApplication : The following profiles are active: common,local 2019-04-03 15:20:18.439 INFO 34962 --- [ main] t.b.service.account.AccountApplication : Started AccountApplication in 1.804 seconds (JVM running for 2.488) BUILD SUCCESSFUL in 3s 3 actionable tasks: 1 executed, 2 up-to-date 以上のように、問題なくprofile指定がlocalに有効な状態で起動出来ましたね♪\nちなみに、hogeのような存在しないprofileを指定するとエラーにならずにデフォルトのprofileが読み込まれます。\n今回の場合は内部的にはlocalが適用されます。\n起動用シェルの作成 最後に、ローカル開発用の起動用ファイルを作成しましょう。\ndevtoolsプロジェクトにapiディレクトリを作成し、その中にbootrun.shと言うファイルを作成します。\n中身は単純で、ディレクトリ移動して先ほど打っていたコマンドを実行するだけのものです。\ndevtools/api/bootrun.sh #!/bin/bash pushd ../ ./gradlew bootRun -Pargs=\u0026#34;--spring.profiles.active=local\u0026#34; popd 確認 では、実際に起動用シェルからアプリケーションを動かしてみましょう。\nsh ./bootrun.sh ~/develop/git/github/service-account/devtools ~/develop/git/github/service-account/devtools/api \u0026gt; Task :api:bootRun . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.3.RELEASE) 2019-04-01 19:02:04.487 INFO 48649 --- [ main] t.b.service.account.AccountApplication : Starting AccountApplication on xxx.xxx.xxx.xxx.static.zoot.jp with PID 48649 (/Users/blogenist/develop/git/github/service-account/api/build/classes/java/main started by blogenist in /Users/blogenist/develop/git/github/service-account/api) 2019-04-01 19:02:04.490 INFO 48649 --- [ main] t.b.service.account.AccountApplication : The following profiles are active: common,local 2019-04-01 19:02:05.171 INFO 48649 --- [ main] t.b.service.account.AccountApplication : Started AccountApplication in 1.088 seconds (JVM running for 1.489) BUILD SUCCESSFUL in 2s 3 actionable tasks: 1 executed, 2 up-to-date ~/develop/git/github/service-account/devtools/api 無事に起動シェル経由でprofileがlocalの状態で動きましたね♪\n完成ディレクトリ構造 最終的にはこのようなディレクトリ構造になりました。\n[adsense-responsive]\rtree . ├── README.md ├── api │ ├── build │ ├── build.gradle │ └── src │ ├── main │ │ ├── java │ │ │ └── tech │ │ │ └── blogenist │ │ │ └── service │ │ │ └── account │ │ │ └── AccountApplication.java │ │ └── resources │ │ ├── application-common.yml │ │ ├── application-develop.yml │ │ ├── application-local.yml │ │ ├── application-local.yml.tmp │ │ ├── application-production.yml │ │ ├── application-staging.yml │ │ └── application.yml │ └── test │ └── java │ └── tech │ └── blogenist │ └── service │ └── account │ └── AccountApplicationTests.java └── devtools ├── api │ └── bootrun.sh ├── build │ ├── classes │ │ └── java │ ├── generated │ │ └── sources │ │ └── annotationProcessor │ │ └── java │ ├── resources │ └── tmp │ └── compileJava ├── build.gradle ├── gradle │ └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── property.gradle └── settings.gradle 終わりに これでSpring Boot2 + Gradleでのマルチプロジェクトの土台が出来ました。\n次は実際にAPIとして動くように手を加えていこうと思います♪\n","date":"2019-04-04T15:35:50+09:00","image":"/wp-content/uploads/2019/04/springBoot2WithGradleEye.png","permalink":"/2019/04/04/7883/","title":"【マイクロサービス】流行りのSpring Boot 2 + Gradle + Java8でマルチプロジェクトな個人開発をしていこう 環境構築編【DDD(ドメイン駆動設計)】"},{"content":"EC2の容量が残りわずかに EC2を使ってサーバーシステムやWordpressを運用している場合、ファイルアップロードやログファイルなどでディスク容量が圧迫される事が多々あると思います。\n昔はディスクサイズの増強作業は大変だったらしいのですが、AWSのEC2を使っているのであれば簡単にディスク容量を増やす事が出来てしまいます！\n今回はその手順の方を簡単にご紹介致します♪\n手順 前提 今回はEC2作成時のデフォルトのままとなっており、以下のような状態です。\ndf -h ファイルシス サイズ 使用 残り 使用% マウント位置 devtmpfs 489M 56K 488M 1% /dev tmpfs 497M 0 497M 0% /dev/shm /dev/xvda1 7.8G 7.6G 79M 100% / 残りわずか！！！\nこれは早急にディスク容量をあげないとまずいですね。。。！\nマネジメントコンソールからEBSのサイズを変更 まずはAWSのマネジメントコンソールにログインし、EC2のインスタンス画面から対象のEC2インスタンスを選択し、アクション\u003eボリュームの変更をクリックします。\n次に、ボリュームの変更ダイアログが表示されるので、ボリュームタイプは変更せずにサイズの項目に変更後の容量を入力します。\n[adsense-responsive]\r次に、確認ダイアログが表示されますので、問題が無ければはいをクリックします。\nすると対象のインスタンスの状態がin-use - optimizing(0%)となるのでこちらが100%になるまで待ちましょう。\nマネジメントコンソールから再起動 100%になっても、今のままではまだ実際にはディスク増強リクエストが適用がされていません。\n適用させるには、マネジメントコンソールからインスタンスの再起動をすれば反映されます。\nopen: そのようなファイルやディレクトリはありません while opening /dev/xvdf 多くの技術ブログでは、以下のコマンドでOKとありますが、筆者のケースだと以下のようなエラーが発生して実行出来ませんでした。\nresize2fs /dev/xvdf resize2fs 1.42.12 (29-Aug-2014) open: そのようなファイルやディレクトリはありません while opening /dev/xvdf その場合も、マネジメントコンソールからインスタンスの再起動をすれば反映されます。\n確認 以下のコマンドで正常に16GBに増強されている事が確認出来ます♪\n[adsense-responsive]\rdf -h ファイルシス サイズ 使用 残り 使用% マウント位置 devtmpfs 489M 56K 488M 1% /dev tmpfs 497M 0 497M 0% /dev/shm /dev/xvda1 16G 7.6G 8.0G 49% / 終わりに 以上のように簡単に動いているEC2インスタンスのディスク容量を増やす事が出来ました。\n初めてやる方は怖いと思うので、こちらの記事を参考にやってみて頂ければなと思います♪\n","date":"2019-04-03T16:54:44+09:00","image":"/wp-content/uploads/2019/04/modifyAwsEbsDiskEye.png","permalink":"/2019/04/03/7914/","title":"【マネジメントコンソールぽちぽちで簡単サイズアップ】AWSのEC2ディスクがファイルなどでいっぱいになった場合にボリュームを増やす方法【EBS容量拡大】"},{"content":"安定のBauhutte PC作業スペース確保 前回は、初めてのゲーミングチェアに関する記事をご紹介しました。\n今回は、PCデスクも購入予定を予定しているためPC作業スペース確保のためのPCデスクマットという物を購入してみました。\nオススメPC周り商品 PCデスク Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅120cm×奥行55cm) BHD-1200M Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅100cm×奥行60cm) BHD-1000M 関連記事 【ゲーミングPCデスク】Bauhutteの「昇降式式PCデスク」が快適過ぎた【PC作業向け】 2019/05/08 2964文字 約6分で読めます Amazon Bauhutte（バウヒュッテ） 昇降式L字デスク ラージ 木目 幅39×奥行き82㎝ BHD-820H-WD 関連記事 【Bauhutte】開封作業の撮影スペースとしても使えるPC用昇降式L字デスクが使い勝手が良すぎた【PC環境】 2020/02/26 1648文字 約4分で読めます Amazon Bauhutte (バウヒュッテ) コントローラースタンド ヘッドホンハンガー BHP-S100 ブラック 幅20×奥行き13×高さ マイク付きヘッドセット Amazon Logicool G ゲーミングヘッドセット ワイヤレス 無線 G533 ブラック Dolby 7.1ch ノイズキャンセリング マイク 付き PC 軽量 国内正規品 2年間メーカー保証 キーボード Amazon Logicool ロジクール G PRO テンキーレス ゲーミング キーボード G-PKB-001ブラック メカニカル Romer-G RGB 着脱式ケーブル プロ仕様 PUBG JAPAN SERIES 2019 推奨モデル 国内正規品 2年間メーカー保証 PCモニター Amazon BenQ ゲーミングモニター ディスプレイ ZOWIE XL2411P 24インチ/フルHD/HDMI,DP,DVI端子/144Hz/1ms/ブルーライト軽減 ゲーミングチェア Amazon AKRACING ゲーミングチェア WOLF-GREY 灰 関連記事 【快適なPC作業を求め】ゲーミングチェア初心者にオススメな「AKRACING ゲーミングチェア WOLF-GREY」を購入したら大正解だった【ゲーミングPC】 2019/03/23 1937文字 約4分で読めます クッション Amazon Bauhutte (バウヒュッテ) ゲル\u0026amp;低反発 ずっと座りたいクッション BC-80G-BK 関連記事 【デスクワーク/テレワーク/在宅】PCゲーマーにもオススメの長時間座ってもお尻が痛くならないクッションを買ったので開封レビューしてみた【快適空間】 2020/10/17 1637文字 約4分で読めます マウス Amazon Logicool ロジクール G502 HERO ゲーミングマウス G502RGBh 【2年間保証付き】 ゲームパッド Amazon ワイヤレスコントローラー (DUALSHOCK 4) マグマ・レッド (CUH-ZCT2J11) 購入商品 Bauhutte (バウヒュッテ) デスクごとチェアマット BCM-160BK 購入した商品はこちらです。\nAmazon Bauhutte (バウヒュッテ) デスクごとチェアマット BCM-160BK ブラック 特大サイズ160×130cm 厚さ1.5mm BCM-160BK こちらのデスクマットを購入しておけば、床を傷つけることも無くなりチェアキャスターの騒音やPCデスクのガタつきも減るのでオススメです♪\nBauhutteはゲーミングチェアやオフィスデスクなど、数多くのPC用品を取り扱っている有名メーカーです。\nオフィスチェアブランドBauhutte（バウヒュッテ）の公式サイトです。オフィスチェア、ゲーミングチェア、スタンディングデスクなどの商品を展開しています。オフィスチェアブランド | Bauhutte\n他にも、拡張性の高いPC用品も取り扱っているため、興味のある方は調べてみると良いでしょう♪\nそれでは早速開封していきましょう！\n開封の儀 外観 デスクマットはこんな感じのパッケージで届きます。\n見た目以上に重いので、油断をして持ち上げようとすると腰をやられるので気をつけてください。笑\n梱包品 中身はチェアマットのみです。\n黒い生地にワンポイントのBauhutteのデザインプリントがかっこいいですね♪\n材質はゴムのようなクッション性の高いPVCと言うものが使われており、厚さも1.5mmあるため、とても柔らかみがあります。\n表面はエンボス加工されているため、チェアのキャスターの滑りも滑らかです♪\nそして裏面は滑り止め加工がされているので、マット自体がズレないような工夫もされています！\n抜け目がない！！！\n広げるとこんな感じ。\n思ったよりでかめです！\nPCデスクとチェアをまとめてカバーするのででかいのは当たり前です！！！笑\n終わりに 以上のようにPCデスクとゲーミングチェアを利用している方にとってはオススメのチェアマットとなります。\n傷防止や防音、快適性の向上などメリットが沢山あるので、是非購入してお試ししてみてはいかがでしょうか♪\n","date":"2019-03-28T12:19:52+09:00","image":"/wp-content/uploads/2019/03/bauhutteDeskMatEye.png","permalink":"/2019/03/28/7868/","title":"【PC環境を整えよう】Bauhutteの「デスクごとチェアマット」を購入してみたので紹介してみる【ゲーミングPC/ゲーミングチェア】"},{"content":"ゲーミングチェアデビュー デスク作業の負担が激減 筆者はPCゲームや仕事をするときは、通常の作業椅子を使ってPC作業やゲームをやっていたのですが、先日遂にゲーミングチェアデビューをしました！\n新しい私、デビュー☆()\nやはり、最近自宅作業やPCゲームをするようになり、長時間椅子に座ることが多くなってきたので、体への負担を考えるとそろそろ買うべきかなぁ〜、だと判断しました。\n結果的には、めちゃくちゃ快適で長時間のPC作業やゲームをしても疲れにくくなったので大正解です♪\n今回は、筆者が初めてのゲーミングチェアとして購入した以下の商品をご紹介して行こうと思います。\nAmazon AKRACING ゲーミングチェア WOLF-GREY 灰 また、PCデスクが低めで、座りながら作業やゲームをしている方向けの座椅子タイプのゲーミングチェアというものもありますので、自分のスタイルに合わせてチョイスするのが良いと思います♪\nAmazon Bauhutte (バウヒュッテ) ゲーミングチェア プロシリーズ ゲーミング座椅子 リクライニング 4D稼働アームレスト採用 LOC-950RR-BK Amazon AKRacing ゲーミング座椅子 極坐(ぎょくざ)V2 灰色 Gyokuza V2 Grey オススメPC周り商品 PCデスク Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅120cm×奥行55cm) BHD-1200M Amazon Bauhutte (バウヒュッテ) PCデスク 昇降式 (幅100cm×奥行60cm) BHD-1000M 関連記事 【ゲーミングPCデスク】Bauhutteの「昇降式式PCデスク」が快適過ぎた【PC作業向け】 2019/05/08 2964文字 約6分で読めます Amazon Bauhutte（バウヒュッテ） 昇降式L字デスク ラージ 木目 幅39×奥行き82㎝ BHD-820H-WD 関連記事 【Bauhutte】開封作業の撮影スペースとしても使えるPC用昇降式L字デスクが使い勝手が良すぎた【PC環境】 2020/02/26 1648文字 約4分で読めます Amazon Bauhutte (バウヒュッテ) コントローラースタンド ヘッドホンハンガー BHP-S100 ブラック 幅20×奥行き13×高さ デスクマット Amazon Bauhutte (バウヒュッテ) デスクごとチェアマット BCM-160BK ブラック 特大サイズ160×130cm 厚さ1.5mm BCM-160BK 関連記事 【PC環境を整えよう】Bauhutteの「デスクごとチェアマット」を購入してみたので紹介してみる【ゲーミングPC/ゲーミングチェア】 2019/03/28 1778文字 約4分で読めます マイク付きヘッドセット Amazon Logicool G ゲーミングヘッドセット ワイヤレス 無線 G533 ブラック Dolby 7.1ch ノイズキャンセリング マイク 付き PC 軽量 国内正規品 2年間メーカー保証 キーボード Amazon Logicool ロジクール G PRO テンキーレス ゲーミング キーボード G-PKB-001ブラック メカニカル Romer-G RGB 着脱式ケーブル プロ仕様 PUBG JAPAN SERIES 2019 推奨モデル 国内正規品 2年間メーカー保証 PCモニター Amazon BenQ ゲーミングモニター ディスプレイ ZOWIE XL2411P 24インチ/フルHD/HDMI,DP,DVI端子/144Hz/1ms/ブルーライト軽減 クッション Amazon Bauhutte (バウヒュッテ) ゲル\u0026amp;低反発 ずっと座りたいクッション BC-80G-BK 関連記事 【デスクワーク/テレワーク/在宅】PCゲーマーにもオススメの長時間座ってもお尻が痛くならないクッションを買ったので開封レビューしてみた【快適空間】 2020/10/17 1637文字 約4分で読めます マウス Amazon Logicool ロジクール G502 HERO ゲーミングマウス G502RGBh 【2年間保証付き】 ゲームパッド Amazon ワイヤレスコントローラー (DUALSHOCK 4) マグマ・レッド (CUH-ZCT2J11) 開封の儀 外観 配送はかなりでかめのダンボールで送られてきます！\n[adsense-responsive]\r一人で持ち上げるのは腰へのダメージがやばそうなので気をつけましょう・・・！\n開けるとヒトデが！！！笑\n梱包物 各パーツはこんな感じでバラされた状態で梱包されています。\n梱包物\r背もたれ\r座椅子\rキャスター\rヘッドレスト\rランバーサポート\r取扱説明書及び保証書\r工具\r細かい備品\r取扱説明書・工具・細かい備品はダンボールの中にまとめて梱包されています。\n必要な工具は全て揃っているので、事前に準備する必要が無いのは助かりますね。\n作業用手袋も付いています！！！\n完成品 付属の取扱い説明書の組み立て手順がとても分かりやすいので10分足らずで組み立てれました。\nですので、今回は組み立て手順のまとめは割愛致します。\nそんなこんなで、完成したゲーミングチェアはこんな感じです。\nジャストフィットオォォォ！！！\n[adsense-responsive]\rめちゃくちゃ座り心地が良いです！\n腰部分のランバーサポートも良い感じにフィットするので、長時間座っても腰が痛くならないのが助かります♪\n終わりに ゲーミングチェアは確かにちょっとお高いですが、長く使える点と毎日のPC作業やゲームの身体への負担が軽減される点を考えると、買う価値は十分あると思います！\nもし、通常の作業椅子を使っている方がいたら、是非ゲーミングチェアの購入を考えてみてはいかがでしょうか♪\n","date":"2019-03-23T22:18:14+09:00","image":"/wp-content/uploads/2019/03/gamingChairEntryEye.png","permalink":"/2019/03/23/7849/","title":"【快適なPC作業を求め】ゲーミングチェア初心者にオススメな「AKRACING ゲーミングチェア WOLF-GREY」を購入したら大正解だった【ゲーミングPC】"},{"content":"Java脳がGoを覚えた際に引っかかった点をまとめてみよう 筆者はもっぱらのJava人間です。\nシステム屋になってからはJavaをメイン武器に構えながら、HTML/JavaScript/CSSなどをちょこちょこ触っていました。\nそして、最近はGo言語の勉強をさらっと初めて見たのですが、意外と言語のルールが異なっている部分を見つけました。\n今回は、そんな独学の中で見つけたJava言語とGo言語の違いを備忘録としてまとめてみようと思います。\n記事にまとめる事で誰かが救われるのならやってやるぜ・・・！(果たしていつまで続くか)\nという事で、こちらの記事は勉強の進度によって随時更新していこうと思うので、思い出したら見に来てくださいw。\nちなみに、Go Tour\u0026nbsp;をベースに勉強をしているのでこちらを見てもらえると、より理解出来ると思います。\nプログラミング言語Go Tour ( Go言語基礎文法最速マスター ) へようこそ！ Go Tour は複数の章で構成されています。 左上の A Tour of Go から辿ることができます。A Tour of Go\n筆者が気になった記法の違いまとめ セミコロン 行末のセミコロンの扱いに関して差異があります。\njava Javaの場合は、行末にセミコロンが無いとコンパイルエラーとなります。\n厳密でうね。\nセミコロン System.out.println(\u0026#34;セミコロン有り\u0026#34;); System.out.println(\u0026#34;セミコロン無し\u0026#34;)//コンパイルエラー Go Goの場合は、セミコロンを入れても良いが、省略することも出来ます。\nほとんどの人は省略していますね。\nセミコロン fmt.Println(\u0026#34;セミコロン有り\u0026#34;); fmt.Println(\u0026#34;セミコロン無し\u0026#34;) パッケージ定義 プログラムのパッケージ定義方法について差異があります。\n今回はサンプルとして、jp.blogenist.sample.hogeに定義するとします。\njava Javaの場合は、フルパッケージを記述する必要があります。\nパッケージ定義 package jp.blogenist.sample.hoge; Go Goの場合は、パッケージパスの最後の階層のみを記述する必要があります。\nパッケージ定義 package hoge import方法 プログラムのimport方法について差異があります。\njava Javaの場合は、複数読み込みたい場合はそれぞれimport句から記述する必要があります。\nパッケージ定義 package jp.blogenist.sample.hoge; import java.time.LocalDate; import java.time.LocalDateTime; import java.util.ArrayList; import java.util.List; Go Goの場合は、factoredインポートステートメント( factored import statement )と呼ばれる方法で、パッケージのインストールをグループ化する事が可能です。\nパッケージ定義 package hoge import ( \u0026#34;fmt\u0026#34; \u0026#34;math\u0026#34; ) また、Javaのようにそれぞれimport句から書くことも出来ますが、基本的にはfactoredインポートステートメントが主流となっているようです。\n関数の引数 関数の引数定義方法について差異があります。\njava Javaの場合は、型名 変数名[,...]の順番で定義していきます。\n関数の引数定義方法 public Person create( String name, Integer age){ ... } Go Goの場合は、変数名　型名[,...]の順番で定義していきます。\nパッケージ定義 func (name string, age integer) create() Person { ... } 終わりに Java言語が出来る人はGo言語が出来る、逆もまた然り。と、いろいろな人がよく言ってます。\n言語ごとの記述方法の差異さえ抑えてしまえば、なんだかいけそうな気がしているので、頑張って勉強してみようと思います！\n皆さんも、Go言語を覚えてみてはいかがでしょうか♪\n","date":"2019-03-22T18:45:16+09:00","image":"/wp-content/uploads/2019/03/javaAndGoDiffEye.png","permalink":"/2019/03/22/7750/","title":"【初心者向け備忘録】Java脳視点で感じたGo言語とJava言語の記述方法/書き方/コーディング規則の違いまとめを随時更新していくお【プログラミング独学】"},{"content":"オススメのマウスパッド 滑らかなマウスパッドの決定版 以前、ゲーミングマウスデビューに関する記事をご紹介しました。\n関連記事 【最強ゲーミングマウス】PS4やSwitchでも使用可能な「Logicool ロジクール G502 HERO」の使い方と初期設定方法まとめ【フォートナイト/PUBG/ApexLegends/FPS/TPS】 2019/03/19 3535文字 約8分で読めます Amazon ゲーミングマウス ロジクール Logicool G502RGBh HEROセンサー ウェイト調整 LIGHTSYNC RGBライト 耐久性 PUBG FPS その際に、合わせてLogicoolのマウスパッドも購入しましたのでご紹介致します♪\nAmazon LOGICOOL ロジクール G240t クロス ゲーミング マウスパッド 今回は一番小さい240サイズのものを試しに購入してみましたが、PCデスクのスペースに余裕がある方は大きいサイズを購入した方がより精密なマウス操作が出来るので自分の環境に合わせて選んでみると良いでしょう♪\nその他のLogicool製品 Logicoolの製品は他にも紹介しているので興味がありましたらそちらもみていただければなと思います♪\n関連記事 【ゲーミングキーボード】程よい打鍵感が癖になる「Logicool ロジクール G PRO テンキーレス」がオススメ【PUBG・フォートナイト・ApexLegends】 2019/05/10 2753文字 約6分で読めます 関連記事 【Logicool】ゲーミングヘッドセットの「G533」を買ってみた【PUBG/フォートナイト/ApexLegend】 2019/11/05 3067文字 約7分で読めます G240クロス ゲーミング マウスパッド こちらは、先日紹介したマウスと同様のGシリーズの純正マウスパッドのようです。\nせっかくならマウスと同シリーズで合わせた方が相性も良いでしょうし、何より統一感が出てテンションが上がりますよね！(自己満)\n適度な表面摩擦\r低DPI設定でのプレイ中に急激にマウスを動かしたり止めたりするときには、中程度の摩擦抵抗が効力を発揮します。そこでG240では、200℃で熱処理された表面のクロス素材により、低DPIに適したほどよい抵抗感を実現しました。\rゲーミング マウスパッド - クロスタイプ - G240 - ロジクール\r一貫性のある質感\r派手な模様やデザインは、センサーの性能に悪影響を及ぼしかねません。G240は、すっきりとした一貫性のある質感が特徴です。これによりセンサーの読み取り精度が向上し、マウスの動きが正確にカーソルの動作に変換されます。不均一な表面のデスクや汚れたテーブルでは得られないメリットです。\rゲーミング マウスパッド - クロスタイプ - G240 - ロジクール\rロジクールGセンサーとの相性が抜群\rセンサーの正確性と精度がさらに向上。G240には、ロジクールGマウス用の最適なテスト環境に匹敵するほどの、滑らかな表面加工が施されています。\rゲーミング マウスパッド - クロスタイプ - G240 - ロジクール\r安定感のあるラバーベース\r底面にはラバー素材が接着されているので、マウスパッドが滑ったり盛り上がったりして、マウスの動きが妨げられることがありません。\rゲーミング マウスパッド - クロスタイプ - G240 - ロジクール\r肌触りの良いクロス素材\rわずか1mmの極薄設計。柔らかいクロス素材を使用しているので、手首がマウスパッドの端に当たっても不快感がありません。 ゲーミング マウスパッド - クロスタイプ - G240 - ロジクール\n丸めて持ち運べるデザイン\rG240は柔らかいクロス素材で作られているため、丸めて持ち運ぶことができ、広げればすぐに平らになります。LANパーティーに持参するときは、高耐久の六角形のケースで持ち運べば傷つきません。 ゲーミング マウスパッド - クロスタイプ - G240 - ロジクール\n開封の儀 パッケージ パッケージはこんな感じ。\n安定のlogcoolさん！！\nでは、早速開封です。\nパカッ。\n付属品 付属品は以下です。\n付属品\rマウスパッド\r保証書関連\r各書類 こちらもマウスと同様にそれぞれ一枚の紙にまとめられています。\nゲームパッド さて、ゲームパッドを見ていきましょう。\n表面はマットな仕上がりで程よい摩擦が発生します。\nまた、デザインはグレー一色にLogicoolのロゴがワンポイントで入っていてかっこいいです！！\n裏面はブルーのラバー素材になっているため、マット自体が滑ることはありません。\nフォートナイトはPUBGなどマウスを激しく動かすゲームでも問題無さそうです！！\n使い心地 サイズ的にはこんな感じです。\nG502 HEROのDPI設定次第ですが、ほんの少しの動きも瞬時に検知してくれるので、かなりエイムを合わせやすくなります。\nまた、摩擦が少ないためずっとゲームをしていても手首の負担が少なく長時間プレイにも向いていると思いました！\n終わりに 以上のように、LogicoolのGシリーズのゲーミングマウスを使っている方なら間違いなくこのマウスパッドをお勧めします！\n少し奮発して、快適なPCゲーム生活のために買ってみてはいかがでしょうか♪\n","date":"2019-03-21T13:07:55+09:00","image":"/wp-content/uploads/2019/03/g240UnboxingEye.png","permalink":"/2019/03/21/7812/","title":"【快適マウスパッド】ゲーミングマウスにぴったりの「Logicool G240t」が滑らかすぎて快適エイムライフが送れそうな件【PUBG/Fortnite/ApexLegends/FPS/TPS】"},{"content":"ゲーミングマウス購入 ゲーミングマウスは必須レベル 最近、PC版のFortniteデビューをしたのですが、より快適なPCゲーム生活をおくるために、遂にゲーミングマウスを購入しました！\nGoogle先生に頼りきった結果、以下のLogicoolのゲーミングマウスの人気が高く、プロプレイヤーの方の利用実績もあったため購入してみました♪\nAmazon ゲーミングマウス ロジクール Logicool G502RGBh HEROセンサー ウェイト調整 LIGHTSYNC RGBライト 耐久性 PUBG FPS また、こちらのマウスは以下のコンバーターを利用する事でPCだけでなくSwitchやPS4でも使用可能との事です！\nAmazon XIM APEX PS4/PS3/xbox one/x box360【国内正規品/一年間保証/日本語版アプリAndroid/iphone/PC】 Amazon Mayflash MAGIC-NS コントローラー アダプタ ワイヤレス Nintendo Switch Neogeo Mini \u0026amp; PC 用 日本正規品 なんだかんだで、マウスの方が精密な操作がしやすいので、使えるに越した事はないですよね！\nその他のLogicool製品 Logicoolの製品は他にも紹介しているので興味がありましたらそちらもみていただければなと思います♪\n関連記事 【ゲーミングキーボード】程よい打鍵感が癖になる「Logicool ロジクール G PRO テンキーレス」がオススメ【PUBG・フォートナイト・ApexLegends】 2019/05/10 2753文字 約6分で読めます 関連記事 【快適マウスパッド】ゲーミングマウスにぴったりの「Logicool G240t」が滑らかすぎて快適エイムライフが送れそうな件【PUBG/Fortnite/ApexLegends/FPS/TPS】 2019/03/21 1968文字 約4分で読めます 関連記事 【Logicool】ゲーミングヘッドセットの「G533」を買ってみた【PUBG/フォートナイト/ApexLegend】 2019/11/05 3067文字 約7分で読めます G502 HERO こちらは、現在販売されているG502と言う製品の上位版モデルのようですね。\nロジクール史上最高精度や、11個ものカスタマイズ可能なボタン、重さ調節用の重りなど、自分の好みにあったカスタマイズがしやすい仕様となっているのも人気の秘訣でしょう。\nまた、1,680万色のRGBライトにも対応しており、操作と連動して点灯するなど、見栄えもとても良くなっています。\n今買うなら間違いなくこちらでしょう。\n“ヒーロー”として生まれ変わった\rG502 HEROは、究極のトラッキング精度を発揮する先進的なオプティカル センサーに加え、カスタマイズ可能なRGBライトとゲーム プロファイル作成機能を搭載。200～16,000の幅広いDPI設定が可能なほか、付属のウェイトを付け替えて重量やバランスを調整できます。 ロジクールG502 HEROハイパフォーマンス ゲーミング マウス\nHERO 16Kセンサー\rHEROは、ロジクール製品の中で最も高精度のゲーミング センサーです。アーキテクチャーを一から見直し、次世代の精度を実現しました。歴代最高のフレームレート処理速度を誇り、IPS 400以上に加え、100～16,000の全DPIでゼロスムージング、ゼロフィルタリング、ゼロアクセラレーションを達成しています。大会で求められる精度が得られるほか、抜群に安定したレスポンスを発揮します。DPI設定は、Logicoolゲーム ソフトウェア（LGS）で自分好みにカスタマイズできます。\rロジクールG502 HEROハイパフォーマンス ゲーミング マウス\rワンタッチでコントロール\r11個のプログラマブル ボタン\rLogicoolゲーム ソフトウェアを使用して、よく使うコマンドやマクロを11個のボタンそれぞれに設定可能。ビルド、しゃがむ、乱闘、回復…ゲーム内のアクションを指先1つで発動できます。最大5つのプロファイルをマウスに直接保存して、どこでも自分の設定でプレイできます。\rロジクールG502 HEROハイパフォーマンス ゲーミング マウス\r重さを調整可能\rライバルの一歩先を行くために、マウスの重みを細かく調整可能。同梱の3.6gのウェイト5個を、マウスの前後左右や中央に自在に配置できます。さまざまな配置やバランスを試して自分にぴったりの構成を見つけ、パフォーマンスを最適化しましょう。\rロジクールG502 HEROハイパフォーマンス ゲーミング マウス\rLIGHTSYNC RGB\rLIGHTSYNCは、ゲーム、オーディオ、PC画面と連動するRGBライトにより、未だかつてない没入感を実現する次世代テクノロジーです。約1,680万色の中から好みの色を選択できるだけでなく、他のロジクールGデバイスとライトのアニメーションやエフェクトを同期することも可能です。カスタマイズは、Logicoolゲーム ソフトウェアで手軽に行えます。\rロジクールG502 HEROハイパフォーマンス ゲーミング マウス\rゲームのための緻密な設計\rG502 HEROの特長は、主要機能の性能やカスタマイズ性の高さだけではありません。細かなところも緻密な計算に基づいて設計されています。5,000万回のクリックに耐えるマウスボタン、フックと結束バンドが付いた編組ケーブル、滑りにくいサイドのラバー素材、マグネット式のウェイトカバーなど、多くの工夫が施されています。\rロジクールG502 HEROハイパフォーマンス ゲーミング マウス\rではでは早速開封していきましょう♪\n開封の儀 パッケージ パッケージはこんな感じ。\n安定のlogcool！！\nでは、早速開封です。\n\u003e\nパカッ。\n付属品 付属品は以下です。\n付属品\rマウス本体\r重り\r保証書\r接続方法説明書\r注意事項説明書\r各書類 保証書や各説明書は冊子形式ではなく、それぞれ一枚の紙にまとめられています。\nマウス本体 さて、マウス本体を見ていきましょう。\n強靭なプラスチックに防護されております！\nパカッ。\nかっこいいですね。。。！\n裏面にも「G」のロゴが。\nとてもマウスコントロールがしやすくなっており、スムーズに動かせます。\nUSBケーブルも結構長めですね。\n重り マウスの重量感を変えるための重りも用意されています。\nパカッ。\n3.6gの重りが計5個用意されており、自分の好みに合わせて取り付けることが出来ます。\n使い方 重りの追加 重りをつけるにはマウスの底面から取り付ける事が可能です。\nマウス左下部分の爪を外す事でカバーが外れます。\n後は、自分の好みに合わせて重りをセットしていきましょう。\nもちろん筆者はフルベット！！\n閉める時も、カバーの2箇所のツメをうまくはめれば簡単に締めれます。\nマウスの接続 では、次にPCにマウスを取り付けましょう。\nこれもびっくりするくらい簡単です！\nUSBをPCに取り付けると、\n自動でドライバーがインストールされ、\n少し待てば使えるようになります。\nあら簡単！\nGが七色に輝くぜ・・・！\nカスタム方法 では、次はマウスのボタンをカスタマイズしてみましょう。\nカスタマイズには、LOGITECH GAMING SOFTWARE\u0026nbsp;経由で行いますので、OSに合わせてインストーラーをダウンロードします。\nダウンロードが完了したら、そのままインストールしましょう。\nインストールが完了したらシステムを再起動しましょう。\n※保存してないファイル等は消えてしまうので気をつけましょう。\n再起動すると、初回のみ以下のようなダイアログが表示されるとおみますので、右上の×で閉じてしまいましょう。(広告なので問題ないです)\nもし、自動で表示されない場合はアプリを検索して実行してください。\nすると、Logicool ゲーム　ソフトウェアが起動します。\n次に、下部のマウスアイコンを選択しましょう。\nここでマウスの各ボタンにマクロやマウスアクション、キーボードアクションを割り振ることが可能になります。(キャプチャでは、すでにちょっとカスタマイズ済みです)\n僕のディスプレイが悪いのか、ちょっとレイアウトが崩れてしまっていますorz\n試しに、親指部分に用意されているスナイパーボタンの割り振りを変えてみましょう。\nダブルクリックすることでコマンドエディタが開きます。\nコマンドエディタには大きく分けて3カテゴリあり、マウス機能/キーストローク/マルチキーマクロから簡単に割り振りを変えることが出来ます。\n今回はキーストロークを割り振ってみます。\n入力エリアにカーソルを合わせてから割り振りたいキーを押すと、インプットされるのでその状態でOKボタンをクリックします。\nこれだけで、スナイパーボタンのキーストロークがPからAに変わりました。\nとても簡単ですね！\n終わりに 以上のように、インストールから設定までとても簡単です。\nまた、マウスだけで11個のボタンがあり、様々な操作を割り振ることが出来るため、操作が複雑なフォートナイトやPUBG、ApexLegendsなどのFPSプレイにはとても向いているゲーミングマウスだと感じました！\n皆さんも普通のマウスでプレイしているのであれば、ちょこっと奮発してこちらを購入してみてはいかがでしょうか♪\n","date":"2019-03-19T12:19:43+09:00","image":"/wp-content/uploads/2019/03/g502UnboxingEye.png","permalink":"/2019/03/19/7758/","title":"【最強ゲーミングマウス】PS4やSwitchでも使用可能な「Logicool ロジクール G502 HERO」の使い方と初期設定方法まとめ【フォートナイト/PUBG/ApexLegends/FPS/TPS】"},{"content":"GoProのタイムラプスのクオリティをあげたい GoProのタイムラプス機能がすごい GoPro愛好家の筆者は、旅行には必ずGoProを持って行きます。\nGoProの最大の魅力と言えば、持ち運び性の高さがあげられますよね。\nそして、そんなGoProに備わっている面白い機能を筆者は使いこなせていません。。。\nそれがタイムラプス機能です。\nhttps://www.youtube.com/watch?v=WHd-PthEG-M\rタイムラプス機能とは、正式には低速度撮影のことを指します。\n低速度撮影をすることで、早送りをしているような映像を撮影する事が出来ます。\nタイム ラプス ビデオを使用すると、設定した間隔でビデオ フレームを記録して、タイム ラプス映像を作成できます。すべての写真をつなぎ合わせる手間は必要ありません! 録画が終了すると、撮影されたフレームが自動的に 1 つのビデオ クリップに編集されます。低速度撮影ビデオの使い方は？\nタイムラプスの映像をワンランク上げる方法 そして、このタイムラプスですがそのまま固定で撮影してももちろん良いのですが、とあるアイテムを利用する事で以下のような一味違った面白い映像を撮影する事が可能になります！！！\nhttps://www.youtube.com/watch?v=h1Tr4WwFFfU\r一定間隔で左右にパンするので、手作業では出来ないようなスムーズなタイムラプス映像を撮れるようになります！！\nそして、そのアイテムとは、IKEAのキッチンタイマーです！！！\nAmazon IKEA(イケア) ORDNING 80174464 タイマー, ステンレススチール IKEA(イケア) ORDNING 80174464 ステンレススチールタイマー こちらの商品は、本来はキッチンタイマーとして利用する商品です。\n上部をねじることでタイマーをセットし、時間が来たらタイマーが鳴る、という仕組みです。\nタイマーをセットするには、まずダイヤルを時計回りに55分の位置まで回します。次に、ダイヤルを反時計回りにセットしたい時間まで回します\rORDNING オルドニング タイマー｜IKEA【公式】家具・インテリア雑貨通販\nですが、この商品、サイズ感から機能までを含めて、GoProのタイムラプス用アクセサリに改造してと言わんばかりの商品だったのです！笑\n今回はこちらの商品をGoPro用のタイムラプス用アクセサリとして改造する方法をご紹介致します♪\n無音化も可能 また、インターネットで調べると同じようなDIYの記事は見つかるのですが、三脚の取り付け作業までの記事がほとんどです。\n[adsense-responsive]\nなので、本記事ではベルが鳴らないように無音化するところまでの手順をご紹介致します！！\n観光地や夜景のタイムラプスを撮影する際に、ベルが鳴るのは周りにも迷惑がかかりマナー違反になってしまいますので、是非無音化までしてみてください♪\n必要な道具 Amazon IKEA(イケア) ORDNING 80174464 タイマー, ステンレススチール Amazon ボンド G17 50ml(ブリスターパック) #13033 Amazon ライト タップホルダーセット TH-6 Amazon IS パック入 ハンド中タップ 1/4NC20 PSHT14NC202 Amazon マーベル ストレートドリルEX 一般鉄鋼・ステンレス用 5.1mm MED-51 また、以前紹介したこちらの電動ドリルドライバーも使用していきます！\n関連記事 【DIYの強い味方】充電式コードレスで小型な電動ドリルドライバー「ブラックアンドデッカー(BLACK\u0026#43;DECKER) BDCDD12」を買ってみた【一人暮らしにもオススメ】 2019/03/02 968文字 約2分で読めます Amazon ブラックアンドデッカー(BLACK\u0026#43;DECKER) 10.8Vリチウム コードレス・ドリルドライバー BDCDD12 手順 始めに 今回の作業は、商品をバラしたり改造する必要があります。\n作業を間違えると、キッチンタイマーが動かなくなりゴミと化す可能性が大いにあります。\n自己責任の上、作業をしてください！！！\n今回の改造対象 さて、コチラが今回の主役のIKEAのキッチンタイマーです。\nシンプルに見た目もかっこいいので、これがGoProのアクセサリになったら嬉しいですよね！\n三脚の取り付けネジ穴を開ける それでは、早速改造をしていきましょう。\nまずは三脚マウントを取り付けれるようにしていきましょう。\n解体 [adsense-responsive]\nまずは、裏面のゴムを剥がします。\nちなみに、改造後にゴムを元に戻したい場合は慎重に剥がしてください。\n綺麗に剥がすのがかなり大変だったのと、筆者は特に不要だったのでベリベリ剥がしましたw。\nゴムを剥がすと、ネジで3箇所止められているのでコチラを外していきます。\nすると、こんな感じでバラす事が可能になります。\nネジ穴開け 取り外したら、中心の穴に3脚マウントが取り付けるようにします。\n今回購入したタップドリルに、1/4インチのドリルを取り付けて回すことでネジ穴を作りましょう。\n試しに、3脚マウントを取り付けてみます。\nピッタンコカンカンです！！！(?)\n底面穴開け 最後に、底面パーツに穴を開けましょう。\n今回購入した5.1mmドリルを使います。\nこちらは手作業で穴開けるのは大変そうなので、冒頭で紹介したような電動ドリルを使いましょう。\nAmazon ブラックアンドデッカー(BLACK\u0026#43;DECKER) 10.8Vリチウム コードレス・ドリルドライバー BDCDD12 中心部分に穴を開けるように気をつけましょう！！！\nずれると、三脚が取り付けれなくなるので、目印をつけた上で穴を開けると綺麗に穴が開きます。\nこれで3脚に取り付ける事が可能になりました♪\n無音化 次は、ベルを外して無音化改造をしていきましょう。\r解体 [adsense-responsive]\nまずは、黒いカバーの付いた方の中心の穴から同じようにネジを外しましょう。\nお次は、銀色の方の3つのネジを外してバラしていきます。\n次は、この歯車が詰まっている部分を取り外すのですが、ここはネジで止まっているわけではないので、ドライバーなどでてこの原理を利用して真上に持ち上げて外しましょう。\nこの歯車部分はとても繊細なので取り扱いには気をつけましょう！！！\n次はベル部分を取り外します。\nベル部分を取り外すには、この金具連動部分が不要になります。\nこの連動部分を取り外すには、以下のツメを持ち上げて抜くことで取り外す事が出来ます。\nしかし、結構硬いかつ上げ過ぎると他のパーツが外れてしまう可能性もあるので、特に気にしないのであればペンチやカッターなどで連動部分を切り落としてしまうのもありだと思います。\n筆者は持ち上げるのが怖かったので、以下の連動部分をペンチでまるまる切り落として無音化をしています！！\nツメ部分ではないので気をつけてください！！！\n元に戻す あとは同じ作業で取り付けていく事で改造作業は完了です♪\nGoProの取り付け では、最後に実際にGoProを取り付けてみましょう。\n今回はこちらのマンフロットのミニ三脚に取り付けてみます。\nAmazon Manfrotto ミニ三脚 PIXI レッド MTPIXI-RD 品質も良さげのオススメ三脚です！\n取り付け方は通常の三脚を取り付けるのと同じ感じでOKです。\nあとは、GoProのベースマウントをキッチンタイマーの上部に貼り付けて、GoPro本体を取り付ければ完成です！！！\n完成系 [adsense-responsive]\n無事に改造完了です！！！\n終わりに 以上のように、DIYをすることで格安でGoProのタイムラプス用アクセサリを作る事が出来ました。\nタイムラプス撮影をしている方は、面白い映像が撮れるようになるので是非作ってみてはいかがでしょうか♪\n","date":"2019-03-03T19:59:48+09:00","image":"/wp-content/uploads/2019/03/goProTimeLapseIkeaEye.png","permalink":"/2019/03/03/7612/","title":"【ベルの無音化改造込み】IKEAのキッチンタイマーを使ってGoProのタイムラプス用アクセサリーを自作する方法と必要道具まとめ【自作DIYマウント】"},{"content":"電動ドリルドライバーが便利過ぎた 筆者はよくDIYや工作を行うのですが、今まではその際に手動のドライバーを使ってコツコツ作業をやっていました。\nしかし、\nめんどくせぇ！！\nという悟りを遂に開いてしまったため、この度、電動ドリルドライバーの購入に踏み出しました。\nそして、実際に使ってみたところ、\nもう手動ドライバーに戻れない体質\nになってしまったので、今回皆さんにもご紹介していこうと思います。笑\nAmazon ブラックアンドデッカー(BLACK\u0026#43;DECKER) 10.8Vリチウム コードレス・ドリルドライバー BDCDD12 また、今回紹介する電動ドリルドライバーは小型のため女性や一人暮らしの方でも扱いやすく、とりあえず一台買って持っておくだけで確実に生活が便利になりますので、オススメです！\n開封の儀 外観 パッケージはこんな感じです。\n強そう。(小並感)\nではでは、サクッと開封していきましょう♪\nパカッ。\n梱包物 梱包物は以下の通りです。\n梱包物\rドリルドライバー本体\r充電コード\rバッテリー\rドライバー\rビット8本\rドリルドライバー本体 本体はこんな感じになっています。\n黒ベースにオレンジがかっこいいですね。\n強そう。(2回目)\nバッテリー バッテリーはこんな感じ。\nバッテリーチャージャー チャージャーはこんな感じ。\n交換用ビット 交換用ビットはこんな感じ。\n取扱説明書 取扱説明書はこんな感じ。\n全編日本語でかなり丁寧に書かれています！\n取り付け では、それぞれを取り付けていきましょう。\nバッテリー充電については、特に難しいことなく取り付けることで充電出来ます。\nバッテリーと本体についても、下部にスライドして取り付けるだけです。\nただ、結構硬いのでカチッと音がするまで入込みましょう。\n取り外す場合は、このレバー部分を押すことで外れます。\nビットの取り付け方については、口部分を回すことでツメが開きます。\nあとは、使用したいビットを刺してツメを閉じるだけです。\n使用感 かなりパワーがありますが、本体が軽量なので難しい体勢でも疲れることなく長時間の作業が出来ます。\nまた、先端部分にLEDライトが付いているので暗所での作業も可能です♪\nペカッ。つって。\n終わりに 以上のように、コスパ最強のコードレス電動ドリルドライバーです。\nまだ、電動ドリルドライバーを持っていない方にはオススメの工具なので是非購入してみてはいかがでしょうか♪\n","date":"2019-03-02T23:16:59+09:00","image":"/wp-content/uploads/2019/03/blackDeckerUnboxingEye.png","permalink":"/2019/03/02/7636/","title":"【DIYの強い味方】充電式コードレスで小型な電動ドリルドライバー「ブラックアンドデッカー(BLACK+DECKER) BDCDD12」を買ってみた【一人暮らしにもオススメ】"},{"content":"WordpressのAPIではアイキャッチが取れない Wordpress4.7でRestAPIが追加 Wordpress4.7で追加された便利な機能として、投稿をREST APIで取得することが可能です。\nWordPress はアプリケーションフレームワークへと生まれ変わろうとしています。このプロジェクトは、簡単で理解しやすく、信頼性の高い API フレームワークを開発することを目的として生まれました。そして WordPress 本体の API を開発することも目的としています。\rこのプラグインは簡単な HTTP ベースの REST API を提供します。あなたのサイトのユーザー、投稿、タクソノミー、その他のデータに対してシンプルな HTTP リクエストを送信することで、取り出したりアップデートすることが可能です。 WP REST API v2 Documentation\nデフォルトで取得出来る情報は以下となっています。\n/wp-json/wp/v2/posts/\u0026lt;post_id\u0026gt; { \u0026#34;id\u0026#34;: 6698, \u0026#34;date\u0026#34;: \u0026#34;2018-10-21T18:00:47\u0026#34;, \u0026#34;date_gmt\u0026#34;: \u0026#34;2018-10-21T09:00:47\u0026#34;, \u0026#34;guid\u0026#34;: { \u0026#34;rendered\u0026#34;: \u0026#34;https://blogenist/?p=6698\u0026#34; }, \u0026#34;modified\u0026#34;: \u0026#34;2018-12-05T17:55:25\u0026#34;, \u0026#34;modified_gmt\u0026#34;: \u0026#34;2018-12-05T08:55:25\u0026#34;, \u0026#34;slug\u0026#34;: \u0026#34;%e3%80%90%e6%82%aa%e5%a4%a2%e3%80%91%e3%83%9d%e3%82%b1%e3%83%a2%e3%83%b3go%e3%81%ae2018%e5%b9%b410%e6%9c%88%e3%81%ae%e3%80%8c%e3%83%80%e3%83%b3%e3%83%90%e3%83%ab%e3%82%b3%e3%83%9f%e3%83%a5%e3%83%8b\u0026#34;, \u0026#34;status\u0026#34;: \u0026#34;publish\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;post\u0026#34;, \u0026#34;link\u0026#34;: \u0026#34;https://blogenist/2018/10/21/6698/\u0026#34;, \u0026#34;title\u0026#34;: { \u0026#34;rendered\u0026#34;: \u0026#34;【悪夢】ポケモンGoの2018年10月の「ダンバルコミュニティデイ」が通信エラー連発で中止になり、アイテムが無駄になった挙句、後日再実施になってしまった件【悲劇】\u0026#34; }, \u0026#34;content\u0026#34;: { \u0026#34;rendered\u0026#34;: \u0026#34;\u0026lt;div\u0026gt;...\u0026lt;/div\u0026gt;\\n\u0026#34;, \u0026#34;protected\u0026#34;: false }, \u0026#34;excerpt\u0026#34;: { \u0026#34;rendered\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;...\u0026lt;/p\u0026gt;\\n\u0026#34;, \u0026#34;protected\u0026#34;: false }, \u0026#34;author\u0026#34;: 2, \u0026#34;featured_media\u0026#34;: 6713, \u0026#34;comment_status\u0026#34;: \u0026#34;closed\u0026#34;, \u0026#34;ping_status\u0026#34;: \u0026#34;closed\u0026#34;, \u0026#34;sticky\u0026#34;: false, \u0026#34;template\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;format\u0026#34;: \u0026#34;standard\u0026#34;, \u0026#34;meta\u0026#34;: { \u0026#34;amp_status\u0026#34;: \u0026#34;\u0026#34; }, \u0026#34;categories\u0026#34;: [ 128 ], \u0026#34;tags\u0026#34;: [ 25, 109, 39, 130, 32, 55 ], \u0026#34;_links\u0026#34;: { \u0026#34;self\u0026#34;: [ { \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/posts/6698\u0026#34; } ], \u0026#34;collection\u0026#34;: [ { \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/posts\u0026#34; } ], \u0026#34;about\u0026#34;: [ { \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/types/post\u0026#34; } ], \u0026#34;author\u0026#34;: [ { \u0026#34;embeddable\u0026#34;: true, \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/users/2\u0026#34; } ], \u0026#34;replies\u0026#34;: [ { \u0026#34;embeddable\u0026#34;: true, \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/comments?post=6698\u0026#34; } ], \u0026#34;version-history\u0026#34;: [ { \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/posts/6698/revisions\u0026#34; } ], \u0026#34;wp:featuredmedia\u0026#34;: [ { \u0026#34;embeddable\u0026#34;: true, \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/media/6713\u0026#34; } ], \u0026#34;wp:attachment\u0026#34;: [ { \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/media?parent=6698\u0026#34; } ], \u0026#34;wp:term\u0026#34;: [ { \u0026#34;taxonomy\u0026#34;: \u0026#34;category\u0026#34;, \u0026#34;embeddable\u0026#34;: true, \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/categories?post=6698\u0026#34; }, { \u0026#34;taxonomy\u0026#34;: \u0026#34;post_tag\u0026#34;, \u0026#34;embeddable\u0026#34;: true, \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/tags?post=6698\u0026#34; } ], \u0026#34;curies\u0026#34;: [ { \u0026#34;name\u0026#34;: \u0026#34;wp\u0026#34;, \u0026#34;href\u0026#34;: \u0026#34;https://api.w.org/{rel}\u0026#34;, \u0026#34;templated\u0026#34;: true } ] } } 上記はpost_id指定ですが、複数取得の場合は同様の配列形式で取得出来ます。\nアイキャッチのURLが含まれていない。。。 デフォルトのレスポンスでは、記事内容に関する情報はおおよそ含まれているのですが、アイキャッチに関する情報が含まれていませんorz\n他のブログやシステムからREST API経由で関連記事として表示したい場合に、アイキャッチ画像が取れないのは不便ですよね。。。\nアイキャッチのURLが含まれていない。。。 しかし、WordpressのREST APIはとてもカスタマイズ性が高く、レスポンス項目を自由に拡張することが出来ますので、今回はREST APIへのアイキャッチ画像を追加する方法をご紹介致します♪\n手順 functions.phpに追記 REST APIをカスタマイズするにはfunctions.phpにコードを追加する必要があります。\n今回はアイキャッチ画像のURLとサイズを取得出来るようにしてみましょう。\n以下を末尾に追記してください。\nfunctions.php //REST APIにアイキャッチ追加 add_action(\u0026#39;rest_api_init\u0026#39;, \u0026#39;custom_wp_rest_api_post\u0026#39;); function custom_wp_rest_api_post() { register_rest_field(\u0026#39;post\u0026#39;, \u0026#39;featured_image\u0026#39;, array( \u0026#39;get_callback\u0026#39; =\u0026gt; \u0026#39;rest_api_add_image\u0026#39;, \u0026#39;update_callback\u0026#39; =\u0026gt; null, \u0026#39;schema\u0026#39; =\u0026gt; null, ) ); } function rest_api_add_image($object, $field_name, $request) { $feat_img_array = wp_get_attachment_image_src($object[\u0026#39;featured_media\u0026#39;], \u0026#39;large\u0026#39;, true); return [ \u0026#39;src\u0026#39; =\u0026gt; $feat_img_array[0], \u0026#39;width\u0026#39; =\u0026gt; $feat_img_array[1], \u0026#39;height\u0026#39; =\u0026gt; $feat_img_array[2], ]; } これは、rest_api_add_image関数で画像のsrc/width/heightを取得し、custom_wp_rest_api_post関数でregister_rest_field関数を使ってfeatured_imageという項目名でセットし、rest_api_initにアクションを追加しています。\n確認 では、実際に再度叩いてレスポンスを確認してみましょう。\n/wp-json/wp/v2/posts/\u0026lt;post_id\u0026gt; { \u0026#34;id\u0026#34;: 6698, \u0026#34;date\u0026#34;: \u0026#34;2018-10-21T18:00:47\u0026#34;, \u0026#34;date_gmt\u0026#34;: \u0026#34;2018-10-21T09:00:47\u0026#34;, \u0026#34;guid\u0026#34;: { \u0026#34;rendered\u0026#34;: \u0026#34;https://blogenist/?p=6698\u0026#34; }, \u0026#34;modified\u0026#34;: \u0026#34;2018-12-05T17:55:25\u0026#34;, \u0026#34;modified_gmt\u0026#34;: \u0026#34;2018-12-05T08:55:25\u0026#34;, \u0026#34;slug\u0026#34;: \u0026#34;%e3%80%90%e6%82%aa%e5%a4%a2%e3%80%91%e3%83%9d%e3%82%b1%e3%83%a2%e3%83%b3go%e3%81%ae2018%e5%b9%b410%e6%9c%88%e3%81%ae%e3%80%8c%e3%83%80%e3%83%b3%e3%83%90%e3%83%ab%e3%82%b3%e3%83%9f%e3%83%a5%e3%83%8b\u0026#34;, \u0026#34;status\u0026#34;: \u0026#34;publish\u0026#34;, \u0026#34;type\u0026#34;: \u0026#34;post\u0026#34;, \u0026#34;link\u0026#34;: \u0026#34;https://blogenist/2018/10/21/6698/\u0026#34;, \u0026#34;title\u0026#34;: { \u0026#34;rendered\u0026#34;: \u0026#34;【悪夢】ポケモンGoの2018年10月の「ダンバルコミュニティデイ」が通信エラー連発で中止になり、アイテムが無駄になった挙句、後日再実施になってしまった件【悲劇】\u0026#34; }, \u0026#34;content\u0026#34;: { \u0026#34;rendered\u0026#34;: \u0026#34;\u0026lt;div\u0026gt;...\u0026lt;/div\u0026gt;\\n\u0026#34;, \u0026#34;protected\u0026#34;: false }, \u0026#34;excerpt\u0026#34;: { \u0026#34;rendered\u0026#34;: \u0026#34;\u0026lt;p\u0026gt;...\u0026lt;/p\u0026gt;\\n\u0026#34;, \u0026#34;protected\u0026#34;: false }, \u0026#34;author\u0026#34;: 2, \u0026#34;featured_media\u0026#34;: 6713, \u0026#34;comment_status\u0026#34;: \u0026#34;closed\u0026#34;, \u0026#34;ping_status\u0026#34;: \u0026#34;closed\u0026#34;, \u0026#34;sticky\u0026#34;: false, \u0026#34;template\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;format\u0026#34;: \u0026#34;standard\u0026#34;, \u0026#34;meta\u0026#34;: { \u0026#34;amp_status\u0026#34;: \u0026#34;\u0026#34; }, \u0026#34;categories\u0026#34;: [ 128 ], \u0026#34;tags\u0026#34;: [ 25, 109, 39, 130, 32, 55 ], \u0026#34;featured_image\u0026#34;: { \u0026#34;src\u0026#34;: \u0026#34;https://blogenist/wp-content/uploads/2018/10/pokemongo10ResultEye.png\u0026#34;, \u0026#34;width\u0026#34;: 1116, \u0026#34;height\u0026#34;: 610 }, \u0026#34;category\u0026#34;: { \u0026#34;name\u0026#34;: \u0026#34;ゲーム\u0026#34;, \u0026#34;slug\u0026#34;: \u0026#34;game\u0026#34; }, \u0026#34;_links\u0026#34;: { \u0026#34;self\u0026#34;: [ { \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/posts/6698\u0026#34; } ], \u0026#34;collection\u0026#34;: [ { \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/posts\u0026#34; } ], \u0026#34;about\u0026#34;: [ { \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/types/post\u0026#34; } ], \u0026#34;author\u0026#34;: [ { \u0026#34;embeddable\u0026#34;: true, \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/users/2\u0026#34; } ], \u0026#34;replies\u0026#34;: [ { \u0026#34;embeddable\u0026#34;: true, \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/comments?post=6698\u0026#34; } ], \u0026#34;version-history\u0026#34;: [ { \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/posts/6698/revisions\u0026#34; } ], \u0026#34;wp:featuredmedia\u0026#34;: [ { \u0026#34;embeddable\u0026#34;: true, \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/media/6713\u0026#34; } ], \u0026#34;wp:attachment\u0026#34;: [ { \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/media?parent=6698\u0026#34; } ], \u0026#34;wp:term\u0026#34;: [ { \u0026#34;taxonomy\u0026#34;: \u0026#34;category\u0026#34;, \u0026#34;embeddable\u0026#34;: true, \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/categories?post=6698\u0026#34; }, { \u0026#34;taxonomy\u0026#34;: \u0026#34;post_tag\u0026#34;, \u0026#34;embeddable\u0026#34;: true, \u0026#34;href\u0026#34;: \u0026#34;https://blogenist/wp-json/wp/v2/tags?post=6698\u0026#34; } ], \u0026#34;curies\u0026#34;: [ { \u0026#34;name\u0026#34;: \u0026#34;wp\u0026#34;, \u0026#34;href\u0026#34;: \u0026#34;https://api.w.org/{rel}\u0026#34;, \u0026#34;templated\u0026#34;: true } ] } } 正しくfeatured_image項目が追加されましたね♪\n終わりに 上記のように必要な情報をREST API経由で取得するようにしておきえば、記事ごとに手入力する必要が無くなり、ショートコード等で自動化を図ることが出来ます。\nWordpressのREST APIは使い勝手が良くかなり便利なので、是非触ってみてはいかがでしょうか♪\n","date":"2019-02-20T20:53:26+09:00","image":"/wp-content/uploads/2019/02/wordpressRestApiAddItemEye.png","permalink":"/2019/02/20/7127/","title":"【項目追加】Wordpress4.7で追加されたRestAPIのレスポンスにアイキャッチ画像のURLやサイズを追加するやり方【カスタマイズ方法】"},{"content":"TwitterにAmazonの商品画像が出ない Twitterでも商品紹介可能 先日、本ブログのTwitterアカウントでも商品紹介をしていこうと思い、Amazonに審査依頼を出し、無事に承認されました。\n申請せずに商品すると、警告や最悪の場合アソシエイトプログラムの停止に繋がる可能性もあるらしいので、無許可でTwitterを使った紹介は止めたほうが良いでしょう。\n申請自体は特に難しい作業ではないので特に記事にまとめませんが、申請から1日経たずに承認メールが届きました♪\nいざ、商品リンクをツイートしたが画像が出ない。。。 申請後にサイト登録も終わったので、早速商品を紹介しようと短縮リンクを取得しツイートしたのですが、なぜか商品画像が表示されませんでした。。。orz\nこの問題、ネットで検索してみると多発しており、なおかつ具体的な原因と解決策が見つからずに困っていました。orz\nなんと奇跡的に解決する方法を発見 しかし、いろいろ試してみた結果、最初は商品画像が出ていなかった状態でも、今回ご紹介する方法によって、筆者の場合は2019年2月5日時点で100%で商品を表示した状態でツイートさせる事に成功する方法を見つけてしまいました！\n今回はその方法をご紹介致します♪\n手順 注意 今回は、TwitterのCard Validator\u0026nbsp;を使った対応方法をご紹介します。\n筆者の場合は、この方法で100%表示させる事が出来ました。\nただ、お使いの環境やそれ以外のなんらかが原因で、筆者とケースと違い、表示されない可能性もありますのでご参考までに捉えていただければなと思いますorz\n前提 まず、対象のリンクをTwitter Card Validatorを使って確認していきます。\n今回はこちらで表示出来ない商品の対処方法をご紹介していきます。\nサンプルとして以下の商品を例に挙げていきます。\nAmazon Rampow USB Type C ケーブル【1m/黒/保証付き】USB3.1 タイプc ケーブル QuickCharge3.0対応 Sony Xperia XZ/XZ2, Samsung Galaxy S9/S8/A3/A7/A9/C5/7pro/C9, Macbook Pro, Nexus 5X/6P, GoPro Hero 5/6 アンドロイド多機種対応 3A急速充電 5Gbps高速データ転送 アソシエイトツールバーで作成したテキストリンクでは以下のように表示が出来ませんでした。\nリダイレクトされたよ、と言うエラーが出たので、試しにリダイレクト先のURLを入れてみてもダメでした。\nでは、早速対応をしてみましょう。\n解決方法 対応方法ですが。方法は簡単です。\n短縮リンクを入力して画像が出るまで繰り返しクリックするだけです！\nはい、キタアァ〜！！！！\nAmazonに問い合わせてみたところ、これはTwitter側の仕様との事。\nおそらくキャッシュ周りの挙動で出ない場合があるのかもしれませんね。\n一度、リダイレクト元の短縮URLでOGP画像が出るようになればTwitterに貼っても無事商品リンクが表示された状態でツイートする事が可能になります。\nこちらはQuick Chage対応のUSB Type-Cケーブルです！\n今ではAndroidからGoPro、モバイルバッテリーなど様々なモノがUSB Type-Cとなっています。\nとりあえず、この一本をバックに忍ばせておけば充電に困ることが減ると思います(`・ω・´)https://t.co/Utt3WdIMNg\n\u0026mdash; Blogenist -ブロゲニスト- (@blogenist) 2019年2月4日\rやったね！！！(ごり押し解決)\n終わりに Amazonの商品を紹介する上で、商品画像はとても重要な情報となります。\nしかし、今回のような商品画像が表示されないことで困っている方が多い気がしていますので、こちらの記事の対応方法を試して頂ければなと思います♪\n","date":"2019-02-05T01:07:10+09:00","image":"/wp-content/uploads/2019/02/twitterAmazonOgpImageEye.png","permalink":"/2019/02/05/7586/","title":"【原因は不明だがこれで99%解決するはず】Twitterに張ったAmazonの短縮リンクのOGP商品画像が表示されない場合の対処方法【Amazonアソシエイトプログラム】"},{"content":"UnixTimeに変換しよう Java8で便利になった日付API 皆さんはJava8で一新された日付APIを利用していますか？\n以前、当ブログでもご紹介致しました。\n関連記事 【Java8の日付操作】DateやCalendarを使うのを止めてLocalDateとLocalDateTimeを使って幸せになろう【初期化】 2018/10/01 1130文字 約3分で読めます 筆者はすっかり使いやすさの虜になってしまい、CalendarクラスやDateクラスはめっきり使わなくなりました。\n直感的に扱いやすい点が魅力的ですよね♪\nUnixTimeに変換するには？ そんな中で、システム開発をしているとUnixTimeで日付時刻を取り扱っている場合が出てきます。\nUNIX時間（ユニックスじかん）またはUNIX時刻（ユニックスじこく、UNIX time（ユニックスタイム）、POSIX time（ポジックスタイム））とはコンピューターシステム上での時刻表現の一種。UNIXエポック、すなわち協定世界時 (UTC) での1970年1月1日午前0時0分0秒から形式的な経過秒数（すなわち、実質的な経過秒数から、その間に挿入された閏秒を引き、削除された閏秒を加えたもの）として表される。GPS時刻などとは異なり、大多数のシステムでは、本当の経過秒数を表すものではない\rUNIX時間 - Wikipedia\nしかし、この新しい日付APIを用いれば簡単にUnixTimeに変換する事が出来ちゃいます！\n今回はLocalDate及びLocalDateTimeそれぞれで、秒単位のパターンとミリ秒単位のパターンに変換する方法をご紹介致します。\n手順 秒単位 まずは秒までのUnixTimeを取得する方法をご紹介します。\nLocalDate LocalDateの場合は以下のように記述します。\nSample.java import java.time.LocalDate; import java.time.ZoneOffset; import java.time.ZonedDateTime; public class Sample { public static void main( String... args) { LocalDate ld = LocalDate.now(); System.out.println( ld ); //ZonedDateTime zdt = ld.atStartOfDay(ZoneOffset.UTC); UTCの場合 ZonedDateTime zdt = ld.atStartOfDay(ZoneOffset.ofHours(+9)); //JSTの場合 long epochSecond = zdt.toEpochSecond(); System.out.println( epochSecond); } } まずはLocalDateをZonedDateTimeに変換します。\nこの際に、UTCなのかJSTなのかで引数の値を変える必要があるので気をつけましょう。\nそして、ZonedDateTimeのtoEpochSecondメソッドを使うことで秒単位のUnixTimeを取得することが可能になります♪\n確認 それでは実行してみましょう。\njavac Sample.java \u0026amp;\u0026amp; java Sample 2019-01-30 1548806400 それっぽい値が取れましたね。\nでは、このUnixTimeから日付に変換してみます。\ndate -r 1548774000 2019年 1月30日 水曜日 00時00分00秒 JST 正しく変換出来ていますね♪\nLocalDateTime LocalDateTimeの場合は以下のように記述します。\nSample.java import java.time.LocalDateTime; import java.time.ZoneOffset; import java.time.ZonedDateTime; public class Sample { public static void main( String... args) { LocalDateTime ldt = LocalDateTime.now(); System.out.println( ldt ); //ZonedDateTime zdt = ldt.atZone(ZoneOffset.UTC); UTCの場合 ZonedDateTime zdt = ldt.atZone(ZoneOffset.ofHours(+9)); //JSTの場合 long epochSecond = zdt.toEpochSecond(); System.out.println( epochSecond ); } } こちらも基本的にはLocalDateの時と同じです。\nまずはLocalDateをZonedDateTimeに変換します。\nこの際に、UTCなのかJSTなのかで引数の値を変える必要があるので気をつけましょう。\nそして、ZonedDateTimeのtoEpochSecondメソッドを使うことで秒単位のUnixTimeを取得することが可能になります♪\n確認 それでは実行してみましょう。\njavac Sample.java \u0026amp;\u0026amp; java Sample 2019-01-30T11:41:39.321 1548816099 それっぽい値が取れましたね。\nでは、このUnixTimeから日付に変換してみます。\ndate -r 1548816099 2019年 1月30日 水曜日 11時41分39秒 JST こちらも正しく変換出来ていますね♪\nミリ秒単位 次はミリ秒までのUnixTimeを取得してみます。\nLocalDate LocalDateの場合は以下のように記述します。\nSample.java import java.time.LocalDate; import java.time.ZoneOffset; import java.time.ZonedDateTime; public class Sample { public static void main( String... args) { LocalDate ld = LocalDate.now(); System.out.println( ld ); //ZonedDateTime zdt = ld.atStartOfDay(ZoneOffset.UTC); UTCの場合 ZonedDateTime zdt = ld.atStartOfDay(ZoneOffset.ofHours(+9)); //JSTの場合 long milliSecond = zdt.toInstant().toEpochMilli(); System.out.println( milliSecond ); } } まずはLocalDateをZonedDateTimeに変換します。\nこの際に、UTCなのかJSTなのかで引数の値を変える必要があるので気をつけましょう。\nここまでは秒単位の流れと同じですね。\nそして、ここがポイントなのですが、ZonedDateTimeのtoInstantメソッドで一旦Instant化してからtoEpochMilliメソッドを使うことでミリ秒単位のUnixTimeを取得することが可能になります♪\n確認 それでは実行してみましょう。\njavac Sample.java \u0026amp;\u0026amp; java Sample 2019-01-30 1548774000000 こちらもそれっぽい値が取れました。\nでは、こちらもUnixTimeから日付に変換してみます。\ndateコマンドでミリ秒のUnixTimeから復元する方法がイマイチわからなかったので、コチラ\u0026nbsp;のサイトで変換して確認しました。\n正しく変換出来ていますね♪\nLocalDateTime LocalDateTimeの場合は以下のように記述します。\nSample.java import java.time.LocalDateTime; import java.time.ZoneOffset; import java.time.ZonedDateTime; public class Sample { public static void main( String... args) { LocalDateTime ldt = LocalDateTime.now(); System.out.println( ldt ); //ZonedDateTime zdt = ldt.atZone(ZoneOffset.UTC); UTCの場合 ZonedDateTime zdt = ldt.atZone(ZoneOffset.ofHours(+9)); //JSTの場合 long milliSecond = zdt.toInstant().toEpochMilli(); System.out.println( milliSecond ); } } まずはLocalDateをZonedDateTimeに変換します。\nこの際に、UTCなのかJSTなのかで引数の値を変える必要があるので気をつけましょう。\nここまでは秒単位の流れと同じですね。\nそして、ここがポイントなのですが、ZonedDateTimeのtoInstantメソッドで一旦Instant化してからtoEpochMilliメソッドを使うことでミリ秒単位のUnixTimeを取得することが可能になります♪\n確認 それでは実行してみましょう。\njavac Sample.java \u0026amp;\u0026amp; java Sample 2019-01-30T11:57:31.122 1548817051122 こちらもそれっぽい値が取れました。\nでは、こちらもUnixTimeから日付に変換してみます。\nこちらも正しく変換出来ていますね♪\n終わりに 以上のように、新しい日付APIを利用していれば、独自実装することなく既存のメソッドを利用することで簡単にUnixTimeを取得することが出来ました。\n意外と知らない方が多いと思うので、困っている方はこちらの方法で試してみてください♪\n","date":"2019-01-30T13:26:05+09:00","image":"/wp-content/uploads/2019/01/java8UnixTimeEye.png","permalink":"/2019/01/30/7571/","title":"【LocalDate/LocalDateTime】Java8以降で秒単位またはミリ秒単位のUnixTimeを取得する方法まとめ【EpochSecond/EpochMilli】"},{"content":"Bookmarkletを使いこなそう What\u0026rsquo;s? 皆さんはブックマークレットをご存知でしょうか？\nブックマークレットとは、ブラウザのアドレスバーにスクリプトを直接記述したり、ブックマーク等にあらかじめ用意しておいたJavaScriptをワンクリックで実行する事が出来る仕組みの事を指します。\nブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである[注釈 1]。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。\rブックマークレット - Wikipedia\rある程度の処理を自動化する事が出来る ブックマークレットの強みは、何と言ってもブラウザ処理を自動化する事が出来るところです。\n例えば筆者の場合は、引用ブロックを自動生成するブックマークレットを自作して活用しています。\n本来、以下のように自分で行っていた操作が、\n手動\r引用タグのベースを用意\r引用元のページを開く\r引用テキストをコピペ\r開発者ツールを開く\rページタイトルを探してコピペ\rページURLをコピペ\r以下のようによりシンプルになります。\n自動\r引用元のページを開く\rブックマークレットをクリックしてページURL、ページタイトルを含んだ引用タグのベースをクリップボードに保存しペースト\r引用テキストをコピペ\r操作手順が半分になることもさることながら、開発者ツールを開く必要が無くなるだけで、めちゃくちゃ作業効率が上がります。\nマジでオススメ！！\nもちろん、JavaScriptで出来ることであれば基本的にはすべて組み込むことが出来ちゃいます！！\n作り方が簡単 また、作り方自体もとても簡単です。\n今回はシンプルなブックマークレットの作り方をまとめてみましたのでご紹介致します。\n手順 前提 今回は、現在開いているページの情報を取得してアラート表示する簡単なブックマークレットを作ってみようと思います。\nJavaScriptの作成 まずは今回の要件を満たすJavaScriptのソースコードを用意しましょう。\n今回は以下のようなシンプルな即時関数を記述します。\nスクリプト (function(){ title = document.title; href = document.location.href; alert(title); alert(href); })(); 確認 試しに上記をChromeの開発者ツールのConsoleタブで実行すると期待通りの動きになります。\nコンパイル スクリプトが用意出来たらブックマークレット化をするのですが、このままだとブラウザのアドレスバーに貼る事が出来ません。\nなので、Googleが提供しているgoogle closure compiler\u0026nbsp;というクロージャーコンパイラを利用します。\n左側のテキストエリアに先ほどのスクリプトをコピペし、Compileボタンをクリックしましょう。\nすると、1行にまとめられたスクリプトが右側に表示されます。\nスクリプト(コンパイル後) (function(){title=document.title;href=document.location.href;alert(title);alert(href)})(); 以降の作業ではこちらを利用するのでコピーしておきましょう。\nブラウザでの動作確認 では、実際にブラウザのアドレバーにスクリプトを入力して動作確認をしてみましょう。\nアドレスバーにjavascript:と入力してから、先ほどのコンパイル後のスクリプトをコピペしてEnterボタンを押してみてください。\n開発者ツールのConsoleで実行した際と同じ挙動をしましたね♪\nちなみにjavascript:{コンパイル後スクリプト}をまとめてコピペすると、うまく動かないので気をつけましょう。\nブックマークに登録 動きはしましたが、毎回アドレスバーに手入力するのは大変ですよね。\nそこで、アドレスバーに入力したスクリプトをブックマークに登録しておけばワンクリックで簡単に実行する事が出来るのです！\n登録の仕方は簡単です。\nブックマークを作成する際のURLに、アドレスバーで実行した時と同じjavascript:{コンパイル後スクリプト}の形式で入力し保存するだけです。\n確認 では、実際に確認してみましょう。\n作成したブックマークをクリックすると、\n期待通りの動きをしてくれましたね♪\n終わりに 以上のように、ブックマークレットを用いてJavaScriptをワンクリックで実行する事が可能になります。\n情報収集やHTMLソース確認など、使いこなすと開発者やブロガーさんの作業スピードを圧倒的にあげる事が可能になります！\n皆さんの作業負担を軽減するためにも、是非JavaScriptの勉強をしてブックマークレットを活用してみてください♪\n","date":"2019-01-25T17:40:11+09:00","image":"/wp-content/uploads/2019/01/howToBookmarkLetEye.png","permalink":"/2019/01/25/7550/","title":"【自動化】ブラウザ操作やコード解析をワンクリックで実行可能な「ブックマークレット」の作り方と設定手順まとめ【ブロガーさんにオススメなテクニック】"},{"content":"環境変数に配列を定義したい 配列定義は不可能 データベースを持たないミニマムなスクリプトやアプリを開発していると、変更する可能性のある値はアプリ内に持つより、環境変数やファイルなどに定義をして読み込む形で利用する方法が保守性も高く多く使われている手法だと思います。\nしかし、環境変数には文字列や数値しか定義することは出来ないため配列形式で定義することは出来ません。\nまた、AWS Lambdaでは環境変数を定義することが出来るのですが配列要素も定義したい。。。。！と言うケースも少なく無いと思います。\nでは、諦めるしか無いのでしょうか？\n実は、少し工夫をするだけで同じようなことを実現する事が出来ます。\n区切り文字を含めた値を定義 それは、区切り文字を含んだ文字列を定義しておき、システム側で環境変数を取得後に、その区切り文字を利用して配列化を行う、という方法です。\nこれであれば、区切り文字さえしっかりとルール化しておけば環境変数で配列要素を管理することが可能になります。\n今回はPython3を用いて環境変数に定義した値から配列要素にするテクニックをご紹介致します。\n手順 前提 環境変数には以下のような定義がされていることとします。\n今回は扱いやすいようにexport SAMPLE_ARRAY=a,b,cのように「,」区切りにしています。\necho $SAMPLE_ARRAY a,b,c split関数で配列化 やり方はとても簡単です。\n以下のように取得した文字列をsplit関数を使って区切り文字で配列化すれば良いです！\nsample.py import os env_var = os.getenv(\u0026#34;SAMPLE_ARRAY\u0026#34;).split(\u0026#39;,\u0026#39;) print(f\u0026#34;env_var:{env_var}\u0026#34;) for env in env_var: print(f\u0026#34;env:{env}\u0026#34;) 確認 では、実際に試してみましょう。\npython sample.py env_var:[\u0026#39;a\u0026#39;, \u0026#39;b\u0026#39;, \u0026#39;c\u0026#39;] env:a env:b env:c 期待通りに配列化する事が出来ましたね♪\n終わりに 以上のように、簡単に環境変数を配列化する事が出来ました。\n環境変数自体には配列定義を出来ませんが、ちょっとしたテクニックで同じような定義を行う事が出来るので、是非試してみてください♪\n","date":"2019-01-23T21:22:01+09:00","image":"/wp-content/uploads/2019/01/python3EnvToArrayEye.png","permalink":"/2019/01/23/7536/","title":"【小技】 Python3で環境変数に定義した値を配列化して使う方法【split関数で文字列分割】"},{"content":"Lambda関数を定期実行しよう サーバーレスを実現出来るLambda関数 先日まで、AWS Lambdaに関する記事をご紹介しました。\n関連記事 【サーバーレスアークテクチャ開発】ローカル環境でAWSのLambdaスクリプトをPythonで実装する際に「python-lambda-local」で動作確認する際のインストール方法とやり方【Bot開発にオススメ】 2019/01/01 3710文字 約8分で読めます 関連記事 【Python3】コマンドラインから簡単にAWS lambdaに関数をアップロード出来ちゃう「lambda-uploader」のインストール方法と使い方【手順まとめ】 2019/01/16 2780文字 約6分で読めます Lambda関数を使えば、サーバーを用意せずにAWSサービスをトリガーに処理を実装出来るので今注目されている技術です。\nCronによる定期実行も可能 そして、もう一つの強みが何と言ってもCron指定により定期実行をスケジューリング出来ることです！\nこれを知った時、サーバーを用意せずに実現出来ることが素晴らしすぎて感動しました。\nまた、設定自体もとても簡単に行うことが出来たので、今回は手順をご紹介致します。\n手順 前提 サンプルとしては以下の記事で作成したLambda関数を利用します。\n関連記事 【Python3】コマンドラインから簡単にAWS lambdaに関数をアップロード出来ちゃう「lambda-uploader」のインストール方法と使い方【手順まとめ】 2019/01/16 2780文字 約6分で読めます しかし、定期実行の場合はeventを取得出来ない為、CloudWatch Logsに以下のようなエラーログが出てしまいます。\n実行ログ START RequestId: 043f221c-84c9-452a-a8a5-4c6a7c4d1171 Version: $LATEST \u0026#39;url\u0026#39;: KeyError Traceback (most recent call last): File \u0026#34;/var/task/lambda_function.py\u0026#34;, line 4, in lambda_handler response = requests.get(event[\u0026#39;url\u0026#39;]) KeyError: \u0026#39;url\u0026#39; END RequestId: 043f221c-84c9-452a-a8a5-4c6a7c4d1171 REPORT RequestId: 043f221c-84c9-452a-a8a5-4c6a7c4d1171\tDuration: 1.51 ms\tBilled Duration: 100 ms Memory Size: 128 MB\tMax Memory Used: 32 MB ですので、lambda_function.pyを以下のように修正しておきましょう。\nlambda_function.py import requests def lambda_handler(event, context): response = requests.get(\u0026#39;\u0026#39;) return \u0026#39;Status : %d\u0026#39; % response.status_code トリガーの作成 まずはLambda関数の設定画面を開き、設定タブを選択した状態でDesignerのCloudWatch Eventsを選択します。\nすると、下部エリアがトリガーの設定画面になるので新規のルール作成を選択し、ルール名・ルールの説明を入力したら、ルールタイプをスケジュール式にチェックを入れ、スケジュール式にcron形式を入寮します。\n今回は試しに1分ごとに起動したいのでcron(0/1 * * * ? *)と入力しましょう。\nそして、トリガーの有効化にチェックを入れたら追加ボタンをクリックしましょう。\nCloudWatch Eventsがセットされていることを確認して保存ボタンをクリックします。\n正常に保存されたらスケジュールに則ってLambda関数が実行されるはずです。\n確認 では、CloudWatch Logsを覗いてみましょう。\nCloudWatch Logs 10:24:16 START RequestId: fb9f45e6-19e9-43a4-98bd-60dc4a6bacd6 Version: $LATEST START RequestId: fb9f45e6-19e9-43a4-98bd-60dc4a6bacd6 Version: $LATEST  10:24:16 END RequestId: fb9f45e6-19e9-43a4-98bd-60dc4a6bacd6 END RequestId: fb9f45e6-19e9-43a4-98bd-60dc4a6bacd6  10:24:16 REPORT RequestId: fb9f45e6-19e9-43a4-98bd-60dc4a6bacd6\tDuration: 257.63 ms\tBilled Duration: 300 ms Memory Size: 128 MB\tMax Memory Used: 32 MB REPORT RequestId: fb9f45e6-19e9-43a4-98bd-60dc4a6bacd6\tDuration: 257.63 ms\tBilled Duration: 300 ms Memory Size: 128 MB\tMax Memory Used: 32 MB  10:25:16 START RequestId: f7a91c50-8ea0-4780-ab21-ca398443de1c Version: $LATEST START RequestId: f7a91c50-8ea0-4780-ab21-ca398443de1c Version: $LATEST  10:25:17 END RequestId: f7a91c50-8ea0-4780-ab21-ca398443de1c END RequestId: f7a91c50-8ea0-4780-ab21-ca398443de1c  10:25:17 REPORT RequestId: f7a91c50-8ea0-4780-ab21-ca398443de1c\tDuration: 272.58 ms\tBilled Duration: 300 ms Memory Size: 128 MB\tMax Memory Used: 32 MB REPORT RequestId: f7a91c50-8ea0-4780-ab21-ca398443de1c\tDuration: 272.58 ms\tBilled Duration: 300 ms Memory Size: 128 MB\tMax Memory Used: 32 MB 正しく1分ごとに実行されていますね♪\n終わりに 以上のようにサーバーレスで定期実行処理を実装することが出来ました。\nこの機能を組み合わせて使うことで、バッチ処理なども行う事が出来るので興味のある方は試してみてください♪\n","date":"2019-01-21T15:58:14+09:00","image":"/wp-content/uploads/2019/01/lambdaScheduleSettingEye.png","permalink":"/2019/01/21/7516/","title":"【サーバーレスアーキテクチャ】AWS lambdaとCloudWatch Eventsを組み合わせてCron処理でLambda関数をスケジューリング処理する方法【バッチ/自動化】"},{"content":"AWS Lambaへのアップロードを簡単に行いたい ローカル開発はpython-lambda-localで決まり 先日、python-lambda-localを使ったローカル環境でのPythonによるLambda関数の実装及び動作確認方法についてご紹介致しました。\n関連記事 【サーバーレスアークテクチャ開発】ローカル環境でAWSのLambdaスクリプトをPythonで実装する際に「python-lambda-local」で動作確認する際のインストール方法とやり方【Bot開発にオススメ】 2019/01/01 3710文字 約8分で読めます アップロードがめんどくさい・・・ ローカルでの動作確認は完了したので、実際にAWSに配置したい！となった場合、通常の手段ではとてもめんどくさいのがデメリットと言えるでしょう。\n依存するライブラリを含めてZIP化し、マネジメントコンソールからアップロードをする、と言う作業は地味にめんどくさいのですorz\nlambda-uploaderならコマンド一発 そんな面倒くさがりな筆者にぴったりなツールを見つけてしまいました！\nlambda-uploaderは、ローカルのLambda用のPythonスクリプトをコマンドラインから一発でAWS Lambdaにアップロードしてくれるのです！\n使い方もとても簡単で、設定ファイルを用意すれば自動でライブラリを含めたZIPを作成してくれて、アップロード時の設定も行ってくれます。\n今回はシンプルなアップロードと動作確認までの手順をご紹介致します♪\n手順 lambda-uploaderをインストール まずはいつも通りpipコマンドを使ってlambda-uploaderをインストールしましょう。\npip install lambda-uploader Collecting lambda-uploader Using cached https://files.pythonhosted.org/packages/9b/64/5f12a1fce98f11394e35a2030d6ed0548ee1cd952480982ad2d8921e9bb0/lambda-uploader-1.3.0.tar.gz Requirement already satisfied: boto3\u0026gt;=1.4.2 in /Users/blogenist/.pyenv/versions/3.6.0/lib/python3.6/site-packages (from lambda-uploader) Requirement already satisfied: botocore\u0026gt;=1.4.85 in /Users/blogenist/.pyenv/versions/3.6.0/lib/python3.6/site-packages (from lambda-uploader) Requirement already satisfied: virtualenv in /Users/blogenist/.pyenv/versions/3.6.0/lib/python3.6/site-packages (from lambda-uploader) Requirement already satisfied: s3transfer\u0026lt;0.2.0,\u0026gt;=0.1.10 in /Users/blogenist/.pyenv/versions/3.6.0/lib/python3.6/site-packages (from boto3\u0026gt;=1.4.2-\u0026gt;lambda-uploader) Requirement already satisfied: jmespath\u0026lt;1.0.0,\u0026gt;=0.7.1 in /Users/blogenist/.pyenv/versions/3.6.0/lib/python3.6/site-packages (from boto3\u0026gt;=1.4.2-\u0026gt;lambda-uploader) Requirement already satisfied: urllib3\u0026lt;1.25,\u0026gt;=1.20; python_version \u0026gt;= \u0026#34;3.4\u0026#34; in /Users/blogenist/.pyenv/versions/3.6.0/lib/python3.6/site-packages (from botocore\u0026gt;=1.4.85-\u0026gt;lambda-uploader) Requirement already satisfied: docutils\u0026gt;=0.10 in /Users/blogenist/.pyenv/versions/3.6.0/lib/python3.6/site-packages (from botocore\u0026gt;=1.4.85-\u0026gt;lambda-uploader) Requirement already satisfied: python-dateutil\u0026lt;3.0.0,\u0026gt;=2.1; python_version \u0026gt;= \u0026#34;2.7\u0026#34; in /Users/blogenist/.pyenv/versions/3.6.0/lib/python3.6/site-packages (from botocore\u0026gt;=1.4.85-\u0026gt;lambda-uploader) Requirement already satisfied: setuptools\u0026gt;=18.0.0 in /Users/blogenist/.pyenv/versions/3.6.0/lib/python3.6/site-packages (from virtualenv-\u0026gt;lambda-uploader) Requirement already satisfied: six\u0026gt;=1.5 in /Users/blogenist/.pyenv/versions/3.6.0/lib/python3.6/site-packages (from python-dateutil\u0026lt;3.0.0,\u0026gt;=2.1; python_version \u0026gt;= \u0026#34;2.7\u0026#34;-\u0026gt;botocore\u0026gt;=1.4.85-\u0026gt;lambda-uploader) Installing collected packages: lambda-uploader Running setup.py install for lambda-uploader ... done Successfully installed lambda-uploader-1.3.0 環境によっては既にインストール済みのモジュールがあると思いますが、とりあえずSuccessfully installed lambda-uploader-X.Y.Zが出力されればインストール完了です。\nIAM Roleの準備 インストールが完了したら、Lambdaを取り扱えるIAM Roleを用意しましょう。\nマネジメントコンソールからIAMを選択し、ロール \u003e ロールの作成ボタンをクリックします。\n次の画面では、AWSサービスが選択された状態で、Lambdaをクリックし次のステップ：アクセス権限ボタンをクリックします。\n次はロールに持たせるポリシーを設定します。\n今回は実行権限をつけたいのでAWSLambdaExecuteポリシーをつけていますが、用途に合わせて設定してください。\n設定が終わったら次のステップ：タグボタンをクリックします。\nタグにはキー/値の形式で任意のタグを設定することが出来ます。\n必須ではないので未入力のまま次へ進んでも良いですが、今回は適当にnameを設定して次のステップ：確認ボタンをクリックします。\n次の画面ではロール名と説明の入力と、前画面までに入力した値の確認を求められます。\n問題が無ければ、ロールの作成ボタンをクリックしましょう。\nこれでロールが正常に作成されました。\n必要ファイルの準備 インストールが完了したら、次は必要なファイルを作成していきましょう。\nlambda_function.py まずはメインとなる関数ファイルを用意しましょう。\n今回は動くかの確認だけ出来れば良いので、以下のような簡単な関数を用意しましょう。\nlambda_function.py import requests def lambda_handler(event, context): response = requests.get(event[\u0026#39;url\u0026#39;]) return \u0026#39;Status : %d\u0026#39; % response.status_code lambda.json 次にアップロードするLambda関数の概要をまとめたJsonファイルを用意します。\n関数名やtimeout/memoryなどを定義します。\nlambda.json { \u0026#34;name\u0026#34;: \u0026#34;lambdaUploaderTest\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;lambda-uploader test\u0026#34;, \u0026#34;region\u0026#34;: \u0026#34;ap-northeast-1\u0026#34;, \u0026#34;handler\u0026#34;: \u0026#34;lambda_function.lambda_handler\u0026#34;, \u0026#34;role\u0026#34;: \u0026#34;arn:aws:iam::XXXXXXXXXXXX:role/BlogenistBlogSample\u0026#34;, \u0026#34;timeout\u0026#34;: 300, \u0026#34;memory\u0026#34;: 128 } このJsonのrole項目の値は先ほど作成したロールのロール ARNを指定してください。\nrequirements.txt 次はrequirements.txtを用意します。\nこちらは、作成したLambda関数が必須としている外部ライブラリを定義するファイルとなっています。\nご存知の通り、Lambdaを用意するにあたって外部ライブラリも含めてZIP化する必要があるのですが、lambda-uploaderを使えばこのファイルの記述を元に自動で行ってくれるとの事です。\nしゅごい。\n作成はpip freeze \u003e requirements.txtコマンドでサクッと自動生成しちゃいましょう。\nrequirements.txt boto3==1.9.76 botocore==1.12.76 certifi==2018.11.29 chardet==3.0.4 docutils==0.14 httplib2==0.12.0 idna==2.8 jmespath==0.9.3 lambda-uploader==1.3.0 oauth2==1.9.0.post1 oauthlib==2.1.0 PySocks==1.6.8 python-dateutil==2.7.5 python-lambda-local==0.1.7 requests==2.21.0 requests-oauthlib==1.1.0 s3transfer==0.1.13 six==1.12.0 tweepy==3.7.0 urllib3==1.24.1 virtualenv==16.2.0 手入力で作成しても良いですが、タイポやバージョン違いなどが発生する可能性がるので自動で作成することをオススメします。\n不要なパッケージを削除 上記コマンドで作成すると、その環境にてインストールされている全てのライブラリが出力されてしまい、そのままだとZIPファイルが肥大化してしまうので、利用するもの以外は削除しておきましょう。\nrequirements.txt requests==2.21.0 アップロード処理 必要ファイルは用意出来たので、対象ディレクトリに移動してlambda-uploaderを使ったアップロードを実行してみましょう。\nlambda-uploader --profile \u0026lt;AWS cli Profile\u0026gt; λ Building Package λ Uploading Package λ Fin おぉ！\n無事に終わりましたね。\n早速AWS cliからLambda関数を取得して確認してみましょう。\naws --profile \u0026lt;profile名\u0026gt; --region ap-northeast-1 lambda get-function --function-name lambdaUploaderTest { \u0026#34;Code\u0026#34;: { \u0026#34;RepositoryType\u0026#34;: \u0026#34;S3\u0026#34;, \u0026#34;Location\u0026#34;: \u0026#34;https://awslambda-ap-ne-1-tasks.s3.ap-northeast-1.amazonaws.com/snapshots/XXXXXXXXXXXX\u0026#34; }, \u0026#34;Configuration\u0026#34;: { \u0026#34;TracingConfig\u0026#34;: { \u0026#34;Mode\u0026#34;: \u0026#34;PassThrough\u0026#34; }, \u0026#34;Version\u0026#34;: \u0026#34;$LATEST\u0026#34;, \u0026#34;CodeSha256\u0026#34;: \u0026#34;XXXXXXXXXXXXXXX\u0026#34;, \u0026#34;FunctionName\u0026#34;: \u0026#34;lambdaUploaderTest\u0026#34;, \u0026#34;VpcConfig\u0026#34;: { \u0026#34;SubnetIds\u0026#34;: [], \u0026#34;VpcId\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;SecurityGroupIds\u0026#34;: [] }, \u0026#34;MemorySize\u0026#34;: 128, \u0026#34;CodeSize\u0026#34;: 9058400, \u0026#34;FunctionArn\u0026#34;: \u0026#34;arn:aws:lambda:ap-northeast-1:XXXXXXXXXXXXXXX:function:lambdaUploaderTest\u0026#34;, \u0026#34;Environment\u0026#34;: { \u0026#34;Variables\u0026#34;: {} }, \u0026#34;Handler\u0026#34;: \u0026#34;lambda_function.lambda_handler\u0026#34;, \u0026#34;Role\u0026#34;: \u0026#34;arn:aws:iam::XXXXXXXXXXXXXXX:role/BlogenistBlogSample\u0026#34;, \u0026#34;Timeout\u0026#34;: 300, \u0026#34;LastModified\u0026#34;: \u0026#34;2019-01-15T05:05:55.185+0000\u0026#34;, \u0026#34;Runtime\u0026#34;: \u0026#34;python2.7\u0026#34;, \u0026#34;Description\u0026#34;: \u0026#34;lambda-uploader test\u0026#34; } } 先ほどアップロードしたものが正しく登録されていそうですね♪\nPythonのRuntimeの指定漏れ しかし、先ほどアップロードしたものだとRuntimeがPython2.7になってしまっていました。\n今回作成したものはPython3.6で動かしたいのですが、lambda.jsonに項目を追加することでRuntimeを変えることが出来るそうです。\n以下のようにlambda.jsonを修正したら再度同じコマンドでuploadしてみましょう。\nlambda.json { \u0026#34;name\u0026#34;: \u0026#34;lambdaUploaderTest\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;lambda-uploader test\u0026#34;, \u0026#34;region\u0026#34;: \u0026#34;ap-northeast-1\u0026#34;, \u0026#34;handler\u0026#34;: \u0026#34;lambda_function.lambda_handler\u0026#34;, \u0026#34;role\u0026#34;: \u0026#34;arn:aws:iam::123456789012:role/BlogenistBlogSample\u0026#34;, \u0026#34;timeout\u0026#34;: 300, \u0026#34;memory\u0026#34;: 128, \u0026#34;runtime\u0026#34;: \u0026#34;python3.6\u0026#34; // 追加 } aws --profile \u0026lt;profile名\u0026gt; --region ap-northeast-1 lambda get-function --function-name lambdaUploaderTest { \u0026#34;Code\u0026#34;: { \u0026#34;RepositoryType\u0026#34;: \u0026#34;S3\u0026#34;, \u0026#34;Location\u0026#34;: \u0026#34;https://awslambda-ap-ne-1-tasks.s3.ap-northeast-1.amazonaws.com/snapshots/XXXXXXXXXXXX\u0026#34; }, \u0026#34;Configuration\u0026#34;: { \u0026#34;TracingConfig\u0026#34;: { \u0026#34;Mode\u0026#34;: \u0026#34;PassThrough\u0026#34; }, \u0026#34;Version\u0026#34;: \u0026#34;$LATEST\u0026#34;, \u0026#34;CodeSha256\u0026#34;: \u0026#34;XXXXXXXXXXXXXXX\u0026#34;, \u0026#34;FunctionName\u0026#34;: \u0026#34;lambdaUploaderTest\u0026#34;, \u0026#34;VpcConfig\u0026#34;: { \u0026#34;SubnetIds\u0026#34;: [], \u0026#34;VpcId\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;SecurityGroupIds\u0026#34;: [] }, \u0026#34;MemorySize\u0026#34;: 128, \u0026#34;CodeSize\u0026#34;: 9058400, \u0026#34;FunctionArn\u0026#34;: \u0026#34;arn:aws:lambda:ap-northeast-1:XXXXXXXXXXXXXXX:function:lambdaUploaderTest\u0026#34;, \u0026#34;Environment\u0026#34;: { \u0026#34;Variables\u0026#34;: {} }, \u0026#34;Handler\u0026#34;: \u0026#34;lambda_function.lambda_handler\u0026#34;, \u0026#34;Role\u0026#34;: \u0026#34;arn:aws:iam::XXXXXXXXXXXXXXX:role/BlogenistBlogSample\u0026#34;, \u0026#34;Timeout\u0026#34;: 300, \u0026#34;LastModified\u0026#34;: \u0026#34;2019-01-15T05:21:15.621+0000\u0026#34;, \u0026#34;Runtime\u0026#34;: \u0026#34;python3.6\u0026#34;, \u0026#34;Description\u0026#34;: \u0026#34;lambda-uploader test\u0026#34; } } 正しくRuntimeがpython3.6に変わりましたね♪\nマネジメントコンソールから動作確認 では、次は実際にアップロードされた関数の動作確認を行いましょう。\nマネジメントコンソールからアップロードした関数を選択します。\n関数を開いたら上部のテストボタンをクリックします。\nすると、テストイベントの設定ダイアログが表示されます。\nここでは、以下のようなJsonを定義して作成ボタンをクリックしましょう。\nテストイベント { \u0026#34;url\u0026#34;: \u0026#34;\u0026#34; } すると、今定義したテストイベントを選べるようになるので、そちらを選択した上でテストボタンをクリックしてみましょう。\nすると、正常に動作したことが確認出来ます。\nあとは、環境変数やAWSサービス等の連携設定を行うことでLambda関数が完成します♪\n終わりに 以上のように、手間がかかっていたアップロードの部分をコマンドラインから一発で行えるので、とても便利でした。\n使わない手はないので、皆さんも是非こちらのツールを利用してアップロードするようにしてみてはいかがでしょうか♪\n","date":"2019-01-16T18:44:03+09:00","image":"/wp-content/uploads/2019/01/lambdaUploaderSettingEye.png","permalink":"/2019/01/16/7479/","title":"【Python3】コマンドラインから簡単にAWS lambdaに関数をアップロード出来ちゃう「lambda-uploader」のインストール方法と使い方【手順まとめ】"},{"content":"文字列で取れてしまう お手軽に環境変数を扱える Pythonを使ってAWSのLambda関数やツールを作成していると、環境変数に設定した値を取得して利用したいというケースが少なからず発生すると思います。\nPython3での環境変数の値の取り方は以下のようにとても簡単です。\n試しにPYTHONPATHと言う環境変数を取得してみます。\nsample.py import os env_var = os.environ.get(\u0026#39;PYTHONPATH\u0026#39;) print(env_var) python sample.py /Users/blogenist/.pyenv/shims/python 存在しない環境変数を指定した場合はNoneが取得されます。\n数値はそのままは使えない ただ、数値を環境変数にもたせている場合はそのまま使おうとすると以下のようになってしまいます。\n.env export LOOP_COUNT=5 sample.py import os env_var = os.environ.get(\u0026#39;LOOP_COUNT\u0026#39;) for index in range(env_var): print(index) python sample.py Traceback (most recent call last): File \u0026#34;sample.py\u0026#34;, line 4, in \u0026lt;module\u0026gt; for index in range(env_var): TypeError: \u0026#39;str\u0026#39; object cannot be interpreted as an integer ✘ これは、os.environで取得した値がint型ではなくstr型で取得されるPythonの仕様のため、そのままではrange関数の引数に使えない、と言う現象になります。\nですので、int型にキャストする必要があるのですが、Python3では簡単にキャストをすることが出来るのでご紹介致します。\n手順 int関数を利用 Pythonには文字列を数値に変換するintメソッドが用意されています。\nこれを利用することで簡単に文字列数字を数値に直すことができます。\nsample.py import os env_var = os.environ.get(\u0026#39;LOOP_COUNT\u0026#39;) print(f\u0026#34;env_var:{env_var}\u0026#34;) int_val = int(env_var) print(f\u0026#34;int_val:{int_val}\u0026#34;) for index in range(int_val): print(index) python sample.py env_var:5 int_val:5 0 1 2 3 4 標準出力上は変わりませんが、しっかりとrange関数に渡せるようになりましたね♪\n半角文字列数値以外をint関数に渡すとどうなる？ では、実装ミス等が原因でint関数に文字列数字以外を渡してみましょう。\nアルファベットの場合 まずはアルファベットの場合です。\rsample.py import os env_var = \u0026#34;A\u0026#34; print(f\u0026#34;env_var:{env_var}\u0026#34;) int_val = int(env_var) print(f\u0026#34;int_val:{int_val}\u0026#34;) python sample.py env_var:A Traceback (most recent call last): File \u0026#34;sample.py\u0026#34;, line 5, in \u0026lt;module\u0026gt; int_val = int(env_var) ValueError: invalid literal for int() with base 10: \u0026#39;A\u0026#39; ✘ 予想通りエラーが出ましたね。\n全角数値の場合 では、次は全角数値の場合です。\rsample.py import os env_var = \u0026#34;１\u0026#34; print(f\u0026#34;env_var:{env_var}\u0026#34;) # 比較用半角数字 exa_var = \u0026#34;1\u0026#34; print(f\u0026#34;exa_var:{exa_var}\u0026#34;) int_val = int(env_var) print(f\u0026#34;int_val:{int_val}\u0026#34;) python sample.py env_var:１ exa_var:1 int_val:1 なんと動いてしまいました・・・・！\nこれは予想外でしたね。\nあまり使うケースはないとは思いますが、このケースは念頭に入れておいた方が良いかもしれませんね。\n終わりに 以上のように、知っておかないとバグが発生してしまいます。\n近年はサーバーレスアーキテクチャや人工知能などでPythonが活躍出来る場が増えてきているので、覚えておくと良いでしょう♪\n","date":"2019-01-14T15:32:31+09:00","image":"/wp-content/uploads/2019/01/pythonEnvStr2IntEye.png","permalink":"/2019/01/14/7471/","title":"【Python3】os.environで取得した環境変数の文字列型(str)の値を数値方(int)に変更するやり方【キャスト方法】"},{"content":"URLに含まれるパスの文字列を取得したい 先日、URL文字列に含まれている文字列を取得したい、という要件が出てきました。\n例えば、/2018/12/02/7077という文字列があった場合に、post_idを表す7077という値を取得したい、と言うケースです。\n正規表現等を利用すれば力技で取得する事は可能ですが、黒魔術になりがちなので筆者としては避けたかった為、いろいろ調べてみたところ、Javaのjava.nio.fileパッケージに含まれるPathsクラスを利用することで簡単に取得する事が出来ました。\n手順 対象文字列をPathクラスにラップ まずはこのURL文字列を扱いやすくするために、Pathsクラスのstaticメソッドであるgetメソッドを利用してPathクラスを生成しましょう。\nPathsSample.java import java.nio.file.Path; import java.nio.file.Paths; public class PathsSample{ public static void main(String... args) { final String TARGET = \u0026#34;/2018/12/02/7077\u0026#34;; // 対象URL Path path = Paths.get(TARGET); // Pathクラスを生成 } } getFileNameメソッドで末尾のパス文字列を取得 次にPathクラスのgetFileNameメソッドを利用して、末尾の文字列情報を取得します。\nちなみに、このメソッドの戻り値はPathクラスとなっているので、しっかりとtoString()メソッドを利用して文字列化する必要があります。\nPathsSample.java import java.nio.file.Path; import java.nio.file.Paths; public class PathsSample{ public static void main(String... args) { final String TARGET = \u0026#34;/2018/12/02/7077\u0026#34;; Path path = Paths.get(TARGET); String result = path.getFileName().toString(); // 文字列取得 } } 確認 では、result変数を標準出力して動作確認をしてみましょう。\nPathsSample.java import java.nio.file.Path; import java.nio.file.Paths; public class PathsSample{ public static void main(String... args) { final String TARGET = \u0026#34;/2018/12/02/7077\u0026#34;; Path path = Paths.get(TARGET); String result = path.getFileName().toString(); System.out.println(result); // 標準出力 } } javac PathsSample.java \u0026amp;\u0026amp; java PathsSample 7077 期待通りの値が取得できましたね♪\nPaths.getはFileSystems.getDefault().getPathと同じ 今回利用したPaths.getメソッドはFileSystems.getDefault().getPathの省略表現となっています。\nなので、FileSystems.getDefault().getPathを利用しても同じ動きは取れます。\nPathsSample.java import java.nio.file.Path; //import java.nio.file.Paths; import java.nio.file.FileSystems; public class PathsSample{ public static void main(String... args) { final String TARGET_WITH_SLASH = \u0026#34;/2018/12/02/7077/\u0026#34;; //Path path = Paths.get(TARGET_WITH_SLASH); Path path = FileSystems.getDefault().getPath(TARGET_WITH_SLASH); String result = path.getFileName().toString(); System.out.println(result); } } javac PathsSample.java \u0026amp;\u0026amp; java PathsSample 7077 ですが、直感的にもわかりやすいので、Paths.getメソッドを使うことを推奨します。\nスラッシュ(/)終わりの場合はどうなる？ URLによってはスラッシュ(/)終わりの場合もありえますよね。\nその場合も正しく動くか確認してみましょう。\nPathsSample.java import java.nio.file.Path; import java.nio.file.Paths; public class PathsSample{ public static void main(String... args) { final String TARGET_WITH_SLASH = \u0026#34;/2018/12/02/7077/\u0026#34;; Path path = Paths.get(TARGET_WITH_SLASH); String result = path.getFileName().toString(); System.out.println(result); } } javac PathsSample.java \u0026amp;\u0026amp; java PathsSample 7077 スラッシュ終わりでも、問題なく同様の値が取得できましたね♪\n気にする必要は無さそうです。\n他のメソッドも試してみよう。 Pathクラスには他にも様々なメソッドがあったのできになるものを試してみました。\ngetRoot まずはgetRootメソッドです。\n以下のようなソースで実行してみましょう。\nPathsSample.java import java.nio.file.Path; import java.nio.file.Paths; public class PathsSample{ public static void main(String... args) { final String TARGET = \u0026#34;/2018/12/02/7077\u0026#34;; Path path = Paths.get(TARGET); System.out.println(String.format(\u0026#34;targetUrl: [ %s ]\u0026#34;, TARGET)); System.out.println(\u0026#34;=================================\u0026#34;); String getRootResult = path.getRoot().toString(); URLに対してgetRootを行うとNULLが返る System.out.println(String.format(\u0026#34;getRoot: [ %s ]\u0026#34;, getRootResult)); } } javac PathsSample.java \u0026amp;\u0026amp; java PathsSample targetUrl: [ /2018/12/02/7077 ] ================================= Exception in thread \u0026#34;main\u0026#34; java.lang.NullPointerException at PathsSample.main(PathsSample.java:15) まさかのぬるぽエラーです・・・！\nどうやら、getRootメソッドは対象のパスがルート・コンポーネントを持たない場合はnullを返します。\n今回はURLパスのためルートの概念が存在しないためぬるぽが発生したと思われます。\n以下のようなディレクトリパスの場合は正しく処理が実行されました。\nPathsSample.java import java.nio.file.Path; import java.nio.file.Paths; import java.util.stream.IntStream; public class PathsSample{ public static void main(String... args) { final String TARGET = \u0026#34;/Users/blogenist/hoge/fuga\u0026#34;; Path path = Paths.get(TARGET); System.out.println(String.format(\u0026#34;targetUrl: [ %s ]\u0026#34;, TARGET)); System.out.println(\u0026#34;=================================\u0026#34;); String getRootResult = path.getRoot().toString(); //URLに対してgetRootを行うとNULLが返る System.out.println(String.format(\u0026#34;getRoot: [ %s ]\u0026#34;, getRootResult)); } } javac PathsSample.java \u0026amp;\u0026amp; java PathsSample targetUrl: [ /Users/blogenist/hoge/fuga ] ================================= getRoot: [ / ] URLパスの場合に、getRootメソッドでドメインが取得出来るわけではないので、気をつけたほうが良いですね。！\nドメインを取得したい」場合は後述のgetNameメソッドを利用することで取得が可能です。\ngetParent 次はgetParentメソッドです。\ngetParentメソッドは現在パスの親のパスを返します。\n親を持たないパスの場合はNULLが返ってきます。。\nPathsSample.java import java.nio.file.Path; import java.nio.file.Paths; public class PathsSample{ public static void main(String... args) { final String TARGET = \u0026#34;/2018/12/02/7077\u0026#34;; Path path = Paths.get(TARGET); System.out.println(String.format(\u0026#34;targetUrl: [ %s ]\u0026#34;, TARGET)); System.out.println(\u0026#34;=================================\u0026#34;); while(path.getParent() != null) { String getParentResult = path.getParent().toString(); System.out.println(String.format(\u0026#34;getParent: [ %s ]\u0026#34;, getParentResult)); path = path.getParent(); } } } javac PathsSample.java \u0026amp;\u0026amp; java PathsSample targetUrl: [ /2018/12/02/7077 ] ================================= getParent: [ https:/blogenist.jp/2018/12/02 ] getParent: [ https:/blogenist.jp/2018/12 ] getParent: [ https:/blogenist.jp/2018 ] getParent: [ https:/blogenist.jp ] getParent: [ https: ] path.getParent() != nullがnullの場合は親が存在しないので終了します。\ngetNameCount 次はgetNameCountメソッドです。\ngetNameCountメソッドは対象のパスに含まれる名前要素の個数を返してくれます。\nPathsSample.java import java.nio.file.Path; import java.nio.file.Paths; import java.util.stream.IntStream; public class PathsSample{ public static void main(String... args) { final String TARGET = \u0026#34;/2018/12/02/7077\u0026#34;; Path path = Paths.get(TARGET); System.out.println(String.format(\u0026#34;targetUrl: [ %s ]\u0026#34;, TARGET)); System.out.println(\u0026#34;=================================\u0026#34;); int getNameCountResult = path.getNameCount(); System.out.println(String.format(\u0026#34;getNameCount: [ %s ]\u0026#34;, getNameCountResult)); } } javac PathsSample.java \u0026amp;\u0026amp; java PathsSample targetUrl: [ /2018/12/02/7077 ] ================================= getNameCount: [ 6 ] スラッシュ(/)で区切られた数だけカウントしているようですね。\ngetName 最後はgetNameメソッドです。\ngetNameメソッドは引数に渡したインデックス番号の名前要素を返してくれます。\nPathsSample.java import java.nio.file.Path; import java.nio.file.Paths; import java.util.stream.IntStream; public class PathsSample{ public static void main(String... args) { final String TARGET = \u0026#34;/2018/12/02/7077\u0026#34;; Path path = Paths.get(TARGET); System.out.println(String.format(\u0026#34;targetUrl: [ %s ]\u0026#34;, TARGET)); System.out.println(\u0026#34;=================================\u0026#34;); IntStream.range(0, path.getNameCount()) .forEach(index -\u0026gt; { String getNameResult = path.getName(index).toString(); System.out.println(String.format(\u0026#34;getName(%s): [ %s ]\u0026#34;, index, getNameResult)); }); } } javac PathsSample.java \u0026amp;\u0026amp; java PathsSample targetUrl: [ /2018/12/02/7077 ] ================================= getName(0): [ https: ] getName(1): [ blogenist.jp ] getName(2): [ 2018 ] getName(3): [ 12 ] getName(4): [ 02 ] getName(5): [ 7077 ] 先ほど、getRootメソッドでは取得出来なかったドメイン名は、インデックス番号を1で指定することで取得する事が出来そうですね。\nちなみに、存在しないインデックス番号を指定すると以下のようなjava.lang.IllegalArgumentExceptionエラーが発生します。\nPathsSample.java import java.nio.file.Path; import java.nio.file.Paths; import java.util.stream.IntStream; public class PathsSample{ public static void main(String... args) { final String TARGET = \u0026#34;/2018/12/02/7077\u0026#34;; Path path = Paths.get(TARGET); System.out.println(String.format(\u0026#34;targetUrl: [ %s ]\u0026#34;, TARGET)); System.out.println(\u0026#34;=================================\u0026#34;); IntStream.range(0, path.getNameCount()) .forEach(index -\u0026gt; { String getNameResult = path.getName(index).toString(); System.out.println(String.format(\u0026#34;getName(%s): [ %s ]\u0026#34;, index, getNameResult)); }); String getNameResult = path.getName(path.getNameCount()).toString(); System.out.println(String.format(\u0026#34;getName(%s): [ %s ]\u0026#34;, path.getNameCount(), getNameResult)); } } javac PathsSample.java \u0026amp;\u0026amp; java PathsSample targetUrl: [ /2018/12/02/7077 ] ================================= getName(0): [ https: ] getName(1): [ blogenist.jp ] getName(2): [ 2018 ] getName(3): [ 12 ] getName(4): [ 02 ] getName(5): [ 7077 ] Exception in thread \u0026#34;main\u0026#34; java.lang.IllegalArgumentException at sun.nio.fs.UnixPath.getName(UnixPath.java:323) at sun.nio.fs.UnixPath.getName(UnixPath.java:43) at PathsSample.main(PathsSample.java:20) 終わりに 以上のように、Java標準のPathクラスを利用する事でURLパス操作を簡単に行う事が出来ました。\n正規表現を使うより、可読性や保守性が上がるので是非Pathクラスを利用してみてください♪\n","date":"2019-01-09T16:59:31+09:00","image":"/wp-content/uploads/2019/01/javaUrlOperationEye.png","permalink":"/2019/01/09/7449/","title":"【Restful API】Java8でURLのパスの先頭や途中、末尾の文字列をPathsクラスを利用して分解・取得する方法【簡単便利】"},{"content":"Spotlightを無効にしたい 標準搭載の検索アプリケーション MacBookを使っているなら、Spotlightというアプリケーションをご存知でしょう。\nSpotlightとは、Mac内に含まれているアプリケーションや書類、その他の様々なファイルを検索することが出来ます。\nSpotlight を使えば、Mac 上の App、書類、その他のファイルを探せます。Spotlight の検索候補機能を使って、ニュース、スポーツ、映画、天気などの情報を入手することもできます。\rMac で Spotlight を使う - Apple サポート\rAlfredが便利過ぎる問題 しかし、多くの方はSpotlightを使わずにAlfredと言う同じような検索アプリケーションを使っていると思います。\nここでは説明は省きますが、無料かつSpotlight以上の働きをしてくれるので、多くの方がAlfredの導入を推奨しています。\nもちろん、筆者もお世話になっています!\nショートカットが邪魔 そうなると、Spotlightを使用する機会が0になります。\nしかし、標準ソフトのためデフォルトでショートカットキーが有効化されているのですが、その組み合わせがIDEのコード保管とかぶってしまう事があります。\nこれはストレスかつコーディングスピード低下にもつながってしまうためOFFにしたいと思っていたのですが、意外と簡単にOFFにする事が出来たのでご紹介致します。\n手順 キーボードの設定画面を開く 設定はキーボードの設定画面から行います。\nツールバーから \u003e システム環境設定を選択します。\n次にキーボードを選択します。\nショートカットを無効化 キーボードの設定画面が表示されたら、ショートカットタブを選択し、左部メニューのSpotlightを選択します。\nすると、以下のようにSpotlight検索を表示にチェックが入っていると思います。\nなので、このチェックを外せばショートカットが無効になり、IDEなどのショートカットが優先されるようになります。\n終わりに 以上のように簡単にSpotlightのショートカットを無効化する事が出来ました。\n使わないアプリケーションのショートカットは無効化しておいた方が快適になるので、是非この設定を試してみてはいかがでしょうか♪\n","date":"2019-01-08T16:42:55+09:00","image":"/wp-content/uploads/2019/01/disableSpotlightEye.png","permalink":"/2019/01/08/7434/","title":"【IDEのショートカットとかぶる問題の回避策】MacBookに標準搭載されているSpotlightのショートカットを無効にする方法【Alfredがいれば問題ない】"},{"content":"遂に達成 月間1万PV 2017年08月14日に記念すべき(?)1記事目を投稿してから早1年4ヶ月。\n遂に2018年11月のPV数が1万を超え、一つの目標だった月間1万PVを達成することができました。\n嬉しいっす・・・！(感無量)\nちなみに、記念すべき初記事です。笑\n関連記事 【インスタ映え】PCからInstagramへの画像や動画のアップロードを可能にする「Gramblr」のインストール方法と使い方【Mac/Windows対応】 2017/08/14 958文字 約2分で読めます まぁ恥ずかしい！\n今回は、そんな記念すべき節目に、同じブログ初心者の方の手助けになる記事になればなと、当ブログの概要やサーバー構成及び費用、月間1万PVまでの道のりなどなど、可能な範囲で紹介と解説をしていこうかなと思います。\n振り返り 目的について スキルアップ まずはブログを立ち上げた目的です。\n筆者はIT業界で働いているため、自身のスキル向上を目的として気になる技術や使った技術を記事としてまとめることで、理解を深める事を第一の目標として掲げました。\n関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！「Wordpress」をインストール編 2017/09/04 1367文字 約3分で読めます 自分の理解を記事にまとめることで、曖昧な部分をさらに調べて文章化することは、IT技術者としてとても意味のあることだと思っております。\nこれは、先輩技術者の\n「どれだけ腕の立つエンジニアでも、インプットだけではなくアウトプットが出来ないと、必要とされなくなる。」\nと言う言葉に感銘を受けたため、行動に移しました。\n節税 二つ目の目的は節税対策です。\nブログ記事の題材として、飲食店のレポートやIT製品の開封・レビューなどは按分によって経費計上出来る、と言う話を聞いたため、これはやるしかない！！！と思いました。\nただ、これはそのブログが収益に繋がる前提なので、後述の広告収入での売り上げ実績がある前提なので気をつけましょう。\n不労所得 三つ目は、アドセンスやAmazonアフィリエイトプログラムによる、広告収入です。\n関連記事 【2017年9月最新版！】クリックされるだけでお小遣いが溜まっていく！Google Adsenseの申請から設定まで！ 2017/09/06 3990文字 約8分で読めます やはり、ただブログを立ち上げるだけではなく、自分の書いた記事によって収益が発生することでブログ継続のモチベーションに繋がると思ったため、これも最初から目的として掲げていました。\n収益については、また別の記事でまとめますが、月間1万PVを達成した月に初めて振り込みがありました。\nめちゃくちゃ嬉しかったです！！(涙)\nブログ方針 立ち上げ当初 このブログは基本的には雑記型ブログとして運営しています。\n目的にもありました通り、もともとはスキルアップのための技術・ITブログとして頑張ろうと思いましたが、技術・ITカテゴリは、他にも多くインターネット上に存在しており、また日本国内でいうとQiita\u0026nbsp;の存在がデカ過ぎて検索上位を取ろうとするには結構厳しい現実がありました。\n当ブログではStaticPressに関してはSEO的にも上位を奪い取ることが出来ましたが、メインを張るには無理だと判断したため、雑記ブログへと方向性を変えることにしました。\n方向転換によってPV数も徐々に増え始め、広告収入も微増ですがいい感じになってきています。\nおそらくIT・技術メインのままだったらまだ1万PVには程遠かったでしょう。。。\n雑記ブログの限界を感じ、姉妹ブログの設営 しかし、IT・技術メインかつ雑記ブログだと、やはりPVを稼ぐのは厳しく感じるようになりました。\nそこで、当初は当ブログで扱っていた旅行やグルメ、ゲーム等のカテゴリを、別ブログに切り出して特化ブログというものも作ってみました。\nTravenist -トラベニスト- \u0026nbsp;\nOtakenist -オタケニスト- \u0026nbsp;\nこちらについてもある程度データが集まったら記事に所感をまとめてみようと思います。\n運営費 では、このブログの運営費についてまとめてみます。\nまず、このブログはさくらのレンタルサーバーなどを使っていません。\n基本的にはAWSサービスを用いております。\n利用しているのは以下サービスです。\nAWSサービス名\r説明\rS3\rHTML/CSS/JS/画像などを配置\rCloudFront\rSSL化やキャッシュ対策\rRoute53\rドメイン管理\r基本的には以下のようになっています。\n同じような構成でブログを運営している方はEC2(サーバー)やRDS(データベース)も借りている方がいると思いますが、実際にはS3にファイルさえ転送してしまえばサーバーは用意する必要が無いため、筆者はローカルマシン(Mac book Pro)にWordpressとデータベースを構築し、ローカルからS3に対してStaticPressS3で転送しているためサーバー代というものは発生しないようにしています。\nまた、ローカルだとPCが壊れたりデータベースが飛んだ時にヤバそうだと思いがちですが、GooleDriveにデイリーでまるごとバックアップをとっているため正直そこまで危険視する必要は無い状態にしています。\n関連記事 【おすすめ無料プラグイン】Wordpress丸々バックアップで安心！「UpdraftPlus」の導入方法【復元】 2017/09/08 1619文字 約4分で読めます ただ、AWSは通信料によって課金がされるので、1万PVだとだいたい月に1500円くらいかかっています。\nさくらのレンタルサーバーに比べるとちょっと高いかもしれませんが、キャッシュや無料SSL、その他いろいろなサービスを利用出来る事を考えると、筆者は特に高いと感じたことはありませんでした。\n単純に安いサーバーを借りたいだけであれば、以下の記事で紹介しているようにさくらのレンタルサーバーのスアンダードプランを借りるのが一番良いでしょう。\n関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！さくらレンタルサーバーのレンタル編 2017/08/28 3469文字 約7分で読めます Wordpressについて 使用テーマ Wordpressについては無料のテーマを独自拡張して利用しています。\n当ブログのテーマはSTINGER8\u0026nbsp;を利用しています。\nまた、無料配布している8beatstyle\u0026nbsp;という子テーマも利用してそちらをベースにカスタマイズしています。\n関連記事 【stinger8拡張】子テーマ「8beat Style」の紹介と導入方法 2017/10/23 1971文字 約4分で読めます 筆者は仕事柄プラグラミングを行っているためある程度の機能が備わっていれば、独自拡張することが出来るため、あまりこだわらずにテーマ剪定を行いました。\nまた、せっかくなら有料テーマに頼らずに自分の運営力のみでどこまでPVを稼げるのかを試したかったというのもあります。\n結果として、時間はかかりましたがある程度のPVを稼げるようにはなりましたが、プログラミング等の知識が無い方でこれからブログ等を立ち上げる方は有料テーマを利用した方が明らかに伸びると思うので、お金は惜しまない方が良いと思いますね。\nStaticPress(S3)による高速化 また、本ブログはStaticPress(S3)を利用しているため、静的ブログとして運用しています。\nそのおかげで表示スピードは一般のWordpressに比べても格段に早くなっており、訪問者にストレスを与えないように気をつけています。\n関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます 関連記事 【StaticPressS3】WordpressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】 2018/05/06 3508文字 約8分で読めます 関連記事 【Wordpress】AWSのS3とCloudFrontとRoute53を連携して独自ドメインで公開する方法【お名前.com】 2018/05/07 2981文字 約6分で読めます 関連記事 【無料SSL証明書】AWSでHTTPS通信を取得してCloudFrontに設定してみよう！【Wordpress】 2018/05/08 3849文字 約8分で読めます ただ、PHPを利用したブログ内検索やコメント、メルマガなどの機能は利用出来なくなっていますが、一方的な発信をメインにしているブログのため、特に不要と判断しました。\n記事数の推移 次は記事数についてまとめてみます。\nブログ開設からの記事数は以下のようになっています。\n月\r投稿数\r総記事数\r2017年8月\r6記事\r6記事\r2017年9月\r11記事\r17記事\r2017年10月\r14記事\r31記事\r2017年11月\r6記事\r37記事\r2017年12月\r6記事\r43記事\r2018年1月\r15記事\r58記事\r2018年2月\r10記事\r68記事\r2018年3月\r26記事\r94記事\r2018年4月\r25記事\r119記事\r2018年5月\r28記事\r147記事\r2018年6月\r15記事\r162記事\r2018年7月\r4記事\r166記事\r2018年8月\r18記事\r184記事\r2018年9月\r15記事\r199記事\r2018年10月\r22記事\r221記事\r2018年11月\r12記事\r233記事\r2018年12月\r13記事\r246記事\r2019年1月\r11記事\r257記事\r2019年2月\r2記事\r259記事\r2019年3月\r7記事\r266記事\r1日1記事を目指して頑張った月もありましたが、1ヶ月続くことは無理でした。。。orz笑\n初心者ブログの目安である100記事を超えたのは2018年4月なので、開設してから9ヶ月目でした。\nおそらくペースとしては遅いほうでしょうね(;_;)\nまた、記事数はだいぶ増えてきたので2019年に入ってからはリライト作業をメインに行うようにしています。\nある程度リライトが終わったらまた新しい記事を増やしていこうかなと思っています♪\nPV数の推移 では、実際にPV数の推移をまとめてみましょう。\nGoogle AnalyticsとGoogle Adsenseの規約の兼ね合いのため、スーパーざっくりとして数字での報告になりまするorz\n月\rPV数(およそ)\r総PV数(およそ)\r備考\r2017年8月\r300PV\r300PV\r自分のIPを除外してなかったので、無効なPVが蓄積orz\r2017年9月\r500PV\r800PV\r自分のIPを除外してなかったので、無効なPVが蓄積\r2017年10月\r200PV\r1000PV\r自分のIPを除外したため、PV激減orz\r2017年11月\r200PV\r1200PV\r-\r2017年12月\r0PV\r1200PV\r年末効果もあり、PV激減orz\r2018年1月\r200PV\r1400PV\rこの辺から徐々に右上がりになる\r2018年2月\r800PV\r2200PV\r-\r2018年3月\r1400PV\r3600PV\r-\r2018年4月\r1800PV\r5400PV\r-\r2018年5月\r800PV\r6200PV\rサイトのHTTPS化により、SEOリセットのためPV激減orz\r2018年6月\r1800PV\r8000PV\r-\r2018年7月\r2700PV\r10700PV\r-\r2018年8月\r5000PV\r15700PV\r-\r2018年9月\r5400PV\r21100PV\r-\r2018年10月\r6500PV\r27600PV\r-\r2018年11月\r12000PV\r39600PV\rとあるゲーム攻略記事がちょっとだけバズったためPV増加\n初の1万PV超え月\r2018年12月\r8500PV\r48100PV\rゲーム記事のパワー減少と、AMP化によるスマホPVの取りこぼしのため減少\r2019年1月\r11000PV\r59100PV\rバズり記事の力に頼ること無く再度、1万PV超え達成！！\r2019年2月\r10200PV\r69300PV\r日数が少ないからね。。。(小声\r2019年3月\r10700PV\r80000PV\rキリがいい！笑\rこんな感じの推移となっています。\nちなみに、ちょっとだけバズったゲーム記事はこちらのポケットモンスターLet'sGo!ピカチュー\u0026イーブイの攻略記事です。\n関連記事 【最短クチバシティで入手可能】自転車システムが廃止されたピカブイでポケモンに乗って移動速度をあげよう【ペルシアン/ウィンディ】 2018/11/17 671文字 約2分で読めます キャプチャは規約的に貼れませんが、某攻略サイトを差し置いて、検索1位を獲得したため、発売後数日間はかなりのPV数を稼いでくれました。\nしかし、ゲーム攻略記事は鮮度が大事なため、時間が経つにつれてPV数が減り、12月は惜しくも1万PVに届きませんでしたorz\nゲーム関連の記事については、姉妹ブログとして12月に新たに立ち上げ、まだ1ヶ月経ったくらいですが徐々にPV数が伸びているため、今後稼ぎ頭になってくれるかもしれません。(ワクワク)\n収益について 収益についてはまた、別記事でまとめようと思いますが、無事にAdsenseの初回払い込みが先日行われました。\nマイペースで運営しているため、他のブログに比べたら遅いと思いますが、振り込みを見たときはとても嬉しかったです！\n広告収入については、順調に右上がりになっているため、これからもお小遣いが増えていくように頑張っていこうと思います！！\n終わりに 以上のように、当ブログの1万PVまでの道のりを簡単にですが、まとめてみました。\n近年はブログ開設がとても容易になったため、ブロガーデビューする人が増えていますが、やはり長続きせずに1万PVに達しないブログが7割を占める、という記事をよく見かけます。\n皆さんも是非、上位3割に入れるように1万PVを目指してみてください♪\n","date":"2019-01-07T01:03:34+09:00","image":"/wp-content/uploads/2019/01/10000PvEye.png","permalink":"/2019/01/07/7098/","title":"【2019年3月更新】月間1万PV達成記念！ブログ初心者が誰の手も借りずに無料のWordpressテーマを使って雑記型のIT・技術ブログで月間1万PV達成【道のりと内容まとめ】"},{"content":"現代に現れた唯一無二のごり押し論 カロリーゼロ理論とは？ 皆さんはカロリーゼロ理論というものを\nカロリーゼロ理論とは、芸人のサンドウィッチマンの伊達みきおさんが唱える理論の事です。\nサンドウィッチマンといえば、好きな芸人ランキングで1位を取るなど最近とても好感度が高いコンビですよね。\nそんなサンドウィッチマンの伊達ちゃんが唱えるこの理論ですが、もうごり押しでめちゃくちゃ過ぎるのですが、とても面白く話題になってます。笑\n例として、ドーナツに対するカロリーゼロ理論をご紹介します。\nドーナツといえば、小麦の生地を油で揚げ、チョコやクリームがトッピングされており、とても甘くておいしいお菓子ですよね。\n小麦や油、チョコやクリームなどカロリーの代名詞をここぞとばかりに使って調理をしているため、高カロリーな食べ物としてとても有名です。\nしかし、伊達ちゃんのカロリーゼロ理論にかかれば、なんと0カロリーという事を証明出来てしまうのです！！\nカロリーは真ん中に集まる習性があって、ドーナツはその真ん中がくり抜かれて空洞なので実際にはカロリーゼロ\rなんということでしょう。\n匠の理論によってカロリー０になってしまいました。\n恐ろしいごり押しですね。。。！\nでも、面白くてなぜかなるほど。。。と思ったり思わなかったり。笑\nしかし、そんな伊達ちゃんの健康状態はすこぶる悪いらしく、2017年当時は血圧が上211・下146であるとテレビ番組で告白し、医師から「今、目の前で死んでもおかしくない」と警告されていたそうです。。。\nダメじゃん！！！笑\nアメトーーーク アメトーークでは、度々このカロリーゼロ理論が登場しています。\nここまで世の中に浸透したのは、アメトーークが発祥と言っても良いでしょう♪\nついつい食べ過ぎちゃう芸人 伊達がアメトークで初めてカロリーゼロ理論を唱えたのは2017年10月15日放送の「ついつい食べ過ぎちゃう芸人」でした。\nこの回で伊達は。「カロリーは真ん中に集まる、ドーナツは真ん中が空いているからカロリーゼロ」や「カステラは潰せばこんなに小さくなる、これが太るわけない（潰した時にカロリーがふわっと飛んでいくので、副流カロリーにはご注意）」などを紹介し、お茶の間に衝撃を与えました。\n副流カロリーにはクソ笑いましたw\nアイスがなきゃ生きてイケない芸人 2017年8月20日放送の「アイスがなきゃ生きてイケない芸人」でも、カロリーゼロ理論が登場しました。\nこの放送では、この夏に食べたいスターアイス48選が特集されたほか、ブラックマヨネーズの小杉竜一、サンドウィッチマンの伊達みきお、よゐこの濱口優、麒麟の川島、ニッチェの江上、タイークの金井、川田裕美アナと、ゲストにミスター自己管理とも称されるアンジャッシュの渡部建と藤田ニコルを招いてアイスについて討論をしました。\nこの中でも、「アイスは冷たいからカロリーゼロ」や、「カップに記載されているカロリーはカップのカロリーだからカップを食べなければカロリーゼロ」と発言し、会場を笑わせました。笑\n揚げ物大好き芸人 2018年9月2日放送の「揚げ物大好き芸人」では、再びアンジャッシュ渡部とのカロリーゼロ論争が勃発しました。\nこの放送では、ブラックマヨネーズの小杉竜一、サンドウィッチマン、渡辺直美、アンタッチャブルの山崎弘也、ジャングルポケットの斉藤慎二ら揚げ物を愛する芸人たちが集結し、ゲストに新川優愛さん、アンジャッシュの渡部建が出演しました。\nこの中でも、「カロリーは熱に弱いからカロリーゼロ」と言う衝撃の事実を発表して日本中に衝撃を与えました。笑\n草野球たのしい芸人 また2018年7月5日放送の「草野球たのしい芸人」でも伊達のカロリーゼロ理論が炸裂しました。\nこの回は、サンドウィッチマンの伊達、チュートリアルの徳井義実、スピードワゴンの小沢一敬の楽しむことが目的の「和気あいあい勢」派と、ますだおかだの増田英彦、トータルテンボスの藤田憲右の真剣にやることが目的の「超ガチ勢」派がお互いの立場を踏まえて草野球の魅了を語り合いました。\nそんな中で、伊達は「試合後の神宮・外苑パーラーが超楽しい♪　かつ丼がうまいんです。あとカツカレーとか」と紹介しました。\nそれに対して司会を務める雨上がり決死隊の宮迫博之が「運動した後に、カロリー取っていいの？」と質問したところ、伊達は「カロリーゼロなんです！」と断言しました。\n伊達曰く、「カレーのカロリーととんかつのカロリーが一緒になると、カロリー同士がぶつかり合ってけんかするんです。そのままけんかするんでゼロです！」と説明して笑いが起こります。\nさらに宮迫は「じゃあ、かつ丼はどうなの？」と質問すると、伊達は「ライスは元々、ゼロキロカロリーじゃないですか？」と独自の謎理論を展開。\n蛍原徹からも「どういう計算？」とツッコミを入れられますが、「白いモノはカロリーないですから！」と改めて主張しました笑。\nさらに徳井から「カロリーって色素なの？」とツッコミが入っても「カロリーは色着いてますから！」と間髪入れず回答をします。\r即時に回答するところがすごいですね。笑\nさらに「卵のカロリーととんかつのカロリーがケンカするから、全く残りません、カロリーゼロ！」と断言し、「どんどん痩せますよ！」と畳み掛けます！！\nしかし、共演者から「全然痩せてない。」と総ツッコミが入って、スタジオは爆笑に包まれました。\n流れが完璧に仕上がっていますね。笑\nモンキーマジック さらになんと、このカロリーゼロ理論をテーマにした楽曲をあのモンキーマジックとコラボ制作までしています！\nMONKEY MAJIKは、日本の4人組ロックバンド。所属レーベルはエイベックス・エンターテイメント内のbinyl records。所属芸能事務所はエイベックス・マネジメント。略称は「モマジ」または「モンマジ」。\rMONKEY MAJIK - Wikipedia\rそれがこちらの「ウマーベラス」と言う楽曲です。\nhttps://youtu.be/XWo627F7CeU\r中毒性がハンンパないです。\nこちらはAmazonでも配信されています♪\nAmazon ウマーベラス MONKEY MAJIKのメンバーは宮城在住で、サンドウィッチマンの二人も宮城出身なので、同郷ということでお互いのライブに足を運んだりして、長年にわたって交流を重ねてきたそうです。\nそんな縁から、サンドウィッチマンのレギュラー番組『サンドのぼんやり～ぬTV』（TBCテレビ）のオープニング曲をMONKEY MAJIKが書き下ろすことになり、このウマーベラスが制作されてたそうです。\nタイトルの「ウマーベラス」は、サンドウィッチマンの富澤たけしの食レポ時の決めゼリフから取られていたり、曲の至る所にはサンドウィッチマンのコントで登場する「ハンバーガーショップ」や「寿司屋」、「興奮してきたな」、「HOT DOG割引券(ハダワリケン)」、さらにはサビには伊達みきおの提唱する「カロリーゼロ理論」をリスペクトした「どれだけ食べてもゼロカロリー」の定番フレーズを多様するなど、サンドウィッチマンの鉄板ネタが70～80年代のディスコミュージックに乗せて歌われています。\nサンドウィッチマンのファンには堪らない歌詞です！！笑\nゼロカロリー理論まとめ ドーナツ カロリーは中心に集まる性質がある為、ドーナツなどの中心が空洞の食べ物はカロリーゼロ。形もカロリーゼロを表してるから太らない。\nカステラ カステラはギュッって潰して小さくすればカロリーゼロ。潰したと同時に、カロリーが空気中にフワッと飛んで行く。\nカツカレー カツカレーは、カレーのカロリーととんかつのカロリーが一緒になることで、カロリー同士がぶつかり合ってけんかするのでカロリーゼロ。\n揚げ物 カロリーは熱に弱く、110℃以上に耐えられないから揚げ物はカロリーゼロ。\n柿の種 柿の種ってね、食べても太らないんですよ。小っちゃいし。辛いからカロリーを自然と消費する。よってカロリーゼロ。\nアイス アイスは冷たいし、カロリーごと凍らせているからカロリーゼロ。\n糖分 甘いものはすぐエネルギーに変わるので太らない。\n麩菓子 ほぼほぼ食べている気がしないからカロリーゼロ。\n烏龍茶 一緒に飲むとカロリーがゼロになる。\n歌舞伎揚 昔からあるお菓子は太らない。ロングセラーっていうのは太らないからあり続ける。\n麻婆豆腐 辛い豆腐だからダイエット食品。\nコロッケ じゃがいもは野菜。パン粉に包んで油で揚げる事で、若干あるカロリーが油に逃げる。\nナポリタン トマトでコーティングされてるからカロリーゼロ。\nガリガリ君 食べると痩せるから「ガリガリ君」。冷たいモノは基本的にカロリーゼロ。\nジンギスカン ラム肉はカロリーゼロ。食べるほどに痩せ、北海道で18人前食べたがガリガリになった。\n純米せんべい 純米だからカロリーゼロ。サラダ味なのでむしろ痩せる可能性も。\nバウムクーヘン 真ん中のカロリーのある部分くり抜いてるからカロリーゼロ。\nマドレーヌとカフェオレ 相性がいいのでカロリーゼロ。\n酪王カフェオレアイスクリーム （箱には208kcalと記載されているが）箱まで食べたら208kcal。\nライス ライスは元々、ゼロキロカロリー。\nおすすめ サンドウィッチマン ライブツアー 2017 Amazon サンドウィッチマン ライブツアー 2017 最新 早わかりインデックス 食材\u0026amp;料理カロリーブック 七訂食品成分表対応 Amazon 最新 早わかりインデックス 食材\u0026amp;料理カロリーブック 七訂食品成分表対応 終わりに 以上のように、迷いもなく断言している部分が癖になる面白理論ですね！笑\n皆さんもカロリーゼロ理論を考えてみてはいかがでしょうか♪\n","date":"2019-01-06T18:46:12+09:00","image":"/wp-content/uploads/2019/01/sandwitchmanEye.png","permalink":"/2019/01/06/7371/","title":"【カロリーゼロ理論まとめ】サンドウィッチマン伊達ちゃんが唱える「カロリーゼロ理論」とは？【無茶苦茶】"},{"content":"ローカルでのLambdaスクリプト開発の課題 サーバーレスアーキテクチャの代名詞 皆さんはAWSのLambdaを使っているでしょうか？\nLambdaはサーバーレスアーキテクチャを実現する上で、欠かせない存在となっており、サーバーレスの流行りのおかげでとてもメジャーなAWSサービスの一つとなっています。\nAWS Lambda を使用することで、サーバーのプロビジョニングや管理をすることなく、コードを実行できます。課金は実際に使用したコンピューティング時間に対してのみ発生し、コードが実行されていないときには料金も発生しません。\rLambda を使用すれば、実質どのようなタイプのアプリケーションやバックエンドサービスでも管理を必要とせずに実行できます。コードさえアップロードすれば、高可用性を実現しながらコードを実行およびスケーリングするために必要なことは、すべて Lambda により行われます。コードは、他の AWS のサービスから自動的にトリガーされるよう設定することも、ウェブやモバイルアプリケーションから直接呼び出すよう設定することもできます。 AWS Lambda (サーバーレスでコードを実行・自動管理) | AWS\nまた、Lambdaは言語を問わずJava、Node.js、Pythonなど様々な言語を用いて実装出来るのも魅力の一つです。\n最近はPythonでLambdaを実装するのが多いですね。\nローカル開発がちょっと大変 この便利なLambdaですが、ローカルで動作確認をしたい場合にちょっと厄介です。\n外部のライブラリを使用している場合はZipに固める必要があったり、関数のトリガーもLambdaに依存しているため、ローカルで同じように動かすにはローカル様にちょっとソースを変える必要があったりと差分が発生してしまいます。\npython-lambda-localが便利過ぎる そんな中、PythonでLambdaをローカル環境で実装・動作確認をする際にとてもpython-lambda-local\u0026nbsp;と言う便利なツールを見つけました。\nこちらを使えば、ローカルでのLambdaスクリプトを簡単に実装・動作確認することが出来ます。\nまた、インストールもpipコマンドでワンタッチで出来たのでインストールから使い方までご紹介致します。\n手順 pipでpython-lambda-localをインストール 今回はpipコマンドでpython-lambda-localをインストールします。\npip install python-lambda-localを実行すると以下のようにインストールが完了すると思います。\npip install python-lambda-local Collecting python-lambda-local Downloading https://files.pythonhosted.org/packages/d1/87/f54ade7dea162f501451340ec6ce1f906d7ef5ed09f310c6a9dd468caaac/python-lambda-local-0.1.7.tar.gz Collecting boto3 (from python-lambda-local) Downloading https://files.pythonhosted.org/packages/0b/3b/925c7aded1c54c12d5be964ab543420b01d95759c5756a574588d49444ad/boto3-1.9.71-py2.py3-none-any.whl (128kB) 100% |████████████████████████████████| 133kB 2.9MB/s Collecting botocore\u0026lt;1.13.0,\u0026gt;=1.12.71 (from boto3-\u0026gt;python-lambda-local) Downloading https://files.pythonhosted.org/packages/50/c0/cd4f8bec8a10876f0ce34f0cf264fda04e09df41d1a473a43f890c71fffa/botocore-1.12.71-py2.py3-none-any.whl (5.2MB) 100% |████████████████████████████████| 5.2MB 1.8MB/s Collecting jmespath\u0026lt;1.0.0,\u0026gt;=0.7.1 (from boto3-\u0026gt;python-lambda-local) Downloading https://files.pythonhosted.org/packages/b7/31/05c8d001f7f87f0f07289a5fc0fc3832e9a57f2dbd4d3b0fee70e0d51365/jmespath-0.9.3-py2.py3-none-any.whl Collecting s3transfer\u0026lt;0.2.0,\u0026gt;=0.1.10 (from boto3-\u0026gt;python-lambda-local) Downloading https://files.pythonhosted.org/packages/d7/14/2a0004d487464d120c9fb85313a75cd3d71a7506955be458eebfe19a6b1d/s3transfer-0.1.13-py2.py3-none-any.whl (59kB) 100% |████████████████████████████████| 61kB 532kB/s Collecting docutils\u0026gt;=0.10 (from botocore\u0026lt;1.13.0,\u0026gt;=1.12.71-\u0026gt;boto3-\u0026gt;python-lambda-local) Downloading https://files.pythonhosted.org/packages/50/09/c53398e0005b11f7ffb27b7aa720c617aba53be4fb4f4f3f06b9b5c60f28/docutils-0.14-py2-none-any.whl (543kB) 100% |████████████████████████████████| 552kB 2.0MB/s Collecting python-dateutil\u0026lt;3.0.0,\u0026gt;=2.1; python_version \u0026gt;= \u0026#34;2.7\u0026#34; (from botocore\u0026lt;1.13.0,\u0026gt;=1.12.71-\u0026gt;boto3-\u0026gt;python-lambda-local) Downloading https://files.pythonhosted.org/packages/74/68/d87d9b36af36f44254a8d512cbfc48369103a3b9e474be9bdfe536abfc45/python_dateutil-2.7.5-py2.py3-none-any.whl (225kB) 100% |████████████████████████████████| 235kB 2.2MB/s Requirement already satisfied: urllib3\u0026lt;1.25,\u0026gt;=1.20; python_version == \u0026#34;2.7\u0026#34; in /usr/local/lib/python2.7/site-packages (from botocore\u0026lt;1.13.0,\u0026gt;=1.12.71-\u0026gt;boto3-\u0026gt;python-lambda-local) (1.23) Collecting futures\u0026lt;4.0.0,\u0026gt;=2.2.0; python_version == \u0026#34;2.6\u0026#34; or python_version == \u0026#34;2.7\u0026#34; (from s3transfer\u0026lt;0.2.0,\u0026gt;=0.1.10-\u0026gt;boto3-\u0026gt;python-lambda-local) Downloading https://files.pythonhosted.org/packages/2d/99/b2c4e9d5a30f6471e410a146232b4118e697fa3ffc06d6a65efde84debd0/futures-3.2.0-py2-none-any.whl Collecting six\u0026gt;=1.5 (from python-dateutil\u0026lt;3.0.0,\u0026gt;=2.1; python_version \u0026gt;= \u0026#34;2.7\u0026#34;-\u0026gt;botocore\u0026lt;1.13.0,\u0026gt;=1.12.71-\u0026gt;boto3-\u0026gt;python-lambda-local) Downloading https://files.pythonhosted.org/packages/73/fb/00a976f728d0d1fecfe898238ce23f502a721c0ac0ecfedb80e0d88c64e9/six-1.12.0-py2.py3-none-any.whl Building wheels for collected packages: python-lambda-local Running setup.py bdist_wheel for python-lambda-local ... done Stored in directory: /Users/blogenist/Library/Caches/pip/wheels/12/e2/66/adee4094d943f6647227ccc5feeca73ddafe31aac3351b6c84 Successfully built python-lambda-local Installing collected packages: jmespath, docutils, six, python-dateutil, botocore, futures, s3transfer, boto3, python-lambda-local Successfully installed boto3-1.9.71 botocore-1.12.71 docutils-0.14 futures-3.2.0 jmespath-0.9.3 python-dateutil-2.7.5 python-lambda-local-0.1.7 s3transfer-0.1.13 six-1.12.0 確認 では、python-lambda-local --versionコマンドで動作確認をしてみましょう。\n以下のようにバージョンが表示されればインストール成功です。\npython-lambda-local --version python-lambda-local 0.1.7 外部依存無しの場合 では、実際にスクリプトを書いてみましょう。\nまずはお決まりのHello World!!!を出力してみます。\nこちらはライブラリなどには何も依存していないスクリプトとなります。\nlambda_function.py print(\u0026#39;Start Function.\u0026#39;) def lambda_handler(event, context): print(\u0026#34;Hello World!!\u0026#34;) 次に、event.jsonを用意します。\nこちらは実行する際のリクエスト情報を定義します。\n今回は特にリクエスト内容は不要ですが、必須で指定する必要があるようなので以下のような空のJsonのファイルを用意しておきます\nevent.json {} ValueError: No JSON object could be decoded ファイルは用意したが、中身が空の場合は以下のようなエラーが出てしまいます。\n実行時エラー Process Process-1: Traceback (most recent call last): File \u0026#34;/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/multiprocessing/process.py\u0026#34;, line 267, in _bootstrap self.run() File \u0026#34;/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/multiprocessing/process.py\u0026#34;, line 114, in run self._target(*self._args, **self._kwargs) File \u0026#34;/usr/local/lib/python2.7/site-packages/lambda_local/main.py\u0026#34;, line 49, in run e = event.read_event(args.event) File \u0026#34;/usr/local/lib/python2.7/site-packages/lambda_local/event.py\u0026#34;, line 11, in read_event data = json.load(event) File \u0026#34;/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/json/__init__.py\u0026#34;, line 291, in load **kw) File \u0026#34;/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/json/__init__.py\u0026#34;, line 339, in loads return _default_decoder.decode(s) File \u0026#34;/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/json/decoder.py\u0026#34;, line 364, in decode obj, end = self.raw_decode(s, idx=_w(s, 0).end()) File \u0026#34;/usr/local/Cellar/python@2/2.7.15_1/Frameworks/Python.framework/Versions/2.7/lib/python2.7/json/decoder.py\u0026#34;, line 382, in raw_decode raise ValueError(\u0026#34;No JSON object could be decoded\u0026#34;) ValueError: No JSON object could be decoded LambdaはJson形式で待ち構えているので、ファイルが空の場合にJsonオブジェクトをデコード出来ずにエラーになってしまうので気をつけましょう。\n確認 では、実行してみましょう。\n実行コマンドはpython-lambda-local --function {関数名} --timeout {タイムアウト秒} {スクリプトファイル名} {イベントファイル名}のように組み立てます。\n今回だと以下のようになります。\nコマンド python-lambda-local --function lambda_handler --timeout 5 lambda_function.py event.json 実行すると以下のように出力されます。\n実行ログ Start Function. [root - INFO - 2018-12-27 14:21:04,297] Event: {} [root - INFO - 2018-12-27 14:21:04,298] START RequestId: c4dc58b6-29e9-47df-b800-9f51ea96abbe Hello World!! [root - INFO - 2018-12-27 14:21:04,299] END RequestId: c4dc58b6-29e9-47df-b800-9f51ea96abbe [root - INFO - 2018-12-27 14:21:04,299] RESULT: None [root - INFO - 2018-12-27 14:21:04,299] REPORT RequestId: c4dc58b6-29e9-47df-b800-9f51ea96abbe\tDuration: 0.36 ms 正常にHello World!!!が出力されましたね♪\nリクエスト依存の場合 では、POSTで送られてくるデータを操作するケースを想定してみます。\nデータはevent.jsonに定義する事でスクリプト内で取得出来るようになります。\nevent.jsonを以下のように変えてみます。\nevent.json { users:[ { \u0026#34;name\u0026#34;: \u0026#34;Taro\u0026#34;, \u0026#34;age\u0026#34;: 22 },{ \u0026#34;name\u0026#34;: \u0026#34;Jiro\u0026#34;, \u0026#34;age\u0026#34;: 20 },{ \u0026#34;name\u0026#34;: \u0026#34;Hanako\u0026#34;, \u0026#34;age\u0026#34;: 98 } ] } そして、lambda_function.pyは以下のように修正します。\nlambda_function.py print(\u0026#39;Start Function.\u0026#39;) def lambda_handler(event, context): for user in event[\u0026#39;users\u0026#39;]: print(user[\u0026#39;name\u0026#39;]) print(user[\u0026#39;age\u0026#39;]) print(\u0026#34;================\u0026#34;) 確認 では、先ほどと同じコマンドで実行してみましょう。\npython-lambda-local --function lambda_handler --timeout 5 lambda_function.py event.json Start Function. [root - INFO - 2018-12-27 14:37:48,434] Event: {u\u0026#39;users\u0026#39;: [{u\u0026#39;age\u0026#39;: 22, u\u0026#39;name\u0026#39;: u\u0026#39;Taro\u0026#39;}, {u\u0026#39;age\u0026#39;: 20, u\u0026#39;name\u0026#39;: u\u0026#39;Jiro\u0026#39;}, {u\u0026#39;age\u0026#39;: 98, u\u0026#39;name\u0026#39;: u\u0026#39;Hanako\u0026#39;}]} [root - INFO - 2018-12-27 14:37:48,435] START RequestId: c401f427-415b-4d1a-be8a-c65a2c1d87cd Taro 22 ================ Jiro 20 ================ Hanako 98 ================ [root - INFO - 2018-12-27 14:37:48,435] END RequestId: c401f427-415b-4d1a-be8a-c65a2c1d87cd [root - INFO - 2018-12-27 14:37:48,435] RESULT: None [root - INFO - 2018-12-27 14:37:48,436] REPORT RequestId: c401f427-415b-4d1a-be8a-c65a2c1d87cd\tDuration: 0.29 ms 正常にJsonの情報を読み取れていますね♪\n実際にPOSTでリクエストを投げられる場合も、Json形式で来るはずなのでローカルで正常に動いていれば、実際のAWSのLambda上でもJson構造が正しければ問題無く動くはずです。\n外部ライブラリに依存する場合 次に外部ライブラリに依存するケースを試してみましょう。\nLambdaでは依存するライブラリはZip内に含めないといけない、と言う制約があります。\nローカルで動作確認するだけなら特に意識せずに通常通りに記述すれば良いです。\n※実際にAWSのLambdaに載せる際はライブラリ毎Zipに含める必要があります\n今回はrequestsモジュールを利用して、POSTされたurlにアクセスして、HttpStatusを出力する、と言うシンプルなスクリプトを書いてみましょう。\nrequestsをまだインストールしていない場合はpip install requestsコマンドでインストールをしてください。\npip install requests Downloading https://files.pythonhosted.org/packages/7d/e3/20f3d364d6c8e5d2353c72a67778eb189176f08e873c9900e10c0287b84b/requests-2.21.0-py2.py3-none-any.whl (57kB) 100% |████████████████████████████████| 61kB 435kB/s Requirement already satisfied: urllib3\u0026lt;1.25,\u0026gt;=1.21.1 in /usr/local/lib/python2.7/site-packages (from requests) (1.23) Collecting chardet\u0026lt;3.1.0,\u0026gt;=3.0.2 (from requests) Downloading https://files.pythonhosted.org/packages/bc/a9/01ffebfb562e4274b6487b4bb1ddec7ca55ec7510b22e4c51f14098443b8/chardet-3.0.4-py2.py3-none-any.whl (133kB) 100% |████████████████████████████████| 143kB 1.3MB/s Collecting idna\u0026lt;2.9,\u0026gt;=2.5 (from requests) Downloading https://files.pythonhosted.org/packages/14/2c/cd551d81dbe15200be1cf41cd03869a46fe7226e7450af7a6545bfc474c9/idna-2.8-py2.py3-none-any.whl (58kB) 100% |████████████████████████████████| 61kB 992kB/s Collecting certifi\u0026gt;=2017.4.17 (from requests) Downloading https://files.pythonhosted.org/packages/9f/e0/accfc1b56b57e9750eba272e24c4dddeac86852c2bebd1236674d7887e8a/certifi-2018.11.29-py2.py3-none-any.whl (154kB) 100% |████████████████████████████████| 163kB 896kB/s Installing collected packages: chardet, idna, certifi, requests Successfully installed certifi-2018.11.29 chardet-3.0.4 idna-2.8 requests-2.21.0 lambda_function.pyの中身は以下のように修正します。\nlambda_function.py import requests print(\u0026#39;Start Function.\u0026#39;) def lambda_handler(event, context): response = requests.get(event[\u0026#39;url\u0026#39;]) return \u0026#39;Status : %d\u0026#39; % response.status_code 確認 では、こちらも実行してみてください。\npython-lambda-local --function lambda_handler --timeout 5 lambda_function.py event.json Start Function. [root - INFO - 2018-12-27 17:54:34,702] Event: {u\u0026#39;url\u0026#39;: u\u0026#39;https://www.google.co.jp/\u0026#39;} [root - INFO - 2018-12-27 17:54:34,704] START RequestId: 60cb4394-12f3-463f-beba-d4f623dcb49b [root - INFO - 2018-12-27 17:54:35,527] END RequestId: 60cb4394-12f3-463f-beba-d4f623dcb49b [root - INFO - 2018-12-27 17:54:35,528] RESULT: Status : 200 [root - INFO - 2018-12-27 17:54:35,528] REPORT RequestId: 60cb4394-12f3-463f-beba-d4f623dcb49b\tDuration: 820.28 ms こちらも正常に処理が実行されましたね♪\nAWSサービスのトリガーに依存する場合 では、最後により業務に近づいたケースを試してみましょう。\n今回はAWSのS3バケットにファイルがPUTされたタイミングで動くスクリプトを書いてみます。\nまずは、event.jsonにPUTされた際に送られてくるデータを定義します。\n公式\u0026nbsp;に記載されていたサンプルイベントデータをベースに{バケット名}と{キー名}だけを修正します。\nevent.json { \u0026#34;Records\u0026#34;:[ { \u0026#34;eventVersion\u0026#34;:\u0026#34;2.0\u0026#34;, \u0026#34;eventSource\u0026#34;:\u0026#34;aws:s3\u0026#34;, \u0026#34;awsRegion\u0026#34;:\u0026#34;us-west-2\u0026#34;, \u0026#34;eventTime\u0026#34;:\u0026#34;1970-01-01T00:00:00.000Z\u0026#34;, \u0026#34;eventName\u0026#34;:\u0026#34;ObjectCreated:Put\u0026#34;, \u0026#34;userIdentity\u0026#34;:{ \u0026#34;principalId\u0026#34;:\u0026#34;AIDAJDPLRKLG7UEXAMPLE\u0026#34; }, \u0026#34;requestParameters\u0026#34;:{ \u0026#34;sourceIPAddress\u0026#34;:\u0026#34;127.0.0.1\u0026#34; }, \u0026#34;responseElements\u0026#34;:{ \u0026#34;x-amz-request-id\u0026#34;:\u0026#34;C3D13FE58DE4C810\u0026#34;, \u0026#34;x-amz-id-2\u0026#34;:\u0026#34;FMyUVURIY8/IgAtTv8xRjskZQpcIZ9KG4V5Wp6S7S/JRWeUWerMUE5JgHvANOjpD\u0026#34; }, \u0026#34;s3\u0026#34;:{ \u0026#34;s3SchemaVersion\u0026#34;:\u0026#34;1.0\u0026#34;, \u0026#34;configurationId\u0026#34;:\u0026#34;testConfigRule\u0026#34;, \u0026#34;bucket\u0026#34;:{ \u0026#34;name\u0026#34;:\u0026#34;{バケット名}\u0026#34;, \u0026#34;ownerIdentity\u0026#34;:{ \u0026#34;principalId\u0026#34;:\u0026#34;A3NL1KOZZKExample\u0026#34; }, \u0026#34;arn\u0026#34;:\u0026#34;arn:aws:s3:::{バケット名}\u0026#34; }, \u0026#34;object\u0026#34;:{ \u0026#34;key\u0026#34;:\u0026#34;{キー名}\u0026#34;, \u0026#34;size\u0026#34;:1024, \u0026#34;eTag\u0026#34;:\u0026#34;d41d8cd98f00b204e9800998ecf8427e\u0026#34;, \u0026#34;versionId\u0026#34;:\u0026#34;096fKKXTRTtl3on89fVO.nfljtsv6qko\u0026#34; } } } ] } boto3モジュールをインストールしていない方はpip install boto3でインストールしてください。\nlambda_function.pyは以下のように修正します。\nlambda_function.py from boto3.session import Session import urllib print(\u0026#39;Start Function.\u0026#39;) session = Session(profile_name=\u0026#39;{profile名}\u0026#39;) s3 = session.client(\u0026#39;s3\u0026#39;) def lambda_handler(event, context): # Get Bucket Name bucket = event[\u0026#39;Records\u0026#39;][0][\u0026#39;s3\u0026#39;][\u0026#39;bucket\u0026#39;][\u0026#39;name\u0026#39;] # Get Key Name key = urllib.unquote_plus(event[\u0026#39;Records\u0026#39;][0][\u0026#39;s3\u0026#39;][\u0026#39;object\u0026#39;][\u0026#39;key\u0026#39;].encode(\u0026#39;utf8\u0026#39;)) try: # Get Object response = s3.get_object(Bucket=bucket, Key=key) # Print Object ContentType print(\u0026#34;CONTENT TYPE: \u0026#34; + response[\u0026#39;ContentType\u0026#39;]) return response[\u0026#39;ContentType\u0026#39;] except Exception as e: print(e) raise e このファイルの中でS3にアクセスする際にAWS CLIが利用されます。","date":"2019-01-01T16:28:32+09:00","image":"/wp-content/uploads/2019/01/awsLambdaLocalEye.png","permalink":"/2019/01/01/7381/","title":"【サーバーレスアークテクチャ開発】ローカル環境でAWSのLambdaスクリプトをPythonで実装する際に「python-lambda-local」で動作確認する際のインストール方法とやり方【Bot開発にオススメ】"},{"content":"profileを分けたい PythonでAWS操作をしたい場合に、boto3ライブラリを使用すると特に意識せずに利用するとdefaultのプロファイルの認証情報が利用されます。\ndefaultのプロファイルが使用される s3 = boto3.client(\u0026#39;s3\u0026#39;) しかし、場合によっては、使用するプロファイルや認証情報を指定したいケースがあります。\nもちろん、boto3では様々な方法で認証情報を指定することが可能なので今回はそちらをご紹介致します。\n手順 前提 今回は~/.awsディレクトリ内にcredentialsとconfigで認証情報が設定されていることとします。\n~/.aws/config [blogenist] output = json region = ap-northeast-1 ~/.aws/credentials [blogenist] aws_access_key_id = XXXXXXXXXXXXXXXXXXXXXXX aws_secret_access_key = YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY profile指定 まずはprofileで指定する方法です。\nその場合はboto3.sessionを利用して以下のように記述することで実現が可能です。\nprofile指定 from boto3.session import Session PROFILE = \u0026#39;blogenist\u0026#39; session = Session(profile_name=PROFILE) s3 = session.client(\u0026#39;s3\u0026#39;) ACCESS_KEY/SECRET_KEY指定 ACCESS_KEYとSECRET_KEYを直接指定する方法でも以下のようにすることで可能です。\n認証キー指定 from boto3.session import Session ACCESS_KEY=\u0026#39;XXXXXXXXXXXXXXXXXXXXX\u0026#39; SECRET_KEY=\u0026#39;YYYYYYYYYYYYYYYYYYYYY\u0026#39; REGION=\u0026#39;ap-northeast-1\u0026#39; session = Session(aws_access_key_id=ACCESS_KEY, aws_secret_access_key=SECRET_KEY, region_name=REGION) s3 = session.client(\u0026#39;s3\u0026#39;) 終わりに 以上のように簡単な方法ですが、忘れがちなので備忘録として残しました。\nこの記事が困っている方のお力になれれば幸いです♪\n","date":"2018-12-27T20:58:53+09:00","image":"/wp-content/uploads/2018/12/boto3AwsProfileChangeEye.png","permalink":"/2018/12/27/7390/","title":"【AWS CLI】Pythonでboto3ライブラリを使用する際の認証情報をprofileやACCESS_KEY/SECRET_KEYを指定して実行する方法【まとめ】"},{"content":"編集が出来なくなった！ ブログ用の画像をいつも通りPhotoShopで編集しようと思ったところ、レイヤーの追加や編集が無効化されており、何も出来ない状態となってしまいました。。。\nなんぞコレ！！！\nレイヤー表記がいつもの背景ではなくインデックスになっている部分が怪しいですな。。。！\n原因はカラーモード 原因は、カラーモードが通常のRGBカラーではなくインデックスカラーに変わっていたことです。\n変わった原因は覚えていませんが、なんか変な操作をしてしまったんでしょうねorz\nちなみに、あまり馴染みが無いインデックスカラーについては公式に以下のような説明がありました。\nインデックスカラー\rインデックスカラーモードでは、最大 256 色を使用して 8 ビット画像を再現します。インデックスカラーへの変換時、Photoshop はカラールックアップテーブル（CLUT）を作成します。このテーブルは画像のカラーを保管し、そのカラーのインデックスを作成します。元画像のカラーがテーブルに表示されていない場合は、最も近いカラーを使用するか、利用可能なカラーを用いたディザを使用してそのカラーをシミュレートします。\rインデックスカラーはカラーパレットを制限するので、目に見える画質を維持しながらファイルサイズを小さくすることができます。このカラーモードは、マルチメディアプレゼンテーションや Web ページなどに適しています。インデックスカラーモードでは、制限付き編集が可能です。より詳細な編集には、一時的に RGB モードに変換する必要があります。 Photoshop のカラーモードについて\nなるほど分からん！！！(理解力皆無)\nなんにせよ、とりあえず原因は分かったので対処してみましょう！！！(ごり押し)\n手順 モードの変更 解決方法はとても簡単です。\nツールバーからイメージ\u003eモード\u003eRGBカラーを選択するだけです。\nこれでレイヤー表記がインデックスから背景に変わり、通常通りレイヤーの編集や追加操作が出来るようになりました♪\n終わりに 原因が分からないと、おそらくどうする事も出来なそうな現象ですねorz\n作業をしているうちに、知らぬ間にカラーモードがRGB以外になってしまっていることはありますので、そんな時はこの方法で解決してみてください♪\n","date":"2018-12-20T14:50:02+09:00","image":"/wp-content/uploads/2018/12/photoshopChangeImageModeEye.png","permalink":"/2018/12/20/7342/","title":"【瞬殺解決】Photoshopでレイヤーが「インデックス」と表記されレイヤー追加やデザイン編集が全く出来なくなった場合の原因と解決方法【初心者にありがち】"},{"content":"AMPページのレイアウト調整 残るはデザイン調整 連日のAMP記事祭りもこれで区切りになると思います。\n関連記事 【AMP For Wordpress】スマホ向けにAMP対応した途端にGoogleAnalyticsのPV数がガクッと下がった場合の原因と対処方法【必須設定】 2018/12/15 1474文字 約3分で読めます 関連記事 【AMP For Wordpress】AMPページにGoogleAdsenseが表示されない場合の原因と対処方法【設定必須】 2018/12/15 734文字 約2分で読めます 関連記事 【AMP For WordPress】AMPページにAmazonJSのリンクの画像や商品情報が表示されない場合の原因と対処方法【デザイン調整】 2018/12/16 2355文字 約5分で読めます 今回は、AMPプラグインで出力された記事の不要な出力の除去と、デザインをAMP専用のCSSを用意してカスタマイズしてみようと思います。\nプラグインを入れるだけでOKとは言っているものの、細部までこだわるには結構な作業量が必要だということが分かっただけでも収穫です♪\nデフォルトのページはシンプルイズベストの極み さて、AMP For Wordpressプラグインで出力されたAMPページを見てみましょう。\n無駄な要素を取っ払ったレイアウトになっています。\nまた、AMPページ専用のテンプレートファイルに則って表示されているので、使用しているテーマやカスタムCSSの内容は一切反映されないページになっています。\nAMPページのCSSは最大50KB これは、AMPページの「CSSの記述量は最大50KBまで」というルールに準拠するために、プラグイン独自の軽量なCSSを適用しているためです。\nただ、せっかくならAMPページでも通常ページのデザインに合わせた形式にしたいですよね。orz\nカスタム可能 しかし、AMP For Wordpressプラグインはその辺もとてもよく考えられたプラグインとなっています。\n基本的にはwp-content/plugins/amp/templatesディレクトリの中にある専用のテンプレートファイルを利用してAMPページが生成されます。\nwp-content/plugins/amp/templates featured-image.php -rw-r--r-- 1 apache apache 574 11月 15 20:32 footer.php -rw-r--r-- 1 apache apache 552 11月 15 20:32 header-bar.php -rw-r--r-- 1 apache apache 159 11月 15 20:32 header.php -rw-r--r-- 1 apache apache 194 11月 15 20:32 html-end.php -rw-r--r-- 1 apache apache 678 11月 15 20:32 html-start.php -rw-r--r-- 1 apache apache 546 11月 15 20:32 meta-author.php -rw-r--r-- 1 apache apache 357 11月 15 20:32 meta-comments-link.php -rw-r--r-- 1 apache apache 637 11月 15 20:32 meta-taxonomy.php -rw-r--r-- 1 apache apache 366 11月 15 20:32 meta-time.php -rw-r--r-- 1 apache apache 701 11月 15 20:32 page.php -rw-r--r-- 1 apache apache 1002 11月 15 20:32 single.php -rw-r--r-- 1 apache apache 7838 11月 15 20:32 style.php ですので、カスタマイズをせずにこのプラグインで生成しているAMPページはどのサイトも同じ見た目になります。\nAMPページを独自カスタマイズするには、使用しているテーマディレクトリにampフォルダを作成し、カスタマイズしたいファイルを同一名称で配置することで、plugin側のテンプレートを無視してtheme側のファイルを使用するようになります。\n今回はサンプルとして、style.phpとsingle.phpをカスタマイズしてみようと思います。\n手順 カスタムファイルの作成 まずはFTPなりコマンドなりでテーマディレクトリ内にampフォルダとstyle.phpとsingle.phpとAMP用のstyle.cssを作成しましょう。\nwp-content/themes/\u0026lt;使用テーマ\u0026gt;/ . └── amp ├── singler.php ├── style.css └── style.php 気をつけるべきは、このamp/style.cssはAMPページのみに適用されます。\nまた、間違えてテーマ直下のstyle.cssを修正しないように注意してください。\namp/style.phpの記述 まずは、amp/style.phpにCSSの記述を行っていきます。\n今回は以下を考慮した記述を行います。\nPoint\r子テーマ用CSSの読み込み\rplugin用CSSの読み込み\rAMPCSSの読み込み\rminify処理\rここで親テーマのCSSも読み込んでしまうと、テーマによっては膨大な記述量になってしまうので、50KBを超えてAMPページが無効になってしまう場合があるので、今回は子テーマのみの読み込みにして、親テーマの内の必要最小限の定義をAMP用のCSSに個別に記述して読み込んでいます。\nまた、minifyというのは改行や空白を除去して、ファイルのデータ量を抑える事を指します。\nAMPのCSS容量を50KB以下に抑えるには、この作業は必要不可欠と言えるでしょう。\nファイル圧縮（Minify）は、「データ容量の削減」のためのテクニックです。 HTML、CSS、JavaScriptには、何も対処をしていない場合、ブラウザ描画には必要のない改行や空白、コメントが含まれています。 これらを取り除きファイルサイズを削減するのがファイル圧縮（Minify）です。\r[試] サイト表示速度を高速化する方法 | ファイル圧縮（Minify）による表示速度改善 | 試行錯誤ライフハック\rWordpressであればminify用のプラグインもありそうですが、今回は取り急ぎ自前で行います。\namp/style.php \u0026lt;?php $css = \u0026#34;\u0026#34;; //子テーマのCSSの読み込み $css .= file_get_contents(get_stylesheet_directory() . \u0026#34;/style.css\u0026#34;); //プラグインのCSSの読み込み $css .= file_get_contents(WP_PLUGIN_DIR . \u0026#34;/amazonjs/css/amazonjs.css\u0026#34;); $css = preg_replace(\u0026#39;/\\.\\.\\/images\\/amazonjs\\.png/\u0026#39;, \u0026#39;{Wordpressドメイン}/wp-content/plugins/amazonjs/images/amazonjs.png\u0026#39;, $css); $css .= file_get_contents(WP_PLUGIN_DIR . \u0026#34;/table-of-contents-plus/screen.min.css\u0026#34;); // AMP CSSの追加 $css .= file_get_contents(get_stylesheet_directory() . \u0026#34;/amp/style.css\u0026#34;);; //AMP非対応のCSS記述を削除 $css = preg_replace(\u0026#39;/\\@charset \u0026#34;utf-8\u0026#34;;/\u0026#39;, \u0026#39;\u0026#39;, $css); $css = preg_replace(\u0026#39;/\\!important;/\u0026#39;, \u0026#39;;\u0026#39;, $css); //行頭のタブ・空白を削除 $css = preg_replace(\u0026#39;/^[\\t\\s]+/m\u0026#39;, \u0026#39;\u0026#39;, $css); //改行を削除 $css = str_replace(PHP_EOL, \u0026#39;\u0026#39;, $css); //コメントを削除 $css = preg_replace(\u0026#39;/\\/\\*.*?\\*\\//s\u0026#39;, \u0026#39;\u0026#39;, $css); echo $css; ?\u0026gt; ※使用しているプラグインによって適宜読み込みファイルを変えてみてください。\nまた、amp/style.cssもご自身のサイトに合わせて記述をすることになるので、割愛します。\namp/single.phpの修正 次にamp/single.phpを修正します。\n今回は執筆者情報と投稿日時を消したいので、読み込んでいる部分を除去します。\nwp-content/themes/\u0026lt;使用テーマ/\u0026gt;amp/single.php \u0026lt;?php /** * Single view template. * * @package AMP */ /** * Context. * * @var AMP_Post_Template $this */ $this-\u0026gt;load_parts( array( \u0026#39;html-start\u0026#39; ) ); ?\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( array( \u0026#39;header\u0026#39; ) ); ?\u0026gt; \u0026lt;article class=\u0026#34;amp-wp-article\u0026#34;\u0026gt; \u0026lt;header class=\u0026#34;amp-wp-article-header\u0026#34;\u0026gt; # get( \u0026#39;post_title\u0026#39; ) ); ?\u0026gt; \u0026lt;/header\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( array( \u0026#39;featured-image\u0026#39; ) ); ?\u0026gt; \u0026lt;div class=\u0026#34;amp-wp-article-content\u0026#34;\u0026gt; \u0026lt;?php echo $this-\u0026gt;get( \u0026#39;post_amp_content\u0026#39; ); // WPCS: XSS ok. Handled in AMP_Content::transform(). ?\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;footer class=\u0026#34;amp-wp-article-footer\u0026#34;\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( apply_filters( \u0026#39;amp_post_article_footer_meta\u0026#39;, array( \u0026#39;meta-taxonomy\u0026#39;, \u0026#39;meta-comments-link\u0026#39; ) ) ); ?\u0026gt; \u0026lt;/footer\u0026gt; \u0026lt;/article\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( array( \u0026#39;footer\u0026#39; ) ); ?\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( array( \u0026#39;html-end\u0026#39; ) ); single.php (END) single.phpに限らず、見栄えを変えたい場合はHTMLを調整すればそのまま吐き出されるようになります。\n今回削除したのは、\n\u003e\u0026lt;?php $this-\u0026gt;load_parts( apply_filters( 'amp_post_article_header_meta', array( 'meta-author', 'meta-time' ) ) ); ?\u0026gt;\nです。\rmeta-author.phpとmeta-time.phpのテンプレートファイルを読み込まないようにしてみました。\n確認 では、実際にAMPページを確認してみましょう。\nだいぶ見た目が通常ページに近づきましたね。\nこれで、AMPページのカスタムに必要なtemplateファイルの用意は出来たので、あとはamp/style.cssに微調整を加えながら50KBを超えないようにCSSをいじってみてください。\n無事にAMPツール上でも有効判定されましたね♪\n終わりに 以上のように、思っていたより簡単にAMPページのデザインを変えることが出来ました。\nこの対応をせずにデフォルトのデザインのままにしておくと、スマホでサイトを訪れた方は全てシンプルなデザインのAMPページが表示されてしない、再訪してくれる確率が下がってしまいます。\nですので、AMP　For Wordpressプラグインを導入した際は最優先で忘れずにAMPページのデザイン調整をしてみてください♪\n","date":"2018-12-18T22:16:32+09:00","image":"/wp-content/uploads/2018/12/ampCustomEye.png","permalink":"/2018/12/18/7317/","title":"【AMP For WordPress】WordpressのAMPプラグインで出力されるページのレイアウトやデザインをcssでカスタマイズしよう【templatesファイル】"},{"content":"Amazonの商品リンクが見にくい。。。 果てしなきAMP対応 連日のAMP関連の記事となります。\n前回まではGoogleAnalyticsとGoogleAdsenseのAMP対応をご紹介しました。\n関連記事 【AMP For Wordpress】スマホ向けにAMP対応した途端にGoogleAnalyticsのPV数がガクッと下がった場合の原因と対処方法【必須設定】 2018/12/15 1474文字 約3分で読めます 関連記事 【AMP For Wordpress】AMPページにGoogleAdsenseが表示されない場合の原因と対処方法【設定必須】 2018/12/15 734文字 約2分で読めます そして、今回はAmazonの商品リンクに対するカスタマイズをご紹介致します。\n何が問題か AMPページのAmazon商品をみると、一応テキストリンクは挿入されているのでクリックされなくなる、と言う懸念はありません。\nが、何より分かりにくい。。。orz\n本来の見た目と比較すれば一目瞭然ですよね。\nAMPはJavaScriptを使えない 原因はAmazonJSが商品カードを描写する際にJavaScriptで読み込むのですが、AMPでは基本的にはJavaScriptは使えません。\nなので結果として表示されなくなっているようです。\nしかし、ユーザー側からすると商品画像や最低限のテキスト情報は欲しいところですよね。\nなので、今回はそちらの対応を入れてみようと思います。\n手順 AMP用ファイル関連 今回はこちらの記事を参考にさせていただきました。\nありがとうございます！！\nAMPでAmazonアフィリエイト(アソシエイト)に本格的に対応した話（Wordpress AmazonJSを使う） | なみさ日記\u0026nbsp;\n※一部、そのままでは動かない部分があったのでカスタマイズしています。\namp/aws_api.phpの作成 まずは、テーマディレクトリ内にampディレクトリを追加し、その中にaws_api.phpと言うファイルを作成します。\nそして、そのファイルにはこちらの内容をコピペしましょう。\namp/single.phpの作成 次に、AMPのテンプレートファイルを作成します。\n今回はsingle.phpを追加してそちらに手を入れる形になります。\nまずは、以下のデフォルトのテンプレート内容をコピペしましょう。\n\u0026lt;テーマディレクトリ\u0026gt;/amp/single.php \u0026lt;?php /** * Single view template. * * @package AMP */ /** * Context. * * @var AMP_Post_Template $this */ $this-\u0026gt;load_parts( array( \u0026#39;html-start\u0026#39; ) ); ?\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( array( \u0026#39;header\u0026#39; ) ); ?\u0026gt; \u0026lt;article class=\u0026#34;amp-wp-article\u0026#34;\u0026gt; \u0026lt;header class=\u0026#34;amp-wp-article-header\u0026#34;\u0026gt; # get( \u0026#39;post_title\u0026#39; ) ); ?\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( apply_filters( \u0026#39;amp_post_article_header_meta\u0026#39;, array( \u0026#39;meta-author\u0026#39;, \u0026#39;meta-time\u0026#39; ) ) ); ?\u0026gt; \u0026lt;/header\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( array( \u0026#39;featured-image\u0026#39; ) ); ?\u0026gt; \u0026lt;div class=\u0026#34;amp-wp-article-content\u0026#34;\u0026gt; \u0026lt;?php echo $this-\u0026gt;get( \u0026#39;post_amp_content\u0026#39; ); // WPCS: XSS ok. Handled in AMP_Content::transform(). ?\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;footer class=\u0026#34;amp-wp-article-footer\u0026#34;\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( apply_filters( \u0026#39;amp_post_article_footer_meta\u0026#39;, array( \u0026#39;meta-taxonomy\u0026#39;, \u0026#39;meta-comments-link\u0026#39; ) ) ); ?\u0026gt; \u0026lt;/footer\u0026gt; \u0026lt;/article\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( array( \u0026#39;footer\u0026#39; ) ); ?\u0026gt; \u0026lt;?php $this-\u0026gt;load_parts( array( \u0026#39;html-end\u0026#39; ) ); AMPのテンプレートファイル？ AMPプラグインはとてもカスタマイズ性が高く作られており、テーマディレクトリのampフォルダ内に、プラグインに対応しているファイルを配置するだけでそちらを利用してAMPページを生成してくれます。\nまた、存在しない場合はplugin側で用意しているデフォルトのテンプレートを利用するので、すべて用意しなくても良いです。\nこの辺についてはまた別の記事にてご紹介致します。\namp/single.phpの修正 では、カスタマイズ用のファイルを追加したので実際にAmazonJS対応を入れていきましょう。\n28行目あたりの\u0026lt;?php echo $this-\u003eget( 'post_amp_content' ); // WPCS: XSS ok. Handled in AMP_Content::transform(). ?\u0026gt;の部分を以下のように修正してください。\namp/single.php \u0026lt;?php $htmlcontents = $this-\u0026gt;get( \u0026#39;post_amp_content\u0026#39; );// AMP向け記事コンテンツを取得 // AMAZON JS対応 $matchNum = preg_match_all(\u0026#39;/data-asin=\u0026#34;([^\u0026#34;]{1,})\u0026#34;/\u0026#39;, $htmlcontents, $matches);// Amazon商品のasinを取得 include \u0026#34;aws_apai.php\u0026#34;;// Githubからコピペした商品情報取得用のPHPファイルをインクルード foreach ($matches[1] as $asin) {// asinをループ処理 $html = getAsinInfo($asin);// 商品のHTML情報を取得・生成 $target = \u0026#39;\u0026lt;div class=\u0026#34;amazon_item_\u0026#39;.$asin;// 対象のdiv要素文字列 $position_number = strpos($htmlcontents,$target);// HTML上のどこに存在するかを取得 $htmlcontents = substr_replace($htmlcontents,$html,$position_number,0);// 対象部分に挿入 } echo $htmlcontents;// WPCS: XSS ok. Handled in AMP_Content::transform(). ?\u0026gt; そして、上記で使う関数も同じファイル内の最後に定義しましょう。\namp/single.php function getAsinInfo($asin) { $product = aws_apai_get_product_by_asin($asin); return getAmazonInfoHtml($product); } function getAmazonInfoHtml($product) { // 画像サイズを横幅最大65pxとする $imgWidthMag= $product[\u0026#34;imageWidth\u0026#34;] / 65; $imgWidth = $product[\u0026#34;imageWidth\u0026#34;] / $imgWidthMag; $imgHeight = $product[\u0026#34;imageHeight\u0026#34;] / $imgWidthMag; $html; $html .= \u0026#39;\u0026lt;div class=\u0026#34;amazonjs_item\u0026#34;\u0026gt;\u0026#39;; $html .= \u0026#39;\u0026lt;div class=\u0026#34;amazonjs_image\u0026#34;\u0026gt;\u0026#39;; $html .= \u0026#39;\u0026lt;a href=\u0026#39;. $product[\u0026#34;url\u0026#34;] . \u0026#39;class=\u0026#34;amazonjs_link\u0026#34; data-role=\u0026#34;amazonjs_product\u0026#34; data-asin=\u0026#34;\u0026#39;. $product[\u0026#34;asin\u0026#34;] .\u0026#39;\u0026#34; title=\u0026#34;\u0026#39;. $product[\u0026#34;name\u0026#34;] .\u0026#39;\u0026#34; target=\u0026#34;_blank\u0026#34;\u0026gt;\u0026#39;; $html .= \u0026#39;\u0026lt;amp-img src=\u0026#34;\u0026#39;. $product[\u0026#34;image\u0026#34;] .\u0026#39;\u0026#34; width=\u0026#34;\u0026#39;. $imgWidth .\u0026#39;\u0026#34; height=\u0026#34;\u0026#39;. $imgHeight .\u0026#39;\u0026#34; alt=\u0026#34;\u0026#39;. $product[\u0026#34;name\u0026#34;] .\u0026#39;\u0026#34;\u0026gt;\u0026lt;/a\u0026gt;\u0026#39;; $html .= \u0026#39;\u0026lt;/div\u0026gt;\u0026#39;; $html .= \u0026#39;\u0026lt;div class=\u0026#34;amazonjs_info\u0026#34;\u0026gt;\u0026#39;; $html .= \u0026#39; #### \u0026#39;; $html .= \u0026#39;\u0026#39;; $html .= $product[\u0026#34;name\u0026#34;] .\u0026#39; \u0026#39;; $html .= \u0026#39;\u0026lt;ul\u0026gt;\u0026#39;; $html .= \u0026#39;\u0026lt;li\u0026gt;\u0026#39;. $product[\u0026#34;publisher\u0026#34;] . \u0026#39;\u0026lt;/li\u0026gt;\u0026#39;; if (isset($product[\u0026#34;fprice\u0026#34;]) and !empty($product[\u0026#34;fprice\u0026#34;])) { $html .= \u0026#39;\u0026lt;li class=\u0026#34;amazonjs_price\u0026#34; title=\u0026#34;価格および発送可能時期はデータを取得した時点のものであり、変更される場合があります。商品の販売においては、購入の時点で [Amazon.co.jp または Javari.jp] に表示されている価格および発送可能時期の情報が適用されます。\u0026#34;\u0026gt;\u0026#39;; if (isset($product[\u0026#34;ListFprice\u0026#34;]) and !empty($product[\u0026#34;ListFprice\u0026#34;])) { $html .= \u0026#39;\u0026lt;b\u0026gt;参考価格\u0026lt;/b\u0026gt;\u0026lt;span class=\u0026#34;amazonjs_listprice\u0026#34;\u0026gt;\u0026#39;. $product[\u0026#34;ListFprice\u0026#34;]. \u0026#39;\u0026lt;/span\u0026gt;\u0026lt;br\u0026gt;\u0026#39;; } $html .= \u0026#39;\u0026lt;b\u0026gt;価格\u0026lt;/b\u0026gt;\u0026#39;. $product[\u0026#34;fprice\u0026#34;] . \u0026#39;\u0026lt;span\u0026gt;\u0026lt;/span\u0026gt;\u0026lt;/li\u0026gt;\u0026#39;; } if (isset($product[\u0026#34;releaseDate\u0026#34;]) ) { $html .= \u0026#39;\u0026lt;li\u0026gt;\u0026lt;b\u0026gt;発売日\u0026lt;/b\u0026gt;\u0026#39;. str_replace(\u0026#34;-\u0026#34;, \u0026#34;/\u0026#34;,$product[\u0026#34;releaseDate\u0026#34;]) . \u0026#39;\u0026lt;/li\u0026gt;\u0026lt;li\u0026gt;\u0026#39;; } else if(isset($product[\u0026#34;publicationDate\u0026#34;])) { $html .= \u0026#39;\u0026lt;li\u0026gt;\u0026lt;b\u0026gt;発売日\u0026lt;/b\u0026gt;\u0026#39;. str_replace(\u0026#34;-\u0026#34;, \u0026#34;/\u0026#34;,$product[\u0026#34;publicationDate\u0026#34;]) . \u0026#39;\u0026lt;/li\u0026gt;\u0026lt;li\u0026gt;\u0026#39;; } $html .= \u0026#39;\u0026lt;b\u0026gt;商品ランキング\u0026lt;/b\u0026gt;\u0026#39;.number_format($product[\u0026#34;salesRank\u0026#34;]) . \u0026#39;位\u0026lt;/li\u0026gt;\u0026#39;; $html .= \u0026#39;\u0026lt;/ul\u0026gt;\u0026#39;; $html .= \u0026#39;\u0026lt;/div\u0026gt;\u0026#39;; $html .= \u0026#39;\u0026lt;/div\u0026gt;\u0026#39;; return $html; } ?\u0026gt; style周りの整理 次に、ampフォルダにstyle.phpとstyle.cssの2ファイルを作成してください。\n\u0026lt;テーマディレクトリ\u0026gt;/amp/style.css div.amazon_item_wrap{ display:none; } \u0026lt;テーマディレクトリ\u0026gt;/amp/style.php \u0026lt;?php $css = \u0026#34;\u0026#34;; // AMP CSSの追加 $css .= file_get_contents(get_stylesheet_directory() . \u0026#34;/amp/style.css\u0026#34;);; // AmazonJSのCSSの追加 $css .= file_get_contents(WP_PLUGIN_DIR . \u0026#34;/amazonjs/css/amazonjs.css\u0026#34;); // AmazonJS内の画像リンクの修正 $css = preg_replace(\u0026#39;/\\.\\.\\/images\\/amazonjs\\.png/\u0026#39;, \u0026#39;{サイトドメイン}/wp-content/plugins/amazonjs/images/amazonjs.png\u0026#39;, $css); //行頭のタブ・空白を削除 $css = preg_replace(\u0026#39;/^[\\t\\s]+/m\u0026#39;, \u0026#39;\u0026#39;, $css); //改行を削除 $css = str_replace(PHP_EOL, \u0026#39;\u0026#39;, $css); //コメントを削除 $css = preg_replace(\u0026#39;/\\/\\*.*?\\*\\//s\u0026#39;, \u0026#39;\u0026#39;, $css); echo $css; ?\u0026gt; 既存のamazonjsのCSSをそのまま使いまわしたいので読み込んでいます。また、CSSファイル量に50KBの上限があるため簡単なminifyも行っています。\n※{サイトドメイン}は適時サイトドメインに変更してください\nAmazonJSのプラグイン修正 次に、AmazonJSのプラグインを修正します。\nただ、pluginの修正は動かなくなる可能性があるので、必ずバックアップをした上で自己責任でお願いします。\namazonjs.phpの473行目あたりを以下のように修正してください。\n※amazonJSのバージョンによって行数が異なります\namazonjs/amazonjs.php // 473行目あたり $indicator_html = \u0026lt;\u0026lt;\u0026lt;EOF \u0026lt;div class=\u0026#34;amazon_item_{$asin} amazon_item_wrap\u0026#34;\u0026gt;\u0026lt;div data-role=\u0026#34;amazonjs\u0026#34; data-asin=\u0026#34;{$asin}\u0026#34; data-locale=\u0026#34;{$country_code}\u0026#34; data-tmpl=\u0026#34;${tmpl}\u0026#34; data-img-size=\u0026#34;${imgsize}\u0026#34; class=\u0026#34;asin_{$asin}_{$country_code}_${tmpl} amazonjs_item\u0026#34;\u0026gt;\u0026lt;div class=\u0026#34;amazonjs_indicator\u0026#34;\u0026gt;\u0026lt;span class=\u0026#34;amazonjs_indicator_img\u0026#34;\u0026gt;\u0026lt;/span\u0026gt;\u0026lt;a class=\u0026#34;amazonjs_indicator_title\u0026#34; href=\u0026#34;{$url}\u0026#34;\u0026gt;{$title}\u0026lt;/a\u0026gt;\u0026lt;span class=\u0026#34;amazonjs_indicator_footer\u0026#34;\u0026gt;\u0026lt;/span\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt;\u0026lt;/div\u0026gt; EOF; やったことは、\u0026lt;div class=\"amazon_item_{$asin} amazon_item_wrap\"\u0026gt;で囲むようにしました。\namazon_item_{$asin}によって、AMP対応のHTMLを差し込む場所を特定し、amazon_item_wrapによって、残ってしまうテキストリンクを消すためのCSSを当てるようにしています。\n確認 これで準備は完了です。\nAMPページにアクセスしてみましょう。\n無事にAmazonの商品リンクがいい感じに出るようになりましたね♪\n課題 今回は、取り急ぎなんとかしたかったので参考にしてもらった方法を軸に対応を行いましたが、導入しているAmazonJSのプラグインを呼び出せば、aws_api.phpは不要になりそうな気はしているので、暇なときに改修してみようかなと思います♪\n参考 WordPress AMP対応 モダンWeb制作 レッスンブック Amazon WordPress AMP対応 モダンWeb制作 レッスンブック 終わりに 以上のようにちょっと大変な修正ですが、AMPページでも通常のページと同様なAmazonリンクが追加されるようになりました。\nクリックしてもらうためには、クリックしたくなるような工夫は必要不可欠なので、お手すきで対策してみてはいかがでしょうか♪\n","date":"2018-12-16T18:19:26+09:00","image":"/wp-content/uploads/2018/12/ampAmazonItemEye.png","permalink":"/2018/12/16/7289/","title":"【AMP For WordPress】AMPページにAmazonJSのリンクの画像や商品情報が表示されない場合の原因と対処方法【デザイン調整】"},{"content":"AMPにGoogleAdsenseが表示されない 先日、AMPページにGoogleAnalyticsが設置されていない問題の解決方法をご紹介しました。\n関連記事 【AMP For Wordpress】スマホ向けにAMP対応した途端にGoogleAnalyticsのPV数がガクッと下がった場合の原因と対処方法【必須設定】 2018/12/15 1474文字 約3分で読めます そして、GoogleAdsenseについてもデフォルトのままだと広告が表示されず収益が取れなくなってしまう状態になってしまっており、一手間加えないといけない事がわかりましたので、そちらの対応方法をご紹介したいと思います。\n手順 GoogleAdsenseからAMP自動広告を取得 GoogleAdsenseにはAMP用の自動広告ユニットが用意されているので、そちらを使います。\nGoogleAdsenseにログインしたら、広告\u003e自動広告からAMP自動広告タブを選びます。\nそして、その中の手順1のスライドボタンをONにします。\nfunctions.phpに追加 次に、手順2のスクリプトをコピーしてfunctions.phpの最後に追加します。\nfunctions.php //amp-auto-ads-JS追加 add_action( \u0026#39;amp_post_template_head\u0026#39;, \u0026#39;amp_add_tag_adsense_js\u0026#39; ); function amp_add_tag_adsense_js() { ?\u0026gt; \u0026lt;script async custom-element=\u0026#34;amp-auto-ads\u0026#34; src=\u0026#34;https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js\u0026#34;\u0026gt; \u0026lt;/script\u0026gt; \u0026lt;?php } 次に、同様に手順3のスクリプトをコピーしてfunctions.phpの最後に追加します。\nfunctions.php // AdSense追加 add_action( \u0026#39;amp_post_template_footer\u0026#39;, \u0026#39;amp_add_tag_adsense\u0026#39; ); function amp_add_tag_adsense() { ?\u0026gt; \u0026lt;amp-auto-ads type=\u0026#34;adsense\u0026#34; data-ad-client=\u0026#34;ca-pub-XXXXXXXXXXXXXXXX\u0026#34;\u0026gt; \u0026lt;/amp-auto-ads\u0026gt; \u0026lt;?php } これでAMP向けのGoogleAdsenseの設定は完了です。\n反映まで少々時間がかかります。\n確認 では、実際にAMPページを見てみましょう。\n無事にAMPページでもGoogleAdsenseの広告が表示されるようになりましたね♪\n終わりに 知らずに放置していると、せっかくの収益が全く入らなくなってしまうため気をつけましょう。\nしっかりAMPのためのGoogleAdsense設定を済まして、お小遣いを撮り逃さないようにしてください♪\n","date":"2018-12-15T22:05:52+09:00","image":"/wp-content/uploads/2018/12/ampAdsenseEye.png","permalink":"/2018/12/15/7276/","title":"【AMP For Wordpress】AMPページにGoogleAdsenseが表示されない場合の原因と対処方法【設定必須】"},{"content":"AMPを有効にしたらPVが下がった 先日、Wordpressの記事をAMP対応する方法をご紹介しました。\n関連記事 【原因はStaticPress】吐き出したAMPページがGoogleSearchConsoleで「\u0026lt;meta http-equiv\u0026gt;」が原因でエラー発生する際の対応方法【Wordpress】 2018/12/03 1276文字 約3分で読めます 関連記事 【StaticPressも対応】Wordpressのサイトを「AMP for WordPress」プラグインを使ってサクッとAMP対応しちゃおう【インストール/使い方】 2018/11/15 2201文字 約5分で読めます しかし、その影響か一気にPV数が下がってしまいました。\n時期的にも、AMPのエラー解決の記事を投稿したのが2018年12月3日なので少なからず影響はしていそうです。\nということはAMP対応はしないほうが良いのでしょうか？\n原因は専用のAnalyticsを設定しないといけない GoogleAnalyticsタグが入ってない 調べてみたところ、原因はAMP For Wordpressプラグインで生成したHTMLにGoogleAnalyticsタグが取り除かれた状態でHTMLが生成されていたことが原因です。\n例えば、2018年12月14日現在に本ブログの記事がランキング一位を獲得している「ponponpain」というキーワードで検索すると、PCの場合は通常のサイトページが検索にヒットしますが、スマホのGoogleで検索するとAMPページがヒットします。\n※検索結果のキャプチャ添付は規約違反になるの可能性があるので貼れませんorz\nスマホからの流入が集計されていない つまり、スマホで当サイトの記事を閲覧するとGoogleAnalyticsが設置されていないAMPページの閲覧になってしまうため、スマホ端末でのPV数のカウントがされていない、という事が推測できます。\nまた、過去のデータを見ると、大半がiPhoneやAndroid端末での閲覧となっているためこの結果AMPが有効になった途端PV数が激減したのだと思われます。\nなるほど！すっきり！！！\nGoogleAnalytics上でも今回の設定を入れた前後で、上位の閲覧ページにAMPページの集計が入っているので間違い無いでしょう。\nAMP Analytics導入前\nAMP Analytics導入後\nやはり、スマホ流入のAMPページが大多数を占めているので、このPV数を取りこぼすと相当数のPV数減少に繋がってしまうようですね。\nこれ、原因が分かるまでめちゃくちゃ悩みました。。。\n年末はPV数が減るとは良く聞きますがまだ12月上旬ですし、\n禿げる\nかと思いました。笑\nでは、原因が分かったのであとは対策をしましょう。\n手順 プラグインのAnalytics設定 AMP For Wordpressには、Analytics用の設定画面が用意されていますので、そちらに設定を追加する形になります。\n左部メニューのAMP \u003e Analyticsから、Typeにgoogleanalytics、JSON Configurationに以下を追加してSAVEボタンをクリックしてください。\nUA-XXXXX-Yは自分のものに置き換えてください。\nJSON Configuration { \u0026#34;vars\u0026#34;: { \u0026#34;account\u0026#34;: \u0026#34;UA-XXXXXXXX-Y\u0026#34; }, \u0026#34;triggers\u0026#34;: { \u0026#34;trackPageview\u0026#34;: { \u0026#34;on\u0026#34;: \u0026#34;visible\u0026#34;, \u0026#34;request\u0026#34;: \u0026#34;pageview\u0026#34; } } } 設定はこれで完了です。\n確認 では、実際にAMPページにアクセスしてみましょう。\nおぉ！\n無事にAMPページでもPVの集計が出来るようになりました♪\nソースにもしっかり追加されていますね\n終わりに 以上のように、原因が分からなければ悩み続けることになる現象でした。\nAMPページはGoogleから推奨されているので、対応するブログがどんどん増えてくると思いますが、今回のようにしっかりとAnalytics設定を行い、PV数のデータを取りこぼすことの無いようにしてみてください♪\n","date":"2018-12-15T00:19:56+09:00","image":"/wp-content/uploads/2018/12/ampAnalyticsEye.png","permalink":"/2018/12/15/7257/","title":"【AMP For Wordpress】スマホ向けにAMP対応した途端にGoogleAnalyticsのPV数がガクッと下がった場合の原因と対処方法【必須設定】"},{"content":"キーボードボタンを表現したい ITやブログ、プログラミング関連の記事を書いている際に、どうしてもキーボードボタンやショートカットについて説明する事があるのですが、その際に文字だけだと直感的にわかりにくい文面になってしまいますよね。orz\n例えば、Ctrl + Sを押して・・・、よりもCtrl+Sを押して・・・、の方が断然見やすい記事になります。\nこのキーボードボタン風の表現は、CSSで簡単に作る事が出来ます。\n今回はコピペで使えるキーボード風ボタンのCSSをご紹介致します♪\n手順 前提 今回は以下のようなclass属性が振られたspan要素に対するCSSを書いていきます。\n対象要素 \u0026lt;span class=\u0026#34;keyboardBtn\u0026#34;\u0026gt;{文字列}\u0026lt;/span\u0026gt; CSSの準備 今回はとても簡単です。\n以下のCSSをstyle.cssにコピペしてください。\nstyle.css span.keyboardBtn { padding: 0 10px; margin: 5px 10px; background: #EDEDED; border-radius: 5px; box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5); color: #808080; text-align: center; } たったこれだけでボタンの表現が可能になります。\nfnCtrloptioncommand\n終わりに もちろん、上記のCSSをベースにカスタマイズする事で、背景色を変えたり文字のサイズや幅も変更する事が出来ますので、自分のブログのデザインにあったキーボード風ボタンを作ってみてください♪\n","date":"2018-12-12T22:17:17+09:00","image":"/wp-content/uploads/2018/12/cssKeyboardLikeEye.png","permalink":"/2018/12/12/7229/","title":"【コピペで瞬殺】ブログ記事に使えるキーボードボタン風のデザインをCSSで作ってみた【サンプル】"},{"content":"FTPソフトの必要性 リモートサーバーのファイルを直接いじるのはNG Wordpressなどでサイト制作を仕事にしている場合、リモートサーバーのファイルをローカルマシンにダウンロードしたり、ローカルマシンで編集したファイルをリモートマシンにアップロードしたい、というケースは必ず発生します。\nリモートサーバーのファイルを直接いじると、間違えて消してしまった場合や修正を間違えた場合にサイトが見れなくなったり、復元が出来なくなったりと深刻な問題に繋がってしまいます。\nそんな事にならないために、修正ファイルの管理は必ずローカルマシンやSVN、Gitなどで行い、常に最新で動くものだけをリモートサーバーに配置するのが理想的な運用になると思います。\nそして、リモートサーバーにファイルを転送するために利用するのがFTPソフトと言います。\nFTP? そもそもFTPとはなんなのか。\nFPTとはFile Transfer Protocol（ファイル トランスファー プロトコル)の略称となります。\n要するにファイルを転送するためのプロトコル、と言う意味ですね。\nじゃあプロトコルとはなんなのか。(笑)\nプロトコルとは簡単に言うと手段のことを指します。\n今回で言うFTPだと、ファイルを転送するための手段の事をFTPと呼びます。\n他に有名なところで言うと、ホームページの頭についているhttpもHyperText Transfer Protocol(ハイパーテキストトランスファープロトコル)の略称です。\nちなみにHyperTextとは、複数の文書（テキスト）を相互に関連付け、結び付ける仕組みの事を指します。\nなので、どんどんリンクを辿って様々記事やサイトを見ることが出来るのですね。\nHTTPを利用するにはChromeやIE、FireFoxなどの専用ブラウザアプリケーションを使いますが、FTPを利用するにも専用のアプリケーションを利用する必要があります。\nFTP用のアプリケーションはいろいろ出回っていますが、今回は無料かつWindowsとMacでも使えるFileZillaと言うアプリケーションのインストール方法と使い方をご紹介しようと思います。\n手順 インストーラーのダウンロード まずはコチラからDownload FileZilla Clientボタンをクリックします。\n次に、お使いのOSに合わせてインストーラーをダウンロードします。\n今回はMac OSを選択します。\n無料版と有料版の機能差が表示されます。\n今回は無料のもので良いのでDownloadボタンをクリックします。\nこれでインストーラーのダウンロードが始まるので、完了するまで少し待ちましょう。\nインストーラーの実行 インストーラーのダウンロードが終わったら、ダブルクリックで実行しましょう。\nすると、以下のような利用規約が表示されるので、問題が無ければAgreeボタンをクリックしてください。\nすると、以下のようにインストーラーの展開が始まります。\n展開が完了すると以下のようなダイアログが表示されるので、File Zillaのアイコンをダブルクリックします。\nインターネット上から落としたインストーラーなので以下のような警告ダイアログが表示されます。\n問題が無ければ開くボタンをクリックします。\nすると、インストーラーが起動しますので、流れに沿って進めてインストールを行います。\nボタンを押していくだけなので難しい事はありません。\nすると、自動でFileZillaが起動されます。\n初回は以下のようなダイアログが表示されると思うので、OKボタンをクリックして閉じましょう。\nこれでインストールは完了です♪\n使い方 サーバーへの接続 では、実際にリモートサーバーへFTP接続してみましょう。\n上部ツールバーからEdit\u003eSite Managerを選択します。\nすると、以下のようなダイアログが表示されるので、右下のNew Siteボタンをクリックします。\n各接続情報を入力してから、Connectボタンをクリックしましょう。\n入力した情報が間違っていなければ、正常に接続が完了すると思います。\nもし、うまく接続出来ない場合はLogin TypeをAsc or passwordに変えてみて再度試してみてください。\nファイルのダウンロード 次に、リモートサーバーのファイルをローカルマシンにダウンロードしてみましょう。\nリモートサーバー側のダウンロード対象のファイルを選択して、右クリックからDownloadを選択します。\nこれで現在指定しているローカルマシンのディレクトリにファイルがダウンロードされました。\nファイルのアップロード 次に、ローカルマシンのファイルをリモートサーバーにアップロードしてみましょう。\nローカルマシン側のアップロード対象のファイルを選択して、右クリックからUploadを選択します。\nこれで現在指定しているリモートサーバーのディレクトリにファイルがアップロードされました。\n終わりに 以上のように、FileZillaを利用する事で簡単にファイルのアップロードやダウンロードが可能です。\nサイト制作をしていると、リモート側のファイルを直接いじることはセキュリティ的に厳禁なので、FTPでのファイル転送が定番となっています。\nまだFTPソフトを使った事が無い方は是非使ってみてください♪\n","date":"2018-12-11T13:10:15+09:00","image":"/wp-content/uploads/2018/12/fileZillaInstallEye.png","permalink":"/2018/12/11/7165/","title":"【FTP転送】リモートサーバーとローカルマシンを繋げてくれる「FileZilla」のインストールと使い方【Windows/Mac両方対応】"},{"content":"Basic認証をかけたい 簡易的なWordpressサイトを構築する際に、さくらのレンタルサーバーを使っている方は多いと思います。\n筆者もアドセンスブログを構築する際にさくらのレンタルサーバーを利用する記事をご紹介致しました。\n関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！さくらレンタルサーバーのレンタル編 2017/08/28 3469文字 約7分で読めます 今回はその際に構築したWordpressサイトに対して、Basic認証をかけたくなった際の対応方法についてご紹介致します。\n手順 ファイルマネージャーにアクセス まずはサーバコントロールパネルにログインしてください。\nログインが完了したら、サブメニュー中段あたりの運用に便利なツールカテゴリのファイルマネージャーを選択します。\nアクセス設定の追加 ファイルマネージャーが開かれたら、アクセス制限をかけたいディレクトリを選択します。\n今回はWordpressをインストールしたディレクトリを選びます。\n制限をかけたディレクトリより深い階層全てにかかるので気をつけましょう。\n選択をしたら、ツールバーの表示アドレスの操作からアクセス設定を選択します。\nすると、以下のダイアログが表示されるので、有効性のパスワード制限を利用するにチェックを入れ、接続元アドレス制限との併用の両方の許可がないとアクセス不能にチェックを入れます。\n接続元アドレスは初期だと全開ですが、この設定を反映する事でBasic認証が必須になるので結果として制限をかける事が可能になります。\nそして、パスワードファイルの編集ボタンを押下します。\nすると、パスワードファイルの編集ダイアログが表示されるので、追加ボタンを押下します。\nユーザーのダイアログでは任意のユーザー名/パスワード(確認含む)/コメントを入力し、OKボタンを押下します。\nこれでBasic認証用のユーザーの作成が完了しました。\n確認 では、実際にアクセスしてBasic認証の動きを確認してみましょう。\nBasic認証のダイアログが正常に表示されましたね。\n終わりに 以上のように、Basic認証周りのサポートもさくらのレンタルサーバーであればあらかじめ準備されているので、ブラウザ上で簡単に設定する事が出来ます。\n製作途中でクライアントのみにしか公開したくない場合や、管理画面にBasic認証をかけたい場合はこの機能を使って見てください。\n","date":"2018-12-09T16:39:00+09:00","image":"/wp-content/uploads/2018/12/sakuraEnableBasicAuthEye.png","permalink":"/2018/12/09/7153/","title":"【簡単お手軽】さくらのレンタルサーバーに構築したWordpressサイトに対して、Basic認証をかける方法【やり方まとめ】"},{"content":"デバッグしたい Wordpressなどを使っていて、PHPの構文をちょっとカスタマイズする際に、動作確認を並行しながら修正をしたいケースがあると思います。\nデバッグせずに本番環境にあげたり公開してしまうと、システムエラーが発生するなどで利用者全体に影響が出てしまう恐れがあります。\nPHPはスクリプト言語(非コンパイル言語)なので、IDEを使わずに単なるテキストエディターで開発も出来てしまうので、デバッガーを使う、と言うことはほとんどないと思います。\nそんな時は、都度変数の中身等をログに出力して、期待している値や処理が行われているかを確認する必要があるのですが、このログに出す方法がちょっとややこしいので、毎回忘れてしまいます。orz\n今回はそんなお忘れ仲間のためになればと備忘録として記します。\nログの出し方 シンプル やり方はとても簡単です。\nerror_log関数を使えば簡単に出力出来ます。\nerror_log bool error_log ( string $message [, int $message_type = 0 [, string $destination [, string $extra_headers ]]] ) 引数\r説明\r必須\r$message\rログに出力するメッセージ\r◯\r$message_type\rメッセージをどこに出力するのかの指定\r$destination\rメッセージの送信先\r$extra_headers\r追加のヘッダ\r任意の引数が複数ありますが、デバッグ目的であれば特に指定する必要はありません。\n以下のように、ログに出したいものだけを引数に指定することでログにメッセージが出力されます。\n出し方 $hoge = \u0026#34;fuga\u0026#34;; error_log($hoge); // fuga error_log(\u0026#34;fuga\u0026#34;); // fuga 終わりに 基本的にはこれで問題なくデバッグしながら開発を進めれるようになります。\nもし、出力されない場合はWordperssのデバッグ周りの設定が原因かと思われるので、その辺も合わせて調整してみてください♪\n","date":"2018-12-05T19:05:02+09:00","image":"/wp-content/uploads/2018/12/phpDebugLogEye.png","permalink":"/2018/12/05/7101/","title":"【Wordpress】PHPで変数や文字列をerror_log関数を使ってデバッグログに出力する方法【var_dump?echo?】"},{"content":"リモートデバッグがしたい IDEのデバッガーは優秀 SpringBootを使って開発する際は、EclipseやIntelliJなどのIDEを使うのが定番になってきています。\nIDEには優秀なデバッガー機能がついているので、ローカル環境で開発をする際には欠かせない機能となっています。\nデバッガーが使えない場合の対処方法 しかし、Dockerなどを使って仮想的な開発環境を作って開発をしている場合、ホスト側のIDEのデバッガーが使えずにとても苦労する場合があります。\n[adsense-responsive]\rそんな時は、SpringBootのリモートデバッグ機能を使えばホストとコンテナで環境が分かれている場合でもIDEのデバッガーを使うことが出来ます。\n手順 前提 今回はGradleプロジェクトをIntelliJで読み込んでいることを前提としてます。\nブレイクポイントの設置 まずは、IntelliJ側でデバッグポイントをマーキングしましょう。\nエディターの行番号の右をクリックすると赤いマーカーがつきます。\n今回はリモートデバッグを行いたいので、IntelliJからの起動ではなく以下のコマンドで起動します。\nコマンド ./gradlew bootrun もちろん、この状態ではデバッグに引っかかる事なく起動が完了してしまいます。\n起動ログ \u0026gt; Task :bootRun . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.0.RELEASE) 2018-11-30 17:12:29.952 INFO 59710 --- [ main] jp.blogenist.sample.SampleApplication : Starting SampleApplication on 120.143.15.197.static.zoot.jp with PID 59710 (/Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/build/classes/java/main started by blogenist in /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample) 2018-11-30 17:12:29.959 INFO 59710 --- [ main] jp.blogenist.sample.SampleApplication : No active profile set, falling back to default profiles: default 2018-11-30 17:12:31.975 INFO 59710 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http) 2018-11-30 17:12:32.024 INFO 59710 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2018-11-30 17:12:32.024 INFO 59710 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet Engine: Apache Tomcat/9.0.12 2018-11-30 17:12:32.043 INFO 59710 --- [ main] o.a.catalina.core.AprLifecycleListener : The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: [/Users/blogenist/Library/Java/Extensions:/Library/Java/Extensions:/Network/Library/Java/Extensions:/System/Library/Java/Extensions:/usr/lib/java:.] 2018-11-30 17:12:32.197 INFO 59710 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2018-11-30 17:12:32.198 INFO 59710 --- [ main] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 2132 ms 2018-11-30 17:12:32.246 INFO 59710 --- [ main] o.s.b.w.servlet.ServletRegistrationBean : Servlet dispatcherServlet mapped to [/] 2018-11-30 17:12:32.251 INFO 59710 --- [ main] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: \u0026#39;characterEncodingFilter\u0026#39; to: [/*] 2018-11-30 17:12:32.252 INFO 59710 --- [ main] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: \u0026#39;hiddenHttpMethodFilter\u0026#39; to: [/*] 2018-11-30 17:12:32.252 INFO 59710 --- [ main] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: \u0026#39;formContentFilter\u0026#39; to: [/*] 2018-11-30 17:12:32.252 INFO 59710 --- [ main] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: \u0026#39;requestContextFilter\u0026#39; to: [/*] 2018-11-30 17:12:32.615 INFO 59710 --- [ main] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService \u0026#39;applicationTaskExecutor\u0026#39; 2018-11-30 17:12:32.991 INFO 59710 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path \u0026#39;\u0026#39; 2018-11-30 17:12:32.996 INFO 59710 --- [ main] jp.blogenist.sample.SampleApplication : Started SampleApplication in 3.833 seconds (JVM running for 4.443) Debug Point. \u0026lt;=========----\u0026gt; 75% EXECUTING [11s] \u0026gt; :bootRun RemoteConfigの作成 では、IntelliJ側にリモートデバッグを検知するための設定を作成しましょう。\nツールバーのRunからEdit Configurationsを選択します。\n次に、左上の+マークをクリックしてRemoteを選択します。\nすると、設定ダイアログが表示されるので、Nameに任意の名称を入れ、その他はデフォルトのままでOKボタンをクリックします。\nこれでIntelliJ側の設定は完了です。\n起動コマンドにオプションを追加 次に起動する際のコマンドに--debug-jvmオプションを加えて起動してみてください。\nコマンド ./gradlew bootrun --debug-jvm すると、以下のようにListening状態になります。\n起動ログ \u0026gt; Task :bootRun Listening for transport dt_socket at address: 5005 \u0026lt;=========----\u0026gt; 75% EXECUTING [25s] \u0026gt; :bootRun これは、5005ポートでデバッグ先を探している状態になります。\nこのログが表示されたらIntelliJ側で先ほど作成したRemoteで起動してみましょう。\nすると、以下のようなログがIntelliJ側で出力されます。\nbootrun側も正常に起動が始まります。\n起動ログ \u0026gt; Task :bootRun Listening for transport dt_socket at address: 5005 . ____ _ __ _ _ /\\\\ / ___\u0026#39;_ __ _ _(_)_ __ __ _ \\ \\ \\ \\ ( ( )\\___ | \u0026#39;_ | \u0026#39;_| | \u0026#39;_ \\/ _` | \\ \\ \\ \\ \\\\/ ___)| |_)| | | | | || (_| | ) ) ) ) \u0026#39; |____| .__|_| |_|_| |_\\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.0.RELEASE) 2018-11-30 17:26:03.112 INFO 60057 --- [ main] jp.blogenist.sample.SampleApplication : Starting SampleApplication on 120.143.15.197.static.zoot.jp with PID 60057 (/Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/build/classes/java/main started by blogenist in /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample) 2018-11-30 17:26:03.121 INFO 60057 --- [ main] jp.blogenist.sample.SampleApplication : No active profile set, falling back to default profiles: default 2018-11-30 17:26:05.595 INFO 60057 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http) 2018-11-30 17:26:05.654 INFO 60057 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2018-11-30 17:26:05.656 INFO 60057 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet Engine: Apache Tomcat/9.0.12 2018-11-30 17:26:05.747 INFO 60057 --- [ main] o.a.catalina.core.AprLifecycleListener : The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: [/Users/blogenist/Library/Java/Extensions:/Library/Java/Extensions:/Network/Library/Java/Extensions:/System/Library/Java/Extensions:/usr/lib/java:.] 2018-11-30 17:26:06.019 INFO 60057 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2018-11-30 17:26:06.026 INFO 60057 --- [ main] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 2793 ms 2018-11-30 17:26:06.083 INFO 60057 --- [ main] o.s.b.w.servlet.ServletRegistrationBean : Servlet dispatcherServlet mapped to [/] 2018-11-30 17:26:06.093 INFO 60057 --- [ main] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: \u0026#39;characterEncodingFilter\u0026#39; to: [/*] 2018-11-30 17:26:06.094 INFO 60057 --- [ main] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: \u0026#39;hiddenHttpMethodFilter\u0026#39; to: [/*] 2018-11-30 17:26:06.095 INFO 60057 --- [ main] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: \u0026#39;formContentFilter\u0026#39; to: [/*] 2018-11-30 17:26:06.095 INFO 60057 --- [ main] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: \u0026#39;requestContextFilter\u0026#39; to: [/*] 2018-11-30 17:26:06.563 INFO 60057 --- [ main] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService \u0026#39;applicationTaskExecutor\u0026#39; 2018-11-30 17:26:06.951 INFO 60057 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path \u0026#39;\u0026#39; 2018-11-30 17:26:06.957 INFO 60057 --- [ main] jp.blogenist.sample.SampleApplication : Started SampleApplication in 4.64 seconds (JVM running for 13.966) \u0026lt;=========----\u0026gt; 75% EXECUTING [2m 57s] \u0026gt; :bootRun [adsense-responsive]\rそして、IntelliJ側のデバッグポイントに引っかかるようになりました！！\nもちろん、引数が存在していれば中身を確認することも出来ます。\n試してみましょう。\nbuild.gradleに以下を追記して、\nbuild.gradle bootRun { if (project.hasProperty(\u0026#39;args\u0026#39;)) { args project.args.split(\u0026#39;\\\\s+\u0026#39;) } } 以下のコマンドで再度起動してみましょう。\nコマンド ./gradlew bootrun -Pargs=\u0026#34;hoge\u0026#34; --debug-jvm 正しく変数内の値も参照出来ますね。\n終わりに システム開発をする際に、デバッグが出来るか出来ないかで大きく開発スピードが変わってきます。\n毎回ログに出して確認する方法だと、他の変数の値を確認したくなった場合に都度loggerの仕込みをする必要があったり、loggerの消し忘れなどの懸念があるので、なるべくデバッガーを使うようにしてみましょう。\n","date":"2018-12-04T22:18:59+09:00","image":"/wp-content/uploads/2018/11/inteljSpringBootRemoteDebugEye.png","permalink":"/2018/12/04/6786/","title":"【Dockerでも可能】IntelliJ IDEでSpringBootのリモートデバッグ(remote debug)を使ってみよう【開発スピードアップ】"},{"content":"SearchConsolsでAMPエラー StaticPressが出力したAMPページのHTML構造がダメらしい 先日、Wordpressの「AMP for WordPress」プラグインを利用して、サイトをAMP対応する方法についてご紹介しました。\n関連記事 【StaticPressも対応】Wordpressのサイトを「AMP for WordPress」プラグインを使ってサクッとAMP対応しちゃおう【インストール/使い方】 2018/11/15 2201文字 約5分で読めます AMPページもしっかり転送されていましたが、HTMLの内容に不備があるらしく、GoogleSearchConsolsにてエラーが出るようになりました。\n全部エラー。。。orz\n原因はStaticPressの更新日時追加処理 エラーの内容を見てみると、以下のようになっています。\nなにやら、\u0026lt;meta http-equiv=\"Last-Modified\" content=\"...\"\u0026gt;のタグにAMPでは使えない属性であるhttp-equivを含んでしまっているようですね。\nこのタグは、Wordpressで表示している際のHTMLには存在していません。\nこれは、StaticPressがHTMLファイルを生成する際に自動で追加されるタグなのです！！\nwp-content/plugins/staticpress/includes/class-static_press.php // 461行目付近 public function\tadd_last_modified($content, $http_code = 200) { if (intval($http_code) === 200) { $type = preg_match(\u0026#39;#\u0026lt;!DOCTYPE html\u0026gt;#i\u0026#39;, $content) ? \u0026#39;html\u0026#39; : \u0026#39;xhtml\u0026#39;; switch ( $type ) { case \u0026#39;html\u0026#39;: $last_modified = sprintf(\u0026#39;\u0026lt;meta http-equiv=\u0026#34;Last-Modified\u0026#34; content=\u0026#34;%s GMT\u0026#34;\u0026gt;\u0026#39;, gmdate(\u0026#34;D, d M Y H:i:s\u0026#34;)); break; case \u0026#39;xhtml\u0026#39;: default: $last_modified = sprintf(\u0026#39;\u0026lt;meta http-equiv=\u0026#34;Last-Modified\u0026#34; content=\u0026#34;%s GMT\u0026#34; /\u0026gt;\u0026#39;, gmdate(\u0026#34;D, d M Y H:i:s\u0026#34;)); break; } // ここで追加されている $content = preg_replace(\u0026#39;#(\u0026lt;head\u0026gt;|\u0026lt;head [^\u0026gt;]+\u0026gt;)#ism\u0026#39;, \u0026#39;$1\u0026#39;.\u0026#34;\\n\u0026#34;.$last_modified, $content); } return $content; } なるほど。。。\n原因が分かりましたので、AMPページの場合はこの処理を行わないように修正してみましょう。\n手順 class-static_press.phpの修正 まずは、AMPページの場合にエラーの原因のタグを追加しないようにclass-static_press.phpの373行目辺りと465行目あたりに処理を修正します。\nwp-content/plugins/staticpress/includes/class-static_press.php // 373行目辺り switch ($file_type) { case \u0026#39;front_page\u0026#39;: case \u0026#39;single\u0026#39;: case \u0026#39;term_archive\u0026#39;: case \u0026#39;author_archive\u0026#39;: case \u0026#39;seo_files\u0026#39;: case \u0026#39;other_page\u0026#39;: // AMP判定 $haystack = $url; //　追加 $needle = \u0026#34;amp/\u0026#34;;//　追加 $amp_page = (strrpos($haystack, $needle) === strlen($haystack) - strlen($needle))? 1 :0;//　追加 // get remote file if (($content = $this-\u0026gt;remote_get($url)) \u0026amp;\u0026amp; isset($content[\u0026#39;body\u0026#39;])) { if ($blog_charset === \u0026#39;UTF-8\u0026#39;) { $content[\u0026#39;body\u0026#39;] = $this-\u0026gt;clean_utf8($content[\u0026#39;body\u0026#39;]); } $http_code = intval($content[\u0026#39;code\u0026#39;]); switch ($http_code) { case 200: if ($crawling) $this-\u0026gt;other_url($content[\u0026#39;body\u0026#39;], $url, $http_code, $amp_page);//　第三引数に$amp_pageを追加 case 404: if ($create_404 || $http_code == 200) { $content = apply_filters(\u0026#39;StaticPress::put_content\u0026#39;, $content[\u0026#39;body\u0026#39;], $http_code, $amp_page);//　第三引数に$amp_pageを追加 $this-\u0026gt;make_subdirectories($file_dest); file_put_contents($file_dest, $content); $file_date = date(\u0026#39;Y-m-d h:i:s\u0026#39;, filemtime($file_dest)); } } } break; ................... // 465行目あたり public function\tadd_last_modified($content, $http_code = 200, $amp_page) { // 第三引数に$amp_pageを追加 if (intval($amp_page) === 1) { // APMページの場合の早期リターンを追加 return $content; } if (intval($http_code) === 200) { $type = preg_match(\u0026#39;#\u0026lt;!DOCTYPE html\u0026gt;#i\u0026#39;, $content) ? \u0026#39;html\u0026#39; : \u0026#39;xhtml\u0026#39;; switch ( $type ) { case \u0026#39;html\u0026#39;: $last_modified = sprintf(\u0026#39;\u0026lt;meta http-equiv=\u0026#34;Last-Modified\u0026#34; content=\u0026#34;%s GMT\u0026#34;\u0026gt;\u0026#39;, gmdate(\u0026#34;D, d M Y H:i:s\u0026#34;)); break; case \u0026#39;xhtml\u0026#39;: default: $last_modified = sprintf(\u0026#39;\u0026lt;meta http-equiv=\u0026#34;Last-Modified\u0026#34; content=\u0026#34;%s GMT\u0026#34; /\u0026gt;\u0026#39;, gmdate(\u0026#34;D, d M Y H:i:s\u0026#34;)); break; } $content = preg_replace(\u0026#39;#(\u0026lt;head\u0026gt;|\u0026lt;head [^\u0026gt;]+\u0026gt;)#ism\u0026#39;, \u0026#39;$1\u0026#39;.\u0026#34;\\n\u0026#34;.$last_modified, $content); } return $content; } class-static_press.phpへの修正はこれで完了です。\nplugin.phpの修正 次に、plugin.phpの49行目あたりを修正します。\npluign.php add_filter(\u0026#39;StaticPress::get_url\u0026#39;, array($staticpress, \u0026#39;replace_url\u0026#39;)); add_filter(\u0026#39;StaticPress::static_url\u0026#39;, array($staticpress, \u0026#39;static_url\u0026#39;)); add_filter(\u0026#39;StaticPress::put_content\u0026#39;, array($staticpress, \u0026#39;rewrite_generator_tag\u0026#39;), 10, 2); add_filter(\u0026#39;StaticPress::put_content\u0026#39;, array($staticpress, \u0026#39;add_last_modified\u0026#39;), 10, 3); // 第四引数を2から3に変更 add_filter(\u0026#39;StaticPress::put_content\u0026#39;, array($staticpress, \u0026#39;remove_link_tag\u0026#39;), 10, 2); add_filter(\u0026#39;StaticPress::put_content\u0026#39;, array($staticpress, \u0026#39;replace_relative_URI\u0026#39;), 10, 2); add_filter(\u0026#39;https_local_ssl_verify\u0026#39;, \u0026#39;__return_false\u0026#39;); これで完了です！！\nこの修正は許容する引数を2個から3個に変更する、という修正になります。\nこの修正を行わないと、$amp_pageに引数が渡ってこなくなってしまいます。\n確認 あとは、いつも通りに転送を始めれば適用されます。\n通常ページ 今まで通り、変わらずに\u0026lt;meta http-equiv=\"Last-Modified\" content=\"...\"\u0026gt;が追加されています。\nAMPページ こちらは、\u0026lt;meta http-equiv=\"Last-Modified\" content=\"...\"\u0026gt;が削除されているのが確認出来ました。\n終わりに 以上のように、ちょっと一手間加えないとStaticPressのAMP対応は完璧にはなりません￥。\nとはいえ、そんなに難しい作業ではないので早めにサクッと対応してみてください。\n","date":"2018-12-03T18:25:03+09:00","image":"/wp-content/uploads/2018/12/staticPressAmpErrorEye.png","permalink":"/2018/12/03/7107/","title":"【原因はStaticPress】吐き出したAMPページがGoogleSearchConsoleで「\u003cmeta http-equiv\u003e」が原因でエラー発生する際の対応方法【Wordpress】"},{"content":"忘れがちなのでメモメモ GUIでなくCUI操作をベースに作業をしている場合、ダウンロードしたZIPファイルを任意のディレクトリに解凍したいというケースがよくあるのですが、その際になんのオプションをつければ良いのか忘れがちなので備忘録としてメモします。\nそのまま実行すると、カレントディレクトリに展開されてしまうので、間違えて実行してファイルが上書きされてしまう！！なんて恐ろしい事故が起こる可能性があります。\ngitなどで管理していないファイルだと思ったらゾッとしますよね。。。orz\nコマンド 展開先を指定するには、-dオプションを使う事で指定する事が可能です。\nd=ディレクトリと考えれば覚えやすいのではないでしょうか♪\n試しにDownloadsディレクトリ直下のSpringBootのサンプルzipを任意のディレクトリに解凍してみました。\nunzip blogenistSample.zip -d ~/tmp/work/java/springBoot/2.1.0/java Archive: blogenistSample.zip creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/ inflating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/gradlew creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/gradle/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/gradle/wrapper/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/main/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/main/java/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/main/java/jp/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/main/java/jp/blogenist/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/main/java/jp/blogenist/sample/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/main/resources/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/main/resources/static/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/main/resources/templates/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/test/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/test/java/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/test/java/jp/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/test/java/jp/blogenist/ creating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/test/java/jp/blogenist/sample/ inflating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/.gitignore inflating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/build.gradle inflating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/gradle/wrapper/gradle-wrapper.jar inflating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/gradle/wrapper/gradle-wrapper.properties inflating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/gradlew.bat inflating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/settings.gradle inflating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/main/java/jp/blogenist/sample/SampleApplication.java inflating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/main/resources/application.properties inflating: /Users/blogenist/tmp/work/java/springBoot/2.1.0/java/sample/src/test/java/jp/blogenist/sample/SampleApplicationTests.java 正しく-dオプションで指定した先に解凍されていますね。\ntree . . └── sample ├── build.gradle ├── gradle │ └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── settings.gradle └── src ├── main │ ├── java │ │ └── jp │ │ └── blogenist │ │ └── sample │ │ └── SampleApplication.java │ └── resources │ ├── application.properties │ ├── static │ └── templates └── test └── java └── jp └── blogenist └── sample └── SampleApplicationTests.java 終わりに サクッと使えて便利なコマンドなので、CUI使いの方はぜひ覚えておくと良いでしょう♪\n","date":"2018-12-02T23:02:15+09:00","image":"/wp-content/uploads/2018/11/unzipDistEye.png","permalink":"/2018/12/02/7077/","title":"【備忘録】unzipコマンドで出力先を指定して解凍(展開)する方法【mac/linux】"},{"content":"アイコン画像を作りたい レトロなやり方はやめたい Webサイト制作をしていると、ほぼ100%の確率でfaviconを作成することになると思うのですが、このfaviconの作成方法について、以外と確立されていないのが現状です。\nイラストレーターで作ったり、無料のWebツールで作成したりと手段は様々ありますが、画質が荒くなったりサイズごとの画像を用意しないといけなかったり課題がたくさんです。\nElectronでもアイコン画像が必要 最近のデスクトップアプリの開発でよく使われているElectronでも、アプリアイコンが必要となっています。\nElectron自体はマルチプラットフォームのアプリなのでWindowsでもMacでも動くのですが、それぞれ別のアイコンファイルを作成する必要があり、これもそれぞれ作らないといけないのが手間ですね。orz\nnpmのicon-genを使えば一発でまとめて作成 そんなあなたにオススメなのが、icon-genです！\nakabekobeko/npm-icon-gen\nこちらを使えば、コマンドベースで単一の画像ファイルからサクッと様々な形式のアイコン画像をまとめて作ることが出来ます。\nマルチアイコンにも対応 さらに、このicon-genの強みとして、マルチアイコンの作成にも対応している点が挙げられます。\n一つのSVGからコマンド一発でWindows/mac/ホームページのそれぞれのマルチアイコンを生成出来るのは最強すぎませんかね？！ 手順 インストール まずは今回使うicon-genを以下のコマンドでインストールしましょう。\nコマンド npm install icon-gen 以下のように依存パッケージ含めインストールが完了します。\n実行ログ └─┬ icon-gen@2.0.0 ├─┬ del@3.0.0 │ ├─┬ globby@6.1.0 │ │ ├─┬ array-union@1.0.2 │ │ │ └── array-uniq@1.0.3 │ │ ├─┬ glob@7.1.3 │ │ │ ├── fs.realpath@1.0.0 │ │ │ ├─┬ inflight@1.0.6 │ │ │ │ └── wrappy@1.0.2 │ │ │ ├── inherits@2.0.3 │ │ │ ├─┬ minimatch@3.0.4 │ │ │ │ └─┬ brace-expansion@1.1.11 │ │ │ │ ├── balanced-match@1.0.0 │ │ │ │ └── concat-map@0.0.1 │ │ │ ├── once@1.4.0 │ │ │ └── path-is-absolute@1.0.1 │ │ ├── object-assign@4.1.1 │ │ ├── pify@2.3.0 │ │ └─┬ pinkie-promise@2.0.1 │ │ └── pinkie@2.0.4 │ ├── is-path-cwd@1.0.0 │ ├─┬ is-path-in-cwd@1.0.1 │ │ └─┬ is-path-inside@1.0.1 │ │ └── path-is-inside@1.0.2 │ ├── p-map@1.2.0 │ ├── pify@3.0.0 │ └── rimraf@2.6.2 ├─┬ mkdirp@0.5.1 │ └── minimist@0.0.8 ├── pngjs-nozlib@1.0.0 ├─┬ svg2png@4.1.1 │ ├── file-url@2.0.2 │ ├─┬ phantomjs-prebuilt@2.1.16 │ │ ├── es6-promise@4.2.5 │ │ ├─┬ extract-zip@1.6.7 │ │ │ ├─┬ concat-stream@1.6.2 │ │ │ │ ├── buffer-from@1.1.1 │ │ │ │ ├─┬ readable-stream@2.3.6 │ │ │ │ │ ├── core-util-is@1.0.2 │ │ │ │ │ ├── isarray@1.0.0 │ │ │ │ │ ├── process-nextick-args@2.0.0 │ │ │ │ │ ├── string_decoder@1.1.1 │ │ │ │ │ └── util-deprecate@1.0.2 │ │ │ │ └── typedarray@0.0.6 │ │ │ ├─┬ debug@2.6.9 │ │ │ │ └── ms@2.0.0 │ │ │ └─┬ yauzl@2.4.1 │ │ │ └─┬ fd-slicer@1.0.1 │ │ │ └── pend@1.2.0 │ │ ├─┬ fs-extra@1.0.0 │ │ │ ├── graceful-fs@4.1.15 │ │ │ ├── jsonfile@2.4.0 │ │ │ └── klaw@1.3.1 │ │ ├─┬ hasha@2.2.0 │ │ │ └── is-stream@1.1.0 │ │ ├── kew@0.7.0 │ │ ├── progress@1.1.8 │ │ ├─┬ request@2.88.0 │ │ │ ├── aws-sign2@0.7.0 │ │ │ ├── aws4@1.8.0 │ │ │ ├── caseless@0.12.0 │ │ │ ├─┬ combined-stream@1.0.7 │ │ │ │ └── delayed-stream@1.0.0 │ │ │ ├── extend@3.0.2 │ │ │ ├── forever-agent@0.6.1 │ │ │ ├─┬ form-data@2.3.3 │ │ │ │ └── asynckit@0.4.0 │ │ │ ├─┬ har-validator@5.1.3 │ │ │ │ ├─┬ ajv@6.6.1 │ │ │ │ │ ├── fast-deep-equal@2.0.1 │ │ │ │ │ ├── fast-json-stable-stringify@2.0.0 │ │ │ │ │ ├── json-schema-traverse@0.4.1 │ │ │ │ │ └─┬ uri-js@4.2.2 │ │ │ │ │ └── punycode@2.1.1 │ │ │ │ └── har-schema@2.0.0 │ │ │ ├─┬ http-signature@1.2.0 │ │ │ │ ├── assert-plus@1.0.0 │ │ │ │ ├─┬ jsprim@1.4.1 │ │ │ │ │ ├── extsprintf@1.3.0 │ │ │ │ │ ├── json-schema@0.2.3 │ │ │ │ │ └── verror@1.10.0 │ │ │ │ └─┬ sshpk@1.15.2 │ │ │ │ ├── asn1@0.2.4 │ │ │ │ ├── bcrypt-pbkdf@1.0.2 │ │ │ │ ├── dashdash@1.14.1 │ │ │ │ ├── ecc-jsbn@0.1.2 │ │ │ │ ├── getpass@0.1.7 │ │ │ │ ├── jsbn@0.1.1 │ │ │ │ ├── safer-buffer@2.1.2 │ │ │ │ └── tweetnacl@0.14.5 │ │ │ ├── is-typedarray@1.0.0 │ │ │ ├── isstream@0.1.2 │ │ │ ├── json-stringify-safe@5.0.1 │ │ │ ├─┬ mime-types@2.1.21 │ │ │ │ └── mime-db@1.37.0 │ │ │ ├── oauth-sign@0.9.0 │ │ │ ├── performance-now@2.1.0 │ │ │ ├── qs@6.5.2 │ │ │ ├── safe-buffer@5.1.2 │ │ │ ├─┬ tough-cookie@2.4.3 │ │ │ │ ├── psl@1.1.29 │ │ │ │ └── punycode@1.4.1 │ │ │ └── tunnel-agent@0.6.0 │ │ ├─┬ request-progress@2.0.1 │ │ │ └── throttleit@1.0.0 │ │ └─┬ which@1.3.1 │ │ └── isexe@2.0.0 │ ├── pn@1.1.0 │ └─┬ yargs@6.6.0 │ ├── camelcase@3.0.0 │ ├─┬ cliui@3.2.0 │ │ ├─┬ strip-ansi@3.0.1 │ │ │ └── ansi-regex@2.1.1 │ │ └── wrap-ansi@2.1.0 │ ├── decamelize@1.2.0 │ ├── get-caller-file@1.0.3 │ ├─┬ os-locale@1.4.0 │ │ └─┬ lcid@1.0.0 │ │ └── invert-kv@1.0.0 │ ├─┬ read-pkg-up@1.0.1 │ │ ├─┬ find-up@1.1.2 │ │ │ └── path-exists@2.1.0 │ │ └─┬ read-pkg@1.1.0 │ │ ├─┬ load-json-file@1.1.0 │ │ │ ├─┬ parse-json@2.2.0 │ │ │ │ └─┬ error-ex@1.3.2 │ │ │ │ └── is-arrayish@0.2.1 │ │ │ ├── pify@2.3.0 │ │ │ └─┬ strip-bom@2.0.0 │ │ │ └── is-utf8@0.2.1 │ │ ├─┬ normalize-package-data@2.4.0 │ │ │ ├── hosted-git-info@2.7.1 │ │ │ ├─┬ is-builtin-module@1.0.0 │ │ │ │ └── builtin-modules@1.1.1 │ │ │ ├── semver@5.6.0 │ │ │ └─┬ validate-npm-package-license@3.0.4 │ │ │ ├─┬ spdx-correct@3.0.2 │ │ │ │ └── spdx-license-ids@3.0.2 │ │ │ └─┬ spdx-expression-parse@3.0.0 │ │ │ └── spdx-exceptions@2.2.0 │ │ └─┬ path-type@1.1.0 │ │ └── pify@2.3.0 │ ├── require-directory@2.1.1 │ ├── require-main-filename@1.0.1 │ ├── set-blocking@2.0.0 │ ├─┬ string-width@1.0.2 │ │ ├── code-point-at@1.1.0 │ │ └─┬ is-fullwidth-code-point@1.0.0 │ │ └── number-is-nan@1.0.1 │ ├── which-module@1.0.0 │ ├── y18n@3.2.1 │ └── yargs-parser@4.2.1 └── uuid@3.3.2 次に、以下のコマンドでpackage.jsonを作成しましょう。\n対話は基本空欄でいいのでエンター連打でOKです。\nnpm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install \u0026lt;pkg\u0026gt; --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (icon-gen) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /Users/blogenist/tmp/work/javaScript/npm/icon-gen/package.json: { \u0026#34;name\u0026#34;: \u0026#34;icon-gen\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;main\u0026#34;: \u0026#34;index.js\u0026#34;, \u0026#34;dependencies\u0026#34;: { \u0026#34;icon-gen\u0026#34;: \u0026#34;^2.0.0\u0026#34; }, \u0026#34;devDependencies\u0026#34;: {}, \u0026#34;scripts\u0026#34;: { \u0026#34;test\u0026#34;: \u0026#34;echo \\\u0026#34;Error: no test specified\\\u0026#34; \u0026amp;\u0026amp; exit 1\u0026#34; }, \u0026#34;author\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;license\u0026#34;: \u0026#34;ISC\u0026#34; } Is this ok? (yes) yes すると、以下のようにpackage.jsonが生成されます。\ntree -L 1 . . ├── node_modules # 省略 └── package.json package.jsonの中身はこんな感じ。\npackage.json { \u0026#34;name\u0026#34;: \u0026#34;icon-gen\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;main\u0026#34;: \u0026#34;script.js\u0026#34;, \u0026#34;dependencies\u0026#34;: { \u0026#34;icon-gen\u0026#34;: \u0026#34;^2.0.0\u0026#34; }, \u0026#34;devDependencies\u0026#34;: {}, \u0026#34;scripts\u0026#34;: { \u0026#34;test\u0026#34;: \u0026#34;echo \\\u0026#34;Error: no test specified\\\u0026#34; \u0026amp;\u0026amp; exit 1\u0026#34; }, \u0026#34;author\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;license\u0026#34;: \u0026#34;ISC\u0026#34; } スクリプトの準備 では、実際にicon-genを使うスクリプトを用意しましょう。\n今回は同階層にあるblogenist_icon.svgと言うsvg画像から生成してみます。\nまずは、script.jsと言うファイルを用意して以下の内容をコーディングしてください。\n※${XXX}は適時変えてください\n./script.js const icongen = require(\u0026#39;icon-gen\u0026#39;); icongen(\u0026#39;${iconにしたいファイル}\u0026#39;, \u0026#39;${出力先ディレクトリ}\u0026#39;, { report: true }) .then((results) =\u0026gt; { console.log(results) }) .catch((err) =\u0026gt; { console.error(err) }); 出力先ディレクトリの作成 ここで指定したディレクトリが存在しない場合は自動生成されないため、エラーが発生するので存在するディレクトリを指定する必要があります。\nエラーログ \u0026gt; icon-gen@1.0.0 start /Users/blogenist/tmp/work/javaScript/npm/icon-gen \u0026gt; node script.js Error: Output directory is not found. at GenerateIcon (/Users/blogenist/tmp/work/javaScript/npm/icon-gen/node_modules/icon-gen/dist/lib/icon-generator.js:209:27) at Object.\u0026lt;anonymous\u0026gt; (/Users/blogenist/tmp/work/javaScript/npm/icon-gen/script.js:3:1) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.runMain (module.js:604:10) at run (bootstrap_node.js:394:7) at startup (bootstrap_node.js:149:9) package.jsonに起動スクリプトの追加 次に、package.jsonに起動スクリプトを定義します。\npackage.json { \u0026#34;name\u0026#34;: \u0026#34;icon-gen\u0026#34;, \u0026#34;version\u0026#34;: \u0026#34;1.0.0\u0026#34;, \u0026#34;description\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;main\u0026#34;: \u0026#34;script.js\u0026#34;, \u0026#34;dependencies\u0026#34;: { \u0026#34;icon-gen\u0026#34;: \u0026#34;^2.0.0\u0026#34; }, \u0026#34;devDependencies\u0026#34;: {}, \u0026#34;scripts\u0026#34;: { \u0026#34;test\u0026#34;: \u0026#34;echo \\\u0026#34;Error: no test specified\\\u0026#34; \u0026amp;\u0026amp; exit 1\u0026#34;, // Json形式なのでカンマ(,)をお忘れなく \u0026#34;start\u0026#34;: \u0026#34;node script.js\u0026#34; // 追加 }, \u0026#34;author\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;license\u0026#34;: \u0026#34;ISC\u0026#34; } 実行 では、実際に以下のコマンドで実行をしてみましょう。\nコマンド npm run start すると、以下のようなログが出始めて処理が開始されます。\n実行ログ \u0026gt; icon-gen@1.0.0 start /Users/blogenist/tmp/work/javaScript/npm/icon-gen \u0026gt; node script.js Icon generator from SVG: src: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/blogenist_icon.svg dir: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons SVG to PNG: Create: /var/folders/qs/XXX/T/YYY/16.png Create: /var/folders/qs/XXX/T/YYY/24.png Create: /var/folders/qs/XXX/T/YYY/32.png Create: /var/folders/qs/XXX/T/YYY/48.png Create: /var/folders/qs/XXX/T/YYY/57.png Create: /var/folders/qs/XXX/T/YYY/64.png Create: /var/folders/qs/XXX/T/YYY/72.png Create: /var/folders/qs/XXX/T/YYY/96.png Create: /var/folders/qs/XXX/T/YYY/120.png Create: /var/folders/qs/XXX/T/YYY/128.png Create: /var/folders/qs/XXX/T/YYY/144.png Create: /var/folders/qs/XXX/T/YYY/152.png Create: /var/folders/qs/XXX/T/YYY/195.png Create: /var/folders/qs/XXX/T/YYY/228.png Create: /var/folders/qs/XXX/T/YYY/256.png Create: /var/folders/qs/XXX/T/YYY/512.png Create: /var/folders/qs/XXX/T/YYY/1024.png ICNS: Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.icns ICO: Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.ico ICO: Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon.ico Favicon: Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-32.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-57.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-72.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-96.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-120.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-128.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-144.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-152.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-195.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-228.png [ \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.icns\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.ico\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon.ico\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-32.png\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-57.png\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-72.png\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-96.png\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-120.png\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-128.png\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-144.png\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-152.png\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-195.png\u0026#39;, \u0026#39;/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-228.png\u0026#39; ] 確認 iconsディレクトリの中を見ると一通りのアイコンファイルが生成されています。\ntree icons icons ├── app.icns ├── app.ico ├── favicon-120.png ├── favicon-128.png ├── favicon-144.png ├── favicon-152.png ├── favicon-195.png ├── favicon-228.png ├── favicon-32.png ├── favicon-57.png ├── favicon-72.png ├── favicon-96.png └── favicon.ico マルチアイコンにもしっかりなっていますね♪\n終わりに 以上のように簡単にSVG画像から各種アイコン画像を生成することが出来ました。\nもちろん、SVGだけでなくPNGからの生成も出来ますし、様々なオプションが備わっているので是非試してみてください♪\n","date":"2018-11-30T15:20:40+09:00","image":"/wp-content/uploads/2018/11/installNpmIconGenEye.png","permalink":"/2018/11/30/7055/","title":"【簡単マルチアイコン作成】SVGやPNGから様々なアイコンファイルをまとめて自動生成してくれる「icon-gen」をnpmでインストールして幸せになろう【使い方】"},{"content":"いろんなライブラリを試作的に試したい システム開発をしていると、その実装タイミングごとにライブラリやフレームワークのバージョンが変わっていたり新旧ライブラリがあったりと、どれを使えば良いか？や、使う際のメリット/デメリットが無いか？などの選定をしっかり行う必要があります。\nここをおろそかにして、「とりあえず使ってみるか。」と安易な気持ちで判断してしまうと、プロジェクトの後半で該当ライブラリ等を差し替えないといけない事になり炎上プロジェクト化する恐れがあります。\nそんな悲劇を迎えないためには、事前にローカル環境でサンプルプログラムを書いてみて問題無い事を確認するのですが、Javaの場合、コマンドラインベースだと外部ライブラリの管理や更新がとてもめんどくさいので、Graldeを使ってサンプル用のローカルプロジェクトを作っておくと簡単にライブラリの追加や管理、実行を行う事が出来ます。\n脱xml 今ではJavaシステムを開発する際に、過去のビルドツールであるantやmaven、pomを選ぶ事はほとんど無いと言っても良いでしょう。\nそれらのツールはどれもxmlで管理をするのですが、xml形式だと記述量が多くなったり、可読性がとても低くなってしまします。\n少なくとも筆者はxml形式に対して、\nとてつも無い拒否反応を示す体質\nです。笑\nGradleであれば、スクリプト形式で記述する事が可能なので可読性もよくなり、最小限の記述で済みます。\nアンドロイドアプリの開発でも活躍 また、最近ではアンドロイドアプリの開発でもGradleが標準化されています。\nここでGradleを使えるようになっておけば、エンジニアとしても幅が広がるのでオススメです♪\n手順 Gradleのインストール まずはGradle本体をインストールしましょう。\n例の如く、Homebrewでサクッとインストールします。\nコマンド brew install gradle 以下のログが出ればインストール完了です。\nインストールログ ==\u0026gt; Downloading https://services.gradle.org/distributions/gradle-4.10.2-all.zip ==\u0026gt; Downloading from https://downloads.gradle.org/distributions/gradle-4.10.2-all.zip ######################################################################## 100.0% 🍺 /usr/local/Cellar/gradle/4.10.2: 203 files, 83.7MB, built in 3 minutes 51 seconds 確認 以下のコマンドが動くか確認してみましょう。\ngradle -v ------------------------------------------------------------ Gradle 4.10.2 ------------------------------------------------------------ Build time: 2018-09-19 18:10:15 UTC Revision: b4d8d5d170bb4ba516e88d7fe5647e2323d791dd Kotlin DSL: 1.0-rc-6 Kotlin: 1.2.61 Groovy: 2.4.15 Ant: Apache Ant(TM) version 1.9.11 compiled on March 23 2018 JVM: 1.8.0-adoptopenjdk (Oracle Corporation 25.71-b00) OS: Mac OS X 10.11.3 x86_64 正常に動いていますね。\n参考 プロジェクトの作成 では、サンプル用のプロジェクトを作成しましょう。\nプロジェクト用のディレクトリを作成したら、その中に入り以下のコマンドを実行してください。\nコマンド gradle init --type java-application すると数秒で以下のようなログが出力されます。\n実行ログ Starting a Gradle Daemon, 10 busy Daemons could not be reused, use --status for details BUILD SUCCESSFUL in 1s 2 actionable tasks: 2 executed ディレックトリ構造を確認すると、以下のようにJava開発のプロジェクトのひな壇が生成されている事がわかります。\ntree . . . ├── build.gradle ├── gradle │ └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── settings.gradle └── src ├── main │ └── java │ └── App.java └── test └── java └── AppTest.java 確認 では、テンプレートで作成されたプロジェクトをビルドしてみましょう。\n作成されたプロジェクトにはGradleラッパーと呼ばれる実行スクリプトが用意されています。\n実行スクリプト\rgradlew　←　linux用シェル\rgradlew.bat　←　Windows用バッチ\rなので、基本的にはgradlewを使って実行する事になります。\n筆者はmac なので以下の様になります。\n実行コマンド ./gradlew build これはbuildというタスクを呼び出して実行しています。\ngradleには基本的なビルドや起動、ライブラリインストールなのどの汎用的に使われるものはデフォルトで用意されています。\n詳しくはコチラをみてください。\n実行結果は以下の通りになると思います。\n実行結果 BUILD SUCCESSFUL in 52s 4 actionable tasks: 4 executed 内部的には以下の順番で各タスクが事項さrています。\n実行タスク\r:compileJava\r:processResources\r:classes\r:jar\r:startScripts\r:distTar\r:distZip\r:assemble\r:compileTestJava\r:processTestResources\r:testClasses\r:test\r:check\r:build\rではビルドが通ったので、実際にJavaプログラムを動かしましょう。\n以下のコマンドを実行してみてください。\nコマンド ./gradlew run 以下の様にApp.javaの処理結果が出力されていれば成功です。\nsrc/main/java/App.java /* * This Java source file was generated by the Gradle \u0026#39;init\u0026#39; task. */ public class App { public String getGreeting() { return \u0026#34;Hello world.\u0026#34;; } public static void main(String[] args) { System.out.println(new App().getGreeting()); } } 起動ログ \u0026gt; Task :run Hello world. BUILD SUCCESSFUL in 1s 2 actionable tasks: 1 executed, 1 up-to-date 正常にお約束のHello world.が出力されましたね♪\nユニットテスト 生成されたプロジェクトはJUnitを用いたユニットテストを考慮したプロジェクト構造になっており、上記の通りbuildタスクを実行すれば自動で実行もされているのでとても助かりますね♪\n試しにユニットテストが失敗する形にして実行してみましょう。\n現在はメソッドのNotNullチェックをしているので、一時的にnullを返す様にすればよさそうですね。\nsrc/test/java/AppTest.java /* * This Java source file was generated by the Gradle \u0026#39;init\u0026#39; task. */ import org.junit.Test; import static org.junit.Assert.*; public class AppTest { @Test public void testAppHasAGreeting() { App classUnderTest = new App(); assertNotNull(\u0026#34;app should have a greeting\u0026#34;, classUnderTest.getGreeting());// Nullを返せばNGになりそう } } src/main/java/App.java /* * This Java source file was generated by the Gradle \u0026#39;init\u0026#39; task. */ public class App { public String getGreeting() { //return \u0026#34;Hello world.\u0026#34;; return null; } public static void main(String[] args) { System.out.println(new App().getGreeting()); } } 確認 では、もう一度実行してみましょう。\n./gradlew build \u0026gt; Task :test FAILED AppTest \u0026gt; testAppHasAGreeting FAILED java.lang.AssertionError at AppTest.java:10 1 test completed, 1 failed FAILURE: Build failed with an exception. * What went wrong: Execution failed for task \u0026#39;:test\u0026#39;. \u0026gt; There were failing tests. See the report at: file:///Users/blogenist/tmp/work/java/gradleSample/build/reports/tests/test/index.html * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 2s 7 actionable tasks: 5 executed, 2 up-to-date どのタスクでどの様なエラーが発生したかが出力されているのでとても親切ですね♪\nちなみにユニットテストのレポートも自動で生成してくれます。\nカスタマイズやユニットテスト用のプラグインなども充実しているので、そのうち記事にするかもしれませんが、皆さんも興味があるなら調べてみてください。\nライブラリの追加 では、外部ライブラリを使える様にしてみましょう。\nライブラリの管理はbuild.gradleと言うファイルで管理します。\nこのファイルの中のdependenciesの中に依存ライブラリをどんどん追加していく方になります。\n今回はJacksonを入れてみます。\nbuild.gradle dependencies { // This dependency is found on compile classpath of this component and consumers. compile \u0026#39;com.google.guava:guava:23.0\u0026#39; compile \u0026#34;com.fasterxml.jackson.datatype:jackson-datatype-jsr310:2.9.7\u0026#34; // 追加 // Use JUnit test framework testCompile \u0026#39;junit:junit:4.12\u0026#39; } では、クラスファイルの方もJacksonを使う様に修正してみます。\nsrc/main/java/App.java /* * This Java source file was generated by the Gradle \u0026#39;init\u0026#39; task. */ import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.databind.SerializationFeature; import com.fasterxml.jackson.core.JsonProcessingException; public class App { public String getGreeting() { return \u0026#34;Hello world.\u0026#34;; } public static void main(String[] args) throws JsonProcessingException { ObjectMapper objectMapper = new ObjectMapper();; Person taro = new Person(\u0026#34;taro\u0026#34;, 25); String jsonString = objectMapper.writeValueAsString(taro); System.out.println(jsonString); } public static class Person{ private String name; private int age; public Person(String name, int age){ this.name = name; this.age = age; } public String getName(){ return name; } public int getAge(){ return age; } } } 確認 では、以下のコマンドを実行してみてください。\nコマンド ./gradlew run ライブラリのダウンロードが走るのでちょっと実行時間がかかりますが、以下の様にJson文字列が出力されていれば成功です。\n実行ログ \u0026gt; Task :run {\u0026#34;name\u0026#34;:\u0026#34;taro\u0026#34;,\u0026#34;age\u0026#34;:25} BUILD SUCCESSFUL in 1s 2 actionable tasks: 2 executed とても簡単ですね♪\n終わりに 以上の様にコマンドベースで簡単にGradleプロジェクトの環境を整えることが出来ました。\nGradleはまだまだ数年は現役で走り続けるビルドツールだと思いますので、是非この機会に覚えてみてください♪\n","date":"2018-11-29T18:37:36+09:00","image":"/wp-content/uploads/2018/11/gradleInstallEye.png","permalink":"/2018/11/29/7035/","title":"【使い方備忘録】ローカルマシンでJavaライブラリの動作確認をするためのプロジェクトをGradleでサクッと作る方法【Homebrewインストール】"},{"content":"12月コミュニティデイがやばい 2018年ラストを飾るコミュニティデイ 11月もあと一週間で終わり、今年も残るところ12月だけとなりました。\nポケモンGoプレイヤーは今年最後のコミュニティデイの内容が気になるところですね。\nそしてついに、先日今年最後の12月のコミュニティデイの内容が発表されました！\nトレーナーの皆さんにビッグニュースです！ これまでの「コミュニティ・デイ」で大量発生したポケモンたちが、12月の「Pokémon GO コミュニティ・デイ」で帰ってきます😄😮 #PokemonGOCommunityDay #ポケモンGO 詳細はこちら：https://t.co/h6W58i4Smx pic.twitter.com/ULsIcbgJB6\n\u0026mdash; Pokémon GO Japan (@PokemonGOAppJP) 2018年11月21日\rトレーナーの皆さん\r「Pokémon GO コミュニティ・デイ」は今年の1月にスタートし、毎月世界中から多くのトレーナーの皆さんにご参加いただいてきました。たくさんのポケモンをつかまえ、イベントを盛り上げてくださった皆さん、本当にありがとうございました！\n12月の今年最後の「コミュニティ・デイ」は日本時間12月1日（土）早朝から12月3日（月）午後4時に開催され世界中でこれまでの「コミュニティ・デイ」に登場した全てのポケモンたちが再び大量発生します。さらに、開催期間中はこれまでの「コミュニティ・デイ」で登場した特別なわざも、それぞれのポケモンたちが覚えるようになりますので、この機会をお見逃しなく！\nまた今回は、12月2日（日）の3時間だけ特別なボーナスタイムもあります。詳細は以下をご覧ください。\n復帰勢歓喜の内容 冷静に考えて今回のコミュニティデイはヤバいです。\n過去の対象ポケモン全てが帰ってくるということは、初代御三家やピカブイ、メリープ加え600族に進化するミニリュー、ヨーギラス、メタングなどそうそうたる顔ぶれです。\nさらに、コミュニティイベント時間内でしか覚えることが出来なかった特別な技も復活するとのこと！！\n大盤振る舞いとはこのことやで。。。。\nおそらく、色違いも出てくることでしょう。\nピカブイに御三家の色違いを送りたいいいぃぃ！！！\n今年9月からの復帰勢としてはまさに、\nぼくのかんがえたさいきょうのこみゅにてぃでい\n状態です！！笑\n・フシギダネ、ヒトカゲ、ゼニガメ、ピカチュウ、イーブイ、ミニリュウ、チコリータ、ヒノアラシ、メリープ、ヨーギラス、ダンバルが、期間中にいつもより多く出現。\r・イベント期間中は2018年の「コミュニティ・デイ」で登場した特別なわざを、それぞれのポケモンが覚える。 ※今回、それぞれのポケモンが特別なわざを覚える期間の終わりは、「コミュニティ・デイ」終了1時間後までではなく、「コミュニティ・デイ」終了と同時（12月3日の午後4時）になりますのでご注意ください\n期間 今回のコミュニティデイはちょっと特別で、日本時間12月1日（土）早朝から12月3日（月）午後4時の開催となっています。\n普段は土日どちらかの12時〜15時の3時間だけなので、期間だけを見ても異常ですね。。。！\nさらに、12月2日（日）お昼の12時から午後3時までの間は特別ボーナスも発生します。\nPoint\rポケモンをつかまえた時にもらえるXP（経験値）が2倍\rポケモンをつかまえた時にもらえるほしのすなが2倍\rタマゴをかえすのに必要な距離が通常の半分\rコミュニティデイの期間を伸ばすことで、サーバーへのアクセス集中も避けることが出来るので、以前発生したダンバルデイの悪夢は起こらなそうですねですね。\n1日だけだと仕事などで参加出来ない人もいるので、これは英断だと思われます♪\n関連記事 【悪夢】ポケモンGoの2018年10月の「ダンバルコミュニティデイ」が通信エラー連発で中止になり、アイテムが無駄になった挙句、後日再実施になってしまった件【悲劇】 2018/10/21 1856文字 約4分で読めます 終わりに 今年最後で最大のコミュニティデイ。\nこれは参加しないわけにはいきませんね！\n皆さんも今のうちからボックス整理や木の実集め、自転車のメンテナンスや日々のウォーキングをして当日に備えておくことをオススメします！笑\n","date":"2018-11-24T17:04:31+09:00","image":"/wp-content/uploads/2018/11/pokemonGo201812CdEye.png","permalink":"/2018/11/24/7023/","title":"【ポケモンGo】2018年最後の12月コミュニティデイの内容まとめがヤバすぎる【復帰勢歓喜】"},{"content":"USB充電器のポート足りない問題 最近の家電やスマホはUSBケーブルでの充電が標準化されていますね。\nスマホや音楽プレイヤー、デジタムカメラやゲーム機などなど。\nしかし、家のコンセントの数には限りがあるので、なるべくUSBポート数の多い充電器を用意したいところですが、一般的には2ポート、多くても3ポートだと思います。\nそんな矢先、Ankerの5ポート高速USB充電器を見つけて速攻ポチって見たのでご紹介致します。\nちなみに、Andkerといえば、モバイルバッテリーメーカーとしても有名なので安心感があります。\nAmazon Anker PowerCore 10000 (10000mAh 最小最軽量 大容量 モバイルバッテリー) iPhone\u0026amp;Android対応 *2018年7月時点 (ブラック) 商品 【QC対応 2ポート】Anker PowerPort Speed 5 (63W 5ポート USB急速充電器) iPhone、Android各種対応（ブラック） Amazon 【QC対応 2ポート】Anker PowerPort Speed 5 (63W 5ポート USB急速充電器) iPhone、Android各種対応（ブラック） 特徴 フルスピード充電技術 最新規格Quick Charge 3.0対応ポートを複数搭載。また、Anker独自のPowerIQとVoltageBoostにより、お使いのどの機器に対しても、フルスピード充電が可能です。\nQualcomm Quick Charge 3.0 最新、最速、そして最も効率的なUSB充電技術。対応機器に対し、従来の充電器に比べ4倍の速さでの充電が可能で、わずか35分で80%充電可能です。\nプレミアムデザイン 丈夫なマット仕上げ、光沢のある端部、明るい青色のLED、クールなブルーのUSBポート。見た目も機能にもこだわった、プレミアム急速充電器です。\n十分な5ポート 5ポートで合計63Wの出力が可能。家族全員分のスマホやタブレットを同時に急速充電可能です。\n開封の儀 パッケージ \u0026lt;pパッケージはこんな感じでシンプルです。\n角のビニールをビリビリッとして、\nパカッ。\n付属品 まずは、チャージャー本体です。\nそして取り扱い説明所。\n気分を聞いてきます。\nもちろんHappy♪(?)\nもう一つ小さい取り扱い説明書。\n次に、Accessoriesの箱の中を見ていきましょう。\nパカッ。\nまずはACコンセントですね。\n直接コンセントにつなげるタイプではないので、コンセント周りがスッキリして他のコンセントを差す際に困りません。\nそれでは本体を見ていきましょう。\nビリビリ。\nマットの質感が良いですね。\nポートも急速充電に対応しているところが青くなっているので分かりやすいです。\n付属品は以上です。\n使用感 早速使ってみましょう。\nACケーブルのキャップを外し、\nケーブルのバンドを外し、\nコンセントに刺して、\nチャージャーに繋げ、\n本体の青いLEDランプがつけば準備完了です。\n同時に5ポート使うことが出来るので、とても便利ですね。\n今までは複数の充電器を刺していたのでとてもごちゃついていたのが、スッキリする点も魅力的です。\nまた、急速充電は最近のスマホならだいたい対応しているので、50分ほどでフル充電出来ちゃいます。\n終わりに Ankerは安定したクオリティの商品を提供してくれるので安心感があります。\nUSB充電器でコンセント周りがごちゃごちゃしてきたら、このAnkerの5ポート充電器でスッキリしてみてはいかがでしょうか\n","date":"2018-11-21T23:44:27+09:00","image":"/wp-content/uploads/2018/11/anker5PortChargerEye.png","permalink":"/2018/11/21/6522/","title":"【驚異の5ポート充電器】USB足りない問題を解決してくれる「Anker PowerPort Speed 5 」が便利過ぎる【スマホ/iPhoneの高速充電可能】"},{"content":"ピカブイの新要素 先日、無事にカントーリーグのチャンピオンになりました！\nそして、エンディングが終わるとピカブイの新要素であるマスタートレーナーの解禁がされました。\nタイチ君の情報網しゅごい。\nマスタートレーナーとは、ピカブイに登場するポケモン全てで1対1のタイマン勝負を行う事が出来るシステムです。\nこの勝負に勝つとそれぞれのポケモンに対応する称号が手に入るようですが、マスタートレーナーという名前から分かる通りしっかり育成をしないと勝てない強さになっています。\nマスタートレーナーはカントー地方マップの至るところに追加されており、頭の上のポケモンのアイコンが目印です。\nピカチュウのマスタートレーナーにチャレンジ タイチ君の言う通り、トキワの森に行くと以下のようなアイコンが表示されたトレーナーがいました。\n話しかけると、対象のポケモンを先頭に配置するように言われます。\n言われた通り先頭にみつひこ(=ピカチュウ)を配置してもう一度話しかけると勝負するか求められます。\nやってやるぜ！！！\nレベルたけぇよ・・・orz\nもちろん電気タイプへの有効打を持っているわけでも無く・・・\n完敗です。orz\nおいおい、\n煽ってくるじゃねぇか。。。。！！\nマスタートレーナー一覧 No.\rポケモン名\r出現場所\r1\rフシギダネ\r4番道路\r2\rフシギソウ\r15番道路\r3\rフシギバナ\rチャンピオンロード\r4\rヒトカゲ\rタマムシシティマンション屋上\r5\rリザード\rイワヤマトンネル\r6\rリザードン\rセキエイこうげん\r7\rゼニガメ\r12番道路\r8\rカメール\r20番水道\r9\rカメックス\r20番水道(ふたごじま)\r10\rキャタピー\r18番道路\r11\rトランセル\r11番道路\r12\rバタフリー\rトキワの森とニビシティの間の建物\r13\rビードル\rトキワの森\r14\rコクーン\r15番道路\r15\rスピアー\r８番道路\r16\rポッポ\r2番道路\r17\rピジョン\r16番道路\r18\rピジョット\r12番道路建物2階\r19\rコラッタ\r10番道路\r20\rラッタ\rハナダシティ\r21\rオニスズメ\rニビシティ\r22\rオニドリル\r１８番道路\r23\rアーボ\r4番道路\r24\rアーボック\rタマムシシティ(ロケット団アジト)\r25\rピカチュウ\rトキワの森\r26\rライチュウ\rシオンタウン(ポケモンタワー)\r27\rサンド\r11番道路\r28\rサンドパン\rタマムシシティとヤマブキシティの間の建物\r29\rニドラン♀\r3番道路\r30\rニドリーナ\rお待ちくださいorz\r31\rニドクイン\r8番道路\r32\rニドラン♂\r4番道路\r33\rニドリーノ\r8番道路\r34\rニドキング\r23番道路\r35\rピッピ\rヤマブキシティ\r36\rピクシー\rおつきみ山\r37\rロコン\r6番道路\r38\rキュウコン\r9番道路\r39\rプリン\rニビシティ\r40\rプクリン\rヤマブキシティ\r41\rズバット\rイワヤマトンネル\r42\rゴルバット\rチャンピオンロード\r43\rナゾノクサ\rトキワシティ\r44\rクサイハナ\rニビシティ\r45\rラフレシア\r15番道路\r46\rパラス\rおつきみ山\r47\rパラセクト\r二番道路\r48\rコンパン\r24番道路\r49\rモルフォン\r15番道路\r50\rディグダ\rディグダのあな\r51\rダグトリオ\rディグダのあな\r52\rニャース\rトキワシティ\r53\rペルシアン\rタマムシシティ(ロケット団アジト)\r54\rコダック\r21番水道\r55\rゴルダック\rハナダの洞窟\r56\rマンキー\r5番道路\r57\rオコリザル\r11番道路と12番道路の間の建物2階\r58\rガーディ\r7番道路\r59\rウインディ\rタマムシシティ\r60\rニョロモ\r12番道路\r61\rニョロゾ\rハナダシティ\r62\rニョロボン\rハナダシティ\r63\rケーシィ\rトキワシティ\r64\rユンゲラー\rヤマブキシティ\r65\rフーディン\r10番道路\r66\rワンリキー\rヤマブキシティ\r67\rゴーリキー\rセキチクシティ民家\r68\rカイリキー\rクチバシティ\r69\rマダツボミ\rトキシティ\r70\rウツドン\rシオンタウン\r71\rウツボット\rタマムシシティ\r72\rメノクラゲ\r20番水道(ふたごじま)\r73\rドククラゲ\r20番水道\r74\rイシツブテ\rイワヤマトンネル\r75\rゴローン\rチャンピオンロード\r76\rゴローニャ\rニビシティ\r77\rポニータ\rヤマブキシティ\r78\rギャロップ\rヤマブキシティ\r79\rヤドン\r21番水道\r80\rヤドラン\r21番水道\r81\rコイル\r5番道路\r82\rレアコイル\r5番道路\r83\rカモネギ\rクチバシティ\r84\rドードー\rハナダシティ\r85\rドードリオ\r15番道路\r86\rパウワウ\rふたごじま\r87\rジュゴン\rふたごじま\r88\rベトベター\rタマムシティ\r89\rベトベトン\rグレンタウン(ポケモン屋敷)\r90\rシェルダー\r19番水道\r91\rパルシェン\r20番水道(ふたごじま)\r92\rゴース\rシオンタウン\r93\rゴースト\rシオンタウン\r94\rゲンガー\rシオンタウン\r95\rイワーク\r7番道路\r96\rスリープ\rトキワシティ\r97\rスリーパー\rシオンタウン(ポケモンタワー)\r98\rクラブ\rクチバシティ\r99\rキングラー\rヤマブキシティ\r100\rビリリダマ\r無人発電所\r101\rマルマイン\r16番道路\r102\rタマタマ\r24番道路\r103\rナッシー\rグレンタウン\r104\rカラカラ\rヤマブキシティと8番道路の間の建物2階\r105\rガラガラ\rシオンタウン\r106\rサワムラー\rヤマブキシティ\r107\rエビワラー\rヤマブキシティ\r108\rベロリンガ\r16番道路とタマムシシティの間の建物2F\r109\rドガース\r16番道路\r110\rマタドガス\rタマムシシティ(ロケット団アジト)\r111\rサイホーン\r16番道路\r112\rサイドン\rタマムシシティ(ロケット団アジト)\r113\rラッキー\rセキチクシティポケモンセンター\r114\rモンジャラ\r15番道路\r115\rガルーラ\rセキチクシティ\r116\rタッツー\r19番水道\r117\rシードラ\r12番水道\r118\rトサキント\r12番道路\r119\rアズマオウ\r13番道路\r120\rヒトデマン\r19番水道\r121\rスターミー\rセキチクシティ\r122\rバリヤード\rタマムシシティ\r123\rストライク\rセキチクシティと15番道路の間の建物2階\r124\rルージュラ\rハナダシティ\r125\rエレブー\r無人発電所\r126\rブーバー\rグレンタウン(ポケモン屋敷)\r127\rカイロス\r18番道路とセキチクシティの間の建物2F\r128\rケンタロス\rセキチクシティ\r129\rコイキング\r4番道路\r130\rギャラドス\rタマムシシティ\r131\rラプラス\rシオンタウン(ポケモンタワー)\r132\rメタモン\rグレンタウン(ポケモン屋敷)\r133\rイーブイ\r16番道路\r134\rシャワーズ\rタマムシシティ(タマムシデパート)\r135\rサンダース\rタマムシシティ(タマムシデパート)\r136\rブースター\rタマムシシティ(タマムシデパート)\r137\rポリゴン\rタマムシシティ\r138\rオムナイト\rおつきみやま\r139\rオムスター\rグレンタウン\r140\rカブト\rおつきみやま\r141\rカブトプス\rニビシティ\r142\rプテラ\rニビシティ\r143\rカビゴン\r16番道路\r144\rフリーザー\rふたごじま\r145\rサンダー\r無人発電所\r146\rファイヤー\rチャンピオンロード\r147\rミニリュウ\r23番道路\r148\rハクリュー\rふたごじま\r149\rカイリュー\rハナダシティ\r150\rミュウツー\rグレンタウン(ポケモン屋敷)\r151\rミュウ\rグレンタウン(ポケモン屋敷)\r終わりに マスタートレーナーは今までのポケモンシリーズに無いタイプのやり込み要素ですね♪\nマスタートレーナーに勝てるようにいっぱいポケモンを捕まえてアメや経験値を貯めましょう♪\n","date":"2018-11-19T00:45:43+09:00","image":"/wp-content/uploads/2018/11/pikavuiMasterEye.png","permalink":"/2018/11/19/6978/","title":"【随時更新】マスタートレーナーの解禁方法と出現場所まとめ【ポケモンピカブイ】"},{"content":"ピカブイではメガシンカ可能 ポケモンの最新作をやったことある方にはおなじみのメガシンカ。\n戦闘中にさらに進化をしてパワーアップすることが出来るこのシステムですが、本作ピカブイでも搭載されています。\n本作では、ストーリー終盤のトキワジム戦直前のイベントにて、解禁することが出来ました。\nイベントにて入手 バッジを7つ集めてトキワジムを訪れるとイベントが始まり、自動的にポケモンけんきゅうじょに移動し、そこでグリーンからキーストーンと御三家であるリザードナイトX/Y、カメックスナイト、フシギバナイトのメガストーンをもらうことが出来ます。\nこれでメガシンカが使えるようになりました♪\n本作では持たせる必要が無い ピカブイでは持ち物システムが廃止されているので、従来のようにメガストーンを持たせる事は出来ません。\nなので、メガストーンを入手するだけでメガシンカを選べるようになっています。\nもちろん、メガシンカ先が2種類あるポケモンも任意の進化先を選べます。\n相手によって進化先を使い分ける事が出来るので戦略性が上がりますね♪\n終わりに 以上のようにストーリーを進めていれば取りこぼすこと無くメガシンカを使えるようになります。\nピカブイでは御三家以外にもメガシンカ出来るポケモンがいるようなので、メガストーンの入手方法が分かったらまたご紹介しようと思います。\n","date":"2018-11-18T02:02:25+09:00","image":"/wp-content/uploads/2018/11/pikavuiMegaShinkaEye.png","permalink":"/2018/11/18/6962/","title":"【トキワジム戦の直前】ポケモンピカブイで御三家のメガシンカを使うためにキーストーンを手に入れよう【リザードン/フシギバナ/カメックス】"},{"content":"ポケモンGoから連れてこよう さて、筆者のストーリーも進み無事にセキチクシティに到着することが出来ました。\nセキチクシティといえば、原作ではサファリゾーンがありましたね♪\nピカブイではサファリゾーンの代わりにGoパークと呼ばれる施設が登場します。\nGoパークとは？ Goパークとはピカブイと連動したスマホアプリのポケモンGoからカントー地方のポケモンを連れてくることが出来る施設です。\nセキチクシティに到着さえすれば特に他の準備はいらないので早速利用してみました♪\n連動方法 注意点 まず、注意点ですがポケモンGoからピカブイに送ったポケモンはポケモンGoからはいなくなってしまいます。\nコレクションや強いポケモンを間違って送ってしまわないように気をつけましょう！！\nペアリングの設定 ポケモンGo側 まずはポケモンGoを起動して設定画面を開きましょう。\n最新版のアプリであれば、Nintendo Switchという項目が追加されていると思うので、そちらをタップします。\n次に、Nintendo Switchに接続をタップします。\n端末のBluetoothが有効化されていない場合は以下のような表示が出てしまうので有効化しましょう。\nすると、以下のようにNintendo Switchを探し始めるので次にピカブイ側の準備を行います。\nピカブイ側 まずは設定画面を開き、Pokemon Goと接続を選択します。\nすると以下のようなメッセージが表示された後に、連動をするためのペアリング設定を求められるので、問題がなければはいを選びます。\n正常にBluetoothの接続が取れると、以下のようにポケモンGoのアカウントが認識されるので、はいを選択します。\n[adsense-wide]\rこれでポケモンGoとのペアリングの設定は完了です。\nポケモンGo側でも正常に認識されていますね。\nポケモンの転送 ポケモンGo側 では、実際にポケモンGoからピカブイにポケモンを転送してみましょう。\nポケモンGoのボックスメニューを開くと、以下のようなSwitchマークが表示されるようになっているのでそちらをタップします。\nすると、転送したいポケモンを選べるようになるので送りたいポケモンをタップして、Nintendo Switchに送るボタンを押しましょう。\n以下のように同意を求められますので、問題なければはいをタップします。\n再確認の画面が出ますので、もう一度はいをタップします。\nこれでポケモンGo側の準備は出来たのでピカブイ側で受け取る準備をしましょう。\nピカブイ側 まずはGoパークの受付に話しかけ、ポケモンを　連れてくるを選択します。\n次に連れて来るポケモンを迎え入れたいGoパークを選びます。\n問題がなければそのままはいを選択します。\nすると、待機中のポケモンGoと接続されるので、問題がなければはいを選択します。\nそして、転送が正常に終了すると以下のような画面が表示されます。\nポケモンGo側もこのような画面が表示され、これで転送完了です。\n[adsense-wide]\rまた、ここで幻のポケモンメルタンをポケモンGoで捕獲するためのアイテムである、ふしぎなはこが使えるようになります♪\nGoパークで捕獲 では、転送したポケモンをピカブイで捕獲してみましょう。\nもう一度受付に話しかけ、Goパークを選択します。\nすると、先ほど選択したGoパークにポケモンが転送されているのでそちらを選びましょう。\nおぉ・・・いますね！！\u003c/p\u003e\r話しかけるとステータス画面が表示されるので、捕まえるを選択します。\nすると、以下のような注意文が出るので、問題がなければはいを選びましょう。\nあとは通常の捕獲作業と同じですね。\n息を吸うようにExcellent。\n無事捕獲成功です♪\n伝説も送れる また、カントー地方のポケモンであればどのポケモンでも転送することが出来るようです。\nまだバッジが4枚しか無い状態でもミュウツーをGoパークにて捕獲することが出来ました♪\n親が変わる ちなみに、ポケモンGoから送ったポケモンをGoパークで捕獲すると、親がピカブイの主人公に変わります。\nもちろん、ニックネームも自由に変えることが出来るので覚えておくと良いですね♪\n経験値は多くもらえる ポケモンGoから送ったぽけもんは多めに経験値をもらうことが出来るようです。\nこれは育成が捗りますね・・・・！\n終わりに 以上のように簡単にポケモンGoからピカブイに転送することが出来ました。\nどんどん転送してピカブイのポケモンを育てたり、ポケモンGoでメルタンをいっぱいゲットしちゃいましょう♪\n","date":"2018-11-17T16:56:09+09:00","image":"/wp-content/uploads/2018/11/pikavuiPokemonGoSettingEye.png","permalink":"/2018/11/17/6912/","title":"【ポケモンGoとピカブイ連動】ピカブイとポケモンGoを連動してGoパークにカントー地方のポケモンを連れてくる方法【メルタン捕獲のための不思議な箱も入手】"},{"content":"自転車システム廃止 ポケモンシリーズをやっていると、ストーリーの途中で移動速度をあげるアイテムが必ず出てきます。\n過去作では自転車やダッシュシューズ、最新作のウルトラサンムーンではケンタロスライドなどがありますね。\nピカブイは初代のリメイクなので自転車がもらえるのかな？と思いきや、実は自転車システムが廃止されているため自転車を入手する事が出来なくなっています。\nでは、どうすれば良いのでしょうか？orz\nポケモンに乗ろう 今作では相棒ポケモンとは別に連れ歩くポケモンを1匹選ぶ事が出来ます。\nそして、ポケモンの中には主人公を乗せてくれるポケモンも存在しており、それが自転車代わりの移動手段となっています。\n最短の入手方法 指定されたポケモンを5匹入手して話しかける 最短で入手するにはクチバシティまで進める必要があります。\nピカチュウバージョンではガーディを5匹、イーブイバージョンではニャースを5匹捕まえてからこのキャラクターに話に話しかけると、それぞれウィンディまたはペルシアンをもらうことが出来、このポケモンをボールの外に出すことで自動でライド状態になります。\n[adsense-wide]\rかなりのスピードアップになるので、入手必須レベルですね！\n手持ちに入れていないと乗れないので注意 気をつけないといけないのは、手持ちに乗れるポケモンを入れておかないとボールの外に出せない点です。\n過去作のようにアイテムではなくなったのでここは要注意です。\n終わりに 以上のように、意外と序盤で高速移動手段を入手することが出来ます。\n他にも乗れるポケモンはいるようなのでいろいろ試してみてはいかがでしょうか♪\n","date":"2018-11-17T13:52:03+09:00","image":"/wp-content/uploads/2018/11/pikavuiRideEye.png","permalink":"/2018/11/17/6902/","title":"【最短クチバシティで入手可能】自転車システムが廃止されたピカブイでポケモンに乗って移動速度をあげよう【ペルシアン/ウィンディ】"},{"content":"ピカブイにも個体値がある 個体値とは？ 案の定、ピカブイにハマりまくっている筆者ですが、ピカブイにも原作同様に個体値の概念があることが分かりました。\n個体値とは、ポケモン一体一体に設定されている個体ごとに差のある通常では確認することが出来ない隠しパラメーターの事です。\nHP/こうげき/ぼうぎょ/とくこう/とくぼう/すばやさの6ステータスごとに0~31が割り振られています。\n各ステータスに31が割り振られている事をVと呼び、すべてのステータスが31の個体を6Vと呼んだりしています。\n通常では確認する事が出来ない この個体値は隠しステータスなので通常のステータス画面では見る事が出来ません。\nしかし、ピカブイではストーリーを進める事でジャッジ機能と呼ばれるものが解放され、その機能を利用する事で大体の数値を把握する事が出来るようになります。\n解放の仕方 解放するにはまずはクチバシティまで進める必要があります。\nクチバシティまで来たら東(右側)に進んでいき、突き当たりの建物の2階にいるオーキド博士の助手に話しかけましょう。\nすると、ポケモン図鑑を見せるよう言われます。\nこの時に捕獲数が30匹を超えていればジャッジ機能が使えるようになります。\nまだ、30匹も捕まえていない場合は頑張って草むらを歩き回ったりむしよせコロンを使ったりしてみてください。\n使い方 ポケモンのようすをみる画面にYボタンでジャッジが追加になっていると思います。\n[adsense-wide]\rこれでポケモンの個体値が確認出来るようになりました。\nちなみに相棒ポケモンは自動的に6Vのようですね。\nさすが相棒！！！\n終わりに 強いポケモンを育てるのであれば、個体値の考慮は必須です。\n本作はシンボルエンカウントという事で未捕獲ポケモンのサーチやゲットがとてもスピーディーに行う事が出来るので、サクッと解放してみてください♪\n","date":"2018-11-16T23:27:34+09:00","image":"/wp-content/uploads/2018/11/pikavuiKotaichEye.png","permalink":"/2018/11/16/6891/","title":"【ポケモンピカブイ】ポケットモンスター let’s go ピカチュウ\u0026イーブイで個体値を判定するためのジャッジ機能を解放する方法【育成に必須】"},{"content":"ついに発売 ついに本日、ポケットモンスターの新作「ポケットモンスター let's go ピカチュウ\u0026イーブイ」が発売されましたね！！\n初めてのSwitch作品という事もあり、グラフィックがかなり綺麗になるという点と、初代のリメイクという点がとても気になったので、早速買ってきました！！\n今回はモンスターボールPlusセットのピカチュウ版を購入です♪\nAmazon ポケットモンスター Let\u0026#39;s Go! ピカチュウ モンスターボール Plusセット- Switch Amazon ポケットモンスター Let\u0026#39;s Go! イーブイ モンスターボール Plusセット- Switch もちろん、ソフト単体のものもあります♪\nAmazon ポケットモンスター Let\u0026#39;s Go! ピカチュウ- Switch Amazon ポケットモンスター Let\u0026#39;s Go! イーブイ- Switch 開封の儀 外観 パッケージはこちらです。\n付属品 では、早速開けてみましょう。\nパカッ。\n梱包物は以下です。\nPoint\rカセット本体\rモンスターボール Plus\rType-C USBケーブル\r保証書\rカセット パッケージは外箱と同じですね。\nパッケージ内部がカントー地方のタウンマップになっているのが良いですね。\n四隅に伝説のポケモンが・・・！\nそして、ポケモンGoとの連動の説明書もあります。\nどうやらセキチクシティのGoパークまで進めることでポケモンGoアプリのポケモンを連れてこれるようになるらしいですね。\nモンスターボールプラス そして、こちらがモンスターボールプラスです。\nピカブイのコントローラーとしても使える他、ポケモンGoでポケモンGoPlusとしても使えるようですね♪\nこちらの使い方はまた改めて記事にしようと思います。\n充電は付属のUSBケーブルを使って、背面の端子部分から行うことが出来そうです。\nプレイ開始 オープニング さて、早速プレイを開始しましょう！！\n始めると使用するコントローラーを求められます。\n今回は携帯タイプでプレイしてみます。\n次に使用する言語の設定を求められます。\n筆者は大きなお友達なので、漢字でプレイしていきます。(ｷﾘｯ)\nするとゲーム画面が始まり、ピカチュウが出迎えてくれます。\nきゃわわ！！！\nオーキド博士が登場し、この世界の説明をしてくれます。\nそのあとは自分の分身である主人公の設定やライバルの名前をつけることになります。\nそして、いよいよポケットモンスターの世界へ！\n原作の懐かしいメッセージも忠実に再現されており、テンションが上がります。。。！\nやはりスイッチのクオリティはすごいですね。\n今までとは比較にならないくらいグラフィックが綺麗です。\nキャラクターの表情も細かく動きます！！\n[adsense-wide]\rピカチュウとの出会い 話を進めていくとピカチュウと出会い、ポケモンの捕まえ方のチュートリアルが始まります。\n基本的にはポケモンGoと同じで、サークルめがけてモンスターボールを投げる形になります。\nニックネームはみつひこに決定です！！笑\nステータス画面はポケモンGoではなく従来のシリーズと同じ感じですね。\nグラフィックの向上をしながらも、従来のようなドット絵調の画面があるのがファンサービスとしてありがたいですね♪\n野生ポケモンとのシステム変更 ピカプイでの大きなシステムの変更として、野生ポケモンとのバトルの廃止があります。\n本作では、野生のポケモンがシンボルエンカウントとなり可視化されるようになっています。\n当たることでポケモンの捕獲画面に移ります。\n[adsense-wide]\rポケモンを捕まえていくことで経験値を取得し、ポケモンが成長するようになっています。\nバトルは原作仕様 気になるバトルは原作通りでした。\nポケモンGoのような形ではありませんでした。\nもちろん、バトルでも経験値をもらえることが出来ます。\n相棒を可愛がる 相棒ポケモンと触れ合える機能があります。\n撫でたりつついたり木の実をあげることで様々な反応をしてくれます。\n癒し。\n3DS版にも同じような機能がありましたが、やはりこのグラフィックだと桁違いに可愛いですね。(ｼﾞｭﾙﾘ)\n冒険はまだ始まったばかり まだ序盤のストーリーを進めただけですが、間違いなく面白いゲームですね。\nストーリーのリメイク内容も楽しみですが、新しい機能もありそうですし、何よりこのグラフィックでポケモンシリーズが出来るのがファンにはたまらないです！！！\nん？見覚えのあるこの後ろ姿は・・・？\n終わりに 原作をやったことある方やポケモンGoをやっている方、さらにはポケモンシリーズ未プレイの方でも楽しめると思いますので、気になった方は是非購入してみてはいかがでしょうか♪\n","date":"2018-11-16T15:53:44+09:00","image":"/wp-content/uploads/2018/11/pokemonPikavuiSwitchEye.png","permalink":"/2018/11/16/6820/","title":"【ポケモンピカブイ】ポケットモンスター let's go ピカチュウ\u0026イーブイを買ってきたので序盤のストーリーと遊び方をご紹介【ポケモンGoと連動】"},{"content":"AMP What\u0026rsquo;s? 皆さんはAMPと言う言葉をご存じでしょうか？\nAMPとは、Accelerated Mobile Pagesの略で、Googleが推進しているモバイルページを高速に表示させるための技術が適用されているページの事を指します。\nこちらは2015年10月に、モバイルユーザーの\u0010UX向上を目的としてGoogleとTwitterが協力し、オープンソースプロジェクトとして発足しました。\nでは、このAMPにはどのようなメリット/デメリットがあるのでしょうか。\nメリット ページの表示速度アップ ページの表示速度が約4倍ほど早くなると言われています。\nこれは、Google側でキャッシュを利用している点と、AMPページのデータ通信料量がとても少ない点を利用して実現しています。\nさらに、このキャッシュに含まれる情報はAMPのルールに沿った厳しく制限されたミニマムなhtmlとCSSのみとなるため、必然的に少なくなります。\n検索結果にAMP対応の表示が出る こちらは直接的に何かに影響があるわけではないですが、Googleの検索結果にAMPに対応している事を表す表示が出るようです。\n一般ユーザーにはあまり影響ないかもしれませんが、同業者でAMPの存在を知っているからは参考にしようとするサイト訪問が増えるかもしれませんね。笑\nSEOに間接的に効果が出る可能性がある AMP対応をしたからといって検索順位が上がることはありません。\nしかし、表示速度が改善されるので間接的に順位が上がる可能性はあります。\nデメリット 修正が必要 AMPを利用するには、通常のHTMLとは別のAMP HTMLというものを用意する必要があります。\nこれは、利用出来るタグなどが制限されたHTMLとなっているので、2種類のHTMLを作らないといけません。\nうまく表示出来ない可能性がある 前述の通り、利用出来るタグが異なるので正しくページが表示されなくなる可能性がります。\nまた、AMPではJavaScriptも利用出来ないのでJavaScript前提のサイトだとうまく動作しなくなる可能性が非常に高いです。\rSEOに直接効果があるわけではない GoogleはAMP対応の有無によって検索順位が変わることはないと明言しています。\nですので、順位を気にしてAMPの導入を考えているのであれば、急いで対応する必要はありません。\nWordpressならプラグインを入れるだけで対応可能 自前で用意するととても大変そうなAMPですが、さすがWordpress様。\nなんとプラグインを入れて有効にするだけでAMP対応が可能になってしまうのです！！\nただ、利用しているプラグインやテーマによっては別途対応が必要な場合もあります。\n筆者も何点か修正を行って別の記事にしているのでそちらも参考にして頂ければなと思います。（※後述）\n今回実際に入れてみましたのでご紹介致します。\n手順 プラグインをインストール 今回はAMP for WordPressというプラグインをインストールします。\n有効化するのを忘れずに。\nたったこれだけで準備は完了です。\n確認 AMPプラグインを有効にすると、パーマリングの末尾に amp をつけることでAMPページにアクセスする事が可能になります。\nこちらが元ページです。\nそして、こちらがAMPページです。\n広告やサイドバーなどが消え、記事本文のみのシンプルなレイアウトに変わっています。\nまた、さらに細かいチェックについては、コチラ\u0026nbsp;からURL単位でテストが出来るので試してみると良いでしょう♪\n以下のように判定されると、スマホ端末でGoogle検索した際にAMPページが自動で表示されるようになります。\nStaticPressにも対応 また、こちらのプラグインを導入するとheadタグ内に、自動でampページへのリンクが差し込まれます。\nなので、自動でAMPページも出力対象になります。\nこれは助かりますね♪\n場合によってはうまく表示されないことも しかし、StaticPressやGoogleAnalytics、GoogleAdsense、AmazonJSを利用していると、AMPで使えないタグが出力されてしまったり無効になってしまったりすることがあります。\nその場合は以下の対応をする必要がありますので、そちらも参考にして頂ければなと思います♪\n関連記事 【原因はStaticPress】吐き出したAMPページがGoogleSearchConsoleで「\u0026lt;meta http-equiv\u0026gt;」が原因でエラー発生する際の対応方法【Wordpress】 2018/12/03 1276文字 約3分で読めます 関連記事 【AMP For Wordpress】スマホ向けにAMP対応した途端にGoogleAnalyticsのPV数がガクッと下がった場合の原因と対処方法【必須設定】 2018/12/15 1474文字 約3分で読めます 関連記事 【AMP For Wordpress】AMPページにGoogleAdsenseが表示されない場合の原因と対処方法【設定必須】 2018/12/15 734文字 約2分で読めます 関連記事 【AMP For WordPress】AMPページにAmazonJSのリンクの画像や商品情報が表示されない場合の原因と対処方法【デザイン調整】 2018/12/16 2355文字 約5分で読めます また、デザインやレイアウトはデフォルトのものになってしまうので、通常ページに寄せたカスタマイズをすることも可能です。\n関連記事 【AMP For WordPress】WordpressのAMPプラグインで出力されるページのレイアウトやデザインをcssでカスタマイズしよう【templatesファイル】 2018/12/18 2475文字 約5分で読めます 終わりに 今後、注目が集まるであろうAMP対応がWordpressのプラグインを入れるだけで実現出来るのはとても助かりますね。\n新しい技術をどんどん盛り込んで時代遅れのサイトにならないように気をつけましょう♪\n","date":"2018-11-15T20:51:52+09:00","image":"/wp-content/uploads/2018/11/wordpressAmpInstallEye.png","permalink":"/2018/11/15/6804/","title":"【StaticPressも対応】Wordpressのサイトを「AMP for WordPress」プラグインを使ってサクッとAMP対応しちゃおう【インストール/使い方】"},{"content":"フォートナイトデビュー 今話題のゲーム 先日、遂に任天堂Switch版のフォートナイトデビューしました！！！\nPS4版をやっていたわけではないのでガチの初心者です。\n[embed]https://youtu.be/en1cA7snIWE[/embed]\rYoutubeの任天堂公式チャンネルでも、トータルテンボス藤田が登場する「ちゃぶ台アフロ」にて取り上げられましたね。\n[embed]https://youtu.be/IbLWf_edZTA[/embed]\r[embed]https://youtu.be/78V-GQOATUs[/embed]\rWhat\u0026rsquo;s? フォートナイトとは、バトルロイヤル型のFPSゲームとなっており、最近ではとても熱いジャンルのゲームです。\n同様のゲームとしては、荒野行動やPUBG(PLAYERUNKNOWN'S BATTLEGROUNDS)などが有名ですね。\nフォートナイトはその中でもコミカル性が高いゲームです。\nまた、建築と呼ばれる独自のシステムで攻守の戦略が奥深くなっていることも魅力の一つですね。\n『フォートナイト』は、エピックゲームズが販売するアクションビルディングゲーム。 対応プラットフォームはPC、PlayStation 4、Xbox One、iOS、Nintendo Switch。 Android版は、2018年8月9日より一部端末向けにベータ版がリリースされた。その他の機種へも順次拡大予定。\r操作慣れるまでが大変 しかしこのゲーム、初めて当分の間はひたすら倒される事になると思います。笑\nというのも、カメラ操作や照準操作がとても難しく、慣れるまではまともに敵を狙撃することが出来ず、かつ敵の攻撃を避けるのも出来ない状態が続きます。\n筆者はまだ初めて一週間ほどですが最初の2,3日は1キルも出来ずに何十回も倒されました。笑\n設定が大事 そんな初心者が少しでもうまく立ち回るには、操作設定をカスタマイズする必要があります。\n幸い、フォートナイトには細かい操作設定機能があるのでそちらを調整して自分の操作しやすい設定にしましょう。\n今回は筆者が実際に設定した項目をご紹介します。\n初心者向け設定 設定画面にはロビー画面から+マークを押して右上の歯車マークを選びます。\nコントローラー感度 まずはコントローラー感度です\nコントローラー感度とはコントローラーでスティックを倒した際に動くカメラの大きさを設定します。\n初心者は感度が高すぎるとカメラの制御が出来ずに敵を視界に収めることが難しいのでまずは感度を下げて操作に慣れてから上げていくと良いでしょう。\nコントローラーターゲット感度 次にコントローラーターゲット感度です。\nこちらは照準モードにした際の感度を設定することが出来ます。\nこちらも最初は感度を低く設定しておいて、慣れたら上げていきましょう。\n武器の自動回収 次に武器の自動回収です。\n慣れるまではアイテムは自動で取るようにしておくことで操作に集中出来ると思います。\n手持ちのインベントリに空きがない場合は拾わなくなるので気をつけましょう。\nコントローラータイプ 次にコントローラータイプを変えましょう。\n初心者向けのサイトを見ると、どのサイトもビルダープロをお勧めしていますね。\n確かに操作がとてもしやすく、建築も含めてお勧めなのでまずはそちらに慣れてみましょう。\n終わりに 以上の設定を整えるだけでもだいぶ操作性が変わり、相手に弾が当たったり敵から逃げれるようになります。\nあとは、アイテムの有効な使い方や武器の使い分け、マップの覚え込みが重要になってきますので、この辺はひたすらマッチして覚えるしかないですね。\nフォートナイトは基本無料(オンライン対戦も！！)なので、任天堂Switchを持っている方は是非遊んでみてはいかがでしょうか♪\n","date":"2018-11-10T22:35:56+09:00","image":"/wp-content/uploads/2018/11/fortnightSettingEye.png","permalink":"/2018/11/10/6774/","title":"【弾が当たらない】Switch版フォートナイトを始めたガチ初心者がやるべき最初の設定【敵を倒せない】"},{"content":"ダンバルコミュニティデイの延期日が発表 先日、多くのトレーナーが楽しみにしてたダンバルコミュニティデイの悲劇について、記事にしました。\n関連記事 【悪夢】ポケモンGoの2018年10月の「ダンバルコミュニティデイ」が通信エラー連発で中止になり、アイテムが無駄になった挙句、後日再実施になってしまった件【悲劇】 2018/10/21 1856文字 約4分で読めます そして、その補完として再度同じ内容のイベントを後日行う、と公式が発表していましたが、先ほど詳細が発表されました！\n開催概要 公式情報 公式ツイッターにてm以下のツイートが更新されました。\n【重要】10月21日（日）に開催した「コミュニティ・デイ」にて一部地域で障害が発生し、ご迷惑をおかけいたしました。アジア太平洋地域での10月の「コミュニティ・デイ」を10月28日（日）お昼の12時〜15時に再度開催いたします。詳細はこちらからご確認ください。https://t.co/JvdJCAmEMS pic.twitter.com/XK7hH2FbpP\n\u0026mdash; Pokémon GO Japan (@PokemonGOAppJP) 2018年10月24日\r開催日時 開催日時は10月28日（日）お昼の12時〜15時に決まりました。\nわずか一週間でサーバー負荷の対応がしっかり行われたのかが気になりますね。。。！\n地方の方で21日のバンダルコミュニティデイを問題なく楽しめた方には二週連続のコミュニティデイとなるので、嬉しい報告ですな！\nさらに、ハロウィンイベントで捕獲時アメ2倍なので、ダンバルにも適用されるのであれば、パイルの実を使った1匹捕獲で一気に12個獲得出来るかもしれないです！！\n関連記事 【新伝説実装】ハロウィンイベントで第五世代ダイパの伝説のポケモン「ギラティナ」が伝説レイドに登場【ポケモンGo】 2018/10/24 1903文字 約4分で読めます 内容は変更無し 内容としては、本来のダンバルコミュニティデイと同じ内容なので、特に変更点は無さそうですね。\n10月21日（日）に開催したダンバルが大量発生する「コミュニティ・デイ」にて、想定を大きく超えるアクセスが集中しましたため、アジア太平洋地域での一部地域において障害が発生いたしました。ご迷惑をおかけし、大変申し訳ございませんでした。\r延期を発表しておりましたアジア太平洋地域の「コミュニティ・デイ」は、改めて10月28日（日）お昼の12時〜15時に開催いたします。\nイベント期間中は、ルアーモジュールの効果が3時間持続するようになり、タマゴをかえすために必要な距離も通常の1/4になります。また、お昼の12時から16時の間に進化させたメタグロスは、特別なわざ「コメットパンチ」を覚えます。\n※当日の天候等の事情によりイベントの時間・場所・内容が変更になる場合がございます。予めご了承ください。\n終わりに 意外と早く再実施されるようですね。\n(筆者は他のイベントとかぶったためガッツリ出来なそうで残念orz)\n不具合によってイベントを楽しむ事が出来なかった人はもちろん、地方に住んでいて21日に問題なく楽しめ方もさらにダンバルのアメを増やすチャンスなので、乱獲してみてはいかがでしょうか♪\n","date":"2018-10-24T18:01:21+09:00","image":"/wp-content/uploads/2018/10/danbalRevengeEye.png","permalink":"/2018/10/24/6741/","title":"【リベンジダンバル】中止になったダンバルコミュニティデイの再実施日時が発表【ポケモンGo】"},{"content":"ギラティナきたー！ つい先日(23日)まで、グローバルタスクの報酬として、伝説レイドにミュウツーが登場していました。\n関連記事 【ポケモンGO】ウルトラボーナスの内容が復帰勢にどんぴしゃな件【伝説フィーバー】 2018/09/11 1384文字 約3分で読めます そして、ミュウツーが終了してから間髪を入れず24日の朝から新伝説レイドとして、第五世代(ダイヤモンド・パーツ)の伝説のポケモン「ギラティナ」が伝説レイドに登場するようになりました！\nゴースト・ドラゴンタイプの伝説のポケモン「ギラティナ[アナザーフォルム]」が伝説レイドバトルに初登場しました！ 仲間と一緒に力を合わせて挑みましょう。ギラティナの登場は11月20日（火）まで！ #BeLegendary pic.twitter.com/ZJd3ZqKM58\n\u0026mdash; Pokémon GO Japan (@PokemonGOAppJP) 2018年10月23日\rこれは同時に行われるハロウィンイベントの一環のようです。\nギラティナにはアナザーフォルムとオリジンフォルムがあるのですが、今回は前者のアナザーフォルムのようですね。\nハロウィンイベント 10月24日（水）早朝より「Pokémon GO ハロウィン」が始まります🎃 「フワンテ」や「スカンプー」といったゴーストタイプやあくタイプを持つ新たなポケモンが出現するほか、ポケモンを捕まえたときに手に入るアメが2倍になるボーナスも！どうぞお楽しみに！https://t.co/EwVMUy0C7F #PokemonGOHalloween pic.twitter.com/MfAwOcnN8h\n\u0026mdash; Pokémon GO Japan (@PokemonGOAppJP) 2018年10月23日\r期間 ハロウィンイベントの期間については、日本時間10月24日（水）早朝から11月1日（木）までとなっています。\n伝説レイドにギラティナ登場 冒頭に紹介しましたが、ギラティナが登場します。\nギラティナについてはハロウィンイベントが終わっても11月20日（火）までは登場しているようなので、そこまで焦ることはなさそうですね。\n10月24日（水）から11月20日（火）までは、はんこつポケモン「ギラティナ[アナザーフォルム]」が伝説レイドバトルに初登場します！ ゴースト・ドラゴンタイプを持つシンオウ地方の伝説のポケモン「ギラティナ」。この世の裏側にあるという「やぶれたせかい」からその姿を現します！他のトレーナーと協力し、挑戦しましょう！\nゴースト・悪ポケモン増加 ゴーストや悪ポケモンも普段より多く出現するようになります。\nまた、フワンテやスカンプーなどが新実装され、フワンテに関しては色違いも登場するとのことです。\nこの期間から「フワンテ」や「スカンプー」などゴーストタイプとあくタイプを持つポケモンが新たに出現するようになるほか、ポケモンを捕まえたときに獲得できるポケモンのアメが2倍になります。\n捕獲時のアメが2倍 これはとても美味しいですよね！！\nパイルの実を使えばおそらく12個手に入るかも・・・・！\n延期になったダンバルコミュニティデイも重なるのでダンバルのアメ大量ゲットも出来るかも！！！\n関連記事 【リベンジダンバル】中止になったダンバルコミュニティデイの再実施日時が発表【ポケモンGo】 2018/10/24 1199文字 約3分で読めます ミカルゲのスペシャルリサーチ追加 ハロウィン期間限定のスペシャルリサーチとして、ミカルゲをゲット出来るスペシャルリサーチの依頼を受けれるようです。\nただし、ポケモンを108匹捕まえたり、木の実を108個使ったりとちょっと難易度は高めですな。。。\nまた、イベント期間中、ウィロー博士から期間限定の「スペシャルリサーチ」が依頼されるようです。このスペシャルリサーチは、イベント期間内に博士からスペシャルリサーチを受け取っていれば、イベント期間終了後でもスペシャルリサーチをお楽しみいただくことができます。博士によると、道で奇妙な石につまずいて以来、研究室のまわりで奇妙な出来事が続いているとのこと･･･。 はたしてこの現象はポケモンのしわざなのでしょうか？ スペシャルリサーチのタスクを達成して、この謎を解き明かしましょう！ イベント期間中は、ゴースト・あくタイプのポケモンに関する「フィールドリサーチ」もお楽しみいただけます。\nスタイルショップにハロウィン風衣装追加 ハロウィンにぴったりなゴーストタイプをモチーフにした可愛らしい衣装が追加されます。\nハロウィン期間中は衣装を変えて楽しむのも用意かもしれませんね♪\nゴーストタイプのポケモンをテーマにした新しい着せ替えアイテムがスタイルショップに登場しました。！ 「フワンテ」の帽子や「ゲンガー」のリュックなど、仮装気分を味わえるちょっぴりトリッキーなアイテムに是非ご注目ください！！\rちょっぴり怪しい雰囲気に包まれながら、楽しいひとときを･･･。『Pokémon GO』を遊ぶ際は、周囲に注意しながらお楽しみください。\n終わりに 新たな伝説ポケモンや第五世代ポケモンがどんどん実装されてきましたね。\n季節イベントもポケモンGoで楽しみましょう♪\n","date":"2018-10-24T11:59:45+09:00","image":"/wp-content/uploads/2018/10/pokemonGoHallowinEye.png","permalink":"/2018/10/24/6729/","title":"【新伝説実装】ハロウィンイベントで第五世代ダイパの伝説のポケモン「ギラティナ」が伝説レイドに登場【ポケモンGo】"},{"content":"Javaサポート問題 Javaといえば、オラクルが提供している言語で多くのシステム開発で使用されてきています。\n最新のJavaのバージョンは2018年9月時点で11ですが、8を使っているシステムも多いのでは無いのでしょうか。\nしかし、そんな中オラクルが無料サポートをやめ有償化したのは話題になったのでJavaエンジニアで知らない方はいないと思います。\nもちろん、予算がある案件であればセキュリティ担保のために有償サポートをすれば良いのですがなかなかお高いです。。。\n本記事では有償化問題の詳細については触れませんが、今後のJava案件では必ず考慮に入れないといけない問題ですので各自調べてみると良いでしょう。\nしかし、有償だけでなく無償のJDKもあります。\nただ、その場合は定期的なバージョンアップを行う必要があるためそれに対する開発及びテスト工数が発生します。\nお金で解決するか、人で解決するかの選択肢という事ですな。。。orz\n無償のJDK 無償のJDKにはOpenJDKとAdoptOpenJDKがあります。\nOpenJDK OpenJDK (Open Java Development Kit) は、プログラミング言語Javaのフリーかつオープンソースの実装である。2006年、サン・マイクロシステムズが始めたもので、GPLリンク例外つきの GNU General Public License (GNU GPL) でライセンスされている。リンク例外つきとしたのは、Javaクラスライブラリのライブラリとしての使用をGPLライセンスの適用外とするためである。OpenJDKは Java SE 7 の公式リファレンス実装とされている\nAdoptOpenJDK OpenJDKのビルドを提供するプロジェクト。IBM、マイクロソフト等がバックアップしており、OpenJDKの提供しているJDKよりも多くのプラットフォームに対応している。(AIX等)\rこちらは半年ごとにアップデートする通常のバージョンに加え、4年のサポートを行うLTS版を提供する予定である。\n今回は後者のAdoptOpenJDKを使用するための環境構築を行ってみましたので、手順をご紹介致します。\n手順 前提 作業前のJavaの状態は以下の通りとします。\n前提 $ java -version java version \u0026#34;1.8.0_91\u0026#34; Java(TM) SE Runtime Environment (build 1.8.0_91-b14) Java HotSpot(TM) 64-Bit Server VM (build 25.91-b14, mixed mode) $ which java /usr/bin/java Homebrewでインストール AdoptOpenJDKもHomebrew経由でインストールすることが出来ます。\n以下のコマンドを実行してみましょう。\nコマンド brew install adoptopenjdk-openjdk8 しかし、以下の様なエラーが出ると思います。\nエラーログ Error: No available formula with the name \u0026#34;adoptopenjdk-openjdk8\u0026#34; ==\u0026gt; Searching for a previously deleted formula (in the last month)... Warning: homebrew/core is shallow clone. To get complete history run: git -C \u0026#34;$(brew --repo homebrew/core)\u0026#34; fetch --unshallow Error: No previously deleted formula found. ==\u0026gt; Searching for similarly named formulae... Error: No similarly named formulae found. ==\u0026gt; Searching taps... ==\u0026gt; Searching taps on GitHub... Error: No formulae found in taps. ✘ 原因としては、adoptopenjdk-openjdk8の配布はHomebrewの公式リポジトリでは行っていないため、見つからなかった様です。\nなので、以下のコマンドでリポジトリを追加しましょう。\nコマンド brew tap AdoptOpenJDK/openjdk brew tapとは公式以外のリポジトリをフォーミュラとしてHomebrewに追加するもので、brewのもとでinstall,uninstall,updateなどが行えます。もちろん自分が公開しているものも簡単に追加できます。\nすると、以下の様に正常にTappingされたとのログが出ます。\n実行ログ ==\u0026gt; Tapping adoptopenjdk/openjdk Cloning into \u0026#39;/usr/local/Homebrew/Library/Taps/adoptopenjdk/homebrew-openjdk\u0026#39;... remote: Enumerating objects: 8, done. remote: Counting objects: 100% (8/8), done. remote: Compressing objects: 100% (7/7), done. remote: Total 8 (delta 2), reused 2 (delta 0), pack-reused 0 Unpacking objects: 100% (8/8), done. Checking connectivity... done. Tapped 3 formulae (34 files, 25.7KB). そしたらもう一度、brew install adoptopenjdk-openjdk8を実行してみましょう。\n実行ログ ==\u0026gt; Installing adoptopenjdk-openjdk8 from adoptopenjdk/openjdk ==\u0026gt; Downloading https://github.com/AdoptOpenJDK/openjdk8-releases/releases/download/jdk8u172-b11/OpenJDK8_x64_Mac_jdk8u172-b11.tar.gz ==\u0026gt; Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/85294734/40a18d74-5b5e-11e8-8317-9a07f9b00006?X-Amz-Algorithm=AWS4-HMAC ######################################################################## 100.0% Warning: Warning - This brew TAP is being DEPRECATED soon in favour of using brew cask. Please check out https://github.com/AdoptOpenJDK/homebrew-openjdk/blob/master/README.md for more info 🍺 /usr/local/Cellar/adoptopenjdk-openjdk8/jdk8u172-b11: 577 files, 170.4MB, built in 3 minutes 5 seconds 正常にインストール出来ましたね♪\nバージョン切り替え インストールしただけではまだ有効化されていないので、JAVA_HOMEを変える必要があります。\nお使いのシェルに合わせて設定ファイルに以下を追記してください。\n筆者の場合はZshなので.zshrcになります。\n~/.zshrc export JAVA_HOME=\u0026#34;/usr/local/Cellar/adoptopenjdk-openjdk8/jdk8u172-b11\u0026#34; export PATH=$JAVA_HOME/bin:$PATH 編集が終わったら以下のコマンドで編集を反映してください。\nコマンド source ~/.zshrc 確認 では、以下のコマンドで確認してみましょう。\nバージョン確認 java -version 実行結果 openjdk version \u0026#34;1.8.0-adoptopenjdk\u0026#34; OpenJDK Runtime Environment (build 1.8.0-adoptopenjdk-jenkins_2018_05_19_02_01-b00) OpenJDK 64-Bit Server VM (build 25.71-b00, mixed mode) 正常に変わっている様ですね♪\n終わりに オラクル有償化によって、システム開発で使用する言語のバランスが一気に崩れるかもしれません。\nとはいえ、やはりJava言語自体はまだまだ無くなる事も無いと思っています\n時代の変化に乗り遅れないように、Javaの有償化問題に向き合っていきましょう！\n","date":"2018-10-22T23:39:30+09:00","image":"/wp-content/uploads/2018/10/installAdoptOpenJdkEye.png","permalink":"/2018/10/22/6687/","title":"【オラクルのJava有償化問題】無償のJDK「AdoptOpenJDK」をmacにインストールする方法【やり方紹介】"},{"content":"みんなが待ちに待った「コミュニティデイ」 ポケモンGoユーザーであれば、毎月実施されるコミュニティデイを楽しみにしているのではないでしょうか？\nこのコミュニティデイでは3時間限定ですが、その時間内は事前に告知された人気ポケモンの出現率が高くなり、さらに色違いポケモンも出現するため、多くの人がこのコミュニティデイに合わせて仕事の有給を取ったり予定を開けたりしていると思います。\n2018年10月は「ダンバル」 そして、2018年10月のコミュニティデイの対象ポケモンはダンバルでした。\nこのダンバルというポケモンは、第三世代ルビー・サファイヤのポケモンで、原作では600族と言われる強ポケモン「メタグロス」に進化するポケモンです。\nもちろんポケモンGoでも強いポケモンとして扱われているのですが、何よりそのビジュアルがかっこよく人気を博しています。\nさらに、コミュニティデイ時間内にメタングからメタグロスに進化させると「コメットパンチ」という鋼タイプのとても強力な限定技を覚える事が出来ます。\nこのダンバルというポケモンは普段は滅多に出現せず、10kmたまごからごく稀に入手するしか出来ないので、多くのトレーナーがこのコミュニティデイで乱獲を企てていたことでしょう！！\nもちろん筆者も以前購入したオートキャッチャーを併用して乱獲する気満々でした。\n関連記事 【ポケモンGo Plusの完全上位互換】BrookのPocket Auto Catchでポケモン自動捕獲が捗りまくる件【全自動】 2018/09/10 2425文字 約5分で読めます イベント自体はすぐに打ち止めになってしまいましたが、このオートキャッチャーのおかげでわずか20分の間に色違い含め40匹以上捕獲する事が出来ました！\n今回のコミュニティデイ自体のリポートは別のブログにてまとめているので、捕獲数や色違いの出現数について興味のある方は見てください♪\n[travenist_link id=\"1836\"]\rコミュニティデイスタート！ 直後は順調だった 復帰勢の筆者は初めてのコミュニティデイ。\nせっかくなので新宿西口のポケモンGoの聖地と呼ばれる「ポケモン広場」に足を運んでみました。\nすげぇ人だ・・・！！！\nそして、12時になりに続々とダンバルがポップし始めました。\n筆者はなんと開始2分で色違いダンバルをゲットするという神引きを発揮し、完全に勝利を確信しました。\n湧かなくなる しかし、20分ほど経過したところ、ダンバルを含め一切のポケモンが湧かなくなりました。\nこれは嫌な予感がしまね。。。\nアプリを一旦落として再起動すると、ポケストップすらも表示されなくなってしまい完全に更地と化してしまいました。\nネット上では、\nこれじゃあただの使いにくい地図アプリ\nという名言まで生まれてしまう程です。笑\nそして、公式ツイッターでもアクセス障害を発表しました。\n現在障害が発生しており、一部Pokémon GOにつながりにくくなっています。ただいま原因を調査中です。ご迷惑をおかけし申し訳ございません。\n\u0026mdash; Pokémon GO Japan (@PokemonGOAppJP) 2018年10月21日\r公式からイベント再実施の連絡 そんなこんなで復旧しないままコミュニティデイ残り一時間になった時、公式ツイッターが投稿を更新しました。\n想定を大きく超えるアクセスのため、一部地域において障害が継続しております。ご迷惑をおかけし、申し訳ございません。ダンバルのコミュニティ・デイは後日、改めて皆さまにお楽しみ頂けるよう、再度開催いたします。新しい日程については改めてお知らせいたします。\n\u0026mdash; Pokémon GO Japan (@PokemonGOAppJP) 2018年10月21日\rあら〜、結局復旧のめどがつかずに後日再実施ぽいですね。。。orz\n筆者も今日は諦めて帰路につきました。orz\n地域単位のアクセス負荷が原因？ 今回、新宿だけではなく東京都内全体でアクセス障害が発生していたようですが、地方では3時間問題なくイベントが行われ、ダンバルを乱獲出来た人もいたようです。\n普段は都内住みは便利ですが、こういう時は地方の方の方がイベントを楽しめる唯一のメリットかもしれません。\nおそらく再実施についても東京都内だけではなく地方の方も再度楽しめる事が出来るのではないでしょうか。\n終わりに 誰もが楽しみにしていたダンバルコミュニティデイ。\nまさかこのような結末になるとは思ってもいませんでしたね。\nしかし、毎月コミュニティデイには通信障害が頻発しているようなので、運営会社のナイアンテックさんには是非とも改善をしてもらいたいですね。\n大変でしょうが頑張ってください！！\n期待してます♪\nP.S.\n筆者はキラポケ確定枠を有効利用して、\n個体値91%メタグロス\nをゲット出来たので満足です。(自己満)\n","date":"2018-10-21T18:00:47+09:00","image":"/wp-content/uploads/2018/10/pokemongo10ResultEye.png","permalink":"/2018/10/21/6698/","title":"【悪夢】ポケモンGoの2018年10月の「ダンバルコミュニティデイ」が通信エラー連発で中止になり、アイテムが無駄になった挙句、後日再実施になってしまった件【悲劇】"},{"content":"トラッキングIDを複数作成するメリット 初期ではアソシエイトIDが含まれる Amazonアソシエイトプログラムにて、商品を紹介する際に取得するURLを見てみると、以下のようにトラッキングIDが含まれていると思います。\nhttps://www.amazon.co.jp/gp/product/XXX/ref=as_li_ss_tl?...\u0026amp;tag=blogenist0d-22\u0026amp;..\nこのトラッキングIDの値ですが、初期ではアソシエイトIDと同じ値のトラッキングIDが付与されます。\nもちろんこのままでも問題はないのですが、出来ればアソシエイトIDとは異なるトラッキングIDを発行しておいてそちらを使ったほうが良いと思います。\n複数サイト運営時に便利 複数サイトを運営している場合、トラッキングIDを別々に利用することでトラッキングID単位でレポートを閲覧する事が可能になります。\n分析等がしやすくなるので、必ず分けるべきでしょう。\n簡単に作れる 複数のトラッキングIDの発行についても、ダッシュボード画面からぽちぽちサクッと簡単に出来ます。\n今回は実際に作ってみたのでやり方をご紹介致します。\n手順 トラッキングIDの追加 Amazonアソシエイトにログインしたら、アカウントメニューからトラッキングIDの管理メニューへ遷移します。\nすると、下部にアソシエイトIDと同じトラッキングIDが表示されると思います。\n今回は新しいトラッキングIDを作りたいので、トラッキングIDを追加するボタンをクリックします。\n新しいトラッキングIDの入力ダイアログが表示されるので任意の名称を入力し、作成ボタンをクリックしましょう。\nこれで新しいトラッキングIDが作成されましたね。\nとても簡単です。\n使い方 では、実際にトラッキングIDの使い分け方についてご紹介します。\nAmazonアソシエイトツールバーからリンクを作成する際に、トラッキングIDを選べる様になっているので任意のトラッキングIDを選択した状態でテキストリンクを生成します。\nこれだけで簡単にトラッキングIDを使い分けた商品リンクが作れるのでとても簡単ですね。\n終わりに 以上の様に、簡単にトラッキングIDの発行が出来ました。\nサイトごとの注文数のレポートは、収益を上げるための大事な比較データとなるので、まだトラッキングIDを分けていない方は是非このやり方で発行してみてください。\n","date":"2018-10-21T16:15:56+09:00","image":"/wp-content/uploads/2018/10/amazonAssociateTrackingIdEye.png","permalink":"/2018/10/21/6660/","title":"【複数管理】AmazonアソシエイトのURLに含まれるトラッキングIDを変える方法【複数サイト運営向け】"},{"content":"curlでHTTP2をしたい 最近巷ではgRPCが流行っていますね。\ngRPCといえば、Googleが2015年5月に開発したOSSのRPCフレームワークです。\nGoogle社内でもこのフレームワークを使っているらしいですね。\nそして、このgRPCはHTTP2を前提に作られています。\nHTTPに関する説明は割愛しますが、curlでHTTP2のリクエストを投げるにはそのままでは実現が出来ません。\nが、もちろん拡張を行うことで投げることが可能になるとのことでしたので試してみました。\n手順 前提 macにはすでにHomebrewで入れたHTTP2に対応していないcurlがインストールされているものとします。\nurl -V curl 7.43.0 (x86_64-apple-darwin15.0) libcurl/7.43.0 SecureTransport zlib/1.2.5 Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtsp smb smbs smtp smtps telnet tftp Features: AsynchDNS IPv6 Largefile GSS-API Kerberos SPNEGO NTLM NTLM_WB SSL libz UnixSockets ダメな例 curlをアンインストールしてから再インストール gitなどをインストールしている状態でbrew uninstall curlを実行すると、以下のような依存関係によるエラーが出てしまいます。\nエラーログ Warning: Use zlib instead of deprecated homebrew/dupes/zlib Error: Refusing to uninstall /usr/local/Cellar/curl/7.50.3 because it is required by git, which is currently installed. You can override this and force removal with: brew uninstall --ignore-dependencies curl brew uninstall --ignore-dependencies curlで行けるとのことですが、依存関係を壊すのは怖いのでやめました。\n正しいやり方 Homebrewでリインストール すでにHomebrewでインストール済みのコマンドを再度インストールしたい場合はbrew reinstall XXXを使うようにしましょう。\n今回で言うとbrew reinstall curl --with-nghttp2ですね。\nすると、以下のログが出てインストールが完了します。\n実行ログ ==\u0026gt; Reinstalling curl --with-nghttp2 ==\u0026gt; Installing dependencies for curl: openssl, boost, c-ares, jansson, libev, libevent, jemalloc and nghttp2 ==\u0026gt; Installing curl dependency: openssl ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/openssl-1.0.2p.el_capitan.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring openssl-1.0.2p.el_capitan.bottle.tar.gz ==\u0026gt; Caveats A CA file has been bootstrapped using certificates from the SystemRoots keychain. To add additional certificates (e.g. the certificates added in the System keychain), place .pem files in /usr/local/etc/openssl/certs and run /usr/local/opt/openssl/bin/c_rehash openssl is keg-only, which means it was not symlinked into /usr/local, because Apple has deprecated use of OpenSSL in favor of its own TLS and crypto libraries. If you need to have openssl first in your PATH run: echo \u0026#39;export PATH=\u0026#34;/usr/local/opt/openssl/bin:$PATH\u0026#34;\u0026#39; \u0026gt;\u0026gt; ~/.zshrc For compilers to find openssl you may need to set: export LDFLAGS=\u0026#34;-L/usr/local/opt/openssl/lib\u0026#34; export CPPFLAGS=\u0026#34;-I/usr/local/opt/openssl/include\u0026#34; For pkg-config to find openssl you may need to set: export PKG_CONFIG_PATH=\u0026#34;/usr/local/opt/openssl/lib/pkgconfig\u0026#34; ==\u0026gt; Summary 🍺 /usr/local/Cellar/openssl/1.0.2p: 1,793 files, 12.2MB ==\u0026gt; Installing curl dependency: boost ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/boost-1.67.0_1.el_capitan.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring boost-1.67.0_1.el_capitan.bottle.tar.gz 🍺 /usr/local/Cellar/boost/1.67.0_1: 13,506 files, 429.0MB ==\u0026gt; Installing curl dependency: c-ares ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/c-ares-1.14.0.el_capitan.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring c-ares-1.14.0.el_capitan.bottle.tar.gz 🍺 /usr/local/Cellar/c-ares/1.14.0: 70 files, 464.0KB ==\u0026gt; Installing curl dependency: jansson ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/jansson-2.11.el_capitan.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring jansson-2.11.el_capitan.bottle.tar.gz 🍺 /usr/local/Cellar/jansson/2.11: 11 files, 155.8KB ==\u0026gt; Installing curl dependency: libev ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/libev-4.24.el_capitan.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring libev-4.24.el_capitan.bottle.tar.gz 🍺 /usr/local/Cellar/libev/4.24: 12 files, 431.1KB ==\u0026gt; Installing curl dependency: libevent ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/libevent-2.1.8.el_capitan.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring libevent-2.1.8.el_capitan.bottle.tar.gz 🍺 /usr/local/Cellar/libevent/2.1.8: 847 files, 2.2MB ==\u0026gt; Installing curl dependency: jemalloc ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/jemalloc-5.1.0.el_capitan.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring jemalloc-5.1.0.el_capitan.bottle.tar.gz 🍺 /usr/local/Cellar/jemalloc/5.1.0: 16 files, 1.8MB ==\u0026gt; Installing curl dependency: nghttp2 ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/nghttp2-1.33.0.el_capitan.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring nghttp2-1.33.0.el_capitan.bottle.tar.gz 🍺 /usr/local/Cellar/nghttp2/1.33.0: 33 files, 6.3MB ==\u0026gt; Installing curl --with-nghttp2 ==\u0026gt; Downloading https://curl.haxx.se/download/curl-7.61.1.tar.bz2 ######################################################################## 100.0% ==\u0026gt; ./configure --disable-silent-rules --prefix=/usr/local/Cellar/curl/7.61.1 --with-ssl=/usr/local/opt/openssl --with-ca-bundle=/usr/local/etc/openssl/cert ==\u0026gt; make install ==\u0026gt; Caveats curl is keg-only, which means it was not symlinked into /usr/local, because macOS already provides this software and installing another version in parallel can cause all kinds of trouble. If you need to have curl first in your PATH run: echo \u0026#39;export PATH=\u0026#34;/usr/local/opt/curl/bin:$PATH\u0026#34;\u0026#39; \u0026gt;\u0026gt; ~/.zshrc For compilers to find curl you may need to set: export LDFLAGS=\u0026#34;-L/usr/local/opt/curl/lib\u0026#34; export CPPFLAGS=\u0026#34;-I/usr/local/opt/curl/include\u0026#34; For pkg-config to find curl you may need to set: export PKG_CONFIG_PATH=\u0026#34;/usr/local/opt/curl/lib/pkgconfig\u0026#34; ==\u0026gt; Summary 🍺 /usr/local/Cellar/curl/7.61.1: 433 files, 3.2MB, built in 2 minutes 54 seconds ==\u0026gt; Caveats ==\u0026gt; openssl A CA file has been bootstrapped using certificates from the SystemRoots keychain. To add additional certificates (e.g. the certificates added in the System keychain), place .pem files in /usr/local/etc/openssl/certs and run /usr/local/opt/openssl/bin/c_rehash openssl is keg-only, which means it was not symlinked into /usr/local, because Apple has deprecated use of OpenSSL in favor of its own TLS and crypto libraries. If you need to have openssl first in your PATH run: echo \u0026#39;export PATH=\u0026#34;/usr/local/opt/openssl/bin:$PATH\u0026#34;\u0026#39; \u0026gt;\u0026gt; ~/.zshrc For compilers to find openssl you may need to set: export LDFLAGS=\u0026#34;-L/usr/local/opt/openssl/lib\u0026#34; export CPPFLAGS=\u0026#34;-I/usr/local/opt/openssl/include\u0026#34; For pkg-config to find openssl you may need to set: export PKG_CONFIG_PATH=\u0026#34;/usr/local/opt/openssl/lib/pkgconfig\u0026#34; ==\u0026gt; curl curl is keg-only, which means it was not symlinked into /usr/local, because macOS already provides this software and installing another version in parallel can cause all kinds of trouble. If you need to have curl first in your PATH run: echo \u0026#39;export PATH=\u0026#34;/usr/local/opt/curl/bin:$PATH\u0026#34;\u0026#39; \u0026gt;\u0026gt; ~/.zshrc For compilers to find curl you may need to set: export LDFLAGS=\u0026#34;-L/usr/local/opt/curl/lib\u0026#34; export CPPFLAGS=\u0026#34;-I/usr/local/opt/curl/include\u0026#34; For pkg-config to find curl you may need to set: export PKG_CONFIG_PATH=\u0026#34;/usr/local/opt/curl/lib/pkgconfig\u0026#34; curlのパスを変更 もし、curlコマンドがHomebrewで落としたものを見ていない場合、向き先を変える必要があります。\nwhich curlコマンドで確認をして、/usr/bin/curlになっている場合は以下をシェルの設定ファイルに追加します。\n筆者はzshを使っているので~/.zshrcとなります。\n~/.zshrc export PATH=\u0026#34;/usr/local/opt/curl/bin:$PATH\u0026#34; 確認 では、もう一度以下のコマンドを実行してみてください。\ncurl -V curl 7.61.1 (x86_64-apple-darwin15.3.0) libcurl/7.61.1 OpenSSL/1.0.2p zlib/1.2.5 nghttp2/1.33.0 Release-Date: 2018-09-05 Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtsp smb smbs smtp smtps telnet tftp Features: AsynchDNS IPv6 Largefile NTLM NTLM_WB SSL libz TLS-SRP HTTP2 UnixSockets HTTPS-proxy HTTP2が追加されていますね。\n以下のコマンドも実行してみましょう。\nコマンド curl --http2 -I https://twitter.com/ すると以下の様なログが出ると思います。\n実行ログ HTTP/2 200 cache-control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0 content-length: 202511 content-type: text/html;charset=utf-8 date: Thu, 18 Oct 2018 08:59:39 GMT expires: Tue, 31 Mar 1981 05:00:00 GMT last-modified: Thu, 18 Oct 2018 08:59:39 GMT pragma: no-cache ... status: 200 OK ... HTTP/2 200が出ているのでHttp2での通信が出来ているようですね。\n終わりに HTTPの登場によって、インターネットの世界が革新的に進化した様に、HTTP2の登場によってさらに進化すると筆者は思っています。\n今のうちからHTTP2に触れておくことでスタートダッシュが切れるかもしれないので、触ってみてはいかがでしょうか♪\n","date":"2018-10-19T00:08:51+09:00","image":"/wp-content/uploads/2018/10/macCurlHttp1Eye.png","permalink":"/2018/10/19/6670/","title":"【使い方】Homebrewを使ってmacのcurlでHTTP2を使える様にする方法【gRPC】"},{"content":"リダイレクトしたい AWSのRoute53にルートドメインとサブドメインを登録している際に、ルートドメインにアクセスされたらサブドメインにリダイレクトさせたい、と言う要望はたまにあります。\nもちろん、Proxyサーバー等があればそちらで対応することは可能ですが、EC2サーバーを立てずにAWSサービスを組み合わせて使うことでも実現が可能になりますので、やり方をご紹介します。\n手順 前提 Route53にルートドメインとサブドメインを登録しているとします。\nサブドメイン用準備 CloudFrontとS3の準備および設定 まずはリダイレクト先のサブドメイン用の各種サービスを準備しましょう。\n今回はCloudFront+S3でページを表示させます。\nこちらの作業については以前紹介をしているので以下を参考に進めてみてください。\n関連記事 【StaticPressS3】WordpressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】 2018/05/06 3508文字 約8分で読めます 関連記事 【Wordpress】AWSのS3とCloudFrontとRoute53を連携して独自ドメインで公開する方法【お名前.com】 2018/05/07 2981文字 約6分で読めます 確認 では、サブドメインにアクセスをしてCloudFront経由でS3バケットに適当に配置したHTMLが表示されるか確認してみましょう。\n正しく設定が行われています。\nルートドメイン用準備 では、ここからがルートドメインからサブドメインへのリダイレクトの設定になります。\nS3の準備 まずはS3バケットを作成してください。\nこちらはCloudFrontは不要です。\nこの際にバケット名とドメイン名は一致させる必要があります。\nS3バケットの設定を変更 S3バケットのStatic website hostingを有効化する際に、サブドメインの場合はこのバケットを使用してウェブサイトをホストするにチェックを入れていましたが、今回はリダイレクトを行いたいのでリクエストをリダイレクトするにチェックを入れます。\nターゲットバケットまたはドメインにはリダイレクト先のドメイン、プロトコルにはhttpかhttpsを入れ保存ボタンをクリックします。\nRoute53でAliasの設定 Route53に戻り、対象のルートドメインのAlias Targetのプルダウンを見ると作成したS3バケットが出てくると思うのでそちらを選択してSave Record Setボタンをクリックします。\nプルダウンにAlias Targetが出ない場合\rプルダウンに何も表示されない場合はバケット名がルートドメインと違う名前で作ってしまっている可能性がありますので、今一度確認してみてください。\n確認 では、実際にブラウザでルートドメインにアクセスしてみましょう。\n正常にリダイレクトされましたね。\n試しにcurlでも確認しましたがこちらも正常に301でサブドメインにリダイレクトがかかっていそうです。\ncurl -v -X GET \u0026#39;http://XXXXX.jp\u0026#39; * Rebuilt URL to: http://XXXXX.jp/ * Trying xx.xxx.xx.xx... * Connected to XXXXX.jp (xx.xxx.xx.xx) port 80 (#0) \u0026gt; GET / HTTP/1.1 \u0026gt; Host: XXXXX.jp \u0026gt; User-Agent: curl/7.43.0 \u0026gt; Accept: */* \u0026gt; \u0026lt; HTTP/1.1 301 Moved Permanently \u0026lt; Date: Wed, 17 Oct 2018 05:49:17 GMT \u0026lt; Location: http://www.XXXXX.jp/ \u0026lt; Content-Length: 0 \u0026lt; Server: AmazonS3 \u0026lt; * Connection #0 to host XXXXX.jp left intact 終わりに 以上のように、サーバーレスでリダイレクトの設定を行うことが出来ました。\nサブドメイン側にAWS Certificate Managerで取得した無料SSL署名書を設定すれば、Https通信も可能になります。\nその辺の手順も過去にご紹介していますので興味のある方は試してみてください。\n関連記事 【無料SSL証明書】AWSでHTTPS通信を取得してCloudFrontに設定してみよう！【Wordpress】 2018/05/08 3849文字 約8分で読めます ","date":"2018-10-18T11:32:38+09:00","image":"/wp-content/uploads/2018/10/redirectRoute53DomainEye.png","permalink":"/2018/10/18/6620/","title":"【Route53/S3】お名前.comで取得したルートドメインにアクセスした際に、サブドメインにリダイレクトさせる方法【AWS】"},{"content":"GitHub Universe 2018 先日、サンフランシスコにて「GitHub Universe 2018」が、開催されました。\nGithub Universeとは、GitHubのコミュニティ登録者約3,100万人の開発者が今後の未来について語ることが出来るイベントとなっており、開発者界隈ではとても人気のあるイベントとなっています。\nGithub Universe\n原文：\rGitHub Universe is a conference for the builders, planners, and leaders defining the future of software\r訳： GitHub Universeは、ソフトウェアの将来を定義するビルダー、プランナー、リーダーのためのカンファレンスです\n\u0010Pull Request以来の新機能 その中で、Githubはは「Pull Request機能以来の強靭な新機能」として、「GitHub Actions」を発表しました。\nGitHub Actions What\u0026rsquo;s? Github Actionsとは、Github上で行われる各種操作をトリガーにDockerコンテナに対する操作を実行する事が出来る機能となっています。\nこれにより、ビルド/テスト/デプロイの自動化などGithubでのソース管理以上の事が可能になるとの事です。\nGithub Actions\nイメージ的には、JenkinsのようなCIとして使えるようになるのかな？\nまた、AWSやgcloud、Azure、Herokuなどメジャーどころのクラウドサービスに対応しているようですね。\nmain.workflowファイルで管理 サンプルを見ていると、.githubディレクトリの中にmain.workflowと言うファイルが用意されています。\nこちらに処理を記述する事でワークフローが定義出来るようですね。\nGithub Actions\nまたマークダウンのようにリアルタイムプレビューでGUIベースで編集することも出来そうですね。\nmain.workflowファイル内はこんな感じでした。\nhttps://github.com/actions/example-aws/blob/master/.github/main.workflow workflow \u0026#34;Build and Deploy\u0026#34; { on = \u0026#34;push\u0026#34; resolves = [\u0026#34;List Public IP\u0026#34;] } # Build action \u0026#34;Build Docker image\u0026#34; { uses = \u0026#34;actions/docker/cli@master\u0026#34; args = [\u0026#34;build\u0026#34;, \u0026#34;-t\u0026#34;, \u0026#34;aws-example\u0026#34;, \u0026#34;.\u0026#34;] } # Deploy Filter action \u0026#34;Deploy branch filter\u0026#34; { needs = [\u0026#34;Push image to ECR\u0026#34;] uses = \u0026#34;actions/bin/filter@master\u0026#34; args = \u0026#34;branch master\u0026#34; } # AWS action \u0026#34;Login to ECR\u0026#34; { uses = \u0026#34;actions/aws/cli@master\u0026#34; secrets = [\u0026#34;AWS_ACCESS_KEY_ID\u0026#34;, \u0026#34;AWS_SECRET_ACCESS_KEY\u0026#34;] env = { AWS_DEFAULT_REGION = \u0026#34;us-west-2\u0026#34; } args = \u0026#34;ecr get-login --no-include-email --region $AWS_DEFAULT_REGION | sh\u0026#34; } action \u0026#34;Tag image for ECR\u0026#34; { needs = [\u0026#34;Build Docker image\u0026#34;] uses = \u0026#34;actions/docker/tag@master\u0026#34; env = { CONTAINER_REGISTRY_PATH = \u0026#34;377117578606.dkr.ecr.us-west-2.amazonaws.com\u0026#34; IMAGE_NAME = \u0026#34;aws-example\u0026#34; } args = [\u0026#34;$IMAGE_NAME\u0026#34;, \u0026#34;$CONTAINER_REGISTRY_PATH/$IMAGE_NAME\u0026#34;] } action \u0026#34;Push image to ECR\u0026#34; { needs = [\u0026#34;Login to ECR\u0026#34;, \u0026#34;Tag image for ECR\u0026#34;] uses = \u0026#34;actions/docker/cli@master\u0026#34; env = { CONTAINER_REGISTRY_PATH = \u0026#34;377117578606.dkr.ecr.us-west-2.amazonaws.com\u0026#34; IMAGE_NAME = \u0026#34;aws-example\u0026#34; } args = [\u0026#34;push\u0026#34;, \u0026#34;$CONTAINER_REGISTRY_PATH/$IMAGE_NAME\u0026#34;] } action \u0026#34;Store Kube Credentials\u0026#34; { needs = [\u0026#34;Push image to ECR\u0026#34;] uses = \u0026#34;actions/aws/kubectl@master\u0026#34; secrets = [\u0026#34;KUBE_CONFIG_DATA\u0026#34;] } action \u0026#34;Configure Kube Credentials\u0026#34; { needs = [\u0026#34;Login to ECR\u0026#34;] uses = \u0026#34;actions/aws/cli@master\u0026#34; env = { CLUSTER_NAME = \u0026#34;devel2\u0026#34; AWS_DEFAULT_REGION = \u0026#34;us-west-2\u0026#34; } secrets = [\u0026#34;AWS_ACCESS_KEY_ID\u0026#34;, \u0026#34;AWS_SECRET_ACCESS_KEY\u0026#34;] args = \u0026#34;eks update-kubeconfig --name $CLUSTER_NAME --region $AWS_DEFAULT_REGION\u0026#34; } # Example Local Action to use `aws-iam-authenticator` action \u0026#34;Deploy to EKS\u0026#34; { needs = [\u0026#34;Store Kube Credentials\u0026#34;, \u0026#34;Deploy branch filter\u0026#34;] # [\u0026#34;Configure Kube Credentials\u0026#34;] uses = \u0026#34;./.github/actions/eks-kubectl\u0026#34; runs = \u0026#34;sh -l -c\u0026#34; args = [\u0026#34;SHORT_REF=$(echo $GITHUB_SHA | head -c7) \u0026amp;\u0026amp; cat $GITHUB_WORKSPACE/config.yml | sed \u0026#39;s/TAG/\u0026#39;\\\u0026#34;$SHORT_REF\\\u0026#34;\u0026#39;/\u0026#39; | kubectl apply -f - \u0026#34;] secrets = [\u0026#34;AWS_ACCESS_KEY_ID\u0026#34;, \u0026#34;AWS_SECRET_ACCESS_KEY\u0026#34;] } action \u0026#34;Verify EKS deployment\u0026#34; { needs = [ \u0026#34;Push image to ECR\u0026#34;, \u0026#34;Deploy to EKS\u0026#34;, ] # :point_down: use this for self-contained kubectl config credentials #uses = \u0026#34;docker://gcr.io/cloud-builders/kubectl\u0026#34; uses = \u0026#34;./.github/actions/eks-kubectl\u0026#34; args = [\u0026#34;rollout status deployment/aws-example-octodex\u0026#34;] secrets = [\u0026#34;AWS_ACCESS_KEY_ID\u0026#34;, \u0026#34;AWS_SECRET_ACCESS_KEY\u0026#34;] } action \u0026#34;List Public IP\u0026#34; { needs = \u0026#34;Verify EKS deployment\u0026#34; uses = \u0026#34;./.github/actions/eks-kubectl\u0026#34; args = [\u0026#34;get services -o wide\u0026#34;] secrets = [\u0026#34;AWS_ACCESS_KEY_ID\u0026#34;, \u0026#34;AWS_SECRET_ACCESS_KEY\u0026#34;] } スクリプト形式なので分かりやすいですね！！\n終わりに まだ発表されたばかりなので、詳細はこれから明らかになっていくと思いますが、ぱっと見Githubの利便性が上がりそうな新機能でした。\nPull Request機能は革命的な機能でしたが、Github自身がそれに次ぐ新機能と推している事もあるので、続報に期待しましょう！！\n","date":"2018-10-17T11:06:02+09:00","image":"/wp-content/uploads/2018/10/githubActionEye.png","permalink":"/2018/10/17/6627/","title":"【GitHub Universe 2018】Dockerコンテナの連係によるワークフローを自由に定義可能な「GitHub Actions」が発表【まとめ】"},{"content":"pecoを使ってみよう ターミナル検索 皆さんはターミナルでテキスト検索や文字列検索を行う際はどのようにやっていますでしょうか？\ngrepやfindなどの標準コマンドもありますが、いかんせん使いにくいですよね。。。\nそんな問題を解決するのが今回ご紹介する「peco」です！\nWhat\u0026rsquo;s peco? pecoとは、標準出力のデータに対してクエリーベースで検索をかけることが出来るツールとなっています。\n内部的にはGo言語で書かれています。\npeco/peco\nとりあえず、ものすごい使いやすいと言う評判しか聞かないのでインストールして使い勝手を試してみましょう！\nインストール手順 Homebrewでインストール pecoもHomebrewでのインストールが可能となっていますので、以下のコマンドでささっと導入。\nコマンド $ brew install peco 以下のログが表示されればインストール完了です。\n実行ログ ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/peco-0.5.3.el_capitan.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring peco-0.5.3.el_capitan.bottle.tar.gz 🍺 /usr/local/Cellar/peco/0.5.3: 6 files, 4.5MB 確認 以下のコマンドでインストールがされているか確認しましょう。\nコマンド peco --version 以下のようなログが出力されればインストールは完了です。\nバージョン情報 peco version v0.5.3 (built with go1.10) 使い方 ディレクトリの検索 では、実際にpecoを使ってみましょう。\n今回は以下のディレクトリが存在する階層で動作確認をしてみます。\ntreeコマンド . ├── animals ├── books ├── foods ├── games └── sports 以下のコマンドを入力してみてください。\nコマンド ll | peco すると、以下のような画面になると思います。\n対話形式になるので、絞り込みたい文字列を入力してみましょう。\nするとどんどん絞られていきますね。\n前述もした通り、pecoは標準出力の結果に対するこのような操作が全てです。\nまた、複数キーワード対応や部分一致での絞り込みが可能なのでめちゃくちゃ便利です♪\nそして、pecoの真骨頂はコマンドの組み合わせにおける効率性の向上にあります！\nコマンド履歴を簡単検索 historyコマンドの結果から簡単に検索をかけて実行出来るようにしてみましょう。\nzshを使っている方は以下を.zshrcに追加してターミナルを再起動してみてください。\n~/.zshrc #関数定義 function pecoHistory() { BUFFER=`history -n 1 | tail -r | awk \u0026#39;!a[$0]++\u0026#39; | peco` CURSOR=$#BUFFER zle reset-prompt } #関数をウィジェットに追加 zle -N pecoHistory #ウィジェットをキーバインドに追加 bindkey \u0026#39;^R\u0026#39; pecoHistory これで^(Ctrl)Rでヒストリー検索及び実行が可能になります。\nショートカットでサクッと簡単に履歴を検索して実行出来るようになるので、対話形式で過去のコマンドを探して実行する事が出来るためgrep検索よりダントツに使いやすいです！\ngrepの場合は一致するキーワードをタイポすると再度コマンド打たないといけなかったり、検索結果をコピペして実行する必要があるので。。。\n終わりに このようにpecoを使った複雑なコマンドも関数として登録しておけば簡単に呼び出せるようになります。\npecoはターミナル操作を革新的に使いやすくしてくれるツールだと筆者も感じました。\n使い方によって可能性は無限大なので、皆さんも是非インストールしてみてください。\n","date":"2018-10-16T21:55:28+09:00","image":"/wp-content/uploads/2018/10/pecoHistoryEye.png","permalink":"/2018/10/16/6563/","title":"【ターミナルの使いやすさ抜群に】標準出力に対する最強の検索ツール「Peco」をインストールしたら幸せになった【バイバイgrep/find】"},{"content":"Gif動画の画質が荒い。。。 先日、GiftedとQuickTimePlayerを使ったGif画像の作り方についてご紹介致しました。\n関連記事 【画面操作を簡単録画】QuickTimePlayerとGiftedを使って画面操作を録画してgif画像化する方法【簡単瞬殺】 2017/11/03 1127文字 約3分で読めます しかし、Giftedで作成したGif画像は実際の撮影スピードより早いし、画質もちょっと荒いんですよね。。。orz\n","date":"2018-10-15T21:06:49+09:00","image":"/wp-content/uploads/2018/10/ffmpegMakeGifEye.png","permalink":"/2018/10/15/6571/","title":"【高画質Gif】「ffmpeg」を使ってGiftedより高画質なGif動画を作ってみよう【簡単瞬殺】"},{"content":"携帯性の高い三脚を発見 荷物が多くなりがち 旅行に出かけて写真を撮る方は、三脚などを使ってカメラを固定した上で写真を撮りたいという方が多いと思います。\n夜景や風景を撮りたいなら必須ですよね。\nしかし、三脚はかさばってしまうのでついつい大荷物になってしまいます。\n重さもそれなりにあるので、疲れも早く溜まってしまいますよねorz\n持ち運びやすさに特化した三脚メーカー そんな人のために、携帯性に特化した三脚を販売しているメーカーがVelbonです。\nVelbonは三脚・一脚・雲台・クイックシュー・アクセサリーなどの幅広いカメラアクセサリを販売しています。\nその中でも三脚については様々なタイプのものを取り扱っているので、使っている方も多いのではないでしょうか？\nベルボン（VELBON)は日本の三脚専業メーカーとして60年の歴史があり、他にも一脚や雲台、クイックシュー、豊富なカメラアクセサリーを製造しています。写真を始めた皆さんに活用いただける三脚活用コンテンツ「いい写真、撮ろう」もご用意しています。\r驚異的な携帯性のウルトレックシリーズ その中でも、携帯性が一番高いのがUltrek/UT(ウルトレック)シリーズです。\n脚を180度反転して折りたたむことで、驚異的な小型高性能を誇ります。\n今回はその中のUT-45モデルを購入してみたのでご紹介します。\n商品 Velbon 三脚 ULTREK UT-45 ウルトラロック 3Way雲台 最小コンパクトモデルはハンドル付きとハンドル無しの2種類があります。\n筆者は使い勝手を考えてハンドル付きを購入しましたが、コンパクトさを追い求める方はハンドル無しの方を購入すると良いでしょう。\nAmazon Velbon 三脚 ULTREK UT-45 6段 ウルトラロック 脚径24mm 小型 3Way雲台 DIN規格クイックシュー対応 アルミ脚 331984 Amazon Velbon 三脚 ULTREK UT-43 6段 ウルトラロック 脚径24mm 小型 自由雲台 (トルク調整対応) コマ止め方式 クイックシュー対応 アルミ脚 324160 特徴 脚を反転収納 脚を180度反転して折りたたみ、専用雲台を脚の間に収納することで、従来の三脚ではありえなかった小型高性能を実現。\n驚異の高伸縮比 脚の反転収納とベルボンのオリジナル脚技術により、伸縮比は驚きの約5.4倍に。全高時はアイレベルまでしっかり届き、収納時はカメラバッグやリュック等にも入れられる「省スペース設計」です。\n専用設計によるコンパクト化 雲台は、脚を反転して折りたたむ「UTシリーズ」のために専用設計されており、収納時は３本の脚の間にスッポリと収まります。\n１ストップ１ハンドル雲台 ハンドル棒を回すと、パン・ティルトの両方が同時に可動・固定できる「１ストップ式」雲台。動きのある被写体にも対応できます。\nクイックシュー機構 カメラの着脱がワンタッチ。カメラネジを何度も回して取り付けるわずらわしさから解放されます。複数のカメラを使う場合や、カメラとビデオカメラを両方使う場合などにも大変便利です。\nカメラネジつまみ シュープレートにはカメラ取付用のネジつまみがあるので、簡単にしっかりとカメラに装着できます。取り付けにコイン等は必要ありません。\nシュープレートは縦横両対応 シュープレートはカメラやレンズ座の形状に合わせて、縦・横どちら向きでも取り付けることができます。\nシュー固定レバーのスタンバイ機構 シュープレート取付時に固定レバーが開放位置で維持される、スタンバイ機構を搭載しています。シュープレート取付時の誤操作を防ぎ、スムーズで確実な取り付けが可能です。\n2Way水準器 左右+上下方向の水平が確認できる、2Wayタイプの水準器を標準装備。さらに縦位置用（90度）の水準器も付いており、正確な構図による作品撮りをサポートします。\n左右両サイドティルト カメラ台は左右どちらにも90度傾けることが可能です。使いやすい方向でご使用下さい。\n雲台は取り外し可能 雲台は他の別売雲台に交換可能です。\r※雲台取付ネジ＝UNC1/4（細ネジ）\r※他の雲台では、反転させた脚を最後までたたむことはできなくなります。\n軽量金属マグネシウム 雲台や三脚ボディに使われている軽量金属マグネシウムは比重が1.7で、アルミの2/3、鉄の1/4以下と実用金属中もっとも軽く、比強度や寸法安定度、振動吸収性も優れています。\n優れた操作性 ボディ中央の「ロータリーハブ」を持ち上げて回すと、３本の脚が反転可能な状態になります。後は開く（たたむ）だけでOK。脚ごとに反転ノブを操作する必要がないので、セッティングも手早く簡単です。\nエレベータースライド エレベーターはロックナットを回して緩めると伸ばすことができます。目の前の障害物が構図の邪魔になる場合は、エレベーターを試みて下さい。\n三段開脚 開脚角度はノブをずらすと、各々の脚で自由に設定できます（三段階）。不整地など設置状況に応じて変更して下さい。\n最低高は約35cm 開脚調整ノブをずらしフル開脚すると、最低高は約35cmとなります。\r※UTシリーズは高伸縮比を重視したユニークな構造のため、エレベーターを覆う「ガイドパイプ」は縮みません。\nダイレクトコンタクトパイプ 特殊な断面形状をした上下の脚パイプをひねることで、パイプ同士が接して強く固定されるベルボン独自の脚パイプ。レバー等の余計な部品が無いため伸縮比が非常に高く、関節部が強いことが特長です。\nウルトラロック 脚先端を握ってひねるだけで、全段を一気に固定・解除することができ、驚くほどスピーディーなセッティングが可能な、ダイレクトコンタクトパイプならではの脚ロック方法。\n調整用グリップ 脚伸縮は、２段目の調整用グリップを握って回すことで、簡単に調整できます。\n※調整は脚の任意の段で可能です。\n専用ケース付属 三脚には専用のキャリングケースが付属しています。混雑した電車での移動や三脚の保管に便利です。使わない時は小さくたためる薄手タイプ。\nラインナップ ハンドル雲台装備のUTシリーズは２機種のラインナップ。「驚異の高伸縮比」はどちらの機種でも備えていますので、使用機材の大きさ・重さでお選び下さい。\n開封の儀 開封動画 [embed]https://youtu.be/MOzv6-i5234[/embed]\n外観 外観はこんな感じです。\n結構大きめ。\n付属品 さて、中身を見ていきましょう。\nパカッ。\n中身は専用ケースに張った三脚が入っています。\nさらにその中には、本体と取扱説明書が入っています。\n三脚はこんな感じです。\nシンプルな作りですが、細部までしっかりしています！\n2Way水準器も良いですな♪\nサイズ感はこんな感じ。\n皆さんおなじみのおいしい牛乳と比べても三脚としてはとても携帯性の高いサイズ感だということが分かりますね。\n組み立て では、実際に組み立ててみましょう。\n組み立てもとても簡単で初めてでも5分あれば組み立てることが出来ました。\nまずは足を開いて、\nパイプを指定の方向に回すことでロックが外れ伸縮可能になります。\n見ての通り、めちゃくちゃ伸びます！！！\n次にハンドルを回して雲台を調整しましょう。\nエレベーター部分も同じように回すことで調整が可能になります。\n雲台も自由に調整可能\nそれぞれの部位の調整を行う音でほぼすべての方向にセッティングが可能になるので、かなり自由度が高いです！\nシュープレートはレバーを手前に引くことで簡単に取り外すことが可能です。\nシュープレートの裏はつまみがあるので、コインなどを使わなくても締めることが可能です。\nシュープレートを再度取り付ける際は、押し付けるだけで勝手にロックがかかります。\nこれ、地味にすごく便利です！！\n伸ばしきるとこんな感じですね。\n最大では157cmまで高さが出ます。\n試し撮り 適当に試し撮りをしてみました。\n三脚を使えばシャッタースピードを下げて、夜景が綺麗に撮れます。\n筆者も夜景を撮るのが目的で買いました♪\nしかし、難しい。。。\n精進します。orz\n終わりに サイズ的にも旅行カバンに入れやすいので出先での撮影に向いている三脚だと思いました。\nまだ携帯用の三脚を持っていない方は是非購入してみてはいかがでしょうか♪\n","date":"2018-10-14T14:18:28+09:00","image":"/wp-content/uploads/2018/10/velbonUltrekEye.png","permalink":"/2018/10/14/5604/","title":"【旅行に持ってくならコレ】携帯性が抜群の三脚「Velbon ultrek(ウルトレック) 45」を買ってみた【夜景撮りに最適】"},{"content":"メルタンに関する続報が！ 先日、公式から新しく発見された幻のポケモン「メルタン」に関する情報が新公開されました！\n先日発見された幻のポケモン「メルタン」の生態が徐々に明らかになってきました！ウィロー博士たちによる調査にも進展があるようですので、ぜひご覧ください！さらに、「メルタン」を探す「スペシャルリサーチ」が冬頃に登場決定！お楽しみに！ #ポケモンGO https://t.co/0fEt4bSXr3 pic.twitter.com/XUuxAH0av9\n\u0026mdash; Pokémon GO Japan (@PokemonGOAppJP) 2018年10月10日\rメルタンについては以下の記事で紹介しています。\n関連記事 【新幻のポケモンキター】ポケモンGoに突如現れたポケモンはピカブイに登場する第8世代？の新ポケモンだった【メルタンきゃわわ】 2018/09/26 1431文字 約3分で読めます 新情報の内容はというと、メルタンの入手方法についてです！\nそれでは早速整理していきましょう♪\n新情報 新動画公開 今回、メルタンに関する新たな動画が公開されました。\n[embed]https://youtu.be/OqQit0JrdFQ[/embed]\n[embed]https://youtu.be/_lJMVL8cz1k[/embed]\nメルタンめちゃくちゃ可愛くないですか！?\nなにやら集まってフォルムチェンジしているような描写がありますな・・・・・！\n入手方法 次にメルタンの入手方法についてです。\nメルタンを捕まえるには、ポケモンGOからNintendo Switchで発売されるゲーム「ポケットモンスター Let's Go! ピカチュウ・イーブイ」（ピカブイ）へポケモンを送った際にポケモンGOアプリ側で入手することが出来る「ふしぎなはこ」というアイテムが必要になるそうです。\n『ポケモン GO』から『ポケットモンスター Let’s Go! ピカチュウ・Let’s Go! イーブイ』へポケモンを送ると、『ポケモン GO』では、「送ったポケモンのアメ」などが手に入る。これに加えて、初めてポケモンを送った際には、特別な道具「ふしぎなはこ」を受け取ることができる。\nそして、この道具を使えば一定時間周囲にメルタンが出現するとのこと。\nなので、大量に捕まえることが出来そうですね。\nただし、一回使うと一定時間使用出来なくなるので連続使用は出来なおそうです。\n『ポケモン GO』で「ふしぎなはこ」を使用すると、「ふしぎなはこ」を使ったプレイヤーの周りだけに、一定時間、「メルタン」が現れるようになる。フィールドマップ上の「メルタン」をタップし、ボールを投げることで、「メルタン」を捕まえることができるぞ！\r「ふしぎなはこ」は、一度使用するとしばらく使用できなくなり、一定期間が経過した後に、ポケモンを『ポケットモンスター Let’s Go! ピカチュウ・Let’s Go! イーブイ』に送ると、また使用できるようになる。お友だちの『ポケットモンスター Let’s Go! ピカチュウ・Let’s Go! イーブイ』へポケモンを送った場合も同様だ。\r『ポケモン GO』から『ポケットモンスター Let’s Go! ピカチュウ・Let’s Go! イーブイ』へ、ポケモンはいつでも送ることができる。ポケモンを送る度に、『ポケモン GO』で「送ったポケモンのアメ」などが手に入るぞ！\rピカブイでも連れ歩ける 上記の手段で入手したメルタンはピカブイに送ることが出来るようです！\n最新作で幻のポケモンと一緒に冒険出来るのは嬉しいですね♪\n『ポケモン GO』で捕まえた「メルタン」は、『ポケットモンスター Let’s Go! ピカチュウ・Let’s Go! イーブイ』へ連れていくことができる。カントー地方でも、「メルタン」といっしょに冒険しよう。\r自分の『ポケモン GO』だけでなく、お友だちの『ポケモン GO』で捕まえた「メルタン」を、『ポケットモンスター Let’s Go! ピカチュウ・Let’s Go! イーブイ』へ連れてくることもできるぞ！\rスペシャルリサーチにも登場予定 また、今後スペシャルリサーチにも登場予定らしいので、ピカブイを持っていなくても入手することは出来そうです。\n『ポケモン GO』に、幻のポケモン「メルタン」を探す「スペシャルリサーチ」の登場が決定！\rこの「スペシャルリサーチ」は、冬頃から登場予定。ウィロー博士とともに、さまざまな調査に挑み、「メルタン」を捕まえよう。\rくわしくは、今後の情報をチェック！\n終わりに ピカブイの発売も近づいているので、新情報がどんどん出てきますね♪\nおそらくまだまだ新情報が出ると思うので楽しみに待ちましょう♪\n","date":"2018-10-12T10:53:36+09:00","image":"/wp-content/uploads/2018/10/pokemonGoCatchMerutanEye.png","permalink":"/2018/10/12/6504/","title":"【新情報】遂に新幻のポケモン「メルタン」の入手方法が判明！ピカブイが無くても入手可能？【ポケモンGO】"},{"content":"間違えたタイトルで公開しちゃった 検索結果はクローラーが収集する Wordpress等で記事を作成して、インターネット上に公開すると一定時間後にGoogleなどの検索エンジンのクローラーが記事に訪問し、記事のタイトルや内容をクローリングして検索結果として引っかかるようにデータを収集していきます。\nしっかりとGoogleSearchConsoleにサイトを登録していれば公開後すぐにクローリングされると思います。\n検索結果のタイトルは更新がされない？ そんなこんなで自分の記事がインターネットに公開され、検索されるようになるのですが、間違えたタイトルのまま公開してしまい、クローラーに収集されると間違えたタイトルがそのまま検索結果ページに表示されてします。\n例えば、以下の記事だと、\n関連記事 【真上視点を実現】自宅で真俯瞰撮影するために必要な機材を一通り買ってみた【開封動画には必須】 2018/06/30 1586文字 約4分で読めます こんな感じで間違えて公開していしまいました。\nこのままだとせっかく検索結果に表示されても、タイトルが不適切なのでクリックしてもらえなそうですよね。。。。\nこの間違いにはすぐに気づいたので、すぐに記事側のタイトルを更新して再公開したのですが、すぐには更新されなかったので、ある程度時間が経過すれば勝手に直るかな？と思っていたのですが、1ヶ月経っても更新されませんでした。\nちなみに、記事ページに入るとタイトルはしっかり変わっています。\n更新はSearchConsolsから可能 では、どうすれば良いのか？\n実はGoogleSearchConsoleにて、対象のURLに対してFetch as Googleのリクエストを出せば数日程度で更新がされるとのことでした。\n今回の記事についても申請を出してから4日ほどでGoogleの検索結果のタイトルが無事に変わりましたので、その際の手順をご紹介します。\n手順 旧コンソールにログイン まずはGoogleSearchConsoleにログインしてください。\n注意すべきは新コンソールではなく旧コンソールです。\nログインしたら、左部メニューからクロール\u003eFetch as Googleに移動します。\nFeath as Googleから取得 すると、URLを入力するボックスがあるのでタイトルを更新したいページのURLを入力して取得ボタンをクリックします。\nすると、リクエストが追加されます。\nインデックス登録をリクエスト 次に、追加したパスのインデックス登録をリクエストボタンをクリックします。\nすると、以下のようなダイアログが表示されるので、ロボットではありませんにチェックを入れ、このURLと直接リンクをクロールを選択し、送信ボタンをクリックします。\nこれでリクエストは完了です。\nあとは検索結果が更新されるのを待つだけです。。。！\n確認 申請から約4日後に検索結果ページのタイトルが更新されていることを確認出来ました！\n終わりに 勝手に更新されるだろうと待っているだけだと数ヶ月変わらなかったタイトルが、旧コンソールからリクエストを投げるだけで１週間かからずに変えることが出来ました。\n記事のタイトルはSEO的にもとても重要なポイントなので、万が一間違えて公開してしまった場合は今回の手順で更新をしてみてください。\n","date":"2018-10-10T13:39:56+09:00","image":"/wp-content/uploads/2018/10/googleSearchResultTitleEye.png","permalink":"/2018/10/10/6485/","title":"【検索結果の重要性】記事のタイトルタグを更新してもGoogleの検索結果が変わらない場合の対処方法【SEO対策】"},{"content":"カスタマイズしてみよう！ Hyperに関する記事を続けて2記事ほど投稿しました。\nインストールがまだの方はこちらを参考にしてみてください。\n関連記事 【使い勝手最強】Electron製のマルチプラットターミナルアプリ「Hyper」のインストール方法【Windows/Mac対応】 2018/10/04 2133文字 約5分で読めます 関連記事 【文字化け対策】Zsh等でプロンプトの表示をカスタマイズしてる際にHyperで発生する文字化けの修正方法【Source Code Pro for Powerline】 2018/10/06 700文字 約2分で読めます そして今回はプラグインを使ったカスタマイズについてご紹介致します。\nカスタマイズ方法 .hyper.jsのpluginに追加 Hyperで使用したいプラグインを追加するには、.hyper.js内のpluginsの配列に追記していきます。\n例えば、コチラのプラグインを入れる場合は以下のようにします。\n~/.hyper.js plugins: [ \u0026#34;hyperpower\u0026#34; ], この状態で保存をすると以下のようなトーストが表示されるのでリロードをしましょう。\nこれでプラグインが反映されます。\nめちゃくちゃ簡単ですね。。。！\n自分でプラグインをインストールしたりビルドする必要がないのがお手軽ですね♪\nオススメのプラグイン Hyperpower Hyperpower\n[adsense-responsive]\rタイピングをするたびに綺麗なエフェクトが発生します。\nキーを打つのが楽しくなりますね♪\n導入は以下をpluginsに追加するだけです。\n~/.hyper.js plugins: [ \u0026#34;hyperpower\u0026#34; ], Hyper Pokemon hyper-pokemon\nターミナルをポケモン風のカラーリングにしてくれます。\n現在152匹に対応していてどんどん増えているようです！\nデフォルトはピカチュウですが、configに以下の設定を追加することで変えることが出来ます。\n~/.hyper.js plugins: [ \u0026#34;hyperpower\u0026#34; ], //... config: { //... colors: { //... }, pokemon: \u0026#39;gengar\u0026#39;, // Choose your favorite pokemon theme unibody: \u0026#39;true\u0026#39;, // Choose the color of the window header poketab: \u0026#39;false\u0026#39;, // Deactivate your theme\u0026#39;s poketab //... } Hyperterm Material hyperterm-material\n今流行りのマテリアルデザイン風のデザインになります。\n見やすくてオススメのデザインです♪\n~/.hyper.js plugins: [ \u0026#34;hyperterm-material\u0026#34;, ], Hyper Statusline hyper-statusline\nこちらはカレンドディレクトリとGitのブランチ名がターミナル下部に常に表示されるようになります。\nZshではpreztoを導入しないと実現出来なかった事をプラグインを追加するだけで実現出来るのですごいですよね・・・！\n~/.hyper.js plugins: [ \u0026#34;hyper-statusline\u0026#34; ], Hyper Tab Icons Plus hyper-tab-icons-plus\nタブに関連するSVGアイコンを表示してくれます。\n[adsense-responsive]\rまた、zshを使っている場合は以下の記述を.zshrcに追加しておけば自動でアイコンが変わります。\n~/.hyper.js plugins: [ \u0026#34;hyper-tab-icons\u0026#34; ], .zshrc precmd() { pwd=$(pwd) cwd=${pwd##*/} print -Pn \u0026#34;\\e]0;$cwd\\a\u0026#34; } preexec() { printf \u0026#34;\\033]0;%s\\a\u0026#34; \u0026#34;${1%% *} | $cwd\u0026#34; } Hyper Search hyper-search\nこちらはHyperのターミナル内で文字列検索を可能にしてくれます。\nターミナル内の文字列検索って地味に使いづらい部分が多かったのでほぼ必須のプラグインでしょう！\n~/.hyper.js plugins: [ \u0026#34;hyper-search\u0026#34; ], 終わりに 上記のようにプラグインの導入はとても簡単です。\nそして、プラグインを入れる事でHyperの使い勝手が一気に上がるので作業効率もアップします。\n他にも様々なプラグインがあるようなので探してみてください♪\n","date":"2018-10-07T15:48:04+09:00","image":"/wp-content/uploads/2018/10/hyperAddPluginEye.png","permalink":"/2018/10/07/6422/","title":"【Hyper】イケてて使いやすいターミナル環境を作るためのオススメプラグインまとめ【Electron】"},{"content":"文字化けが発生 先日、カスタマイズ性の高いElectron製ターミナルアプリの「Hyper」をご紹介しました。\n関連記事 【使い勝手最強】Electron製のマルチプラットターミナルアプリ「Hyper」のインストール方法【Windows/Mac対応】 2018/10/04 2133文字 約5分で読めます その中で、筆者のようなZshとpreztoを使ってプロンプトの表示をカスタマイズしている際に文字化けが発生する可能性があります。\n筆者の場合はカレントディレクトリや.gitがあるファイルの場合はブランチ名や差分有無を表示するようにしています。\n左はHyper、右はiTerm2です。\n同じZsh(+prezto)の設定を読み込んでいるのになぜHyperだけ文字化けが発生するのでしょうか？\nアプリの設定が原因 原因は、アプリごとで使用するフォントの設定の差異になります。\nおそらく、iTerm2でZsh(+prezto)の設定をした際に環境設定から使用するフォントを指定したと思います。\nこんな感じ。\n同じようにHyperでも使用するフォントの設定は可能ですが、デフォルトだと以下のようになっています。\n.hyper.js fontFamily: \u0026#39;Menlo, \u0026#34;DejaVu Sans Mono\u0026#34;, Consolas, \u0026#34;Lucida Console\u0026#34;, monospace\u0026#39;, なので、ここに使用するフォントを追加すれば良いです。\n今回で言うとSource Code Pro for Powerlineですね。\n追加する際の注意点は、先頭に追加する事と、フォント名にスペースを含む場合はダブルクォーテーション(\"\")で括る事ですね。\nこんな感じ\n.hyper.js fontFamily: \u0026#39;\u0026#34;Source Code Pro for Powerline\u0026#34;, Menlo, \u0026#34;DejaVu Sans Mono\u0026#34;, Consolas, \u0026#34;Lucida Console\u0026#34;, monospace\u0026#39;, 確認 それでは実際にアプリを再起動してみましょう。\n※Hyperは.hyper.jsが変更されると自動で再読み込みして反映するが念のため\n無事に、文字化けする事なく指定したフォントが適用されるようになりましたね♪\n終わりに 以上のように、原因さえわかればすぐに直す事が可能です。\n同じ悩みでお困りの方はお試しください♪\n","date":"2018-10-06T12:11:07+09:00","image":"/wp-content/uploads/2018/10/hyperTextBugEye.png","permalink":"/2018/10/06/6409/","title":"【文字化け対策】Zsh等でプロンプトの表示をカスタマイズしてる際にHyperで発生する文字化けの修正方法【Source Code Pro for Powerline】"},{"content":"電子書籍の利便性 皆さんは読書をしていますか？\n小説から始まり、参考書や各種テキスト本など多くの本がありますよね。\nAmazonではKindleなどの電子書籍での販売も行っているので、本を物理的に持ち運ぶことなくいろいろな本を好きな時に好きな場所で読めるようになっています。\nそんな中、最近注目を浴びているAmazonの新しいブックサービスがあります。\n本は聴くもの Audible Audible(オーディブル)というボイスブックサービスです。\nこちらはAmazonが手がけているサービスとなっていて、本を音楽のように聴くことが出来るサービスのようですね。\nまた機械音声じゃなく、俳優さんや声優さんがしっかり朗読してくれるので、違和感なく聴き入る事が出来そうですね♪\n電子書籍の登場も革新的でしたが、本を聴くものにするという考えもまたすごいですよね。\n無料期間中 現在、Audibleを普及させるためにAmazonは無料期間を開催しています。\n退会はいつでも出来るので興味本位で試してみるのもありですね♪\nAudible会員がお得な理由 Audibleは以下のような特徴があります。\nPoint\r月額1,500円で毎月１つ「コイン」を付与。\r付与されたコインで、お好きなタイトルを購入。\r購入したタイトルは退会後もあなたのもの。\rコインを使い切っても非会員価格の30%OFFで購入可。\r聴きはじめてからでも交換OK。\r追加料金なしで楽しめるコンテンツも。\rAudibleの楽しみ方 SKILL UP -聞いて自分を磨く- 自己啓発やビジネス書、集中力を高める瞑想や、英語の勉強まで。オーディブルなら通勤時間や隙間時間を、自分を磨く時間に変えれます。\nRELAX -カラダと心をオフにする- 忙しい毎日の中で、心をちゃんとオフにするのもオーディブル。リラックスのための瞑想や、心を豊かにする名作のストーリー。声の力に身を任せましょう。\nENTERTAINMENT -耳で楽しむ、新しいエンタメ- 漫才やコントを始め、伝統話芸落語で笑い、直木賞など話題作を聴いて楽しめるのもオーディブル。あなたがエンターテインメントを楽しむ新しい方法として加わります。\n終わりに 聴く本は新しい楽しみ方として、これから普及しそうなサービスですよね♪\n通勤時や通学時に音楽を聴いたりしていたところをAudibleに変えればより有意義な時間に変えることが出来そうなので、興味のある方はお試ししてみてはいかがでしょうか♪\n","date":"2018-10-05T21:45:00+09:00","image":"/wp-content/uploads/2018/10/audibleEye.png","permalink":"/2018/10/05/6470/","title":"【本は聞く時代】AmazonのAudible(オーディブル)が画期的で凄そう【朗読】"},{"content":"エスパーウィークの開催が決定！ 期間 10月6日(土)早朝~10月15日(月)早朝の間にエスパーウィークが開催される事が発表されました。\nトレーナーの皆さん、10月6日（土）早朝から『Pokémon GO』で「エスパーウィーク」が始まります！🔮 詳しくはこちらをご覧ください！：https://t.co/qT60OFm4Q7 pic.twitter.com/qaGZmKEtjX\n\u0026mdash; Pokémon GO Japan (@PokemonGOAppJP) 2018年10月4日\r内容 イベント内容は以下の通り発表されています。\nPoint\rエスパータイプのポケモンがいつもより多く出現\rエスパータイプのポケモンを中心とした「フィールドリサーチ」の追加\r色違いの「スリープ」に出会えるかもしれません！\r曖昧な言い方をしていますが、おそらく色違いのスリープとスリーパーが実装されそうですね。\n最近ではクラブとキングラーの色違いも実装されたので、カントー地方の色違いが増えてきましたね♪\nラルトスも対象 また、レアポケモンのラルトスも多く出現するようですね。ラルトスはサーナイトや第四世代でエルレイドへの進化先が追加される予定があるのでここで多く捕まえておくと良いでしょう！\n終わりに 期間限定レイドボスのミュウツーや新しいEXレイドボスのデオキシスもエスパータイプですね。\nエスパータイプは強いポケモンが多いため、このタイミングで是非たくさん捕まえてみてはいかがでしょうか♪\n","date":"2018-10-05T11:50:44+09:00","image":"/wp-content/uploads/2018/10/psychic-spectacularEye.png","permalink":"/2018/10/05/6447/","title":"【ポケモンGO】エスパーウィークが開催！スリープの色違いも実装されるってよ【イベント】"},{"content":"ターミナルの使いやすさはマジ大事 作業効率を左右する 開発をしている方なら分かると思いますが、ターミナルの使いやすさで作業効率が何倍も変わる事はリアルにありえます。\n筆者は日頃から勉強の意味も兼ねてなるべくGUIではなくCUIでの操作をするように心がけています。\nそうする事によってGUIアプリが暗黙的にやってくれている事をしっかり理解する事が出来ますしね。\nWindowsは遅れを取っている Macに関しては標準でターミナルソフトが付いているため、特に困る事なくLinuxコマンド操作を行う事が出来ます。\nまた、iTerm2と言う強力なターミナルソフトもあります。\nしかし、Windows環境ではこのターミナル操作においてずっと使いにくい！！と言われていました。\n戦犯はコマンドプロンプトです。\nそもそもWindowsはLinuxマシンではないので、コマンドが異なると言う点もあります。\nAWSのEC2や実際にWebシステムを載せるサーバーはLinuxコマンドによる操作前提なので、Windowsマシンで同じような操作が出来ないのが辛いです。\ncygwinを入れることで一応Linuxコマンドは叩けますが、解決策とは言えません。\n現状、Windows10ではubuntuが内蔵され","date":"2018-10-04T15:53:52+09:00","image":"/wp-content/uploads/2018/10/hyperInstallEye2.png","permalink":"/2018/10/04/6389/","title":"【使い勝手最強】Electron製のマルチプラットターミナルアプリ「Hyper」のインストール方法【Windows/Mac対応】"},{"content":"謎のページへのアクセスが出現 「ソレ」はある日突然現れる 筆者が日課のように、ロクに増えてもないだろう当ブログへのPV数をGoogleAnalyticsで確認していると、以下のようなページへのPVが蓄積されるようになりました。\nえ、なんぞコレ。。。\n確実に存在しないページ 間違えてファイルを配置してしまったのかな？と思い、該当URLにアクセスしてみると、\nん〜、やはり存在していないURLなんだよなー。。。\nURL自体もWordpressのパーマリンクのルールに全く一致していないのに謎過ぎる。。。orz\nよくある現象？ もしかして、サイトが乗っ取られている？！と不安になったため含めて調べてみると、以下のような記事を見つけました。\n参考：Google アナリティクス レポート 存在しないURLを計測しています。\nなにやら、計測タグを含めたページをコピーされると、他のドメインで踏まれたPVもカウントされてしまうらしい。\nなるほど。\nでは、セカンダリディメンションにホストを追加しどのドメインで踏まれたPVなのか確認してみましょう。\n先ほどの記事にあった通り、このページだけ別のドメインのPVになっていますね。\n原因はわかりました。\nでは、このworldwide-seo-services.netが何者なのかを調べていきましょう。\nworldwide-seo-services.net What\u0026rsquo;s? worldwide-seo-services.netとはなんなのか？\n試しにブラウザでアクセスしてみました。\nすると、http://seo2.duncanhunter2008.com/と言うサイトにリダイレクトされます。\nどちらのURLもSEO関連のサイトのようですが、ネット上で調べてもあまり情報が出てこないため詳細までは調べ尽くすことが出来ませんでした。orz\nPVのあるURLにアクセス では、試しにGoogleAnaliticsにカウントされたURLへアクセスしてみましょう。\n今回で言うと、http://worldwide-seo-services.net/h/4314943.htmlとなります。\nお、ページ自体は存在していましたね。\nしかし、コンテンツは何もありません。\nでは、開発者ツールでページのソースを確認してみましょう。\nHTMLソース \u0026lt;!DOCTYPE HTML PUBLIC \u0026#34;-//W3C//DTD HTML 4.01 Transitional//EN\u0026#34; \u0026#34;http://www.w3.org/TR/html4/loose.dtd\u0026#34;\u0026gt; \u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta http-equiv=\u0026#34;Content-Type\u0026#34; content=\u0026#34;text/html; charset=utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;script\u0026gt; (function(i,s,o,g,r,a,m){i[\u0026#39;GoogleAnalyticsObject\u0026#39;]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,\u0026#39;script\u0026#39;,\u0026#39;//www.google-analytics.com/analytics.js\u0026#39;,\u0026#39;ga\u0026#39;); ga(\u0026#39;create\u0026#39;, \u0026#39;UA-XXXXXXXX-Y\u0026#39;, \u0026#39;auto\u0026#39;); ga(\u0026#39;send\u0026#39;, \u0026#39;pageview\u0026#39;); \u0026lt;/script\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; すると、上記のようなGoogleAnalyticsのタグだけが埋め込まれたソースになっていました・・・！\n怪しい。。。\nここで埋め込まれているタグの情報が本ブログのものと同じ値だったため、このページにアクセスするとGoogleAnalytics側に、本ブログには存在しないページへのアクセスが蓄積されているのですね。\n原因が分かって一安心です。\nアクセス元 ちょうどリアルタイムでのアクセスがある時にアナリティクスを確認することが出来ました\nOh...\nアクセス元はブラジルっぽいですな。笑\n被リンク（バックリンク）スパム しかし、原因が分かったところでこのようにGoogleAnalyticsのタグだけをコピーされている事自体が問題なのでは無いか？という話が出てきます。","date":"2018-10-03T16:00:12+09:00","image":"/wp-content/uploads/2018/10/googleAnaliticsOtherDoaminPageEye.png","permalink":"/2018/10/03/6312/","title":"【乗っ取り？】ある日突然、「h/4314943.html」みたいな存在しないページのアクセスがGoogleAnalyticsに増え始めたので調べてみた【worldwide-seo-services.net？】"},{"content":"見慣れぬ新機能 先日、とある案件で「Spring Boot」を使いたいという相談を受けていたため、ドキュメントや様々な技術ブログを漁っていたところ、面白そうな記述を見つけました。\nBanner images\n英語スキル雑魚の筆者は、とりあえずGoogle翻訳に全文コピペし概要を確認してみました。\n英文：\nYou can now use image files to render ASCII art banners. Drop a banner.gif, banner.jpg or banner.png file into src/main/resources to have it automatically converted into ASCI\n訳：\nイメージファイルを使用してASCIIアートバナーをレンダリングできるようになりました。 banner.gif、banner.jpg、banner.pngファイルをsrc/main/resourcesにハイツすれば、自動的にASCIIに変換されます\rこんぐらい自分で訳せよ！！\nっていう満場一致の指摘は置いとくとして、なにやらシステム起動時のログに表示されるログを任意の画像に差し替えれるようになったよ！と言う事らしいですね。\nこういう本来の目的と全く関係のない遊び心は筆者は大好物なので調査そっちのけで早速調べる事にしました☆w\nちなみにSpring Boot自体はとても使いやすいフレームワークです。\nJavaであれば一番浸透していますし、まだまだ進化を遂げているのでオススメです！\n筆者も大好きです♪\nAmazon Spring Boot プログラミング入門 手順 まずは標準出力 まずは通常の起動ログを確認してみましょう。\n以下のコマンドを実行してください。\n起動コマンド ./gradlew bootrun すると、以下のようなログが出力されると思います。\nデフォルトでは制作元であるSpringのロゴが表示されます。\nでは、早速この出力部分を変えてみましょう。\nbanner.pngの配置 作業はとても簡単です。\nsrc/main/resourcesディレクトリに出力させたい画像をbanner.pngという名称で配置するだけです。\n配置後の構造はこんな感じ。\nディレクトリ構造 . ├── build.gradle ├── gradle │ └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── settings.gradle └── src ├── main │ ├── java │ │ └── jp │ │ └── blogenist │ │ └── app │ │ └── AppApplication.java │ └── resources │ ├── application.properties │ └── banner.png └── test └── java └── jp └── blogenist └── app └── AppApplicationTests.java この状態でもう一度実行してみてください。\n起動コマンド ./gradlew bootrun おぉ！変わった！！\n画像を配置するだけで自動生成してくれるんですね。\nカラー出力したい しかし、人間は欲深き生き物です。\n自動生成しただけでは飽き足らずにカラー出力したい・・・！と思ってしまいました。\nしかし、SpringBootさんは抜かりないです。\nその場合は以下の設定をapplication.propertiesに追加してください。\nsrc/main/resources/application.properties spring.output.ansi.enabled=always application.ymlの場合は以下。\nsrc/main/resources/application.yml spring: output: ansi: enabled: always カラーきた！！\nしかし、ところどころ崩れているのが気に食わん。。。orz\nテキストでより細かく設定 画像での出力だと、自動生成なので精密さに限界があります。\nなので、細部までこだわりたい場合にはテキストファイルを作成して配置する事で自動生成では不可能な設定が可能になります。\nソースを見てみると、SpringBootのorg.springframework.boot.ansiパッケージ内に以下のEnumがあり、この値をテキストファイル内で${AnsiColor.RED}のように指定する事で様々な色を指定する事が可能になるとの事。\norg.springframework.boot.ansi.AnsiColor.java . . . package org.springframework.boot.ansi; . . . public enum AnsiColor implements AnsiElement { DEFAULT(\u0026#34;39\u0026#34;), BLACK(\u0026#34;30\u0026#34;), RED(\u0026#34;31\u0026#34;), GREEN(\u0026#34;32\u0026#34;), YELLOW(\u0026#34;33\u0026#34;), BLUE(\u0026#34;34\u0026#34;), MAGENTA(\u0026#34;35\u0026#34;), CYAN(\u0026#34;36\u0026#34;), WHITE(\u0026#34;37\u0026#34;), BRIGHT_BLACK(\u0026#34;90\u0026#34;), BRIGHT_RED(\u0026#34;91\u0026#34;), BRIGHT_GREEN(\u0026#34;92\u0026#34;), BRIGHT_YELLOW(\u0026#34;93\u0026#34;), BRIGHT_BLUE(\u0026#34;94\u0026#34;), BRIGHT_MAGENTA(\u0026#34;95\u0026#34;), BRIGHT_CYAN(\u0026#34;96\u0026#34;), BRIGHT_WHITE(\u0026#34;97\u0026#34;); . . . } なるほど。\nとりあえず試してみましょう。\n以下のテキストを配置してみます。\nbanner.txt ${AnsiColor.RED}█RED█ ${AnsiColor.BLUE}█BLUE█ ${AnsiColor.GREEN}█GREEN█${AnsiColor.BRIGHT_GREEN}█BRIGHT_GREEN█ ${AnsiColor.YELLOW}█YELLOW█${AnsiColor.BRIGHT_YELLOW}█BRIGHT_YELLOW█ そして実行。\n良い感じ♪\nちなみにテキストの最初に空行を入れないと、出力が崩れる事があるので、何行か空行を入れといたほうが良いかもしれません。\nこの辺は要調整ですね。\nでは、実際に先ほど使用したbanner.pngを削除してbanner.txtに置き換えましょう。\nbanner.txt ${AnsiColor.GREEN}:::::: ${AnsiColor.GREEN}::::::::: ${AnsiColor.BRIGHT_BLACK}# ${AnsiColor.GREEN}:::::::::o ${AnsiColor.BRIGHT_BLACK}##### ${AnsiColor.GREEN}o::::::::: ${AnsiColor.BRIGHT_BLACK}######### ${AnsiColor.GREEN}o:::::: ${AnsiColor.BRIGHT_BLACK}############# ${AnsiColor.RED}# : ${AnsiColor.BRIGHT_BLACK}################ ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}################ ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############### ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############# ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############ ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############ ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############# ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############################## ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############################## ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############################# ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############################ ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}########################## ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############# ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############# ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############ ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}############ ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}########### ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}########## ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}########## ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}########## ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}########### ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}### ${AnsiColor.BRIGHT_BLACK}############# ${AnsiColor.RED}# ###### ${AnsiColor.BRIGHT_BLACK}#################################### ${AnsiColor.RED}######### ${AnsiColor.BRIGHT_BLACK}#################################### ${AnsiColor.RED}######### ${AnsiColor.BRIGHT_BLACK}#################################### ${AnsiColor.RED}######### ${AnsiColor.BRIGHT_BLACK}################################### ${AnsiColor.BLUE}########## ${AnsiColor.BLUE}######## ${AnsiColor.BLUE}###### ${AnsiColor.BLUE}#### ${AnsiColor.BLUE}# 実行するとこんな感じ。\nとても良い感じになりましたね♪\n終わりに 実際の開発には直接は関係のないところですが、社内パッケージを作っている場合にはこういう部分にブランドロゴを埋め込むのも良いと思います♪\nもちろん個人開発時の遊び心としても面白いので、余裕がある方はぜひ試してみてください♪\n","date":"2018-10-02T21:56:27+09:00","image":"/wp-content/uploads/2018/10/springBootBannerLogEye.png","permalink":"/2018/10/02/6291/","title":"【遊び心満載】SpringBootの起動時の出力を任意の画像やアイコンに差し替える機能が面白い【謎の技術】"},{"content":"Java8で日付操作周りが一新 以前はnew Date()やCalendar.getInstance()を使って現在時刻を取得していたと思いますが、もともとのAPIがイケてない作りとなっていたため、日付操作周りで使いづらさ満点でした。\nコード //Java7以前 Date date = new Date(); System.out.println(date); Calendar calendar = Calendar.getInstance(); System.out.println(calendar); 実行ログ Mon Oct 01 20:04:40 JST 2018 java.util.GregorianCalendar[time=1538391880736,areFieldsSet=true,areAllFieldsSet=true,lenient=true,zone=sun.util.calendar.ZoneInfo[id=\u0026#34;Japan\u0026#34;,offset=32400000,dstSavings=0,useDaylight=false,transitions=10,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2018,MONTH=9,WEEK_OF_YEAR=40,WEEK_OF_MONTH=1,DAY_OF_MONTH=1,DAY_OF_YEAR=274,DAY_OF_WEEK=2,DAY_OF_WEEK_IN_MONTH=1,AM_PM=1,HOUR=8,HOUR_OF_DAY=20,MINUTE=4,SECOND=40,MILLISECOND=736,ZONE_OFFSET=32400000,DST_OFFSET=0] Dateクラスのメソッドである程度の日付操作は出来ていたのですが、Java8が出た現時点では現在は@Deprecatedの非推奨メソッドとなっています。\nまた、Calendarクラスについては@DeprecatedがついていないのでJava8でも利用出来ますがとても使いにくく、かっこ悪いです。笑\nCalenderクラス System.out.println( calendar.get(Calendar.YEAR) + \u0026#34;年\u0026#34; + (calendar.get(Calendar.MONTH) + 1) + \u0026#34;月\u0026#34; + calendar.get(Calendar.DAY_OF_MONTH) + \u0026#34;日 \u0026#34; + calendar.get(Calendar.HOUR_OF_DAY) + \u0026#34;時\u0026#34; + calendar.get(Calendar.MINUTE) + \u0026#34;分\u0026#34; + calendar.get(Calendar.SECOND) + \u0026#34;秒\u0026#34;); 実行ログ 2018年10月1日 20時14分31秒 + 1 と特にダサい。笑\nなので、Java8以降の場合は上記の2つの方法を使わずに新しく追加されたAPIを利用するのが当たり前となっています。\n日付操作API LocalDate java.time.LocalDateは日付操作をする際に使うクラスとなっております。\nLocalDateTime LocalDate ld = LocalDate.now(); System.out.println(ld); 実行ログ 2018-10-01 時間を指定してのインスタンスの作成も簡単に出来ます。\nLocalDateTime LocalDate ld = LocalDate.of( 2018, 10, 1 ); System.out.println(ld); 実行ログ 2018-10-01 生成したインスタンスに対する操作が直感的かつシンプルにかけるので綺麗ですね♪\n各種操作メソッド例 ld.plusYears(1); ld.plusMonths(1); ld.plusDays(1); ld.plusWeeks(1); ld.minusYears(1); ld.minusMonths(1); ld.minusDays(1); ld.minusWeeks(1); 文字列日付からのパースもとても簡単です。\nこの便利さはかなり衝撃的です。\nLocalDateTime DateTimeFormatter dtf = DateTimeFormatter.ofPattern(\u0026#34;yyyy/MM/dd HH:mm:ss\u0026#34;, Locale.JAPANESE); LocalDate ld = LocalDate.parse(\u0026#34;2018/10/01\u0026#34;, dtf); System.out.println( ld ); 実行ログ 2018-10-01 LocalDateTime java.time.LocalDateTimeは日時操作をする際に使うクラスとなっております。\nLocalDateTime LocalDateTime ldt = LocalDateTime.now(); System.out.println(ldt); 実行ログ 2018-10-01T20:21:13.002 LocalDateと同様に時間を指定してのインスタンスの作成も簡単に出来ます。\nLocalDateTime LocalDateTime ldt = LocalDateTime.of(2018, 10, 1, 20, 59, 59); System.out.println(ldt); 実行ログ 2018-10-01T20:59:59 こちらも生成したインスタンスに対する操作が直感的かつシンプルにかけます。\n分かりやすい。。。！\n各種操作メソッド例 ldt.plusYears(1); ldt.plusMonths(1); ldt.plusDays(1); ldt.plusHours(1); ldt.plusMinutes(1); ldt.plusSeconds(1); ldt.minusYears(1); ldt.minusMonths(1); ldt.minusDays(1); ldt.minusHours(1); ldt.minusMinutes(1); ldt.minusSeconds(1); こちらも文字列日時からのパースはお手の物です♪\nLocalDateTime DateTimeFormatter dtf = DateTimeFormatter.ofPattern(\u0026#34;yyyy/MM/dd HH:mm:ss\u0026#34;, Locale.JAPANESE); LocalDateTime ldt = LocalDateTime.parse(\u0026#34;2018/10/01 20:53:15\u0026#34;, dtf); System.out.println( ldt ); 実行ログ 2018-10-01T20:53:15 終わりに 以上のように、今まで複雑だった日付周りの操作がとても簡潔になります。\n簡潔になるということはバグ率の低下や可読性の向上にも繋がります。\nまた、今回紹介しなかった便利なメソッドは他にもありますので、また改めて記事にまとめようかと思います♪\n今からJavaで開発をする際には少なくともJava7以前で進めることはないと思うので、是非この新しい日付APIを使ってみてください。\n","date":"2018-10-01T21:01:59+09:00","image":"/wp-content/uploads/2018/10/java8LocalDateAndTimeEye.png","permalink":"/2018/10/01/6247/","title":"【Java8の日付操作】DateやCalendarを使うのを止めてLocalDateとLocalDateTimeを使って幸せになろう【初期化】"},{"content":"ボカしたいブームに突入 Kiss X9iはとても使いやすい 筆者の初めてのレフ機については、以前に以下の記事にてご紹介をしました。\n関連記事 【一眼初心者向けレフ機】Canon EOS Kiss X9i買ったから開封するよー！【エントリーモデル】 2018/05/20 1668文字 約4分で読めます また、魚眼フェチとしてもSigmaのFisyEyeレンズも購入済みです♪\n関連記事 【魚眼】Sigma 15mm F2.8 EX DG DIAGONAL FISHEYEの使いやすさが抜群だった件【Canon一眼向け】 2018/08/31 1514文字 約4分で読めます もっとボカしたい・・・ しかし、最近はもっと周囲をボカしたいい感じの写真を撮りたくなってきました。\n標準付属のレンズでは、F値が最小値でも4のためあまりボケ感を引き出せません。\nまた、SigmaのFishEyeではF値は2.8ですが、魚眼特有の画角のためそこまでボケ感が強調されないので求めている構図とは異なったいい感じの写真になってしまいます。(うれしい悲鳴)\n純正はオススメしない そして、素晴らしいレンズを求めてネットの情報を集めていたところ以下の記事を見つけました。\nEOS kissX9iでCanon純正の単焦点レンズは買うな！\nCanon純正にも良さげなレンズはあるが、それ以上にいいレンズがあるとの事。\nなるほど。\nではそれを買うしかありませんね！！！(即決)\nという事で購入してみたのでご紹介していきます。\n商品 SIGMA 単焦点レンズ Art 30mm F1.4 DC HSM キヤノン用 APS-C専用 Amazon SIGMA 単焦点レンズ Art 30mm F1.4 DC HSM キヤノン用 APS-C専用 301545 特徴 最高レベルの描写性能 APS-C専用大口径標準レンズ”、この新しいレンズカテゴリーを名機『30mm F1.4』で切り拓いたシグマが、新プロダクトラインの開発思想を全投入してリニューアルしたのが、『Art 30mm F1.4 DC HSM』。\r人間の視覚にもっとも近いとされる画角で、作画意欲を刺激し、多彩な写真表現が可能。\n最新設計と製造技術による、最高レベルの描写性能を実現。\n”Art”ラインのコンセプトを具現化 あらゆる設計要素を最高の光学性能と豊かな表現力に集中して開発、高水準の芸術的表現に応えうる、圧倒的な描写性能。\r新プロダクトライン”Art”ラインのレンズは、高度な要求水準を満たす、圧倒的な描写性能で、風景、ポートレート、静物、接写、スナップをはじめ、作家性を生かした写真づくりに最適。\n開放値F1.4、会心の大口径標準レンズ ”Art”ラインにふさわしい、高い光学性能を実現する”APS-C専用大口径標準レンズ”として誕生したのが『Art 30mm F1.4 DC HSM』。\r開放値F1.4の浅い被写界深度を生かしたボケ味による、スナップ、ポートレート、風景など、幅広い分野で撮影が楽しめる。\n高画質、しかも圧倒的な表現力 使いやすい画角だからこそ、撮影者の表現力が試される標準レンズ。 『Art 30mm F1.4 DC HSM』は、あらゆる撮影距離において表現力を十分に発揮できるよう、高い光学性能に徹底的にこだわった。 レンズパワー配置の最適化により、像面湾曲を徹底的に補正、画面周辺まで高い描写性能を発揮。 両面非球面レンズの採用により、球面収差、非点収差、コマ収差を良好に補正。 画面周辺部の点光源のにじみも少なく、開放付近の美しいボケを表現する事が可能。\n新ラインはすべてが「プレミアム」に 優れたレンズには、よい設計、よい製造、よい検査の３条件が必要。 考え抜かれたコンセプトと、高度で精巧な日本の製造技術から生まれたレンズの最後の決め手となるのは、レンズの性能評価。 従来までは、一般的なイメージセンサーを使ったMTF測定器を用いてレンズの性能を測定してきたが、今回新たに、4,600万画素Foveonダイレクトイメージセンサーを用いたMTF測定器”A1”を独自開発。 シグマ唯一の生産拠点である会津工場では、新しいプロダクト・ラインはすべて、この”A1”で全数検査を受けてから出荷。 これまで検出できなかった高周波成分の検査までも可能になり、すべての製品において「最高性能」が実現。\n撮影者にとっての本質機能を追求 付属フードの接続部にラバーを採用、レンズキャップ、AF/MF切り替えスイッチも一新するなど、撮影者にとっての本質機能を徹底的に追求。\r内部機構には、超音波モーターHSM (Hyper Sonic Motor)搭載により、AFスピードの高速化と静粛性を実現。 ピントを合わせた後、フォーカスリングを回すだけで、ピントの微調整ができるフルタイムマニュアルも可能。\nまた、高い精度と堅牢性を兼ね備えた真鍮マウントを採用、内部パーツにも、金属部品と親和性の高い新複合材TSC (Thermally Stable Composite)など適切に配置し、精度の高い製品づくりを実現。\n超音波モーターHSM 超音波モーターHSM（Hyper Sonic Motor）搭載により、AFスピードの高速化と静粛性を実現。 AFでピントを合わせた後、フォーカスリングを回すだけで、ピントの微調整ができるフルタイムマニュアルも可能。\nリアフォーカス 撮影距離の変化に伴う収差変動を防ぐリアフォーカスを採用し、画面全域での高画質を実現。 フォーカシングによる全長の変化がなく、安定したホールディング性を実現。 レンズ前玉が回転しないので、円偏光フィルターの使用も容易。\n真鍮製バヨネット・マウント 高い精度と堅牢性を兼ね備えた真鍮製マウントを採用。 長期使用に耐えうるよう、表面処理を施して強度を高め、高品質なレンズづくりを実現。\nスーパーマルチレイヤーコート レンズ設計の初期段階からフレア、ゴーストに対する対策を徹底し、逆光のような強い入射光に対しても影響を受けにくい設計。 スーパーマルチレイヤーコートの採用により、フレア、ゴーストの発生を軽減し、逆光時の撮影においてもコントラストの高い描写を実現。\n全機種プレミアムクオリティ 新たに、4,600万画素Foveonダイレクトイメージセンサーを用いたMTF測定器『A1』を独自開発。 シグマ唯一の生産拠点である会津工場では、新しいプロダクト・ラインはすべて、この『A1』全数検査を受けてから出荷。 これまで検出できなかった高周波成分の検査までも可能になり、すべての製品において”最高性能”が実現。\n”Made in Japan”のものづくり 一部の加工を除いて、部品や金型までも日本国内で一貫生産しているシグマは、生粋の『日本製』を謳うことができる数少ないメーカーのひとつ。 清廉な空気と水に恵まれた風土、粘り強く実直な人々の気質、そして最新のノウハウと、精巧で高度な技術の融合によって生み出される確かな品質。 世界中の写真愛好家を満足させていた高度なものづくりを支えているのは、職人としての情熱と誇りに裏打ちされた、正真正銘のクラフツマンシップである。\n自分仕様にカスタマイズ 新ラインから、レンズ・ファームウェアのアップデートや、合焦位置をカスタマイズできる専用ソフトウェア(SIGMA Optimization Pro)を開発。 『USB DOCK』を介してパソコンと接続し、画面上での簡単な操作で、よりパーソナルな仕様調整が可能。\nマウント交換サービス シグマは、多種多様な交換レンズをつくり続けてきたノウハウとリソースを活かして、新コンセプトラインのマウント部および内部システムの一部をご希望のマウントに仕様変更できる『マウント交換サービス』を開始。 これにより撮影者が、将来、新たなカメラボディをお求めになる場合にも、それに合わせてお気に入りのレンズを”お直し”することができ、長く愛用ができる。\nSIGMA カメラ用フィルター PROTECTER 62mm レンズ保護 Amazon SIGMA カメラ用フィルター PROTECTER 62mm レンズ保護 931063 今回は合わせてレンズ保護プロテクターも購入しました。\nレンズフードはついていますが、レンズプロテクターは付いていないので購入必須です。\n62mmであれば問題無いため、今回はせっかくなので同じSigmaのブランドで統一してみました♪\n開封の儀 SIGMA カメラ用フィルター PROTECTER 62mm レンズ保護 開封動画 [embed]https://youtu.be/laJpos7BiZY[/embed]\n外観 外観はこんな感じです。\n62mmの主張がものすごいため間違えることはなさそうですね！\n親切設計！笑\n付属品 さて、中身を確認しましょう。\nパカッ。\nまずは取扱説明書です。\nそして、プロテクターですね。\n厳重にケースに入っています。\nリングの淵にはSigmaの文字が！シンプルで良いデザインですね♪\n付属品は以上です。\nSIGMA カメラ用フィルター PROTECTER 62mm レンズ保護 さて、次はレンズ本体を開けていきましょう。\n開封動画 [embed]https://youtu.be/Stbq7QPubVQ[/embed]\n外観 パッケージはこんな感じ。\nすごい！4面とも30mm 1.4F DCの記載があるので間違える心配が無いですね！\n親切設計！！笑\n上部と下部はこんな感じ。\n付属品 さて、開けていきましょう。\nパカッ。\nまずは保証書関連が2枚。\n次は取扱説明書。\nそして本体が入っているケースです。\nケースを開けると、レンズ本体とレンズフードが入っています。\nレンズフードはごく一般的なタイプですね。\nレンズの方はこんな感じ。\nメモリとAF/MFの切り替えスイッチが付いています。\nマウント部分とレンズ部分のキャップはこんな感じです。\nしっかりとしているので外れることは無さそうですね♪\nレンズフードをつけるとこんな感じです。\nレンズフードもカチッと音がするまで締めることが出来るので外れる心配は無さそうです。\nでは、次にレンズプロテクターをつけましょう。\nこちらも一般的な取り付け方と同じなので困ることは無いでしょう。\nレンズプロテクターをかぶせて、\n締めるだけ！\nキャップのサイズも問題無さそうです。\nもちろんレンズフードも。\nやはりメーカーを統一すると安心感がありますよね♪\nレンズサイズの比較 今回、X9i標準レンズ/Sigma FISHEYE 15mm/SIGMA 単焦点レンズ Art 30mmのレンズサイズを並べて比較してみました。\n左から標準/FISHEYE/単焦点です。\nFISYEYEがダントツで大きいかな？と思いきや、意外と単焦点レンズが大きかったですね。\n重さも結構ありました。\n撮り比べ 今回はF値の最小値がそれぞれのレンズで異なるので、簡単にですがボカシ具合を比較してみました。\n被写体はこちらで購入した可愛いスライム達を並べました。笑\n[travenist_link id=\"1641\"]\rこんな感じで並べて、それぞれのレンズの最小のF値に設定した上で、中心の青スライムにピントを合わせて前後のボケ具合を比較してみました。\nX9i標準F値4.0 Sigma FISHEYE Sigma 単焦点レンズ 総評 やはり、今回購入した単焦点レンズはダントツでピントの合う範囲が狭くなっていることがわかりますね。\n卓上の狭い範囲でこれだけボケ具合が出るのであれば、屋外での撮影時はより強いボケが出ると思います。\n執筆時は台風のため、天気が良い時に試し撮りをしてみて追記致しますね♪\nまた、FISYEYEは広角なのでF値が2.8とは言いつつ、意外と前後の広い範囲にピントがあっています。これはカメラと被写体の距離が他の二つと異なっているので一概には言えませんね。\nう〜ん、難しい。。。\nちなみに、F値が1.4だとより多くの光を撮影時に拾ってしまいます。\nX9i標準とSigma FISHEYEはISO3200で撮りましたが、Sigma 単焦点レンズではISO800で撮っています。\nもし、ISO3200で撮るとこんな感じに飛びまくってしまいます。\n環境とレンズに合わせた適切な設定値を見出せる力をつける必要がありそうですね。。。\n終わりに 以上のように、より強いボケ具合を表現する事が可能になるレンズです。\nお値段も純正レンズよりも安くてお求めやすいので、まずはこちらのレンズを購入して練習してみてはいかがでしょうか♪\n","date":"2018-09-29T15:49:39+09:00","image":"/wp-content/uploads/2018/09/sigmaProtectorAndLensEye.png","permalink":"/2018/09/29/6108/","title":"【Kiss x9i初心者向け最強レンズ】Sigmaの単焦点レンズ「30mm F1.4 DC HSM」のボケ表現がすごくてコスパ最強過ぎる【Canon】"},{"content":"届いたで〜！ 紹介 先日、GoProHERO7の発表会に合わせて以下の紹介記事を投稿しました。\n関連記事 【9月27日発売】GoProHERO7が遂に発表！手振れ補正が凄すぎてジンバル入らずの手持ち撮影が出来そうな件 2018/09/21 1213文字 約3分で読めます 到着 そして、遂に発売日当日となり手元に到着しました!\nさて、早速開封していきますよ！\n商品 GoPro HERO7 紹介記事でもお伝えした通り、GoProHERO7は3モデルでの発売となっております。\n用途に合わせて選びましょ。\nAmazon 【国内正規品】GoPro(ゴープロ) HERO7 Black CHDHX-701-FW ゴープロ ヒーロー7 ブラック ウェアラブル アクション カメラ 【GoPro公式】 Amazon 【国内正規品】GoPro(ゴープロ) HERO7 Silver CHDHC-601-FW ゴープロ ヒーロー7 シルバー ウェアラブル アクション カメラ 【GoPro公式】 Amazon 【国内正規品】GoPro(ゴープロ) HERO7 White CHDHB-601-FW ゴープロ ヒーロー7 ホワイト ウェアラブル アクション カメラ 【GoPro公式】 合わせて買っておくべきもの 今回は合わせて以下のものも購入をしておきました。\nまずは液晶保護フィルムです。\nフロント部分とタッチパネル部分の2枚が入っています。\n開封と同時に貼ったほうが良いので購入しました。\nAmazon 【Taisioner】GoPro HERO5/6/7用 9H液晶保護フィルム\u0026#43;シリコンレンズカバーセット 全面保護２セット入り 次にmicroSDカードです。\nこちらも含まれていないのえ別途購入しておくべきでしょう。\nあまり安いやつを買ってしまうと書き込み速度が遅くなってスムーズに動画撮影が出来なかったり、PC等への転送も時間がかかってしまうのでどうせならそれなりに良いやつを買いましょう。\nAmazon サンディスク ( SANDISK ) 64GB microSD Extreme PRO R=100MB/s W=90MB/s SDアダプター付き ［海外パッケージ］ SDSQXCG-064G-GN6MA とは言っても今はmicroSDはかなり安くなっているので、64GBでも3500円くらいで買えてしまいます♪\n開封の儀 開封動画 [adsense]\n[embed]https://youtu.be/OJXHgO5nUMY[/embed]\n外観 外観はこんな感じ。\n過去のシリーズと同じようなパッケージですね。\n開封するには、底面にペリペリがあるのでそこから開封できます。\nペリペリッ。\n付属品 中身を引っこ抜くとこんな感じ。\n本体はクイックマウントで取り付けられているので簡単に取り外せます。\n白い箱を開けるといろいろ付属品が入っています。\nまずはスマホアプリ説明書です。\nGoProHERO7はスマホアプリと連携することでリモート操作や画像や動画の確認が出来るようになるのでとても便利です！\n次はGoProのステッカーです。\nこちらもお馴染みですね♪\n次は取扱説明書です。\n様々な言語で書かれているのえ無駄に分厚いですw\nまだまだあります！\nまずは充電用bUSBケーブルです。\nGoProHERO7からはUSB3.0のType-Cになったようですね。\n次は純正のバッテリーです。\n次にクイックマウント用のパーツです。\n合計2個入っています。\n次にクイックマウントです。\n個は最初に本体が取り付けられていたやつですね。\n次にフレームです。\nこれも最初に本体が取り付けられていたやつです。\nということでこれだけの付属品があります。\nこうやってみると多いですね。\n最後に、合わせて購入した保護フィルムを貼りましょう。\nまずは背面のタッチパネル側です。\nこんな感じになっているので1のシートを剥がして液晶に貼ります。\n次に2のシートを剥がすだけで終わりです。とても楽チンですね♪\nフロント側も同様です。\n全然違和感がありませんね♪\n終わりに 今回は開封するところまでをご紹介しました。\n次回は実際の使用感や様々なアクセサリとの親和性も確認していきたいなと思っております。\n","date":"2018-09-27T21:26:39+09:00","image":"/wp-content/uploads/2018/09/goproHeroEye.png","permalink":"/2018/09/27/6065/","title":"【開封動画】発売日当日にGoProHER7 Blackが届いたからささっと開封していくよ！【最新機種】"},{"content":"プレイヤーを混乱に陥れた新ポケモン 先日、9月22日に9月のコミュニティーデイが行われ、色違いチコリータを求め乱獲が始まったですが、その際にニアバイに謎のシルエットが出るようになりました。\nもちろんフィールドにも出ています！\nシルエット的には、いままので第7世代までにマッチするポケモンはおらず第8世代の新ポケモンか？！という噂が立ち始めました。\nタップするとこんな感じ！\nおぉ！\nガチ新ポケやん！\n胸を躍らせつつゲットすると、、、\nお前かい！！\nなんなんだこれは・・？謎ですね。。。\n公式からもなにもアナウンスが無いため、運営が間違って実装しちゃってのでは？や、バグでは？といった噂が立ち始めました。\n公式から情報が！ 幻のポケモン「メルタン」 出現から4日が経ち、遂に公式から情報が発表されました！\nその名も、メルタン！\nきゃわわ☆\nメルタンについての情報も公開されていたのでまとめましょう。\nメルタンとは？ 図鑑内容 概要は以下の通りです。\n名前\rメルタン\r分類\rナットポケモン\rタイプ\rはがね\r高さ\r0.2m\r重さ\r8.0kg\r液体金属の体 体の大部分が液体金属で構成されており、その形状はとても流動的です。液状化した手足を使い、金属を侵食して体内に取り込むことができます。\n体内で生み出される電気エネルギー 外部から取り込んだ金属を元に、電気エネルギーを生み出します。生体活動の源となるほか、目から放射して攻撃することもあるようです。\n豊かな表情 好奇心旺盛で、あらゆるものに興味を示します。とても無邪気で、さまざまな表情を見せてくれます。\nオーキド博士とウィロー博士も研究中 このポケモンについては、オーキオド博士とウィロー博士がやり取りをしている動画が公開されました。\n今後も少しずつメルタンの生体が明かされていく事でしょう！\n[embed]https://youtu.be/MT1J_cEELR8[/embed]\n筆者の予想 おそらく進化するタイプの幻のポケモンですかね？\n過去の幻のポケモンを比較するとこんな感じです。\n世代\r名前\r進化/フォルム\r第一世代\rミュウ\r無し\r第二世代\rセレビィ\r無し\r第三世代\rジラーチ\r無し\rデオキシス\rフォルムチェンジ(４種)\r第四世代\rフィオネ\r進化\rマナフィ\r無し\rダークライ\r無し\rシェイミ\rフォルムチェンジ(2種)\rアルセウス\r無し\r第五世代\rビクティニ\r無し\rケルディオ\rフォルムチェンジ(2種)\rメロエッタ\rフォルムチェンジ(2種)\rゲノセクト\r無し\r第六世代\rディアンシー\r無し\rフーパ\rフォルムチェンジ(2種)\rボルケニオン\r無し\r第七世代\rマギアナ\r無し\rマーシャドー\r無し\rゼラオラ\r無し\r第八世代?\rメルタン\r???\rおそらくメルタンも進化、もしくはフォルムチェンジがあると思われますね！\n公式の情報にも、\n外部から取り込んだ金属を元に、電気エネルギーを生み出す\nとあるので、電気/鋼の複合タイプ辺りが妥当かな？\nポケットモンスター Let\u0026rsquo;s Go! ピカチュウ\u0026amp;イーブイと連携 また、すでにポケモンGoとポケットモンスター Let's Go! ピカチュウ・Let's Go! イーブイの連携が発表されていますが、このメルタンをピカブイで出会うにはなにやらポケモンGoが重要になってくるらしいですね。\nこちらも詳細はまだ出ていないので今後の情報に期待です！\n謎の多い「メルタン」ですが、『ポケットモンスター Let's Go! ピカチュウ・Let's Go! イーブイ』で出会うためには、どうやら『Pokémon GO』が関係しているようです…！\n終わりに 今回のような前情報無しでのサプライズな試みは新鮮で楽しいですよね！\n日々追加機能を加える事が出来るスマホアプリの特権でしょう♪\n今後も少しずつメルタンに関する新情報が出てくると思うので、続報を楽しみにしましょう！\n","date":"2018-09-26T10:30:54+09:00","image":"/wp-content/uploads/2018/09/pokemonGoMerutanEye2.png","permalink":"/2018/09/26/6038/","title":"【新幻のポケモンキター】ポケモンGoに突如現れたポケモンはピカブイに登場する第8世代？の新ポケモンだった【メルタンきゃわわ】"},{"content":"遂に正式発表 先日、東京ゲームショウ2018が開催されました。\nゲーマーにとっては年に一回の祭典ということで新情報がどんどん発表されていましたね！\n筆者も実際に参加してきまして、その様子は以下の記事にてご紹介しています。\n[travenist_link id=\"1095\"]\r[travenist_link id=\"1265\"]\rそして、そこで遂に任天堂Swtich版DQ11の新情報が発表されました！\nそれでは発表されたDQ11の情報をまとめてみましょう。\n新情報 タイトルに謎の「S」 TGS2日目のスクエニのドラクエステージにて、ドラクエ生みの親であり、神と崇められている堀井雄二さんから、任天堂Switch版ドラゴンクエスト11の発売が「ドラゴンクエスト11 S」であることが正式に決定しました！と発表がありました。\nボイス付き その際に、タイトルの最後に追加されている「S」については、「スイッチ」や「スペシャル」、さらには「しゃべる」、「しゃべる」という意味もあるの新情報がありましたね。\nこの唐突な発言には他の登壇者の方も焦っていました。笑\nまた、ドラクエシリーズに声はつけなくても良い、との一部の意見があることも認識しているようで、その人たちの事も考えた仕様のようなので、ボイスのON/OFF機能があるような事もおっしゃっていました。\n神の配慮は信心深いですな・・・！\n発売日は未定 今回は発売が決定したことだけの発表だったため、具体的な発売日についてはアナウンスはありませんでした。\nただ、任天堂Switchで発売する上での技術的に難しい点は乗り越えた、とのことなので遅くとも2019年内には発売されることでしょう！\n筆者の予想 任天堂Swtichは据え置きも携帯も兼ね備えたハードとなっています。\nそして、ドラゴンクエスト11には2Dモード/3Dモード/HDモードが用意されています。\nこれは、スペシャルの意味も込めて全てを兼ね備えた全部入りとなって発売されるのでは？と予想しています！\nそしたら間違いなく買い確ですよね・・・！\nそうであって欲しいですな。\n終わりに 今まで頑なに公式から情報がなかった任天堂Switch版の情報が公開されましたね。\nドラクエ信者の筆者は間違いなく購入すると思うので、他に新情報が来たら皆様に発信していこうと思いますので続報をお待ちください♪\n","date":"2018-09-25T12:57:15+09:00","image":"/wp-content/uploads/2018/09/TGSdq11eye.png","permalink":"/2018/09/25/6018/","title":"【Swtich版DQ11発表】東京ゲームショウで正式に任天堂Swtich版ドラゴンクエスト11の発売が発表されました【ボイス/2D/3D/HD全部入り？】"},{"content":"遂に来た！ 先日、そろそろGoProHERO7の発表が行われるだろうと思い、リーク情報等をまとめた記事を執筆しました。\n関連記事 【9月20日発表確定】GoProHero7のリーク情報が流出！発売日はいつか？【9月18日更新】 2018/08/26 1824文字 約4分で読めます そして、遂に9月21日に公式から発表がされました！！\nGoProHERO7 商品 Amazon 【国内正規品】GoPro(ゴープロ) HERO7 Black CHDHX-701-FW ゴープロ ヒーロー7 ブラック ウェアラブル アクション カメラ 【GoPro公式】 Amazon 【国内正規品】GoPro(ゴープロ) HERO7 Silver CHDHC-601-FW ゴープロ ヒーロー7 シルバー ウェアラブル アクション カメラ 【GoPro公式】 Amazon 【国内正規品】GoPro(ゴープロ) HERO7 White CHDHB-601-FW ゴープロ ヒーロー7 ホワイト ウェアラブル アクション カメラ 【GoPro公式】 紹介映像 [embed]https://youtu.be/G9KDqfpCgws[/embed]\n発売日 国内の発売日は9月27日となっています。\nGoProHERO7の時も品切れが続出したので気をつけましょう！\n3機種展開 GoProHERO7はリークの情報通り、Black/Silver/Whiteの3種が発売されます。\n各機種ごとに機能やスペックが異なるので、以下の情報を参考にして選んでみてください。\n特徴 HyperSmooth ビデオ 驚異的に滑らかなビデオ。\nジンバルを使わなくても本体の手ぶれ機能のみでかなり安定した映像を撮影する事が出来ます。\n[embed]https://youtu.be/n6YSe2tnSWk[/embed]\n堅固 + 防水 水に浸けても、落としても、ぶつけても大丈夫。\n耐久性に優れ、水深10mまでの防水機能を兼ね備えています。\n音声コントロール 手がふさがってる? GoPro に話しかけよう。\n「GoPro 写真」などの 16 種類のコマンドで話しかけよう。\nスーパーフォト 写真を超えた、スーパーフォト。\nHDR、ローカル トーン マッピング、ノイズ低減を駆使した機能で、どんな明るさでも美しい写真を自動的に撮影できます。\nライブ ストリーミング 感動は今伝えよう。\n見逃せない場面が発生した瞬間に Facebook Live などにストリーミングしてシェアできます。\nTimeWarp ビデオ 動きに合わせたタイムラプスビデオ。\n動いている間も、とっても滑らかで安定感抜群のタイム ラプス ビデオを撮影できます。\n3機種比較表 HERO7 White\rHERO7 Silver\rHERO7 Black\r価格(税込)\r27,800円\r37,800円\r49,800円\r写真\r10MP\r10MP (With HDR)\r12MP (With SuperPhoto)\r動画\r1080p60*\r4K30\r4K60\rバッテリー\r内臓\r内臓\r取り出し可能\r水深10m防水性能（ハウジングなし）\r◯\r◯\r◯\r2-inch タッチスクリーン（タッチズーム機能付き）\r◯\r◯\r◯\r動画手ぶれ補正\rStandard\rStandard\rHyperSmooth\r音声認識コントロール\r◯\r◯\r◯\r音声による起動\r×\r×\r◯\rAuto Offload to Your Phone\r◯\r◯\r◯\rタイムラプス動画\r◯\r◯\r◯\rスローモーション\r2x\r2x\r8x\rライブストリーミング\r×\r×\r◯\rSuperPhoto\r×\r×\r◯\rTimeWarp Video\r×\r×\r◯\rGP1 Chip\r×\r×\r◯\rGPS\r×\r◯\r◯\rQuikStories\r◯\r◯\r◯\rProtune\r×\r×\r◯\r終わりに 遂に待ちに待った新作の発表が行われましたね。\n今回は内部的なバージョンアップがメインでしたが、全体的に使いやすくなるようなバージョンアップなので、筆者的にはこれは買いだと思っています。\n値段も過去の機種と変わらない値段なので、GoProを持っていない方も買い替えを考えている方も是非購入してみてはいかがでしょうか♪\n","date":"2018-09-21T01:31:54+09:00","image":"/wp-content/uploads/2018/09/goproHeroFixEye.png","permalink":"/2018/09/21/6003/","title":"【9月27日発売】GoProHERO7が遂に発表！手振れ補正が凄すぎてジンバル入らずの手持ち撮影が出来そうな件"},{"content":"個体値を調べたい 個体値チェッカーは便利だがめんどくさい ポケモン(Go)マスターの皆さんは捕まえたポケモンの個体値を調べたりしていますでしょうか？\nもちろん、好きなポケモンを集めるだけでも楽しいのですが、せっかくなら強いポケモンを育てたくなってしまいますよね。\n[adsense-responsive]\rポケモンGoにも本家のように、多少の仕様は違いますが個体値というものが存在します。\nこの個体値はポケモンGoアプリ上ではなんとなくしか分からず、正確な数値を確認するにはとあるサイトの個体値チェッカーと呼ばれる機能にて、数値を手入力することで確認する事が出来ます。\nしかし、入力する項目が多く毎回ブラウザで確認しないといけないためちょっとめんどくさいです。\n今回はそんなめんどくさい入力をせずに自動で個体値を確認してくれる便利な「Poke Genie」というアプリを見つけたのでご紹介致します。\n自動判定が便利 Poke Genieは、ポケモンGoの画面を起動した状態で使う事によって、撮影した画面キャプチャ画像を使って自動で個体値を判定してくれるアプリとなっています。\nPoke Genieは、画像認識を利用して自動でスクリーンショットの情報を集め、ポケモンの個体値を計算するアプリです。もういちいち数値を入力する必要はありません！個体値の精度を上げるには、チームリーダーの評価を追加しましょう。スキャン結果履歴は自動で保存され、いつでも確認することができ、信頼できなおかつ分類可能な記録を自在に操れます。Poke Genieなら楽々とポケモンの評価ができ、全ポケモンコレクションの履歴を保存することができます。\rパワーアップや進化後のポケモンのPCがどのくらいか知りたいですか？Poke Genieの「パワーアップ\u0026amp;進化シミュレーション」機能を使えば、正確なCPやHP範囲とそれに必要なほしのすなやアメのコストを知ることができます。Poke Genieはの個体値を元に、最も正確な値を計算します。\nPoke Genieで必要なのはスクリーンショットのみで、ログインなどは必要ありません。また、Nianticの利用規約に則しているため安全です。インターネット接続は必要なく、オフラインで全機能をご利用いただけます。 Poke GenieはPokemon Goファンの必須アプリです！\n実際に使ってみたのですが、思った以上に操作が簡単かつ正確な個体値を判定してくれるのでもうブラウザの個体値チェッカーには戻れなくなりました。笑\n基本的な機能は以下です。\n機能\rCP arc を自動で合わせ、正確なポケモンレベルを計算（ピクセルレベルで最も正確に計測します）\r全ての個体値の組み合わせと個体値範囲を表示\rパワーアップや進化をシミュレーション\r正確なCPやHP範囲、パワーアップや進化ごとのほしのすなとアメのコストを表示 個体値の組み合わせを厳選するため、チームリーダーの評価結果を使用\rスキャン結果の履歴を保存\u2028IV、CP、スキャン日、スクリーンショット撮影日でスキャン結果を分類\r安全（ログインの必要なし）\rfオフラインで利用ga\rまた、Pro版も存在しており、以下の機能が追加されています。\nPro版機能\r2つの自動スキャンモード:\u20281. ワンクリックで未スキャンのスクリーンショットを読み込み\n2. アプリ起動時とバックグラウンドで起動に、自動で未スキャンのスクリーンショットを読み込み\rバックグラウンドでスキャン中は、バナー通知で個体値結果を瞬時に表示\r履歴と未確認スキャン画面を切り替え可能\r広告の非表示\rただ、無料版でも問題無く使えるので基本的には無料版で良いと思います。\nそれでは、使い方をご紹介致します。\n手順 前提 今回はAndroid端末にインストールして使用してみます。\niPhone版でもインストール後の使い方はおそらく同じだと思います。\nインストール まずは、コチラにアクセスしてください。\nすると、Poke Genieアプリのページが表示されると思うので、インストールボタンをクリックしてインストールを進めてください。\niPhoneはコチラ\n[adsense-responsive]\r[adsense-responsive]\rインストールが完了したら、開くボタンでアプリを起動しましょう。\n以下の画面が表示されればインストール完了です。\n設定 次に、個体値を自動で判定するための初期設定を行います。\n設定方法についてはアプリにも記載されているのでその通りに設定をするだけでOKです♪\n現在のトレーナーレベルと所属チームを設定してスタートボタンをクリックします。\nすると、Poke Genieのアプリがオーバーレイアイコン表示となります。\nこの状態でボックスから個体値を判定したポケモンを開きアイコンをタップしてみましょう。\nしゅごい。(脱帽)\nワンタッチで個体値が判定されるのはものすごいですね。。。\nしかも、ブラウザの個体値チェッカーの値を比較しても正確な値になっています。\n[adsense-responsive]\r100%バンギ持ってた！\nたまに読み取れないことがある しかし、たまに読み取り時に以下のような画面が表示される事があります。\nこれはポケモンの体などでCPの値が読み取れない時に表示されます。\nこの場合は対象項目の値を手入力して続けるボタンを押す事で判定を行う事が出来ます。\nたまにしか発生しないのでこれくらいは我慢出来ますね♪\n終わりに 以上のように、今まで個体値を判定するためにブラウザとポケモンGoを交互に開いて値を入力する作業が不要になりました。\n他にもキャプチャを保存したり、過去の判定履歴を見れたりと便利な機能が備わっているので、個体値判定をブラウザで行っている方は是非インストールしてみてはいかがでしょうか♪\n","date":"2018-09-16T23:13:36+09:00","image":"/wp-content/uploads/2018/09/installPokeGenieEye.png","permalink":"/2018/09/16/5926/","title":"【ポケモンGo】個体値を全自動で簡単に判定してくれる「Poke Genie」を使ってみた【育成に便利】"},{"content":"0埋め文字列を作りたい 業務システムやAPIを作成している方であれば、数値を任意の桁に0埋めした値を生成したい、というケースが少なからずあると思います。\nPythonでは、その辺りもとても簡単に実装する事出来ますので、　備忘録がてらご紹介致します。\n手順 前提 筆者のPythonの環境は以下となっております。\nバージョン確認 python --version Python 3.6.1 0埋めする桁数が決まっている場合 0埋めを行いたい桁数が仕様としてあらかじめ決まっている場合は、format関数を使う事で実現可能です。\n{0:00d}の部分を0埋めした桁数だけ数値を変えてください。\n桁数\rフォーマット\r２桁\r{0:02d}\r３桁\r{0:03d}\r４桁\r{0:04d}\r確認 以下のファイルを作成し、\nscript.py one = 1 ten = 10 oneHundred = 100 print(\u0026#39;0桁0詰め：{0:00d}\u0026#39;.format(one)) print(\u0026#39;0桁0詰め：{0:00d}\u0026#39;.format(ten)) print(\u0026#39;0桁0詰め：{0:00d}\u0026#39;.format(oneHundred)) print(\u0026#34;==================================\u0026#34;) print(\u0026#39;1桁0詰め：{0:01d}\u0026#39;.format(one)) print(\u0026#39;1桁0詰め：{0:01d}\u0026#39;.format(ten)) print(\u0026#39;1桁0詰め：{0:01d}\u0026#39;.format(oneHundred)) print(\u0026#34;==================================\u0026#34;) print(\u0026#39;2桁0詰め：{0:02d}\u0026#39;.format(one)) print(\u0026#39;2桁0詰め：{0:02d}\u0026#39;.format(ten)) print(\u0026#39;2桁0詰め：{0:02d}\u0026#39;.format(oneHundred)) print(\u0026#34;==================================\u0026#34;) print(\u0026#39;3桁0詰め：{0:03d}\u0026#39;.format(one)) print(\u0026#39;3桁0詰め：{0:03d}\u0026#39;.format(ten)) print(\u0026#39;3桁0詰め：{0:03d}\u0026#39;.format(oneHundred )) print(\u0026#34;==================================\u0026#34;) print(\u0026#39;4桁0詰め：{0:04d}\u0026#39;.format(one)) print(\u0026#39;4桁0詰め：{0:04d}\u0026#39;.format(ten)) print(\u0026#39;4桁0詰め：{0:04d}\u0026#39;.format(oneHundred )) print(\u0026#34;==================================\u0026#34;) 実行すると以下のようなログが出力されます。\n※0桁及び1桁指定の時にどうなるかも確認したかったので0~4桁指定にしています\n実行ログ $ python script.py 0桁0詰め：1 0桁0詰め：10 0桁0詰め：100 ================================== 1桁0詰め：1 1桁0詰め：10 1桁0詰め：100 ================================== 2桁0詰め：01 2桁0詰め：10 2桁0詰め：100 ================================== 3桁0詰め：001 3桁0詰め：010 3桁0詰め：100 ================================== 4桁0詰め：0001 4桁0詰め：0010 4桁0詰め：0100 ================================== エラーが起きる事無く正しく0埋めが行われていますね♪\r0埋めをする桁数を動的に指定したい場合 複雑な仕様により、0埋めの桁数を動的に指定したい場合は、zfill関数を使用します。\n先ほどのformat関数内の{0:00d}の部分には変数を埋め込む事が出来ないので動的に指定する事が出来ません。\n確認 以下のファイルを作成し、\nscript.py one = 1 ten = 10 oneHundred = 100 for index in range(5): print( str(index) + \u0026#39;桁0詰め：\u0026#39; + str(one).zfill(index)) print( str(index) + \u0026#39;桁0詰め：\u0026#39; + str(ten).zfill(index)) print( str(index) + \u0026#39;桁0詰め：\u0026#39; + str(oneHundred).zfill(index)) print(\u0026#34;==================================\u0026#34;) 実行すると以下のようなログが出力されます。\n※0桁及び1桁指定の時にどうなるかも確認したかったので0~4桁指定にしています\n実行ログ python script.py 0桁0詰め：1 0桁0詰め：10 0桁0詰め：100 ================================== 1桁0詰め：1 1桁0詰め：10 1桁0詰め：100 ================================== 2桁0詰め：01 2桁0詰め：10 2桁0詰め：100 ================================== 3桁0詰め：001 3桁0詰め：010 3桁0詰め：100 ================================== 4桁0詰め：0001 4桁0詰め：0010 4桁0詰め：0100 ================================== こちらもエラーが起きる事無く正しく0埋めされましたね♪\n","date":"2018-09-14T21:24:42+09:00","image":"/wp-content/uploads/2018/09/pythonNumToPaddedEye.png","permalink":"/2018/09/14/5911/","title":"【小技】Python3で数字を0埋めした文字列に変換する方法(動的も可能)【瞬殺】"},{"content":"GoProのマウスマウントは両手を自由に使える GoProはご存知の通り、海や雪山などのアクティブな環境での撮影にピッタリのアクションカメラです。\n一脚やスティック等に装着して撮影をすることがメインだと思います。\nしかし、激しい動きをする場合や両手でバランスを撮りたい場合は手持ちだとうまく撮影出来ずにブレブレの動画になってしまう可能性があります。\nそんな時は今回紹介するマウスマウントを使うことで両手を自由に使いながらのアクティブな撮影が可能になります。\n商品 GoPro ウェアラブルカメラ用アクセサリ バイトマウント + Floaty Amazon 【国内正規品】GoPro ウェアラブルカメラ用アクセサリ バイトマウント \u0026#43; Floaty (フローティー) HERO Session カメラ用 ASLSM-001 Amazon 【国内正規品】GoPro ウェアラブルカメラ用アクセサリ バイトマウント \u0026#43; Floaty (フローティー) ASLBM-001 特徴 こちらの商品は、GoProのカメラのマウスマウントとなります。\n口に加えて撮影を行うことで、バイクに乗りながらの撮影や両手で作業しながらの手元の撮影、スポーツなどでさらにダイナミックな映像を撮影する事が可能になります。\nPoint\rGoProカメラを浮かせることができ、離れた場所からも目に付きやすいFloaty(フローティー)を同梱\rハンズフリーで使用しやすく、どんな環境でもPOV(一人称視点)撮影が可能\r一体型のマウント用バックルを使用すれば、新たなPOVアングルで撮影するのも、パッと視点を変えるのも思いのまま。カメラも安全にマウントが可能\r人間工学に基づいた頑丈なデザインと素材で、快適にマウスマウントできるほか、手ブレなしで映像を撮影可能\r開封の儀 開封動画 [embed]https://youtu.be/saEOoilMuEk[/embed]\n外観 箱の外観はこんな感じです。\nお気付きの方もいるでしょうが、今回は間違えてGoPro HERO Session用のものを買ってしまいました。(汗)\nしかし、フローティは装着出来ませんでしたが、マウスマウント自体は問題無く取り付ける事が出来ました。\n良かったです。笑\n付属品 付属品はこんな感じです。\nPoint\rマウスマウント本体\rスクリューピン\rフローティ\r取扱説明書\r取り付け方 取り付け方はとても簡単です。\n他のマウントど同様にネジで固定するだけです。\nまた、こちらはクイックリリースマウントにも取り付ける事が出来るので、そのまま他の機材に取り付ける事が出来ます。\n使ってみた 先日、バイクに乗った際に使ってみたので、良かったら購入の際の参考にしてみてください♪\n[embed]https://youtu.be/agzR0-BAMAE[/embed]\n終わりに GoProは様々な環境での撮影に向いていますが、両手が自由になる事でさらに撮影の幅が広がります。\nバイクに乗っている方やサーフィンをしている方にはオススメのアクセサリーだと思うので、是非購入してみてはいかがでしょうか♪\n","date":"2018-09-12T14:58:33+09:00","image":"/wp-content/uploads/2018/09/goProMouthMountEye.png","permalink":"/2018/09/12/5862/","title":"【オススメアクセサリー】GoProのアクセサリー「バイトマウント」で撮影の幅を広げよう【マウスマウント】"},{"content":"ウルトラボーナスの詳細キター ウルトラボーナスとは？ 先日行われたサマーツアー2018で全3回に渡って行われた、グローバルチャレンジのミッションタスクを全て達成する事が出来たので、ウルトラボーナスがアンロックされる事が決まっていました！\nこのウルトラボーナスは、ポケモンGoをプレイしているユーザーであれば、誰でも効果を受けることが可能なので皆さん待ちわびていた事でしょう。\n焦らしに定評のある運営 しかし、ウルトラボーナスの内容は9月10日に発表されるとの事でしたが、夜22時を過ぎても発表されずにいたので皆さんソワソワしていた事でしょう・・・！\nそしてついに、先ほど詳細が発表されたので詳細をまとめて行きます！\nウルトラボーナスの内容 伝説のポケモン、フリーザー・サンダー・ファイヤーが登場 初代ポケモンの三鳥が伝説レイドバトルに登場します！\nつい先日まで、それぞれのイベンドデイが終わったばかりですが、最近復帰したばかりで取れなかった人もいるのでこれは嬉しい内容ですね。\nもちろん色違いも出るとの事。\n筆者感激\n9月14日（金）早朝から9月20日（木）までの間、世界中のジムの伝説レイドバトルに、伝説のポケモン、フリーザー・サンダー・ファイヤーが登場します。運が良ければそれぞれの色違いにも出会えるかもしれません！ カントー地方のポケモン大量発生 カントー図鑑のポケモンもフィールドで出やすくなるそうです！\n最近色違いが実装されたガーディも捕まえやすくなりそうですね♪\nまた、9月30日（日）まで、カントー地方で発見されたポケモンたちが、フィールドで多く出現したりレイドバトルに登場したりするようです！\nミュウツーがレイドバトルに参戦 これは衝撃です。\n今までは抽選型のEXレイドバトルでしか捕獲する事が出来なかったミュウツーが伝説レイドバトルとして登場します。\n筆者もEXレイドバトルに参加した事が無いのでぜひ捕まえたいです！\n9月21日（金）早朝から10月23日（火）までの間、あの伝説のポケモン、ミュウツーが伝説レイドバトルに登場するようになります！ これまでミュウツーは「EXレイド」に招待されたトレーナーだけが出会えるポケモンでしたが、この期間はすべてのトレーナーがミュウツーにジムで挑めるようになります。ミュウツーは強力なエスパータイプのポケモン。しっかり準備して、ミュウツーに挑戦しましょう！\n地域限定ポケモンゲットのチャンス これもヤバいです。\n日本では捕まえる事が出来なかった地域限定ポケモンがアローラ卵から孵化するとの事です！\n今までは現地に行くか交換でしたゲットが出来なかったので、このタイミングでフレンドとギフト交換をしまくって必ず図鑑に載せましょう！\n9月14日（金）早朝から9月30日（日）までの間に手に入れた フレンドからのギフトで手に入る「7kmタマゴ」から、アローラのすがたのポケモンに加え、カモネギ・ガルーラ・バリヤード・ケンタロスがかえるようになります！ いずれも一部の地域でしか見つからなかったポケモンですので、この機会にフレンドとギフトを贈りあってカントー地方のポケモン図鑑を完成させましょう！\n終わりに ものすごい内容のウルトラボーナスが発表されましたね。\n皆さんもこのボーナスを十分に利用して、さらにポケモンGoを楽しんでみてはいかがでしょうか\n9月14日からはお祭りだぞぉぉぉ！！！\n","date":"2018-09-11T00:21:40+09:00","image":"/wp-content/uploads/2018/09/pokemonGoUltraBonusEye.png","permalink":"/2018/09/11/5783/","title":"【ポケモンGO】ウルトラボーナスの内容が復帰勢にどんぴしゃな件【伝説フィーバー】"},{"content":"ポケモンGo Plus在庫切れ問題 ポケモンGo Plusとは？ ポケモンGoでは、実際にアプリを開きながらポケストップを回したり、ポケモンをゲットする必要があります。\nその場合、以下の問題があります。\nPoint\rバッテーリー消費が激しいので、長時間プレイするには予備バッテリーが必須\rながらプレイになってしまうので、事故に繋がってしまったり通行の妨げになってしまう可能性がある\r他のアプリと同時操作が出来ない\r特に前者の2点は結構深刻だと思います。\nしかし、ポケモンGo Plusを利用することで上記の問題を解決する事が可能です。\nポケモンGo Plusには以下のようなメリットがあります。\nメリット\rアプリを見なくてもポケモンの捕獲が出来る\rアプリを見なくてもポケストップを回す事が出来る\r本体のバッテリー消費を抑えれる\r他のアプリを開きながらポケモンGoを遊ぶ事が出来る\rアプリを開いていなくてもタマゴ不可の距離を稼ぐ事が出来る\rその他の細かい部分については今回はご紹介は割愛しますが、パッと考えても上記のようなメリットがあります！\nしかし、もちろんデメリットもあります。\nデメリット\rお高い\r片手でデバイスを操作する必要がある\rポケモンGoをバックグラウンドで起動しておく必要がある\rBluetoothで接続する必要がある\rモンスターボールが無いとポケモンを捕まえられない\r1ポケモンに1スローしかしないので、捕獲確率は低い\r木の実は使えない\r電池交換式\rなどなどのデメリットも存在しています\nすでに生産中止している そして、こちらが一番絶望的なのですが、ポケモンGo Plusはすでに生産中止しているそうです！\nおい！！\n一応、ポケモンセンターオンラインにて2018年11月4日（金）より再販される事が決定しているようです。\n店頭販売は翌日の11月5日との事。\nメルカリやヤフオクでは一応出品されていますが、正規品では無いものが多く、不具合や動作不良が報告されていますので、そちらでの購入はオススメしません。。。\nしかし、\n今すぐ欲しい！！\nというよく深きポケモンマスターの方もいらっしゃると思います。。。\nそんな方に今回は、完全上位互換の商品をご紹介致します。\n商品 ポケモンGo用　Pocket Auto Catch こちらの商品は、ポケモンGo Plusのように、Bluetooth通信で連動する事が出来るデバイスとなっています。\nAmazon ポケモンGO 用 ポケットオートキャッチ 日本語パッケージ 日本語説明書付き Brook【正規品】 特徴 ポケモンGo Plusと比較して以下のような差があります。\n機能\rポケモンGo Plus\rPocket Auto Catch\r価格\r3,780円\r7,980円\r捕獲\rボタンを押す\r自動\rポケストップ\rボタンを押す\r自動\r電池形式\r電池交換式\rUSB充電式\r各種設定\r無し\rポケストップON/OFF\n自動捕獲ON/OFF\n未取得ポケモン捕獲ON/OFF\nバイブレーションON/OFF\rちょっとお値段は高いですが、それに見合った機能が備わっていると思います。\n特にポケモンの自動捕獲は魅力的ですよね♪\n開封の儀 では、実際に購入してみたので開封してきましょう♪\n開封動画 [embed]https://youtu.be/eddlecd_NFs[/embed]\n外観 パッケージはこんな感じです。\n付属品 それでは、開封です。\nぱかっ！！\n付属品は以下の通りです。\n付属品\rPokemon Auto Catch本体\r専用USB充電ケーブル\rリストバンド\r取扱説明書\r保証書\r本体はこんな感じでかなり小さいです。\nリストバンドはゴム製です。\nしっかり固定されるので外れる事は無さそうです。\n付けるとこんな感じ。\nUSB充電器は専用のものとなっています。\nコード自体はかなり短いので、充電しながらの使用はちょっと使いづらいかもしれませんね。\n付けるとこんな感じ。\n使ってみた 実際に購入して使ってみましたので、使用感をまとめてみます。\n充電方法 充電方法はとても簡単です。\n付属の充電ケーブルに本体をセットしてUSBポートに接続するだけです。\n正しく充電が始まると以下のような表示になります。\n接続方法 接続方法も簡単です。\nまずは、端末のBluetoothの設定をONにした状態で、ポケモンGoアプリからポケモンGo Plusの設定画面を表示します。\nその状態でPokemon Auto Catchの電源ボタンを押しましょう。\nするとアプリ側でポケモンGo Plusデバイスとして認識されると思いますので、そちらをタップします。\n正しく接続がされるとチュートリアルが表示されます。\n接続したデバイスはポケモンGo Plusではないので適当にぽちぽちして飛ばして問題ありません。笑\nチュートリアルを全て見終わりホーム画面に戻ると右側にポケモンGoのアイコンが追加されたと思います。\nこれで接続は完了です。\n有効化 では、実際に有効化してみましょう！\nポケモンGoのアイコンをタップすると以下のようなメッセージが表示されるので、Pokemon Auto Catchの電源ボタンをタッチしましょう。\nすると、アプリ側で以下のようなメッセージが出るので、そのままちょっと待てば接続が完了すると思います。\nもし、このタイミングで接続出来ない場合は、Pokemon Auto Catche側の接続設定がOFFになっている可能性があるので、取扱説明書を見ながら設定に変更してからリトライしてみてください。\n確認 では、この状態でポケストップやポケモンがいるところを歩いてみましょう。\nおぉ。\nおぉ！\nぐぬぬっっっ！\nしかし、ちゃんと動いているようですね。\nこれは素晴らしいです♪\nちなみに、星の砂3倍期間中に電動のレンタサイクルで運動がてら都内を走り回ってたら3日ほどで1万くらいから80万近くまで貯まりました。。。\nしゅごい。(小並感)\n都内のレンタサイクルなら以下がオススメです♪\n[travenist_link id=\"885\"]\r試しに使ってみた感想は以下の記事にまとめていますので興味があれば参考にしてみてください♪\n[travenist_link id=\"1836\"]\r終わりに 以上のように、簡単にポケモンGoを作業を自動化する事が可能になります。\nただ、公式のデバイスではないため、不具合やアカウント停止などの可能性は0では無いので、自己責任の上で常識的な範囲で利用してみてください♪\n","date":"2018-09-10T23:18:22+09:00","image":"/wp-content/uploads/2018/09/pokemonAutoCatchEye.png","permalink":"/2018/09/10/5756/","title":"【ポケモンGo Plusの完全上位互換】BrookのPocket Auto Catchでポケモン自動捕獲が捗りまくる件【全自動】"},{"content":"追い風とも言えるニュースが！ タイミング良過ぎな新情報 この記事のわずか2日前に、ポケモンGoを2年ぶりに復帰したという記事を投稿しました。\n関連記事 【2018年版】ポケモンGoを2年振りに復帰したら浦島太郎状態だったので新機能をおさらいしてみた！【祝☆復帰】 2018/09/05 4022文字 約9分で読めます そんな矢先、新たなニュースが舞い込んできました。\nなん・・・だと・・・？！\nどうやら、2016年7月から8月までの間に捕まえたポケモンを交換すると、必ずキラポケモンになるようですね。\n当時のアカウントで復帰出来てよかった〜。しみじみ\n交換後の個体値も上昇 また、\n交換でキラポケモンになったポケモンは、従来にも増して強くなるようです。\nとある通り、交換でキラポケモンになった場合の個体値の最低ラインが10-10-10から12-12-12に底上げされました。\nこれも、復帰勢が強いポケモンを入手するチャンスが広がるので助かりますね♪\nキラポケモン確定の条件 しかし、キラポケモン確定になるにはいくつか条件があるようです。\nPoint\r2016年7月から8月までの間に捕まえたポケモンである事\rこれまで手にしたキラポケモンの数が10匹未満のトレーナー同士である事\rとの記載が公式サイトにあります。\nしかし、後者の\nこれまで手にしたキラポケモンの数が10匹未満のトレーナー同士である事\nについてはちょっと怪しい部分があります。\nいくつかの攻略サイトでは、2016年7月から8月までの間に捕まえたポケモンを交換に出すトレーナーがこれまで手にしたキラポケモンの数が10匹未満であれば、もう片方のトレーナーはこれまで手にしたキラポケモンの数が10匹以上でも確定でキラポケモンになる、という検証結果です。\n確かに公式サイトの説明との差異があり、混乱してしまいますね。\nバグなのか？説明ミスなのか？ この件はアプリの仕様が間違っているか、公式サイトの説明が間違っているかのいずれかなので、今後公式から何かしらの回答が出ると思われます。\nなので、それまでは自己責任で交換をしてみた方が良いと思われます。\n終わりに とはいえ、確定でキラポケモンがゲット出来るのは復帰勢としてはとてもありがたいです。\n筆者も公式の回答を待ってから、過去のポケモンを使ってキラポケモンを狙ってみようと思いますので、皆さんも対象期間中にゲットしたポケモンがいる場合は大切に残しておくと良いでしょう。\n","date":"2018-09-07T01:11:20+09:00","image":"/wp-content/uploads/2018/09/pokemonGoKiraPokeEye.png","permalink":"/2018/09/07/5747/","title":"【ポケモンGo復帰勢歓喜】キラポケモンを確定交換出来るようになったよ"},{"content":"ドラクエの人気モンスターがマグネットシールに コラボキャンペーン 先日、ローソンとドラゴンクエストライバルズのコラボイベントが実施されていました！\nローソン限定で伊藤園の飲料キャンペーンを実施！\n伊藤園の「お～いお茶ほうじ茶600ml」もしくは「リラックスジャスミンティー600ml」を１本購入すると、モンスターマグネットシート１つと、PC版『ドラゴンクエストライバルズ』で入力できるプロダクトコードがついてきます。\nほう・・・。\nちなみに、秋葉原にあるドラクエコラボローソンでは、このようなコラボ商品を普通の店舗よりより多くより長く取り扱っているので、行ってみると良いですね♪\n[travenist_link id=\"1641\"]\r2セット全12種類ですか。\nドラクエ好きならコンプリートするしかありませんね！(使命感)\nドラゴンクエストライバルズで使えるアイテムコード付き また、こちらのマグネットシールにはスマホ版アプリのドラゴンクエストライバルで使えるアイテムコードがついています！\n1アカウントで10個のアイテムコードを入力可能との事なのでどんどん買って入力しましょう！\n現在は終了 このコラボキャンペーンは2018年8月21日（火）～景品が無くなり次第終了との事なので、大体のローソンでは既にキャンペーン終了となっていると思いますので、ご注意ください。\n開封の儀 対象商品 とりあえず、お～いお茶ほうじ茶600mlを購入してみました。\nこちらはスライムセットがおまけとしてついています。\nマグネットシール 大人の経済力を発揮して1セットコンプリート。\n大人の経済力を遺憾なく発揮して2セット目コンプリート。\nそして全種コンプリート！\nエンゼルスライムきゃわわ。。。！\nアイテムコード こちらがドラゴンクエストライバルズで使用出来るアイテムコードですね。\n冷蔵庫につけてみた 早速、マグネットシールのホームグラウンドの冷蔵庫に全部くっつけてみました。\nモンスターハウスだ！！(トラウマ)\nテンション上がりますね♪\n終わりに 飲み物のおまけとしてはクオリティがとても高く、大満足のキャンペーンでした。\nローソンはドラゴンクエストシリーズと様々なコラボキャンペーンを定期的にやっているので、皆さんもこれからチェックしてみてはいかがでしょうか♪\n","date":"2018-09-06T23:13:30+09:00","image":"/wp-content/uploads/2018/09/lawsonDqMagnetEye.png","permalink":"/2018/09/06/5702/","title":"【マグネットシール】ローソンの飲み物についていたドラゴンクエストライバルズのおまけをコンプリートしてみた【伊藤園】"},{"content":"久しぶりのポケモンGOが面白すぎる問題 友達に勧められて再開 先日、友人と遊んでいた際にその友人がポケモンGOをやっていたのでちょっと見してもらったところ、今はルビサファ世代のポケモンが実装されている事にびっくりしました！\n筆者はがっつりポケモン世代です。\nルビサファ世代はアドバンスでアホほどやりこんだ記憶があります。\n当時は、ポケモンの種族値/個体値/努力値を理解し始めた時期なので厳選作業の沼にハマり始めた時期ですね！(白目)\n今は2年前に比べていろんな新機能が増えてて楽しいからやり直してみれば？と言われ、興味本位で再開する事に決めました。\n2年前のアカウントでログイン成功 筆者はポケモンGOがリリースされた2018年7月22日にすぐさまインストールをし、1週間毎日ミニリューの巣に足を運び深夜まで徘徊し、カイリューに進化させ、技と個体値が最低レベルだったことに絶望し、そこで引退をしたヘタレです。笑\nただ、当時の時点でトレーナーレベルが23になっていたので、せっかくならそのアカウントで再開出来ればな〜、と思いました。\nしかし、なんとその願いを叶えることが可能なのです。\nそう、Googleならね♪(某ジョブス風)\nポケモンGOは、Android端末の場合はGoogleアカウントに紐付いてデータが登録されます。\nですので、当時のGoogleアカウントの情報(ID/PW)が分かるのであれば、そのデータを引き継いで再開することが可能なのです！\n筆者も2年振りにログインすることが出来ました！\n感激です。。。！\n浦島太郎状態なので当時と今の差をまとめてみようの巻 では、再開するにあたって当時実装されていなかった機能をおさらいしてみましょう。\n相棒ポケモン 自分の手持ちの好きなポケモンを選ぶことで、連れて歩く事が出来ます。\n相棒ポケモンを連れて歩くことで様々なメリットがあります。\nアメをゲット 相棒ポケモンに設定してから一定距離歩く事で、設定したポケモンのアメを貰う事が出来ます。\nアメは進化や育成には必須なアイテムなので、珍しいポケモンを相棒ポケモンに設定する事で、効率よくポケモンのアメを入手する事が出来ます♪\nしかも、たまに2個ゲット出来るようです！\nしゅごい！(小並感)\nしかし、ポケモンによってアメをもらえる距離が1km/3km/5km/20kmと異なり、レアなポケモンほど距離が長くなります。\n一部のポケモンは特別な動きをする また、特定のポケモンはトレーナーの肩に乗ったり抱きかかえられたり、特別な動きをするようになります。\n肩に乗るポケモン 第一世代\rポッポ\rオニスズメ\rビードル\rキャタピー\r第二世代\rイーブイ\rピカチュウ\rネイティ\rヒマナッツ\r第三世代\rケムッソ\rマイナン\r抱っこされるポケモン 第二世代\rピチュー\rピィ\rトゲピー\r第三世代\rブビィ\rエレキッド\rムチュール\rレイドバトル 参加条件はトレーナーレベル5以上 レイドバトルに参加するには、トレーナーレベルが5以上である必要があります。\nまた、参加1回ごとにレイドパスというアイテムが必要になります。\nこのアイテムはジムで1日1枚入手でき、最大1枚まで所持出来ます。\nまた、課金アイテムでプレミアムレイドパスがもらえます。\nこちらは上限が無いのでリアルマネーに余裕のある人は、こちらを購入する事で1日に何回もレイドバトルに挑む事が可能になります♪\n毎日開催 レイドバトルは朝5時から21時30分まで毎日開催しています。\n開催時間外は、レイドバトルは全く発生しなくなるので、通常のジム戦しか出来ないため次の日まで待つしかありません。\n対象は全てのジム レイドバトルは全てのジムで発生するバトルイベントです。\nスポンサージムのみという訳では無く全てのジムで発生する可能性があり、出現するボスや時間は完全にランダムで決定します。\n現在地付近でレイドバトルの準備(レイドボスの卵)が設置されると、以下のようなメッセージが表示されます。\n付近のレイドバトルの情報は以下の画面で確認する事が可能です。\n時間だけが表示されているのはレイドバトルが開始される時間で、進行中と共に表示されている時間はレイドバトルの残り時間です。\nレイドバトルの難易度は5段階 レイドバトルには5段階の難易度が設定されており、難易度が上がるにつれて強いボスポケモンが出現し、CPも高くなります。\n慣れるまでは難易度2~3のボスポケモンに挑戦すると良いでしょう。\nまた、難易度5は必ず伝説のポケモンが出現します。\n期間限定イベントなので、ゲットし忘れないように気をつけましょう！\n協力バトル レイドバトルはフレンドや他のプレイヤーと協力して最大20人でボスポケモンを倒す事になります。\nなので、自分が弱くても他のプレイヤーに助けてもらって強力なポケモンをゲットする事も可能です♪\n秋葉原や渋谷などに行けば多くのプレイヤーがレイドバトルをやっているので、そこに参加するのも良いかもしれませんね！\nレイドバトル限定ポケモン レイドバトルでしか出現しないポケモンもいます。\n現在はアブソルとクチートはレイドバトル限定のポケモンなので、見つけたら必ずゲットするようにしましょう！\nアイテムゲット レイドバトルに無事勝利すると、アイテムをゲットする事があります。\n星の砂や各種木の実、たまに不思議なアメもゲット出来ます。\n不思議なアメは伝説ポケモンの育成には必要不可欠なので頑張って勝つように頑張りましょう！\nボスポケモンゲット レイドバトルに無事勝利すると、ボスポケモンをゲットするチャンスが発生します。\nここでゲット出来るポケモンは個体値も高く設定されているため、とても強いです！\nしかし、バトルの成績によって挑戦出来るボール数が決まるので、木の実をフル活用して是非とも捕獲しましょう！\nイベント 今はゲーム内やリアル世界で様々なイベントが開催されています。\nイベント期間中はレアなポケモンが大量に出現したりするので、イベント情報は公式サイト等で常にチェックするようにしましょう♪\n交換 フレンドとのポケモン交換機能も実装されています。\nただし、未入手のポケモンの交換には大量の星の砂が必要になる場合があるので気をつけましょう。\n個体値が再設定される 交換に出したポケモンは個体値がリセットされます。\nなので、交換に出す事で強くなる事もあれば弱くなる事もあるので気をつけましょう！\nキラポケモン 2018年7月26日よりフレンドとポケモン交換をすると、10%ほどの確率でに両方のポケモンがキラポケモンに変わる事があります。キラポケモンとは普通とは違った背景になっており、色違いポケモンとも別物です。\nまた、キラポケモンは普通のポケモンよりも育成に必要なアメの数が少なくなっており、進化後もキラポケモンのままです。\n一説によると、捕まえた日付が古いポケモンほどキラポケモンになる確率が高いとの情報があります。\n真相は果たして・・・。\n色違い 原作のゲーム同様、色違いポケモンも随時実装されています。\nただ、こちらはキラポケモンとは違い、通常カラーのポケモンとは差異は無いので、ただのコレクション要素と言えるでしょう。\n技マシン ポケモンGOにも技マシンが実装されており、覚えている技を変える事が可能です。\n基本的には現在覚えている技以外の中からランダムで覚える事になるので、技が2種類しかない場合は必ずもう片方の技になります。\nこれは素晴らしいですね・・！\n基本的にはレイドバトルの勝利報酬でたまにもらえますが、スペシャルタスクの報酬に含まれている事もあります。\nわざマシンには以下の2種類があります。\nわざマシンノーマル 現在覚えている技以外の新しい通常わざを覚えます。\nわざマシンスペシャル 新しいチャージわざを覚えます。\n個体値鑑定 ポケモンを調べてもらう機能というものがあり、こちらは各ポケモンにランダムで設定されている個体値を、チームリーダーがセリフで判定してくれます。\nチェッカーを使わずにゲーム内である程度の個体値を確認する事が出来るので厳選に便利ですよね♪\nまとめてアメに交換 捕まえたポケモンを複数選択してまとめてアメに変える事が出来ます。\nこれ、当時実装されていなかったので、捕まえたはいいがボックス圧迫の整理を一匹ずつ選択して博士に送ってアメにしないといけなかったので、とても便利に感じます！\n控えめに言って、最\u0026高\nポケモンリサーチ ポケモンリサーチ機能では、デイリーで様々なタスクをこなす事でアイテムやポケモンを入手する事が可能です。\n画面右下の双眼鏡マークから開く事が出来ます。\nリサーチ機能には大きく分けて2種類あります。\nフィールドリサーチ フィールドリサーチは、ポケストップを回すことでタスクを入手する事が出来ます。\nポケモンを捕まえたり、ジムバトルやレイドに挑戦したり、相棒ポケモンからアメを貰ったり等の軽めの内容が課題となっています。\nまた、ポケストップから入手出来るタスクは1日ごとに変わりますが、その日のうちであればキャンセルしてもまた同じタスクを入手する事が出来ます。\nこちらは同時に最大3タスクを持つ事が出来ます。\nまた、タスクをクリアすると1日1スタンプ貰う事ができ、7日分貯めれば伝説のポケモンと遭遇するチャンスがもらえます。\n貴重なチャンスなので毎日スタンプを貰うように頑張りましょう！\nスペシャルリサーチ スペシャルリサーチは、ウィロー博士から直接依頼されます。\n課題をクリアしていくとXPやわざマシン、星の砂、レイドパスなどのレア報酬を貰うことが出来ます。\n現在は以下の2つのスペシャルサーチを行うことが出来ます。\nそれぞれ最後までタスクをクリアすると幻のポケモンに遭遇する事が出来るらしいので頑張りましょう！\n終わりに 以上のように、この2年間で多くの機能が追加されており、何十倍も楽しめるゲームに進化していました！\nこれから地道に頑張ってみなさんに追いつこうと思いますので、同じように引退してしまった方も、これを機に復帰してみてはいかがでしょうか♪\n","date":"2018-09-05T22:53:05+09:00","image":"/wp-content/uploads/2018/09/restartPokemonGoEye.png","permalink":"/2018/09/05/5614/","title":"【2018年版】ポケモンGoを2年振りに復帰したら浦島太郎状態だったので新機能をおさらいしてみた！【祝☆復帰】"},{"content":"Windows10に念願のパッケージ管理システム パッケージ管理システム？ 皆さんはパッケージ管理システムをご存知でしょうか？\nパッケージ管理システムといえば、MacだとHomebrew、Linuxだとyumやapt-getが有名ですよね。\nWindowsには長らくパッケージ管理システムがありませんでしたが、Windows10以でPackageManagementという名称で標準搭載されるようになりました！\nパッケージ管理システムの利点 では、パッケージ管理システムを導入するとどう変わるのか？簡単に説明しましょう。\nインストールが簡単 使わない場合 ブラウザを立ち上げる\rブラウザでダウンロードページを探す\rブラウザでダウンロードページを開く\rインストーラーをダウンロード\rインストーラーを実行\r使う場合 ターミナルを立ち上げる\rパッケージ管理ツールでインストールコマンドを叩く\rアンインストールが簡単 使わない場合 コントロールパネル or 設定画面 を開く\rプログラムと機能 or アプリと機能 を開く\rアプリを選択し、アプリをアンインストール\r使う場合 ターミナルを立ち上げる\rパッケージ管理ツールでアンインストールコマンドを叩く\r管理が簡単 使わない場合 コントロールパネル or 設定画面 を開く\rプログラムと機能 or アプリと機能 を開く\r自分でインストールしたアプリを一覧で把握する\r使う場合 ターミナルを立ち上げる\rパッケージ管理ツールでインストール済み一覧コマンドを叩く\rインストールも簡単 そんな便利なパッケージ管理ツールのインストールは、とても簡単に出来ます。\nでは、早速インストールをしてみましょう。\n手順 パッケージプロバイダーのインストール パッケージ管理ソフトを利用するには、まずはPowerShellを管理者権限で起動します。\n次に以下のコマンドで利用可能なパッケージプロバイダーを見てみましょう。\ncommand Find-PackageProvider すると、初回の場合は以下のようなメッセージが表示されると思うので、Yを入力してエンターを押してください。\nメッセージ プロバイダー \u0026#39;nuget v2.8.5.208\u0026#39; がインストールされていません。 nuget は、https://oneget.org/Microsoft.PackageManagement.NuGetProvider-2.8.5.208.dll から手動でダウンロードしてインストールすることができます。 PackageManagement で nuget を自動的にダウンロードしてインストールしますか? [Y] はい(Y) [N] いいえ(N) [S] 中断(S) [?] ヘルプ (既定値は \u0026#34;Y\u0026#34;): Y すると以下のように利用可能なパッケージプロバイダーが表示されます。\nログ Name Version Source Summary ---- ------- ------ ------- nuget 2.8.5.208 https://onege... NuGet provider for the OneGet meta-package manager psl 1.0.0.210 https://onege... psl provider for the OneGet meta-package manager chocolatey 2.8.5.130 https://onege... ChocolateyPrototype provider for the OneGet meta-pa... PowerShellGet 1.6.7 PSGallery PowerShell module with commands for discovering, in... ChocolateyGet 1.0.0.1 PSGallery An PowerShell OneGet provider that discovers packag... DockerMsftProvider 1.0.0.5 PSGallery PowerShell module with commands for discovering, in... NanoServerPackage 1.0.1.0 PSGallery A PackageManagement provider to Discover, Save and... DockerMsftProviderInsider 1.0.0.2 PSGallery PowerShell module with commands for discovering, in... GistProvider 0.6 PSGallery Gist-as-a-Package - PackageManagement PowerShell P... DockerProvider 0.0.0.3 PSGallery PowerShell module with commands for discovering, in... ContainerImage 0.6.4.0 PSGallery This is a PackageManagement provider module which h... GitLabProvider 1.3.7 PSGallery GitLab PackageManagement provider TSDProvider 0.2 PSGallery PowerShell PackageManager provider to search \u0026amp; inst... GitHubProvider 0.5 PSGallery GitHub-as-a-Package - PackageManagement PowerShell ... OfficeProvider 1.0.0.1 PSGallery OfficeProvider allows users to install Microsoft Of... MyAlbum 0.1.2 PSGallery MyAlbum provider discovers the photos in your remot... WSAProvider 1.0.0.4 PSGallery Provider to Discover, Install and inventory windows... AppxGet 0.1.0.1 PSGallery Powershell Package Management (OneGet) Provider for... 次に実際にパッケージプロバイダーをインストールします。\n今回はchocolateyをインストールしてみます。\ncommand Get-PackageProvider chocolatey すると、以下のようなメッセージが表示されるのでYを入力してエンターを押しましょう。\nメッセージ プロバイダー \u0026#39;chocolatey v2.8.5.130\u0026#39; がインストールされていません。 chocolatey は、https://oneget.org/ChocolateyPrototype-2.8.5.130.exe から手動でダウンロードしてインストールすることができます。 PackageManagement で chocolatey を自動的にダウンロードしてインストールしますか? [Y] はい(Y) [N] いいえ(N) [S] 中断(S) [?] ヘルプ (既定値は \u0026#34;Y\u0026#34;): Y これでパッケージプロバイダーのインストールは完了です。\nログ Name Version DynamicOptions ---- ------- -------------- Chocolatey 2.8.5.130 SkipDependencies, ContinueOnFailure, ExcludeVersion, ForceX86, PackageSave... 初期設定 では、次にChocolateyの初期設定を行いましょう。\nこちらの設定をしておかないと正常にインストール出来ません。\n以下のコマンドを実行してください。\ncommand Set-ExecutionPolicy RemoteSigned 以下のようなメッセージが表示されるので、Yを入力しエンターを押してください。\nメッセージ 実行ポリシーの変更 実行ポリシーは、信頼されていないスクリプトからの保護に役立ちます。実行ポリシーを変更すると、about_Execution_Policies のヘルプ トピック (https://go.microsoft.com/fwlink/?LinkID=135170) で説明されているセキュリティ上の危険にさらされる可能性があります。実行ポリシーを変更しますか? [Y] はい(Y) [A] すべて続行(A) [N] いいえ(N) [L] すべて無視(L) [S] 中断(S) [?] ヘルプ (既定値は \u0026#34;N\u0026#34;): Y 何も表示されなければ初期設定は完了です。\nアプリケーションのインストール では、実際にアプリケーションをインストールしてみましょう。\n今回はGoogleChromeをインストールしてみましょう。\nまずは以下のコマンドでChromeがあるか確認してみましょう。\ncommand Find-Package chrome すると以下のように大量にヒットしますが、とりあえず一番最初に表示されているGoogleChromeをインストールしましょう。\nログ Name Version Source Summary ---- ------- ------ ------- GoogleChrome 68.0.3440.10600 chocolatey Chrome is a fast, simple, and secure web browser, b... google-chrome-x64 47.0.2526.81 chocolatey Deprecated. Install [GoogleChrome](/packages/Google... adblockpluschrome 1.12.4 chocolatey Chrome extension that blocks advertising while you ... selenium-chrome-driver 2.41 chocolatey Chrome Driver is a WebDriver implementation that en... GoogleChrome-AllUsers 26.0.1410.64 chocolatey Google Chrome Offline Installer- for all users chromedriver 2.410 chocolatey Downloads and installs Chromedriver.exe from http:/... https-everywhere-chrome 2016.12.19 chocolatey Automatically use HTTPS security on many sites. GoogleChrome.Canary 28.0.1461.0 chocolatey Google Chrome Canary has the newest of the new Chro... ChromeDriver2 2.25 chocolatey ChromeDriver is a webdriver server for chrome GoogleChrome.Dev 27.0.1453.12 chocolatey Google Chrome Dev is released once or twice a week ... chromepass 1.45 chocolatey Chrome Browser Password Recovery google-hangouts-chrome 2017.110.418.20 chocolatey Google Hangouts Chrome Extension EthanBrown.ChromeDevExtensions 0.0.2 chocolatey Chrome extensions for web development. EthanBrown.ChromeCanaryDevE... 0.0.2 chocolatey Chrome Canary extensions for web development. chromecookiesview 1.46 chocolatey View/delete cookies of Chrome Web browser chromecacheview 1.70 chocolatey Cache viewer for Google Chrome Web browser plex-chrome 2.12.8.002018... chocolatey Plex Chrome extension ipwhoisflags-chrome 3.42.20170115 chocolatey IP Whois and Flags Chrome extension skype-chrome 8.5.0.91671 chocolatey Skpye Chrome extension chrome-remote-desktop-chrome 63.0.3239.17 chocolatey Chrome Remote Desktop application speedtest-chrome 1.0.7.20170115 chocolatey Speedtest by Ooka Chrome extension trello-chrome 0.0.48.20170115 chocolatey Trello extension for Chrome ietab-chrome 10.1.11.1 chocolatey IE Tab for Chrome extension choco-chrome-ext 1.0.0.8 chocolatey This is an unofficial Chocolatey Extension for Goog... google-voice-chrome 2.4.4.20170115 chocolatey Google Voice Chrome extension evernote-chrome 6.10.3 chocolatey Evernote Chrome extension pushbullet-chrome 336.0.20170115 chocolatey Pushbullet Chrome extension feedly-chrome 35.0.20170115 chocolatey feedly Chrome extension chromehistoryview 1.32 chocolatey View the browsing history of Chrome Web browser checkerplusforgmail-chrome 19.3.8 chocolatey Checker Plus for Gmail Chrome extension amazon-assistant-chrome 10.1610.8.1201 chocolatey Amazon Assistant Chrome extension chromelpass-chrome 2.8.1 chocolatey KeePass integration for Chrome using KeePassHttp save-to-pocket-chrome 2.1.17 chocolatey Save to Pocket Chrome Extension ebay-chrome 4.2.25 chocolatey eBay Chrome extension momentum-chrome 0.92.2 chocolatey Momentum Chrome extension office-online-chrome 1.5.0.20170115 chocolatey Microsoft Office Online Chrome extension gsuite-training-chrome 1.8.11 chocolatey G Suite Training for Chrome extension quick-javascript-switcher-c... 1.4.1.20170115 chocolatey Quick way to enable/disable Javascript in Chrome mini-squeezebox-control-chrome 1.2.20170115 chocolatey Mini Squeezebox Control Chrome extension. google-cast-chrome 15.1120.0.4 chocolatey ![Screenshot of Google Cast for Chrome](https://lh6... mightytext-chrome 19.6.20170115 chocolatey MightyText - SMS from PC and Text from Computer addtoany-chrome 3.0.4 chocolatey Chrome extension to add share options to MANY popul... lastpass-chrome 4.3.0 chocolatey LastPass remembers all your passwords, so you don\u0026#39;t... wot-chrome 3.2.1 chocolatey The official Web of Trust Chrome Extension. google-chrome-for-enterprise 67.0.3396.87 chocolatey Google Chrome for Enterprise gsuite-new-tab-chrome 1.5.3 chocolatey Chrome new tab replacement for G Suite users. amazon-music-chrome 1.4 chocolatey ![Screenshot of Amazon Music for Chrome](https://lh... utorrent-easy-client-chrome 2.6.8 chocolatey uTorrent easy client allows you to monitor and cont... desktop-notifications-for-a... 4.5.2 chocolatey Receive Android notifications on your desktop open-screenshot-chrome 24.0 chocolatey ![Screenshot of Open Screenshot](https://lh3.google... vnc-viewer-chrome 1.2.2.15132 chocolatey ###Connects to your computers anywhere in the world... back-to-backspace-chrome 1.3.0 chocolatey This Chrome extension re-enables the backspace key ... slickrss-chrome 2.993 chocolatey Slick RSS is a RSS reader that works inside of Chrome. googlechrome-authy 2.3.0 chocolatey Authy for PC\u0026#39;s makes Two-Factor Authentication a tr... tineye-chrome 1.1.5 chocolatey TinEye for Chrome lets you search for other instanc... googlechrome-zenhub 1.0.0 chocolatey Build your team\u0026#39;s ultimate GitHub workflow. utorrent-link-sender-chrome 0.0.9 chocolatey uTorrent Link Sender adds a context menu selection ... chromehue-chrome 1.1.6 chocolatey A Chrome extention to control your Phillips Hue lig... reveye-chrome 1.4.4 chocolatey Right click an image to search for it on Google, Bi... chromecookiebackup 1.0.0 chocolatey A Windows Tool for backing up and restoring Chrome\u0026#39;... googlechrome-github-expandi... 1.0.0 chocolatey Chrome extension that improves the GitHub experience. genius-chrome 0.1.2 chocolatey Genius lets you add line-by-line annotations to any... teamviewer-chrome 13.0.281 chocolatey TeamViewer Chrome app. save-to-tonido-chrome 1.1.0 chocolatey Save to Tonido allows you to save documents to your... google-calendar-chrome 2.8 chocolatey Easily check Google Calendar and add new events fro... trafficlight-chrome 1.1.0.9 chocolatey Bitdefender TrafficLight - Cutting edge browser pro... grammarly-chrome 14.821.1.1383 chocolatey Grammarly leaves outdated spelling and grammar chec... earthview-chrome 2.18.5 chocolatey Earth View from Google Earth - Experience a beautif... chrometana-chrome 2.0.1 chocolatey Chrometana lets your redirect Bing to the search en... save-to-google-drive-chrome 2.1.1 chocolatey Save web content or screen capture directly to Goog... google-translate-chrome 2.0.7 chocolatey Google Translate - View translations easily as you ... google-dictionary-chrome 4.0.8 chocolatey Google Dictionary - View definitions easily as you ... keep-chrome 3.1.16302.1110 chocolatey Google Keep Chrome Extension mybrowserpage-chrome 1.0 chocolatey MyBrowserPage is a starterpage with Metro design. weather-chrome 4.2.97 chocolatey Weather extension for Chrome - The best way to see ... fireshot-chrome 0.98.93.2 chocolatey The FireShot Chrome extension takes full web page s... waybackmachine-chrome 2.12 chocolatey Wayback Machine is a Chrome extension to check Inte... inbox-chrome 1.0.0.1929 chocolatey Inbox by Gmail - Save links to web pages for later ... search-by-image-chrome 1.5.2 chocolatey Search by Image (by Google) - This extension allows... data-saver-chrome 2.0.2 chocolatey Data Saver for Chrome reduces data usage by using G... logiccards-chrome 1.0.0.2 chocolatey The LogicCards Chrome extension provides dynamic no... exifviewer-chrome 2.4.4 chocolatey EXIF Viewer is a Chrome extension that allows you t... github-hovercard-chrome 1.4.4 chocolatey Neat hovercards for GitHub. secureshell-chrome 0.8.43 chocolatey Secure Shell (nassh) is a Chrome App that combines ... notifier-for-github-chrome 3.0.5 chocolatey Notifier for GitHub displays your GitHub notificati... chrome-remote-desktop-host 1.0 chocolatey Chrome Remote Desktop Host mosh-for-chrome 0.4.5 chocolatey Remote terminal application google-play-music-chrome 1.390.0 chocolatey Google Play Music for Chrome is a free app that add... dropbox-for-gmail-chrome 1.1.6 chocolatey Send and preview Dropbox files and links without le... windows-defender-browser-pr... 1.62 chocolatey Windows Defender Browser Protection - Protect yours... toby-chrome 0.5.2 chocolatey Toby is a Chrome extension that organizes bookmarks... passprotect-chrome 0.1.8 chocolatey PassProtect is a simple Chrome extension that drama... justread-chrome 1.1.12 chocolatey Just Read - The extension makes it easy to view web... boomeranggmail-chrome 1.2.7 chocolatey Boomerang for Gmail - The ultimate email productivi... burneremails-chrome 0.1.7 chocolatey Burner Emails: Easy, Fast, Disposable Emails chrono-chrome 0.10.0 chocolatey Chrono Download Manager - Download and manage the Web! news-feed-eradicator-for-fa... 1.0.6 chocolatey News Feed Eradicator helps you cut out the crap and... では、以下のコマンドで実際に以下のコマンドでインストールしましょう。\ncommand Install-Package GoogleChrome また似たようなメッセージが表示されるので、Yを入力してエンターを押しましょう。\nメッセージ パッケージは、信頼済みとマークされていないパッケージ ソースから取得されています。 \u0026#39;chocolatey\u0026#39; からソフトウェアをアンインストールしますか? [Y] はい(Y) [A] すべて続行(A) [N] いいえ(N) [L] すべて無視(L) [S] 中断(S) [?] ヘルプ (既定値は \u0026#34;N\u0026#34;): Y 以下のログが表示されればインストールは完了です。\nログ Name Version Source Summary ---- ------- ------ ------- chocolatey-core.extension 1.3.3 chocolatey Helper functions extending core choco functionality GoogleChrome 68.0.3440.10600 chocolatey Chrome is a fast, simple, and secure web browser, b... 確認 では、確認してみましょう。\n正常にChromeが起動しましたね♪\n終わりに 以上のように、簡単にWindowsマシンのアプリケーションのインストールから管理が出来るようになります。\nインストーラーを使う必要が無くなるので、マシンが汚れることが無くなるのでWindows10ユーザーの方は是非使ってみてください♪\n","date":"2018-09-02T19:17:39+09:00","image":"/wp-content/uploads/2018/09/windows10PackageManageEye.png","permalink":"/2018/09/02/5476/","title":"【念願のパッケージ管理】Windows10に標準搭載されたPackageManagementを使ってみたらとても便利だった件【Chocolatey】"},{"content":"魚眼レンズの強み レンズの種類は様々 皆さんは一眼レフで撮影をする際、レンズはどのようなタイプを使用していますか？\n標準や望遠、広角やマクロなど様々なものがありますよね。\nレンズによって撮れる写真が異なるので、自分の好みや撮りたい構図によって使い分けていると思います。\nその中で、筆者は魚眼レンズの写真が一番好きです。\n魚眼レンズ？ 魚眼レンズとは、魚が周囲の景色を見渡しているような風景を撮影ができるレンズです。\n対角線画角が180度以上の画角を有するレンズである必要があり、見慣れた景色を全く違った形で写真に収める事が可能です。\n魚眼の種類 魚眼レンズにも複数の種類があります。\n全周(円周)魚眼 画面の水平垂直対角線両方よりもイメージサークルが小さいレンズを全周魚眼レンズもしくは円周魚眼レンズと呼びます。\n撮影された写真は円形になり、写っている以外の部分は黒くケラれた状態となります。\n対角線魚眼 画面対角線よりも大きなイメージサークル径を持つものを対角線魚眼レンズと呼びます。\n画面全体に映像が写りますが、歪曲収差が発生するため大きく歪んだように写ります。\n魚眼レンズの面白さ 魚眼レンズで撮影する写真は、肉眼で見る風景よりも幅広い範囲を写す事が可能です。\n肉眼では見えない部分まで写真に収める事が出来るので、よりダイナミックな写真を撮る事が出来ます。\nそして画面の中心から外側に向かうほど風景が大きく歪んで写るので、写真に躍動感が生まれたり、強調されるような構図になるので、それもまた魚眼撮影の強みとも言えますね。\n今回は、以前紹介したCanon EOS Kiss X9iに装着可能な魚眼レンズを購入してみたのでご紹介します。\n関連記事 【一眼初心者向けレフ機】Canon EOS Kiss X9i買ったから開封するよー！【エントリーモデル】 2018/05/20 1668文字 約4分で読めます 商品 SIGMA 10mm F2.8 EX DC FISHEYE HSM Canon用 対角線魚眼 APS-C専用 Amazon SIGMA 単焦点魚眼レンズ 10mm F2.8 EX DC FISHEYE HSM キヤノン用 対角線魚眼 APS-C専用 477547 特徴 Point\r167°の画角が得られます。魚眼レンズ独特の映像表現が可能\r魚眼レンズに特化した光学設計により、色収差を補正。周辺光量も豊富です\r最短撮影距離13.5cm、最大倍率1:3.3を達成。レンズ第一面から被写体まで1.8cmまで寄る事が出来ます\r仕様 ブランドシグマ\r製品型番477101\r年式2010\rズーム倍率 (光学)1 倍\rオートフォーカス可能\r固定焦点距離10 mm\r焦点距離 (広角側)10 mm\r焦点距離 (望遠側)10 mm\rF値 (広角側)2.8 f_stop\rF値 (望遠側)22\rレンズタイプ単焦点レンズ\r種類魚眼レンズ\rフィルター径75.8mm\rレンズ構成7群12枚\rレンズマウントキヤノンEF\r手ブレ補正なし\r付属品ケース\r商品重量476 g\r梱包サイズ8.3 x 7.6 x 7.6 cm\r開封の儀 開封動画 [embed]https://youtu.be/XOz6DBqK9JQ[/embed]\n外観 箱はこんな感じ。\nTHE シンプル。\n付属品 さて、開封です！\nパカッ！つって。\n付属品\r魚眼レンズ本体\r保証書\r取扱説明書\r携帯ケース\r携帯ケースはハードケースではないので、落下等の衝撃をカバーする事は出来ないかもしれませんが、バックに入れる際には十分なレベルだと思います。\n本体 本体はこんな感じです。\nレンズカバーは二段階になっています。\n魚眼部分は凸になっています。\n撮影時にぶつけないように気をつけましょう！\n一眼に取り付けるとこんな感じですね。\n魚眼レンズなのでサイズはちょっとでかめになります。\nレンズ後部に差し込み式のゼラチンフィルターホルダーを備えているので、フィルター取り付けも可能です。\n撮影物 実際に撮影した物を貼ってみますので、ご参考にして頂ければなと♪\n※ブログ用に画質を落としています\n終わりに 魚眼レンズは風景や強調撮影をした写真を撮りたい場合に向いています。\n他のレンズより目を引く写真を撮る事が出来るので、気になった方は購入してみてはいかがでしょうか♪\n","date":"2018-08-31T01:02:11+09:00","image":"/wp-content/uploads/2018/08/shigmaFisyEyeEye.png","permalink":"/2018/08/31/5543/","title":"【魚眼】Sigma 15mm F2.8 EX DG DIAGONAL FISHEYEの使いやすさが抜群だった件【Canon一眼向け】"},{"content":"無限の可能性を秘めた単位記号 単位記号とは？ 皆さんは単位記号というものをご存知でしょうか？\n単位記号とは、長さや重さを表す記号のことを指します。\n一般的に、国際単位系(SI)をはじめとする単位系に従った記号（m, kgなど）が使われる。通常は複数の文字を使って単位を表すが、この記事では主に合字（㎜、㎝など）や組み文字（㍍、㌘など）の形になっている記号について説明する。一部に単位ではない記号も含まれるが、便宜的にこの記事で扱う。\nそして、その中でもカタカナを使った組み文字があるのですが、その組み合わせによって独特な表現をすることが可能となっているのです。\n一覧 ㌀\r㌁\r㌂\r㌃\r㌄\r㌅\r㌆\r㌇\r㌈\r㌉\r㌊\r㌋\r㌌\r㌍\r㌎\r㌏\r㌐\r㌑\r㌒\r㌓\r㌔\r㌕\r㌖\r㌗\r㌘\r㌙\r㌚\r㌛\r㌜\r㌝\r㌞\r㌟\r㌠\r㌡\r㌢\r㌣\r㌤\r㌥\r㌦\r㌧\r㌨\r㌩\r㌪\r㌫\r㌬\r㌭\r㌮\r㌯\r㌰\r㌱\r㌲\r㌳\r㌴\r㌵\r㌶\r㌷\r㌸\r㌹\r㌺\r㌻\r㌼\r㌽\r㌾\r㌿\r㍀\r㍁\r㍂\r㍃\r㍄\r㍅\r㍆\r㍇\r㍈\r㍉\r㍊\r㍋\r㍌\r㍍\r㍎\r㍏\r㍐\r㍑\r㍒\r㍓\r㍔\r㍕\r㍖\r㍗\r組み合わせ例 我慢汁 ㌐㌏㌎㌻㍄\n君ロリコン ㌔㍉コン\nグラハム・エーカー ㌘'`㌈\nクリスマスひとりぽっち ㍆㌋㌉㌏㌉㌸㌾㌋㌞㌹㌅\nクリリンのことかー ㍆㌋㌋㌆㌨㌰㌣㌈\n楽しい仲間がポポポポーン ㌼㌨㌥㌑㌝㌈㌏㌐㌞㌞㌞㌞㌑㌆\nでかい尻 ㌥㌋\nバカロリータ バ㌍タ\nバルス ㍊㌉\nヒーローマン ㌸㌑㌔㍓㌏㌆\nムスカ　「目が～目が〜」 ㌊㌉㌈「㍋～㍋～」\nメールト ㍍⊃\nリトルチンチン ㍉㍑㌢㌧㌢㌧　[adsense]\rチンチン取る ㌢㍐㌢㌽㌦\nチンチントロトロリーン ㌢㌧㌢㌧㍗㌔㍗㌔㌍㌧ ムチムチロリ ㌘㌢㌘㌢㌔㍉ リクームがクリリン叩く ㌋㍆㌑㌘㌐㍆㌋㌋㌆㌼㌼㍆\nクリリンのチンポツルツル ㍆㌋㌋㍂㌨㌢㌧㌞㌹㍁㌹㍁\nガンホー最高 ㌏㍂㌟㌞\nドルトムント香川 ㍀㍁㌩㌘㍂㌩香川\nヒラリークリントン ㌸㍒㌍㍆㍉㌿㌩㌧\nドナドナドーナードーナー ㍎㌝㍎㌝㍎㍓㌝㍓㍎㍓㌝㍓\n田所浩二 ㌼㍎㌰㌔㌰㌑㌻\nサンダーボルト ㌠㌤㌾㌧\n近藤春菜 ㌰㌎㍎㍓㍅㍄㌝\n松嶋菜々子 ㌏㌪㌥㌏㌝㌝㌰\nマルコポーロ ㌏㌯㌰㌞㍓㌔\nファッションリーダー ㌁㌪㍇㌒㌓\nスポーツドリンク ㌤㌞㍓㌹㍀㌋㌎㍆\nガクガクブルブル ㍋㍆㌐㍆㍔㍔\nロマンシングSa・Ga ㌔㌏㌎㌥㌡Sa・Ga\nナタリー・ポートマン ㌝㌼㌒㌞㌀㌏㍐\nノーヒットノーラン ㌨㌑㌸㌌㌨㍓㍒㌵\nクリーンヒット ㍆㌍㌵㌸㌌\nトランクス ㌾㍒㌵㍆㌺\n舘ひろし ㌼㌅㌸㌔㌥\nロンドンハーツ ㍈㍎㌧㍅㌑㌹\n忍者ハットリくん 忍者㍅㌌㌋㍆㌵\nブルースリー ㍔㍓㌤㌒\nそのまんま東 ㌷㌨㌏㌧㌏㌸㍋㌥\n東国原知事 ㌸㍋㌥㌰㍆㍊㌢㌻\n終わりに 以上のように組み合わせ次第で様々な単語を表現する事が出来ます。\nまだまだ他にもあると思います！！\n普通に表現するより、2億倍シュールさが増すので皆さんもどんどん使ってみてはいかがでしょうか♪\n","date":"2018-08-30T00:38:10+09:00","image":"/wp-content/uploads/2018/08/littleChinchinEye.png","permalink":"/2018/08/30/5523/","title":"【㍉㍑㌢㌧㌢㌧/リトルチンチン】無限の可能性を秘めた組み文字を使った単位記号遊び【㍆㌋㌋㌆㌨㌰㌣㌈/クリリンのことかー！】"},{"content":"いろんな効果があるmacのアクセサリを発見 排熱問題は深刻 筆者はMacbook Pro歴が3年ほどですが、今までは特にアクセサリ等を付けずに使っていました。\nただ、Macbook Proでシステム開発やAdobe製品を多用していると発熱により本体がとても熱くなってしまいます。\n排熱処理をしっかりしないと、パソコン本体の寿命が短くなってしまったり、最悪PC起動がしなくなってしまう事があるらしいです。\nこれはとても怖いですよね。。。orz\nただ、そんな問題を解決しさらに＋αの効果があるアクセサリを発見したので購入してみました。\n商品 Bluelounge Kickflip MacBook Pro用フリップスタンド それがこちらです。\nAmazon Bluelounge Kickflip MacBook Pro(13-inch, Late 2016/13-inch, Late 2016, Touch Bar対応) 用フリップスタンド 13インチ 特徴 概要 特徴\rMacBook Pro背面にスペースを作って熱を逃がすエアスペーサー\r取り付け＆取り外し簡単な吸着素材\r取り外しても接着痕を残さない\rガラス強化素材の蝶番で安心の耐久性\rMacBook Pro 13インチ/15インチ対応\r貼ってはがしてしっかり固定、MacBook Proの角度を調節する便利なスタンド Bluelounge（ブルーラウンジ）のKickflip（キックフリップ・MacBook Pro用フリップスタンド）は、吸着パッドで貼り付けた足でMacBook Proに空間を作り、熱を逃す薄型エアスペーサー／スタンドです。\n人間工学に基づいた角度調節により、いつでも一番見やすい、あるいはタイピングしやすい角度に合わせることができ、楽な姿勢で作業をすることができます。\nMacBook Proの熱を逃がす 吸着パッドで貼り付けてMacBook Proを立たせ、背面に少しの空間を作り出し熱を逃します。長時間MacBook Proを使い続けていると、本体が熱くなってしまい熱がこもってしまうことがありますが、設置面から若干の角度とスペースを作り出すことにより、熱を逃がすことができます。\nお手入れしやすい吸着素材 本製品の吸着部分には貼っても痕を残さない厳選した素材を採用しています。何度でも貼り付け／取り外しができますが、埃などの汚れが気になって吸着が弱まった場合は石鹸水で優しく水洗いし、しっかり時間をおいて乾燥させてください。\n最小限のサイズで接着できるミニマムなデザイン MacBook Proの本体のイメージを損なうことをなく、最小限のサイズの薄型スペーサーとしてデザインされています。MacBook Pro背面にある黒い部分のサイズに合わせて13インチ／15インチ専用に設計されているので、持ち運びに便利で見た目も美しいデザインです。\n開封の儀 開封動画 [embed]https://youtu.be/zJT4heAGXfc[/embed]\n外観 商品が到着しました。\n付属品 では、開封をしてみましょう。\n梱包物は以下です。\n付属品\rスタンド本体\r取扱説明書\rとてもシンプル！！\n使用感 では、実際に取り付けてみましょう。\n作業前にMacbookの裏のホコリを拭き取っておくと良いでしょう。\n次に、スタンドの裏にシールが貼ってあるので剥がしてからMacbookの裏に貼りましょう。\n繰り返し貼ることが可能なので、そこまで神経質にならなくて大丈夫です。\nこんな感じでスタンドを立てる事が可能です。\n机とのスペースが生まれるので、排熱処理が行われ、さらに角度がつくことで手首への負担も軽減され、タイピングもしやすくなります。\n筆者はこの3点について、使っててとても実感しました♪\n終わりに Macbookを使っている方であれば、とてもメリットがあるアクセサリだと思います。\n価格もお求めやすいので、是非購入してみてください。\n","date":"2018-08-29T17:19:43+09:00","image":"/wp-content/uploads/2018/08/KickflipReviewEye.png","permalink":"/2018/08/29/5397/","title":"【タイピング速度向上】手首の負担軽減や排熱効果のある「Bluelounge Kickflip MacBook用フリップスタンド」を買ってみた"},{"content":"Youtube動画に任意のサムネを貼りたい 何もしないとサムネを設定出来ない Youtubeに動画をあげた際に、一覧や検索結果で表示された際のサムネイル画像を登録出来るのですが、何も設定していない初期状態だとアップロード時に自動で切り出された数シーンの画像からしか選ぶことが出来ません。\nカスタムサムネイル機能 しかし、Youtubeにはカスタムサムネイル機能というものがあり、こちらの機能を有効化することでアップロードした動画に任意の画像をサムネイルとして設定することが可能になります。\n適切なサムネイルを設定出来るようになればクリック率が上がりますし、Adsenseを設定していれば広告料のアップにも繋がりますね♪\nYouTubeパートナープログラム（YPP） しかし、この機能ですがYouTubeパートナープログラム（YPP）への加入をし、電話番号の登録が必須となっています。\nYouTubeパートナープログラム必須への加入方法について以下の記事でご紹介していますので、参考にしてみてください。\n関連記事 【Youtuber】Youtubeに取得済みのGoogleAdsenseアカウントを連携する方法 2018/05/28 1783文字 約4分で読めます YouTubeパートナープログラムへの加入申請をしていれば、審査中であっても電話番号によるアカウント確認を行う事でカスタムサムネイル機能を利用する事は可能です。\nでは、実際にやってみましょう。\n手順 現状 まず、何もしていない状態だとカスタムサムネイルは無効になっていると思います。\n電話番号によるアカウント確認 では、クリエイターツールのチャンネルメニューから確認ボタンをクリックします。\nすると、確認用の電話番号を入力する画面が表示されるので、任意の電話番号を入力し送信ボタンをクリックします。\nすると、入力した番号にSMSが届きますので、記載されている6桁の数字を入力しましょう。\n認証が正常に通れば以下のような画面が表示されるので、次へボタンをクリックします。\nこれで設定は完了です。\n確認 状態がパートナー確認済みとなり、カスタムサムネイルも有効に変わっていますね。\n設定方法 では、実際にカスタムサムネイル機能を使ってみましょう。\nYoutubeのサムネイルに設定出来る画像は以下です。\nPoint\r1280x720（最小幅が 640 ピクセル）の解像度がある\rアップロードする画像ファイル形式: JPG、GIF、BMP、PNG\r上限の 2 MB 以内である\rYouTube プレーヤーやプレビューで最もよく使われる 16:9 のアスペクト比を試してみる\rあらかじめPhotoShopなどで用意をしときましょう。\nクリエイターツールから、サムネイルを設定したい動画の編集画面を開きます。\nすると、カスタムサムネイルというボタンが追加されているので、作成したサムネイル画像をアップロードしましょう。\n正常にアップロードが完了するとサムネイルに追加されているので、その状態のまま変更を保存ボタンをクリックします。\nこれでカスタムサムネイルの設定は完了です。\nちなみに、アップロード時にも設定することが可能です。\n確認 では、確認してみましょう。\n正常にサムネイルがアップロードしたものに差し代わっていますね♪\n終わりに 以上のようにカスタムサムネイル機能を使うことで任意のサムネイル画像を設定することが出来ました。\nYoutubeには多くの動画があるので、少しでも自分の動画を見てもらえるような工夫をサムネイルに施してみてください♪\n","date":"2018-08-28T21:53:39+09:00","image":"/wp-content/uploads/2018/08/useYoutubeAnnotationEye.png","permalink":"/2018/08/28/5420/","title":"【Youtuber】Youtubeの動画に任意のサムネイル画像を設定する方法【ユーチューバー】"},{"content":"オススメ無料アイコンをまた発見 以前、無料アイコンをご紹介する記事を投稿しました。\n関連記事 【ブログ向けアイコン】旅行関連のアイコンを無料で配布している「tympanus」がオススメな件【可愛い】 2018/08/24 718文字 約2分で読めます そして、また良さそうな無料アイコンセットを見つけましたのでご紹介します♪\nElegant Themes 今回はElegant Themesというサイトで配布されているアイコンセットとなります。\nElegant Themesとは、基本的にはWordpressのテーマの配布をしているサイトです。\nですが、たまにこのようなアイコンなどの素材の配布も行っています。\nこちらも無料で利用可能で、多くのアイコンがあります。\nでは、早速ダウンロードしてみましょう。\n手順 ダウンロード まずはコチラから公式サイトにアクセスしましょう。\nページ中部にDownload The Packageリンクがあるので、こちらをクリックしてZIPファイルをダウンロードしましょう。\n確認 ダウンロードしたZIPファイルを解凍すると、PDF/png/AI/epsごとに単色/カラーのアイコンファイルが格納されています。\n様々な形式が用意されているので、これはとても便利ですね♪\nさぁ、あとは使いまくるだけです！笑\n終わりに 編集がしやすいPNG形式以外の配布がされているので、記事のサムネイルやアイキャッチで使いやすい形式になっています。\n是非お気に入りのアイコンを見つけて使ってみてください♪\n","date":"2018-08-27T12:03:32+09:00","image":"/wp-content/uploads/2018/08/downloadElegantthemesEye.png","permalink":"/2018/08/27/5359/","title":"【無料】ハイクオリティでマテリアルデザインチックなアイコンの「ElegantThemes」を使ってみよう"},{"content":"GoProの新作情報の一部が流出 新作発表の時期到来 皆様お元気ですか？\n突然ですが、\n筆者はGoPro大好き人間\nです。\nGoProのメイン機種「HEROシリーズ」は、基本的に毎年新作を発表しています。\n直近ですと、日本国内での各機種の発売日は以下の通りとなっております。\nGoPro HERO2\r2011年10月\rGoPro HERO3\r2012年10月\rGoPro HERO4\r2014年10月\rGoPro HERO5\r2016年10月\rGoPro HERO6\r2017年 9月\rGoPro FUSION\r2018年4月発売\rGoPro NEW HERO\r2018年4月発売\r2018年9月と予想 さて、この流れを見るにHEROシリーズの新作「HERO7」は2018年9月、遅くても10月には発売されるでしょう。\nでは、実際にリーク情報を見ていきましょう。\nGoProHERO7リーク情報 リーク元 リーク情報はPhoto Rumorsが後悔しています。\nこちらの情報によると、海外の認証機関でGoPro HERO7 Blackが登録されていた、ということです。\nI already reported that a new GoPro Hero7 Black camera was registered online and we now already have the first leaked pictures - see above (looks very similar to the current GoPro Hero6).\rRead more\nリーク画像 今回リークされた画像は以下です。\nマイナーアップデート また、リークされた画像のモデル番号を見ると、GoProHERO6と同じSPCH1である事が分かります。\nこのことから、GoProHERO7はHERO6からのマイナーアップデート機種になる可能性が高いですね。\nただ、GoProHERO6の時点でかなり完成度の高いアクションカメラになっているので、マイナーアップデート機種だとしても十分楽しみですね♪\nまた、外観が同じだとバッテリーやアクセサリ関連を買い換える必要が無いので、お財布的にも助かりますね♪笑\n9/6追記 新たなリーク画像が流出したようです！\nそれがこちら！\n店頭ディスプレイの写真がリークされたようですね。\n写真にはGoPro HERO7 White/GoPro HERO7 Silver/GoPro HERO7 Blackの3機種が写っており、Black以外はフロントディスプレイが搭載されていませんね。\nこのようなクラスチェンジモデルの登場は過去のバージョンでもお決まりですね。\n多くの人のニーズに合わせて購入欲を引き立てる作戦でしょう。\nまた、10mの防水機能が備わっている事もわかりますね。\nこれはHERO6と同等の防水レベルとなっています。\n時期的にもかなり信憑性が高い情報となっていますが、果たして本物なのでしょうか・・・？！\n9/11追記 さらに新情報です。\n各モデルのスペック情報がリークされましたのでまとめていきます！\nGoPro HERO7 Black スペック\r動画解像度 4K60, 2.7K 120, 1440p120, 1080p 240 (HERO6と同じ)\r静止画　1200万ピクセル\rHERO6のGP1プロセッサーをベース、更なる最適化\r外観、バッテリー、フレームはHERO6と同じ\rタイムワープビデオ\rFacebookライブに対応するライブストリーミング機能\rハイパースムース スタビライゼーション\n(ジンバルのようなスタビライズ、HERO6より優れている)\rHDR撮影\n(おそらく3ショット撮影のHDR)\r縦位置撮影機能\n(UI及び撮影結果が縦位置に対応する)\rタイマー撮影モード\r15秒/30秒のショートビデオ撮影機能\rその他の機能はHERO6と同じ\n(タッチスクリーン、フロントLCD、オートバックアップ、クイックストーリー、GoPro Plus、5GHz Wi-Fi、ボイスコントロールetc...)\r価格399米ドル\rGoPro HERO7 Silver スペック\r動画解像度: 4K 30FPS, 1440p 60/30, 1080p 60\r背面液晶での新UI搭載、\rトグルモードによって様々な機能を呼び出し可能\n(動画の解像度、画角、スローモーション、ズーム等)\r固定バッテリー\rレンズの着脱は出来ない\rリアスクリーンのみ\r静止画 1000万画素\rGPS\r広ダイナミックレンジ\rビデオ安定化（HERO7 Blackよりは劣る）\r縦位置モード\rBlackと同じショートビデオ\rタイマー撮影モード\rボイスコントロール\r価格 299米ドル\rGoPro HERO7 White スペック\r動画解像度：1440p 60/30, 1080p 60/30\r固定バッテリー\rレンズの着脱は出来ない\rリアスクリーンのみ\r静止画 1000万画素\r2軸ビデオ安定化\rショートビデオ\r縦位置モード\rタイマー撮影モード\r9/18追記 ついに公式からも新しい情報が発表されましたね。\nMore butter, less clutter. 9.20.18 pic.twitter.com/3aTknk3B00\n\u0026mdash; GoPro (@GoPro) 2018年9月17日\r情報によると、2018年9月20日 6:00 (太平洋時間)に新製品発表会をストリーミング放送するとの事です。\n太平洋時間って何や！！\nここでは間違いなくGoPro HERO7の発表があると思われますので目が離せませんね！\n終わりに GoProは世界で最も普及しているアクションカメラだと言っても過言ではないでしょう。\n筆者も最新機種が出たら必ず購入するので、その際は記事にまとめようと思っています♪\n続報を待て！！！\n","date":"2018-08-26T13:01:28+09:00","image":"/wp-content/uploads/2018/08/goproHero7LeakEye2.png","permalink":"/2018/08/26/5498/","title":"【9月20日発表確定】GoProHero7のリーク情報が流出！発売日はいつか？【9月18日更新】"},{"content":"パソコンにSDカードのデータを読み込みたい PC経由でバックアップ デジカメや一眼レフ、スマホなどを使っている方であればSDカードにデータを登録していると思います。\nしかし、このデータは水没や紛失をしてしまったら無くなってしまうので、定期的にPCなどからHDDなどにバックアップを取っていると思います。\nWifi経由などでデータを転送することも出来ますが、直接PCに接続してコピーした方が圧倒的に早いですよね。\nPCにSDカードスロットが無い しかし、必ずしもPC側にSDカードスロットが用意されているとは限りません。\nそんな時にはUSBタイプのSDカードリーダーを使えば簡単に直接SDカードを取り付けることが可能になります。\n今回、Amazonにて良さげなカードリーダーを購入してみたのでご紹介致します。\n紹介 BUFFALO USB3.0 マルチカードリーダー 今回は以下のカードリーダーを購入してみました。\nAmazon BUFFALO USB3.0 マルチカードリーダー TurboPC EX付き ブラック BSCR22TU3BK こちらは様々なタイプのSDカードを取り付けることが可能です。\nまた、Amazonで格安で購入することが可能で、転送スピードも高速なのでオススメです♪\n特徴 Point\r直接つなぐよりも、”9倍”速い!!USB3.0規格の高速カードリーダー/ライター\r主要複数メディアに対応\r5つのスロットを搭載。メディア同時使用やメディア間コピーも可能\rSDXC 512GBなど、大容量＆高速メディアに対応\rUSB3.0とUSB2.0、両対応\rWindows\u0026Macintosh両対応\r手動でのドライバーインストール不要の簡単利用\rACアダプター不要のバスパワーモデル\r仕様 商品の仕様は以下の通りです。\nインターフェース\rUSB3.0 / 2.0\r電源\rバスパワー\r消費電流\r最大500mA\rケーブル長\r約100cm\r外形寸法（幅×高さ×奥行）\r85×13×49mm（ケーブル、突起部を除く）\r質量\r約35g\rパッケージ寸法（幅×高さ×奥行）\r110×170×40mm\rパッケージ質量（本体含む）\r約133g\r動作環境\r温度5℃～40℃、湿度30％～80％（結露なきこと）\r製品構成\r本体、取扱説明書、ケーブル約1m\r開封の儀 開封動画 [embed]https://www.youtube.com/watch?v=GjCh7xMcrzs[/embed]\r外観 商品のご到着です。\n付属品 付属品はとてもシンプルです。\n付属品\rSDカードリーダー本体\rUSBケーブル\r取扱説明書\r使用感 使い方はとても簡単です。\nUSBケーブルでPCに繋げてSDカードをスロットに接続するだけです。\nドライバのインストールも自動でやってくれるので、何も準備せずにすぐに使えるのはとても魅力的ですよね♪\nSDカードを差し込むと緑色のランプが点灯します。\n終わりに コスパがとても良く、使い勝手も大満足です！\nSDカードスロットがPCについてない方は、是非こちらを購入して幸せになってみてはいかがでしょうか♪\n","date":"2018-08-25T10:50:53+09:00","image":"/wp-content/uploads/2018/08/sdCardReaderEye.png","permalink":"/2018/08/25/5372/","title":"【格安】高機能で高速な「BUFFALO USB3.0 BSCR21U3 マルチカードリーダー」を買ってみた"},{"content":"ワンランク上のデザインへ アイコンに助けを求めるべし 皆さんはアイキャッチ画像やサムネイル画像を自分で作ったりしていますでしょうか？\n筆者は自分で作成しているのですが、デザインセンスが無いととても簡素なデザインになってしまい、あまり効果をなさないですよね。。。orz\nそんなデザイン難民の方は無料で配布されているアイコン画像を使ってみると良いでしょう！\nネットには無料アイコンが沢山 幸いなことに、インターネット上には無料で高品質なアイコン画像を配布してくださっている方が沢山います。\n感謝感激ですね。。。！\ntympanus 今回はtympanusをご紹介致します♪\nこちらは完全無料になっており、旅行に関するアイコンやエコロジーに関するアイコンのセットを配布されています。\nまた、アイコンの形式はAI/SVG/PSD/PNGで配布しているので、用途にあった形式のものをダウンロード出来るのがとても助かりますね♪\nでは、実際にダウンロードしてみましょう。\n手順 ZIPファイルをダウンロード まずはコチラにアクセスします。\nページ下部に拡張子ごとのダウンロードリンクがありますので、お好きな拡張子のファイルをダウンロードしましょう。\n今回はSVGのものを落としてみます。\nダウンロードしたZIPファイルを回答すると以下のようにSVGファイルが大量に格納されています。\n可愛らしいアイコンが多いので、ブログに使いやすそうですね♪\nあとはこのアイコンを使ってデザイン性をあげていくだけですね！\n終わりに 自分のセンスだけではどうしようも無くても、こういったアイコンなどの品質の高い素材をお借りすることで良いデザインを生むことが出来ます。\nまずはそちらを使ってデザインセンスを磨いて行ってみましょう♪\n","date":"2018-08-24T12:09:11+09:00","image":"/wp-content/uploads/2018/08/downloadTympanusEye.png","permalink":"/2018/08/24/5349/","title":"【ブログ向けアイコン】旅行関連のアイコンを無料で配布している「tympanus」がオススメな件【可愛い】"},{"content":"有線イヤホンはもう嫌や！ ストレスが溜まる 皆さんは音楽や動画を見る際にイヤホンを付けますか？\n通勤、通学、トレーニング、スポーツなどなど、イヤホンで音楽を聞きながら過ごすものは多くあります。\nしかし、有線イヤホンだとモノや人に引っかかって取れてしまうことがしょっちゅうあると思います。\nあれって結構ストレスですよね。。。orz\n無線イヤホン最高 そんな人々のために現在、多くの無線イヤホンが販売されています。\n無線イヤホンには以下のメリット/デメリットがあります。\nメリット メリット\rケーブルが絡まず、断線の心配が少ない\rスマートフォンから離れていても音楽が聴ける\rタッチノイズが無い\rデメリット Point\r毎日イヤホンの充電が必要\r有線イヤホンより音質が劣化する場合がある\r音切れ、音飛びが稀にある\rスマホ側の電池の減りが早い\r初心者にオススメなのは？ しかし、色々な種類が出ているとどれを買えばよいか迷ってしまいますよね。\n今回、筆者もネット上で評判や機能を調べ上げた上で、初めての無線イヤホンを買ってみました。\nSoundPEATS Q30 Plus Bluetooth イヤホン 初心者向けエントリーモデル 今回購入したのはこちらです。\nAmazon 【防水進化版 IPX6対応】SoundPEATS(サウンドピーツ) Q30 Plus Bluetooth イヤホン 10MMドライバー搭載 高音質 メーカー１年保証 低音重視 ８時間連続再生 apt-Xコーデック採用 人間工学設計 マグネット搭載 CVC6.0ノイズキャンセリング マイク付き ハンズフリー通話 ブルートゥース イヤホン IP6X防塵 ワイヤレス イヤホン Bluetooth ヘッドホン (ブラック) オーディオ機器に特化したブランド こちらの商品のメーッカーであるSoundPEATS（サウンドピーツ）は、オーディオ機器に特化したブランドとなっており、Amazonでの販売では数々のベストセラーを生んでいます。\nお手頃価格 こちらの商品は3000円代ととても安いです。\nいきなり高いものを買って失敗するのは誰でも怖いですよね。\nまずは安価なこちらの商品を買ってみて使い勝手を確認してみるのがよいでしょう♪\n製品情報 規格\rBluetooth4.1\r通信距離\r10m\r充電時間\r1~2時間\r待機時間\r約100時間\r寸法\r635.0 × 25.0 × 32.0mm\r重量\r約15.0g\r防水性能付き もう一つ、この無線イヤホンの強みが防水性能があることです。\nこちらは防水規格IPXの6級に準拠しているので、水に濡れる環境でも使うことができます。\n6級：あらゆる方向からの強い噴流水による有害な影響がない（耐水形）\nただし、防塵機能は無いので気をつけましょう。\n開封の儀 開封動画 [embed]https://www.youtube.com/watch?v=iBUspEMiNVE[/embed]\r外観 さて、商品が届きました。\n箱の外観はこんな感じ。\n付属品 さて、中身を見ていきますか。\nぱかっ！つって。\nイヤホン本体はハードケースに入れられています。\nこのケースは結構強く押しても凹まないので潰れることはなさそうです。\nケースの中にはイヤホン本体と充電用のUSBケーブルが入っています。\nまた、コード用のクリップや取り替え用のイヤーピースが入っています。\nイヤーピースは様々なサイズが入っているので、ピッタリのものが必ずあるでしょう。\n全部でこれだけ入っています。\nお得な感じがすでにしています！\n充電方法 充電は付属のUSBを使えば簡単に行うことが出来ます。\nラバーカバーを外すとUSB端子があるので、ここに接続すれば充電が可能です。\n充電中の場合は赤いランプが点灯します。\n接続方法 イヤホン側 再生機器とのペアリング設定もとても簡単です。\nまず、無線イヤホン側でBluetoothの有効化をします。\n真ん中の▶ボタンを3秒間長押しします。\n青いランプが付けばBluetoothが有効になりました。\n再生機側 次に再生機側でイヤホンとペアリングを行います。\n設定画面からBluetooth機器を検出しましょう。\n範囲内にイヤホンがあれば検出されるはずです。\n検出されたらタップをしてペアリングを行いましょう。\n正常に機器が登録されればペアリングの設定は完了です。\nこれでイヤホンで音楽が再生出来るようになりました。\n終わりに 無線イヤホンと言っても設定も簡単ですし、充電も寝る前にしておけば問題なく一日中使えます。\nまだ有線イヤホンを使っている方は是非無線イヤホンに乗り換えてみてはいかがでしょうか♪\n","date":"2018-08-22T20:13:07+09:00","image":"/wp-content/uploads/2018/08/wirelessEarphoneEye.png","permalink":"/2018/08/22/5310/","title":"【快適生活】ワイヤレスイヤホンのエントリーモデル「Q30 Plus Bluetooth 」買ってみた【SoundPEATS(サウンドピーツ) 】"},{"content":"カテゴリーにアイコンをつけたい 複数カテゴリーの記事を執筆しているブログでは、Wordpressのウィジェット機能を使ってサイドバー等にカテゴリメニューを表示していると思います。\nしかし、デフォルトだと文字リンクだけが表示されなんかパッとしないですよね。。。\nアイコンとかが出るとそれだけで良くなるのになー。と思っていたところ、ぴったりなWordpressプラグインを見つけました！\nEasyCategoryIcons コチラのプラグインは、管理画面からカテゴリ毎にアイコンを設定する事が可能になります。\nまた、その設定は管理画面側やブログ側でも表示されるので、サイトデザインの向上にも良さそうですね。\n使い方もとても簡単でしたのでご紹介します。\n手順 インストール まずはプラグインをインストールしましょう。\nプラグイン\u003e新規追加にて、検索ボックスにEasy Category Iconsと入れると、対象のプラグインがヒットするので今すぐインストールボタンをクリックします。\nインストールが完了したら、有効化ボタンをクリックしましょう。\nこれでプラグインのインストールは完了です。\nアイコンの設定 では、実際にカテゴリにアイコンを紐付けてみましょう。\nカテゴリ編集画面を開くと、下部にCategory Iconsエリアが追加されていると思います。\nここでは任意の画像とFontawesomeの2種類からアイコン画像を選ぶ事が出来ます。\n今回はFontawesomeを設定してみます。\nFontawesomeについては、以下の記事でご紹介をしているので宜しければご覧ください。\n関連記事 【見た目を整えよう】WordpressにFontAwesomeを導入して使ってみよう 2018/02/22 1323文字 約3分で読めます Add Font Awesome Iconにチェックを入れ、\u0026lt;i class=\"fa {対象アイコンクラス}\"\u0026gt;\u0026lt;/i\u0026gt;の形式で入力し、更新ボタンをクリックします。\n設定はたったこれだけです。\n確認 では、確認をしてみましょう。\n管理画面上では、対象のカテゴリにIcon画像が紐づいた事がわかります。\nブログ上のウィジェットにも表示されるようになりましたね！\n終わりに 以上のように、自前で対応をするととても大変な作業も、プラグインを使えば簡単に実現することが出来ました。\n文字だけのブログは読み手にも負担がかかってしまうので、バランス良くアイコンを使って見やすいブログを目指していきましょう。\n","date":"2018-08-21T19:41:29+09:00","image":"/wp-content/uploads/2018/08/installEasyCategoryIconEye.png","permalink":"/2018/08/21/5253/","title":"【デザイン向上】Wordpressのカテゴリにアイコンを設定出来る「Easy Category Icon」【プラグイン】"},{"content":"SVG画像のサムネが出ない問題 アップロードは可能になった 以前、以下の記事にてWordpressの管理画面からSVG画像をアップロード出来るように修正を行いました。\n関連記事 【瞬殺】WordpressでSVG画像がアップロード出来ない場合の解決方法 2018/08/18 1104文字 約3分で読めます あとはサムネを表示したい しかし、今のままだとアップロードとブログ側での表示は出来るようになりましたが、管理画面側でサムネが表示されていない状態です。\nこちらは、SVG画像の場合に縦横それぞれ1px指定のStyleになってしまっていることが原因ですので、ここのCSSを修正する事で表示がされるようになります。\n手順 CSSを追加 やり方はとても簡単です。\n以下の追記を管理画面用CSSに追記するだけです。\nadmin-style.css table.media .column-title .media-icon img[src*=\u0026#39;.svg\u0026#39;]{ width: 100%; height: auto; } 管理画面用CSSの用意の仕方については、以下をご参考下さい。\n関連記事 【使いやすさ向上】Wordpressの管理画面のCSSを変える方法 2018/08/19 1190文字 約3分で読めます 確認 では確認してみましょう。\n上記のCSSが適用されて正常に表示されるようになりましたね♪\n終わりに 以上のように数行追加するだけでサムネが表示されるようになりました。\n画像が表示されないと、管理がしにくくなってしまうので、SVG画像をアップロードしている方は必ずこのCSS設定をすることをオススメします。\n","date":"2018-08-20T12:29:07+09:00","image":"/wp-content/uploads/2018/08/svgViewCssEye.png","permalink":"/2018/08/20/5284/","title":"アップロードしたSVGのサムネを表示させる方法"},{"content":"管理画面のCSSを変更したい 基本的にはいじる事は無い Wordpressを使っている方は、基本的にサイト側のCSSを調整するためにテーマ内のstyle.cssを編集することがあると思います。\n一方で管理画面側はほとんど完成しているのでそちらのCSSを修正したい、というケースはあまり無いと思います。\nもちろんカスタマイズ可能 しかし、たまに管理画面の使いやすさを向上するために管理画面側のCSSを調整したくなることもあります。\n例えば、以前紹介したSVG画像のアップロード対応の際に管理画面側でSVG画像が表示されない問題を解決するためにCSSをいじる必要があります。\n関連記事 【瞬殺】WordpressでSVG画像がアップロード出来ない場合の解決方法 2018/08/18 1104文字 約3分で読めます ただ、テーマのstyle.cssのように管理画面上からいじることは出来ないので、ちょっと準備をする必要があります。\nしかし、その作業もそんなに大変でも無いのでご紹介します♪\n手順 管理画面用cssファイルの用意 まずは、管理画面用cssファイルを用意しましょう。\n自分で追加したCSSを把握しやすくするためにファイルを分けて管理した方が今後幸せになるはずです。\n今回はadmin-style.cssという名前で作成しました。\nサーバーに転送 次に上記のCSSファイルをサーバーに転送しましょう。\n転送先は以下のディレクトリです。\n{Wordpressインストールディレクトリ}/wp-content/admin-style.css\nテーマフォルダに配置しても良いですが、管理画面は全テーマ共通なのでwp-contentディレクトリに配置しました。br /\u003eこの辺は好みなのでよしなにしちゃってください。\n転送については、FTPソフトやSCPコマンドなどなんでも良いので、使い慣れているツールで配置してください。\nこんな形になっていれば良いです。\n配置 [user wp-content]$ pwd {Wordpressインストールディレクトリ}/wp-content [user wp-content]$ ll 合計 65520 -rw------- 1 apache apache 92 8月 19 20:00 admin-style.css　←　配置 -rw-r--r-- 1 apache apache 67041525 8月 19 20:09 debug.log -rw-r--r-- 1 apache apache 28 4月 22 15:02 index.php drwxr-xr-x 4 apache apache 4096 4月 22 15:02 languages drwxr-xr-x 13 apache apache 4096 8月 19 17:46 plugins drwxr-xr-x 7 apache apache 4096 8月 19 17:46 themes drwxr-xr-x 3 apache apache 4096 8月 19 17:46 updraft drwxr-xr-x 2 apache apache 4096 8月 19 20:01 upgrade drwxr-xr-x 5 apache apache 4096 4月 22 15:02 uploads functions.phpに追記 次に、functions.phpに上記のCSSファイルを読み込むような追記を行います。\n以下のコードを追記してください。\nfunctions.php function load_custom_wp_admin_style() { wp_register_style( \u0026#39;custom_wp_admin_css\u0026#39;, \u0026#39;/wp-content/admin-style.css\u0026#39;, false, \u0026#39;1.0.0\u0026#39; ); wp_enqueue_style( \u0026#39;custom_wp_admin_css\u0026#39; ); } add_action( \u0026#39;admin_enqueue_scripts\u0026#39;, \u0026#39;load_custom_wp_admin_style\u0026#39; ); これで準備は完了です。\n確認 では、ブラウザでcssファイルが読み込まれているか確認してみましょう。\n正常にCSSファイルが読み込まれるようになっていますね。\nあとはこのCSSファイルに管理画面向けのCSSを記述していけば良いです。\n終わりに 以上のように、簡単にWordpressの管理画面のCSSを調整出来るようになりました。\n細かい部分を変えるだけでも記事の書きやすさや管理のしやすさが変わるので、こちらを参考にCSSを調整してみてください。\n","date":"2018-08-19T20:35:24+09:00","image":"/wp-content/uploads/2018/08/settingWordpressAdminCssEye.png","permalink":"/2018/08/19/5288/","title":"【使いやすさ向上】Wordpressの管理画面のCSSを変える方法"},{"content":"あれ、SVGがアップロード出来ないぞ？ アップロードエラー 先日、自作のSVG形式のアイコンファイルをブログで使用しようと管理画面からメディアのアップロードを試いたところ、以下のようなエラーが出てアップロードが出来ませんでした。\nぐぬぬ。。。\n原因はWordpress これは、WordPress4.7辺りのバージョンアップによってセキュリティ機能が強化され、メディアのアップロード時にファイルのMIMEタイプのチェックが行われるようになった事による影響だと思われます。\n原因を調べてみると、wp-includes/functions.phpの2398行目辺りにアップロードを許可する設定が記述されていました。\nwp-includes/functions.php /** * Retrieve list of mime types and file extensions. * * @since 3.5.0 * @since 4.2.0 Support was added for GIMP (xcf) files. * * @return array Array of mime types keyed by the file extension regex corresponding to those types. */ function wp_get_mime_types() { /** * Filters the list of mime types and file extensions. * * This filter should be used to add, not remove, mime types. To remove * mime types, use the {@see \u0026#39;upload_mimes\u0026#39;} filter. * * @since 3.5.0 * * @param array $wp_get_mime_types Mime types keyed by the file extension regex * corresponding to those types. */ return apply_filters( \u0026#39;mime_types\u0026#39;, array( // Image formats. \u0026#39;jpg|jpeg|jpe\u0026#39; =\u0026gt; \u0026#39;image/jpeg\u0026#39;, \u0026#39;gif\u0026#39; =\u0026gt; \u0026#39;image/gif\u0026#39;, \u0026#39;png\u0026#39; =\u0026gt; \u0026#39;image/png\u0026#39;, \u0026#39;bmp\u0026#39; =\u0026gt; \u0026#39;image/bmp\u0026#39;, \u0026#39;tiff|tif\u0026#39; =\u0026gt; \u0026#39;image/tiff\u0026#39;, \u0026#39;ico\u0026#39; =\u0026gt; \u0026#39;image/x-icon\u0026#39;, // Video formats. \u0026#39;asf|asx\u0026#39; =\u0026gt; \u0026#39;video/x-ms-asf\u0026#39;, \u0026#39;wmv\u0026#39; =\u0026gt; \u0026#39;video/x-ms-wmv\u0026#39;, \u0026#39;wmx\u0026#39; =\u0026gt; \u0026#39;video/x-ms-wmx\u0026#39;, \u0026#39;wm\u0026#39; =\u0026gt; \u0026#39;video/x-ms-wm\u0026#39;, \u0026#39;avi\u0026#39; =\u0026gt; \u0026#39;video/avi\u0026#39;, \u0026#39;divx\u0026#39; =\u0026gt; \u0026#39;video/divx\u0026#39;, \u0026#39;flv\u0026#39; =\u0026gt; \u0026#39;video/x-flv\u0026#39;, \u0026#39;mov|qt\u0026#39; =\u0026gt; \u0026#39;video/quicktime\u0026#39;, \u0026#39;mpeg|mpg|mpe\u0026#39; =\u0026gt; \u0026#39;video/mpeg\u0026#39;, \u0026#39;mp4|m4v\u0026#39; =\u0026gt; \u0026#39;video/mp4\u0026#39;, \u0026#39;ogv\u0026#39; =\u0026gt; \u0026#39;video/ogg\u0026#39;, \u0026#39;webm\u0026#39; =\u0026gt; \u0026#39;video/webm\u0026#39;, \u0026#39;mkv\u0026#39; =\u0026gt; \u0026#39;video/x-matroska\u0026#39;, \u0026#39;3gp|3gpp\u0026#39; =\u0026gt; \u0026#39;video/3gpp\u0026#39;, // Can also be audio \u0026#39;3g2|3gp2\u0026#39; =\u0026gt; \u0026#39;video/3gpp2\u0026#39;, // Can also be audio // Text formats. \u0026#39;txt|asc|c|cc|h|srt\u0026#39; =\u0026gt; \u0026#39;text/plain\u0026#39;, \u0026#39;csv\u0026#39; =\u0026gt; \u0026#39;text/csv\u0026#39;, \u0026#39;tsv\u0026#39; =\u0026gt; \u0026#39;text/tab-separated-values\u0026#39;, \u0026#39;ics\u0026#39; =\u0026gt; \u0026#39;text/calendar\u0026#39;, \u0026#39;rtx\u0026#39; =\u0026gt; \u0026#39;text/richtext\u0026#39;, \u0026#39;css\u0026#39; =\u0026gt; \u0026#39;text/css\u0026#39;, \u0026#39;htm|html\u0026#39; =\u0026gt; \u0026#39;text/html\u0026#39;, \u0026#39;vtt\u0026#39; =\u0026gt; \u0026#39;text/vtt\u0026#39;, \u0026#39;dfxp\u0026#39; =\u0026gt; \u0026#39;application/ttaf+xml\u0026#39;, // Audio formats. \u0026#39;mp3|m4a|m4b\u0026#39; =\u0026gt; \u0026#39;audio/mpeg\u0026#39;, \u0026#39;ra|ram\u0026#39; =\u0026gt; \u0026#39;audio/x-realaudio\u0026#39;, \u0026#39;wav\u0026#39; =\u0026gt; \u0026#39;audio/wav\u0026#39;, \u0026#39;ogg|oga\u0026#39; =\u0026gt; \u0026#39;audio/ogg\u0026#39;, \u0026#39;mid|midi\u0026#39; =\u0026gt; \u0026#39;audio/midi\u0026#39;, \u0026#39;wma\u0026#39; =\u0026gt; \u0026#39;audio/x-ms-wma\u0026#39;, \u0026#39;wax\u0026#39; =\u0026gt; \u0026#39;audio/x-ms-wax\u0026#39;, \u0026#39;mka\u0026#39; =\u0026gt; \u0026#39;audio/x-matroska\u0026#39;, // Misc application formats. \u0026#39;rtf\u0026#39; =\u0026gt; \u0026#39;application/rtf\u0026#39;, \u0026#39;js\u0026#39; =\u0026gt; \u0026#39;application/javascript\u0026#39;, \u0026#39;pdf\u0026#39; =\u0026gt; \u0026#39;application/pdf\u0026#39;, \u0026#39;swf\u0026#39; =\u0026gt; \u0026#39;application/x-shockwave-flash\u0026#39;, \u0026#39;class\u0026#39; =\u0026gt; \u0026#39;application/java\u0026#39;, \u0026#39;tar\u0026#39; =\u0026gt; \u0026#39;application/x-tar\u0026#39;, \u0026#39;zip\u0026#39; =\u0026gt; \u0026#39;application/zip\u0026#39;, \u0026#39;gz|gzip\u0026#39; =\u0026gt; \u0026#39;application/x-gzip\u0026#39;, \u0026#39;rar\u0026#39; =\u0026gt; \u0026#39;application/rar\u0026#39;, \u0026#39;7z\u0026#39; =\u0026gt; \u0026#39;application/x-7z-compressed\u0026#39;, \u0026#39;exe\u0026#39; =\u0026gt; \u0026#39;application/x-msdownload\u0026#39;, \u0026#39;psd\u0026#39; =\u0026gt; \u0026#39;application/octet-stream\u0026#39;, \u0026#39;xcf\u0026#39; =\u0026gt; \u0026#39;application/octet-stream\u0026#39;, // MS Office formats. \u0026#39;doc\u0026#39; =\u0026gt; \u0026#39;application/msword\u0026#39;, \u0026#39;pot|pps|ppt\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-powerpoint\u0026#39;, \u0026#39;wri\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-write\u0026#39;, \u0026#39;xla|xls|xlt|xlw\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-excel\u0026#39;, \u0026#39;mdb\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-access\u0026#39;, \u0026#39;mpp\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-project\u0026#39;, \u0026#39;docx\u0026#39; =\u0026gt; \u0026#39;application/vnd.openxmlformats-officedocument.wordprocessingml.document\u0026#39;, \u0026#39;docm\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-word.document.macroEnabled.12\u0026#39;, \u0026#39;dotx\u0026#39; =\u0026gt; \u0026#39;application/vnd.openxmlformats-officedocument.wordprocessingml.template\u0026#39;, \u0026#39;dotm\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-word.template.macroEnabled.12\u0026#39;, \u0026#39;xlsx\u0026#39; =\u0026gt; \u0026#39;application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\u0026#39;, \u0026#39;xlsm\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-excel.sheet.macroEnabled.12\u0026#39;, \u0026#39;xlsb\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-excel.sheet.binary.macroEnabled.12\u0026#39;, \u0026#39;xltx\u0026#39; =\u0026gt; \u0026#39;application/vnd.openxmlformats-officedocument.spreadsheetml.template\u0026#39;, \u0026#39;xltm\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-excel.template.macroEnabled.12\u0026#39;, \u0026#39;xlam\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-excel.addin.macroEnabled.12\u0026#39;, \u0026#39;pptx\u0026#39; =\u0026gt; \u0026#39;application/vnd.openxmlformats-officedocument.presentationml.presentation\u0026#39;, \u0026#39;pptm\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-powerpoint.presentation.macroEnabled.12\u0026#39;, \u0026#39;ppsx\u0026#39; =\u0026gt; \u0026#39;application/vnd.openxmlformats-officedocument.presentationml.slideshow\u0026#39;, \u0026#39;ppsm\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-powerpoint.slideshow.macroEnabled.12\u0026#39;, \u0026#39;potx\u0026#39; =\u0026gt; \u0026#39;application/vnd.openxmlformats-officedocument.presentationml.template\u0026#39;, \u0026#39;potm\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-powerpoint.template.macroEnabled.12\u0026#39;, \u0026#39;ppam\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-powerpoint.addin.macroEnabled.12\u0026#39;, \u0026#39;sldx\u0026#39; =\u0026gt; \u0026#39;application/vnd.openxmlformats-officedocument.presentationml.slide\u0026#39;, \u0026#39;sldm\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-powerpoint.slide.macroEnabled.12\u0026#39;, \u0026#39;onetoc|onetoc2|onetmp|onepkg\u0026#39; =\u0026gt; \u0026#39;application/onenote\u0026#39;, \u0026#39;oxps\u0026#39; =\u0026gt; \u0026#39;application/oxps\u0026#39;, \u0026#39;xps\u0026#39; =\u0026gt; \u0026#39;application/vnd.ms-xpsdocument\u0026#39;, // OpenOffice formats. \u0026#39;odt\u0026#39; =\u0026gt; \u0026#39;application/vnd.oasis.opendocument.text\u0026#39;, \u0026#39;odp\u0026#39; =\u0026gt; \u0026#39;application/vnd.oasis.opendocument.presentation\u0026#39;, \u0026#39;ods\u0026#39; =\u0026gt; \u0026#39;application/vnd.oasis.opendocument.spreadsheet\u0026#39;, \u0026#39;odg\u0026#39; =\u0026gt; \u0026#39;application/vnd.oasis.opendocument.graphics\u0026#39;, \u0026#39;odc\u0026#39; =\u0026gt; \u0026#39;application/vnd.oasis.opendocument.chart\u0026#39;, \u0026#39;odb\u0026#39; =\u0026gt; \u0026#39;application/vnd.oasis.opendocument.database\u0026#39;, \u0026#39;odf\u0026#39; =\u0026gt; \u0026#39;application/vnd.oasis.opendocument.formula\u0026#39;, // WordPerfect formats. \u0026#39;wp|wpd\u0026#39; =\u0026gt; \u0026#39;application/wordperfect\u0026#39;, // iWork formats. \u0026#39;key\u0026#39; =\u0026gt; \u0026#39;application/vnd.apple.keynote\u0026#39;, \u0026#39;numbers\u0026#39; =\u0026gt; \u0026#39;application/vnd.apple.numbers\u0026#39;, \u0026#39;pages\u0026#39; =\u0026gt; \u0026#39;application/vnd.apple.pages\u0026#39;, ) ); } 確かにSVGは許可されていませんね。\n原因はわかったので実際に対処をしていきましょう！\n手順 注意 functins.phpの編集は一歩間違えるとWordpressが動かなくなってしまう可能性があるので、バックアップの上必ず自己責任で作業をお願いします。\nfunctions.phpに記述追加 テーマの編集からfunctions.phpに以下を追記してください。\nwp-content/functions.php function cc_mime_types($mimes) { $mimes[\u0026#39;svg\u0026#39;] = \u0026#39;image/svg+xml\u0026#39;; return $mimes; } add_filter(\u0026#39;upload_mimes\u0026#39;, \u0026#39;cc_mime_types\u0026#39;); これだけで対応は完了です。\n確認 では、実際に確認して見ましょう。\nこれでSVG形式のアップロードとブログ側での表示は正常にいくようになりました。\nただ、管理画面側でSVG画像のサムネが表示されていません。\nこちらについては、別途対応が必要なので別の記事でご紹介致します。\n終わりに 以上のように原因さえ分ければ些細な対応で解決することが出来ます。\nレスポンシブ化やマルチデバイス対応が普及している中で、SVG画像は拡大しても劣化が発生しないので、今のうちからSVG対応を入れておくと良いでしょう♪\n","date":"2018-08-18T15:39:13+09:00","image":"/wp-content/uploads/2018/08/availabeSvgUploadEye.png","permalink":"/2018/08/18/5270/","title":"【瞬殺】WordpressでSVG画像がアップロード出来ない場合の解決方法"},{"content":"アップロードがめんどくさい 毎回に書き出してアプリからアップロードは大変 写真が趣味の方は、最近ですとInstagramにアップロードして周囲に公開している方は多いのではないでしょうか。\nしかし、Instagramにアップロードするために毎回ファイルに買い出してからアップロードをしていると思います。\nこの作業、地味にめんどくさいですよね。。。。\nLightroomから直接Instagramにアップロードできたらなー。でもそんな便利なこと出来るはずないよなー。\nそんなあなたのためにご紹介したいプラグインがあります！笑\nLR/instagram その名も「LR/instagram」。\nこちらのプラグインはLightroomの画面から直接Instagramへのアップロードが可能になるプラグインです。\nこれはLightroomを使っている方なら待ちわびていたプラグインではないでしょうか！\n実際に試してみましょう。\n手順 インストール まずはプラグイン本体をインストールするために、コチラにアクセスしてください。\nサイトが表示されたら上部タブのDOWNLOADメニューをクリックし、ダウンロードを開始してください。\nダウンロードが完了したらLightroomを起動し、ファイル\u003eプラグインマネージャーをクリックします。\nLightroomプラグインマネージャーダイアログが表示されたら、追加をクリックします。\n先ほどダウンロードしたzipファイルに含まれている.lrpluginファイルを選択してプラグインを追加ボタンをクリックします。\n以下のようにプラグインが追加されていればインストールは完了です。\nログイン 次に、Lightroomから直接アップロードする対象のアカウントにログインしましょう。\n公開サービスからLR/Instagramの設定...リンクをクリックします。\nすると、Lightroom公開マネージャーダイアログが表示されるので、Instagram Accountに対象のID/PWを入力しログインボタンをクリックします。\n認証が正しく通れば、アカウント情報が表示されます。\nこれでログインは完了です。\nアップロード では、実際にアップロードしてみましょう。\nアップロードしたい写真をLR/Instagramにドラッグ\u0026ドロップします。\nすると、Instagram photosが0から1に増えたと思うので、クリックすると先ほどドラッグ\u0026ドロップした画像が追加されていると思います。\n右側エリアでタイトルやコメントを入力出来るので、任意の内容を入力したら上部の公開ボタンをクリックします。\nこれでアップロードは完了です。\n確認 では、Instagramを確認してみましょう。\n正常にLightroomから直接アップロードされていますね♪\n終わりに 今ままでは毎回画像ファイルに書き出してから、Instagramにアップロードしていましたが、このプラグインを使うことで無駄な作業をしなくて済むようになります。\n導入も簡単なので、Lightroomで現像をしている方は是非使ってみてください。\n","date":"2018-08-17T21:48:22+09:00","image":"/wp-content/uploads/2018/08/installLRInstagramEye.png","permalink":"/2018/08/17/5231/","title":"【便利すぎる】InstagramにAdobe Lightroomから直接投稿できるプラグイン「LR/instagram」"},{"content":"Wordpressは絵文字に対応済み 4.2の新機能 Wordpress4.2の新機能として、絵文字の標準対応が行われました。\nそして、それを実現するために以下のJavaScriptが自動で読み込まれています。\nwp-emoji-release.min.js\n正直絵文字対応はいらない しかし、Wordpressで記事を書いていると、基本的に絵文字などは使わないと思います。\n使うとしてもFontAwesomeなどのWebフォントアイコン程度だと思います。\n読み込みに時間がかかる問題 しかもこのwp-emoji-release.min.jsというJavaScriptファイル、読み込みに結構時間がかかってしまいます。\n絵文字をサイト内で使っていないのであれば、不要なJavaScriptファイルの読み込みで時間をかける必要はありませんよね。\nこのwp-emoji-release.min.jsの読み込みは簡単に読み込みをしないようにする事が可能ですので、今回はその方法をご紹介致します。\n手順 functions.phpに追記 読み込みをさせなくするには、functions.phpに以下の2行を追加するだけです。\nfunctions.php remove_action( \u0026#39;wp_head\u0026#39;, \u0026#39;print_emoji_detection_script\u0026#39;, 7 ); remove_action( \u0026#39;wp_print_styles\u0026#39;, \u0026#39;print_emoji_styles\u0026#39; ); あら簡単！\n確認 では、もう一度開発者ツールで確認してみましょう。\n読み込まれないようになりましたね♪\n終わりに 以上のように、数行の記述を追記するだけで、絵文字対応のJavaScriptファイルが読み込まれなくなりました。\n細かいところですが、このような不要ファイルの読み込みが蓄積されて、サイト全体のパフォーマンスダウンに繋がってしまうので、読み込む必要が無いファイルは取り除くように定期的にメンテナンスをしていきましょう。\n","date":"2018-08-13T16:35:56+09:00","image":"/wp-content/uploads/2018/08/disableEmojiJsLoadEye.png","permalink":"/2018/08/13/5210/","title":"【快適化】wp-emoji-release.min.jsの読み込みを除去してパフォーマンスアップ"},{"content":"サブドメインとは？ お名前ドットコムのおさらい 以前、お名前ドットコムを利用したドメインの作成の仕方については、以下の記事にてご紹介をしました。\n関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！！独自ドメイン取得編 2017/09/04 1740文字 約4分で読めます しかし、いろいろ制作を進めていくと、サブドメインが欲しくなる場合があると思います。\nサブドメイン？ルートドメイン？ そもそもサブドメインとは何なのか？\n以前にお名前ドットコムで取得したドメインはルートドメインと呼ばれます。\n簡単に説明すると、以下のようなイメージです。\nルートドメイン ルートドメイン\rhttps://blogenist.jp\rサブドメイン サブドメイン\rhttps://www.blogenist.jp\rhttps://sub.blogenist.jp\r青色部分の差異があります。\nサブドメインはルートドメインをさらに細かく分けて使いたい場合に用いられます。\nサブドメイン?サブディレクトリ? ルートドメインを利用しても複数サイトの運用は可能ですが、その場合はサブディレクトリによる運用となります。\n例えば、blogenistのルートドメイン配下に、shop/book/foodという3つの関連する別のサイト(システム)があった場合に、サブディレクトリ/サブドメインそれぞれだと以下のような運用になると思われます。\n※SEO観点では特に差は無いそうなので、この辺は好みになりますね\nサブディレクトリ サブディレクトリ\rhttps://blogenist/shop/index.html\rhttps://blogenist/book/index.html\rhttps://blogenist/food/index.html\rサブドメイン サブドメイン\rhttps://shop.blogenist/index.html\rhttps://book.blogenist/index.html\rhttps://food.blogenist/index.html\rサブドメイン運用の例 Google様の例 例えば、天下のGoogle様なんかを例に挙げると、以下のようにサブドメインでの運用を行っています。\nかなりマイクロサービス思考ですね。\n大好きです。\nルートドメイン\rgoogle.com\rhttps://www.google.com/にリダイレクト\rサブドメイン\rwww.google.com\rGoogle検索\rdocs.google.com\rGoogleDocs\rmail.google.com\rGmail\rmyaccount.google.com\rGoogleアカウント\rmaps.google.com\rGoogleMap\rplay.google.com\rGooglePlay\rnews.google.com\rGoogleアカウント\rcontacts.google.com\rGoogle連絡先\rdrive.google.com\rGoogleDrive\rplus.google.com\rGoogle+\rtranslate.google.com\rGoogle翻訳\rphotos.google.com\rGoogleフォト\rbooks.google.com\rGoogleブックス\rhangout.google.com\rGoogleハングアウト\rkeep.google.com\rGoogleキープ\rclassroom.google.com\rGoogleクラスルーム\rearth.google.com\rGoogleEarch\rAmazon様の例 Amazon様もGoogleほどでは無いですが、サブドメインで様々なサービスを持っています。\nまた、階層化サブドメインを振ることでサービスを小分けにしているようです。\nルートドメイン\ramazon.com\rwww.amazon.comにリダイレクト\rサブドメイン\rwww.amazon.com\rAmazonPrime\raffiliate.amazon.com\rAmazonアフェリエイト\raws.amazon.com\rAmazon Web Service\rconsole.aws.amazon.com\rAWS Console\rus-east-1.console.aws.amazon.com\rAWS Console 米国東部（バージニア北部）\rus-east-2.console.aws.amazon.com\rAWS Console 米国東部 (オハイオ)\rus-west-1.console.aws.amazon.com\rAWS Console 米国西部 (北カリフォルニア)\rus-west-2.console.aws.amazon.com\rAWS Console 米国西部 (オレゴン)\rca-central-1.console.aws.amazon.com\rAWS Console カナダ (中部)\reu-central-1.console.aws.amazon.com\rAWS Console 欧州 (フランクフルト)\reu-west-1.console.aws.amazon.com\rAWS Console 欧州 (アイルランド)\reu-west-2.console.aws.amazon.com\rAWS Console 欧州 (ロンドン)\reu-west-3.console.aws.amazon.com\rAWS Console EU (パリ)\rap-northeast-1.console.aws.amazon.com\rAWS Console アジアパシフィック (東京)\rap-northeast-2.console.aws.amazon.com\rAWS Console アジアパシフィック (ソウル)\rap-northeast-3.console.aws.amazon.com\rAWS Console アジアパシフィック (大阪: ローカル)\rap-southeast-1.console.aws.amazon.com\rAWS Console アジアパシフィック (シンガポール)\rap-southeast-2.console.aws.amazon.com\rAWS Console アジアパシフィック (シドニー)\rap-south-1.console.aws.amazon.com\rAWS Console アジアパシフィック (ムンバイ)\rsa-east-1.console.aws.amazon.com\rAWS Console 南米 (サンパウロ)\r終わりに 以上のように、ルートドメインだけではなく、サブドメインを使った運用を考えた方が将来性のあるドメイン運用になると筆者は思っております。\nサブディレクトリ運用をしている大手サービスはちょっと思い浮かびませんでした。\nサブドメインの追加自体は無料で出来る場合がほとんどなので、これからドメインを取得する方はもちろん、すでにルートドメインで運用をしている方もこのタイミングで運用方針を改めて見てはいかがでしょうか？\n","date":"2018-08-06T20:09:46+09:00","image":"/wp-content/uploads/2018/08/infoSubDoaminEye.png","permalink":"/2018/08/06/5157/","title":"【覚えておくべき】サブドメインを使ってより効率的なサイト運用をしてみよう！"},{"content":"Swagger What\u0026rsquo;s?? 皆さんはSwaggerをご存知でしょうか？\nSwaggerとは、RESTful APIのAPIドキュメントを生成するためのオープンソースのフレームワークのことです。\n「Open API Initiative」という団体がRESTful APIのインターフェイスの記述をするための標準フォーマットを推進しており、その団体が考え出した規格のひとつがSwaggerです。\nエクセルなどとは違い、テキストベースのファイルなのでGit管理がしやすいのもメリットの一つです。\nSwaggerには、幾つかのモジュールがあります。\nSwagger Spec Swagger SpecはSwaggerの書式で記述した仕様書の事で、JSONもしくはYAML形式で記述します。\nSwagger Spec Sample swagger: \u0026#39;2.0\u0026#39; info: version: \u0026#34;1.0.0\u0026#34; title: \u0026#34;Sample Title\u0026#34; host: \u0026#34;localhost\u0026#34; schemes: - https basePath: \u0026#34;/\u0026#34; produces: - \u0026#34;application/json\u0026#34; paths: \u0026#34;/users\u0026#34;: get: summary: Listing User description: | Listing User API parameters: - name: id in: path description: User Id required: true type: integer responses: 200: description: Successful responses schema: title: User List type: object properties: users: title: User List type: array items: title: Users type: object properties: id: type: integer description: User Id example: 1001 name: type: string description: User Name example: Yamada Taro isPaidUser: description: Paid User type: boolean example: false post: summary: Create User description: | Create New User API parameters: - name: id in: path description: User Id required: true type: integer - name: request in: body required: true schema: title: User type: object properties: name: type: string description: User Name example: Yamada Taro isPaidUser: description: Paid User type: boolean example: false responses: 201: description: Create responses schema: title: Users type: object properties: id: type: integer description: User Id example: 1001 409: description: Conflict responses \u0026#34;/users/{id}\u0026#34;: get: summary: Find User description: | Find User By Id API parameters: - name: id in: path description: User Id required: true type: integer responses: 200: description: Successful responses schema: title: Users type: object properties: id: type: integer description: User Id example: 1001 name: type: string description: User Name example: Yamada Taro isPaidUser: description: Paid User type: boolean example: false 404: description: Not Found responses put: summary: Modify User Content description: | Modify User Content API parameters: - name: id in: path description: User Id required: true type: integer - name: request in: body required: true schema: title: User type: object properties: name: type: string description: User Name example: Yamada Taro isPaidUser: description: Paid User type: boolean example: false responses: 200: description: Update responses 404: description: Not Found responses patch: summary: Modify User Attribute description: | Modify User Attribute API parameters: - name: id in: path description: User Id required: true type: integer - name: request in: body required: true schema: title: User type: object properties: name: type: string description: User Name example: Yamada Taro isPaidUser: description: Paid User type: boolean example: false responses: 200: description: Update responses 404: description: Not Found responses delete: summary: Delete User description: | Delete User API parameters: - name: id in: path description: User Id required: true type: integer responses: 204: description: Update responses 403: description: Forbidden responses 404: description: Not Found responses Swagger Editer \u0026lt;pSwagger Editer\u0026gt;はSwaggerSpecファイルの生成や編集を行うためのツールです。\nブラウザ上で動作可能で、左側にYAMLまたはJSONで記述します。\nそして、右側には左の記述をもとに生成されたドキュメントがリアルタイムに更新されるので、構文チェックを行いながら定義を行うことが出来ます。\nSwagger UI Swagger UIはSwaggerSpecを元に、HTML形式のドキュメントを生成するためのツールです。SwaggerEditorから各言語で自動生成することが可能です。\nSwaggerCodegen\nSwagger Codegenとは、SwaggerSpecから， クライアントライブラリやスタブサーバー、ドキュメントを生成するツールです。\nCLIから生成をすることが出来ますが、先ほど紹介したSwagger Editorからも生成することが可能です。\n終わりに 以上のように、SwaggerはAPIドキュメントに関して定義から閲覧までを完全にサポートしており、API開発においてとても便利です。\nまだ、エクセルやパワポなどで管理している場合は、効率が格段に変わりますので是非導入してみてはいかがでしょうか？\n","date":"2018-08-04T14:56:41+09:00","image":"/wp-content/uploads/2018/07/howtoSwaggerEye.png","permalink":"/2018/08/04/5132/","title":"【炎上回避】APIドキュメントはSwaggerで定義すると幸せになれる説"},{"content":"HDDが認識されない 正しく繋げてるのに。。。 以前、こちらの記事で自作PCの購入からインターネット接続までの手順についてご紹介しました。\n関連記事 【自作PCデビュー】4K動画を編集出来るレベルのパソコンを作ってみた【Ryzen/X470/GEFORCE/G.Skill/SamsungSSD】 2018/06/13 2526文字 約6分で読めます 関連記事 【自作PCデビュー】組み立ててインターネットに繋げるとこまでやってみた【Ryzen/X470/GEFORCE/G.Skill/SamsungSSD】 2018/07/23 4143文字 約9分で読めます その際に、HDDの取り付けも正しくご紹介しましたが、いざエクスプローラーを開いてみるとHDDが認識されていませんでした。\nぐぬぬ。。。。\n原因は未割り当ての状態だった なにやら、HDDを認識させるには最初にシンプルボリュームの作成をする必要があるようです。\n今回、初めて自分でやってみましたがとても簡単でしたので手順をご紹介致します。\n手順 設定画面を開く まずは、コントロールパネルからコンピューターの管理画面まで遷移します。\nシンプルボリュームの作成 次に、対象のHDDにシンプルボリュームを作成します。\n未割り当ての領域があると思うので、そこを選択した上で右クリックから新しいシンプルボリュームを選択します。\nすると、以下のようなウィザードが表示されます。\n基本的には初期設定のままでも良いですが、よしなに設定を変えてください。\n今回はデフォルトのまま作業を進めました。\nすると、以下のようにシンプルボリュームの作成が完了します。\n確認 エクスプローラーを表示すると、正常にDドライブが認識されていますね♪\n終わりに 以上のように、簡単にHDDをボリュームとして利用するための設定を行うことが出来ます。\n本来は、細かくボリュームを分けて作成した方が良いので、用途に合わせて調整しながら作業を進めてみてください。\n","date":"2018-07-25T09:46:53+09:00","image":"/wp-content/uploads/2018/07/hddSettingEye.png","permalink":"/2018/07/25/5114/","title":"【自作PC】取り付けたHDDをWindows10で認識されない場合の対応方法"},{"content":"おさらい 前回は、初の自作PCに向けwktkしながらパーツを選び注文するところまでを記事にまとめました。\n関連記事 【自作PCデビュー】4K動画を編集出来るレベルのパソコンを作ってみた【Ryzen/X470/GEFORCE/G.Skill/SamsungSSD】 2018/06/13 2526文字 約6分で読めます パーツが到着したぞー！ Amazon最\u0026amp;高 注文してからわずか5日ほどで、全てのパーツが届きました。\nさすアマ。(さすがAmazonの意)\n愉快な仲間たち これから筆者に快適なPC生活を提供してくれるのはこいつら！！\n猛者ぞろいだぜ・・・！\nでは、早速組み立ててみましょう！！\n手順 マザーボードにCPUを取り付ける まずは土台となるマザーボードにCPUを取り付けていきます。\nマザーボードはASUS AMD X470を購入しました。\nAmazon ASUS AMD X470搭載 マザーボード Socket AM4対応 PRIME X470-PRO【ATX】 開封するとこんな感じです。\nぱかっ！！\nちなみにマザーボードの各端子については、取扱説明書に詳細が記載されているので、そちらを確認しながら後続の作業を進めると、スムーズに行えると思います。\nCPUはAMD CPU Ryzen 7 2700を購入しました。\nAmazon AMD CPU Ryzen 7 2700 with Wraith Spire (LED) cooler YD2700BBAFBOX 開封するとこんな感じです。\nぱかっ！！\nCPUを取り付ける部分はこの部分です。\n固定バーは上にあげておきましょう。\nCPUは上から置く感じではめ込むことが出来ます。\n向きに気をつけましょう。\n固定バーも忘れずに下げておきましょう。\nマザーボードへメモリの取り付け 次にマザーボードにメモリを取り付けます。\nメモリはG.Skill F4-3200C14D-16GFXを購入しました。\nAmazon G.Skill F4-3200C14D-16GFX (DDR4-3200 CL14 8GB×2) AMD Ryzen用メモリ 取り付ける部分はCPUを取り付けた部分の横になります。\n取り付ける部分の爪をあらかじめ開いておきましょう。\n爪がカチっと固定されるまで結構強めに押し込みます。\n壊れそうでちょっと怖いです。。。笑\nCPUクーラーの設置 次にマザーボードにCPUクーラーを取り付けます。\n今回はRyzenに標準で同梱されていたものを利用します。\nCPUクーラーをCPUの上に乗せるのですが、金具を固定出来る向きが決まっているので気をつけましょう。\n乗せたらしっかり爪を固定します。\n反対側も固定します。\nその際に固定レバーを閉める必要があるのですが、このレバーが壊れるんじゃないかと思うくらいめちゃくちゃ硬いです。\n破損を恐れずに閉めてください。笑\n次にCPUファンのコードをマザーボードのCPU_FUNに差し込みます。\n自分は間違って以下のCPU_OPT部分に刺してしまいましたが、このままだとPC起動時にエラーが出ます。\n※筆者は気づかずに作業を進めてしまっていますorz\n次に付属の2本のコードをそれぞれCPUクーラーに繋ぎます。\n端子の形が異なるので間違えることはないと思います。\nまずはRGBコネクタをマザーボードのRGB_HEADER1に取り付けます。\n次にUSB 2.0も同様にマザーボードのUSB12に取り付けます。\nPCケースへマザーボードの取り付け 次にPCケースにマザーボードを取り付けます。\n今回購入したPCケースはFractal Design Define R5 Titanium Greyです。\nAmazon Fractal Design Define R5 Titanium Grey PCケース CS4988 FD-CA-DEF-R5-TI まずは側面のカバーを取り外しましょう。\n上下のネジを取り外し、\n固定金具を外すと、\n外れます。\nIOプレートを取り付ける場合は下からスライドする形で取り付けます。\nこのプレートは取り付けなくても問題はありませんので好みで。\nそして、マザーボード取り付け用のスペーサーを取り付け、\nその上からマザーボードを乗せさらにネジで固定します。\nPCケースへ電源ユニットの取り付け 次にPCケースに電源ユニットを取り付けます。\n今回購入したのは玄人志向 NEXTシリーズ 80 PLUS Bronze 600Wです。\nAmazon 玄人志向 NEXTシリーズ 80 PLUS Bronze 600W ATX電源 KRPW-N600W/85\u0026#43; 箱を開けるとヤマタノオロチみたいになってます。。。\n電源ユニットはPCケースの下部に取り付ける形になります。\nコードが絡まらないように気をつけましょう。\nまずは電源ユニットの24ピンケーブルをメモリ部分付近のEATXPWRに取り付けます。\n8ピンケーブルは以下のEATX12Vに取り付けます。\nマザーボードとPCケースのコードを取り付ける 次にPCケースのコードをマザーボードに取り付けます。\nまずはPCケースから伸びているUSB3.1のコードをマザーボードのU31G1_12に取り付けます。\n次にUSB2.0のコードをマザーボードのUSB34に取り付けます。\n次にフロントパネルオーディオコネクタをマザーボードのAAFPに取り付けます。\nここで電源の供給確認 ここまで出来たら電源が入る状態になっているはずなので、一旦電源ボタンを押してみましょう。\nポチッとな。\nおぉ。\nなんかかっこいい。(小並感)\n動作確認が出来たら30秒ほどで電源を切って次の作業に進みましょう。\n残りのPCケースのコードの取り付け 次はPCケースの残りのコードを取り付けていきます。\nここでは細かいコードが出てくるので、PCケースの取扱説明書とマザーボードの取扱説明書と照らし合わせながら作業をすると良いでしょう。\nPCケースのPOWER SW/POWER LED+/POWER LED-/HDD LED/RESETをマザーボードのPANELに取り付けます。\nその際の詳しい取り付け方は、マザーボードの取扱説明書のP1-13に記載されているので間違えないように気をつけましょう。\n次に、PCケース後方のファンコードをマザーボードのCHA_FUN1に取り付けます。\nPCケース前方のファンコードも同様にマザーボードのCHA_FUN3に取り付けます。\nこれでPCケース周りのコードの取り付けは完了です。\nマザーボードへGPUの取り付け 次にマザーボードにGPUを取り付けます。\nマザーボードの以下の場所が取り付ける部分になります。\nブスッと差し込みましょう。\nマザーボードへSSDの取り付け 次にマザーボードにSSDを取り付けます。\nケースの背面に取り付ける基盤があるので、そちらにネジで取り付けます。\n次に、SATAケーブルと電源ケーブルをマザーボードと繋げます。\nSATAケーブルは今回購入したマザーボードに付属されています。\nマザーボードへHDDの取り付け 次にマザーボードにHDDを取り付けます。\nHDDを取り付けるケースはスライドして取り出せるので、そちらにHDDをセットします。\nこちらも同様にSATAケーブルと電源ケーブルをマザーボードと繋げます。\nマザーボードへ無線Wifiの取り付け 次にマザーボードに無線Wifiを取り付けます。\n今回はGPUの下に取り付けてみます。\nそして、付属のアンテナを付ければ完了です。\nOSのインストール これで組み立ては完了です。\n次にOSをインストールします。\n今回はUSB版を購入しました。\nUSBポートに刺した上でPCを起動すると、ASUSの起動画面が出た後にWindowsのインストールの選択画面が表示されるのでWindows Setup (64-bit)を選択します。\nすると、Windows セットアップダイアログが表示されるので、任意の設定を選択した上で次へボタンをクリックします。\n次の画面が表示されたら、今すぐインストールボタンをクリックします。\nすると、Windows セットアップダイアログが表示されます。\nライセンスの認証を求められますので、プロダクトキーを入力し次へボタンをクリックします。\n次の画面では、利用規約が表示されるので、内容の確認の上問題がなければ同意するにチェックを入れ次へボタンをクリックします。\n次の画面では、インストールの種類を求められるので今回はカスタムを選択します。\n次の画面では、Windowsのインストール場所を求められるので、取り付けたSSDを選択し次へボタンをクリックします。\nすると、以下のような確認ダイアログが表示されるのでOKボタンをクリックします。\nこれでWindowsのインストールが始まりますので気長に待ちましょう。\nOSの初期設定 インストールが完了すると、Windowsが立ち上がります。\nまずは言語設定です。\n今回は日本を選択しました。\n次にキーボードレイアウトの設定を求められるので、今回はMicrosoft IMEを選択し次へボタンをクリックします。\n2つ目のキーボードレイアウトは今回はスキップしました。\n次にネットワークの設定を進められますが、こちらも今回はスキップします。\n次に、アカウントの作成を求められるので任意の名称を入力し次へボタンをクリックします。\n次に、パスワードの設定を求められますので、忘れないようにメモを取った上で入力を行いましょう。\n次に、パスワードの確認画面が表示されるので、同じパスワードを入力します。\nimg src=\"/wp-content/uploads/2018/07/customPc-31-36.jpg\" alt=\"\" width=\"1200\" height=\"800\" class=\"alignnone size-full wp-image-5090\" /\u003e\n次に、パスワードを忘れた際のヒントを入力する画面が表示されるので、任意のキーワードを入力し次へボタンをクリックします。\n次に、Cortanaの設定を求められます。\nCortanaとは、Windows10のAIパーソナルアシスタントです。\n今回は設定はしないので、いいえをクリックします。\n次に、デバイスのプライバシー設定の選択を求められるので任意の設定を行って同意ボタンをクリックします。\nすると、以下の画面が表示されたのちにデスクトップが表示されると思います。\nやったーーーー！\nWifiネットワークの設定 もう一息です、頑張りましょう！！\n次に、ネットワークの設定を行います。\n無線Wifiに付属されているインストールディスクを読み込むと、以下のような画面が表示されますので、ドライバのインストールを選択します。\n次に、インストール先の選択を求められるので、任意の場所を選択し次へボタンをクリックします。\n次に、プログラムフォルダの選択を求められるので、こちらも任意の場所を選択し次へボタンをクリックします。\nすると、インストールが開始されますので、確認ダイアログが表示されたらインストールボタンをクリックします。\nインストールが完了すると、タスクバーにWifiのステータスが表示されるようになったと思います。\nあとは、接続したいネットワークを選択し認証を行うことで、インターネットへの接続が出来るようになると思います。\nやったーー！！\n終わりに 初めてのPC組み立てだったのもあり、ところどころ写真の撮り忘れや説明ミスがあるかもしれません。。。orz\nただ、それぞれの取扱説明書を見ながら作業を進めれば、初めての方でも問題なく起動まで進めることが出来ると思います。\nその上で、この記事が少しでも皆様の役に立てばと思います。\n","date":"2018-07-23T23:21:42+09:00","image":"/wp-content/uploads/2018/07/customPcEye.png","permalink":"/2018/07/23/4801/","title":"【自作PCデビュー】組み立ててインターネットに繋げるとこまでやってみた【Ryzen/X470/GEFORCE/G.Skill/SamsungSSD】"},{"content":"Google Fontsは有能 古き良き(?)文化 皆さんはWebデザインを行う際に、テキスト画像(文字だけの画像)を使っていたりしますか？\n昔に作られたホームページでは、メニュー名や人物名のテキスト画像を書き出して、imgタグで読み込ませている手法をよく見かけます。\n全くもって無駄 しかし、この作業とても無駄が多いです。\n無駄ポイント\r名称が変わる度に再書き出しが必要\rサイズや色を変える度に際書き出しが必要\r書き出しのためにツールを用いる必要がある\rレスポンシブに対応出来ない\r拡大するとガビガビの画像になる\rファイル管理がめんどくさい\rなどなど。\n他にもあげるときりがありませんが、上記の通りあまりオススメ出来ません。\nWebフォントを使おう そんな不満点は、Webフォントを使えば解消することが可能になります。\nWebフォントとは、Web制作の中で使用することが可能なフォントとなっており、無料のものから有料のものまで幅広くあります。\nまた、このフォントはCSSによって色やサイズ、テキストの変更を簡単に行うことが出来るので、毎回変更のたびにファイルに書き出すこと無くコーディングのみで様々な表現をすることが可能です。\nGoogleFonts そして、そのWebフォントの中でも無料かつ多くのFontを提供しているのが我らがGoogleのGoogleFontsです。\n今回はGoogleFontsの導入から使用までをご紹介致します。\n手順 公式サイトで使用するフォントを選ぶ まずは公式サイトにアクセスします。\nすると、様々なフォントが表示されるので今回はMeriendaを導入してみようと思います。\n対象フォントの＋アイコンをクリックします。\nすると、Family Selectedというスネークバーが表示されますのでクリックします。\n複数選択することも可能なので、その場合は複数のフォントを選んでからクリックしましょう。\nサイトへの導入 すると、以下のようなモーダルが表示されるので、linkタグの文字列をコピーして、headタグに追記しましょう。\n正常に読み込まれていますね。\nCSSの設定 では、実際にGoogleFontsを設定してみましょう。\n今回は、CSSにて以下のタグに適用させてみます。\nサンプル \u0026lt;p\u0026gt;\u0026lt;span class=\u0026#34;googleFontsSample\u0026#34;\u0026gt;Blogenist from GoogleFonts\u0026lt;/span\u0026gt;\u0026lt;/p\u0026gt; 先ほどのモーダルのSpecify in CSSの一文をコピーして、上記のタグへのCSSを記述します。\nCSS span.googleFontsSample{ font-family: \u0026#39;Merienda\u0026#39;, cursive; } 確認 では、実際に確認してみましょう。\n正常に反映されていますね。\n終わりに 以上のように、会員登録などの作業が不要で簡単に導入することが出来ました。\nGoogleFontsはフォントの数が多く、また導入時のカスタマイズ性がとても高いので、次回はそちらの使い方をまとめてみようかと思います。\n","date":"2018-07-16T23:38:49+09:00","image":"/wp-content/uploads/2018/07/googleFontsEye.png","permalink":"/2018/07/16/4982/","title":"【簡単便利】Webフォントで有名なGoogle Fontsの導入方法と使い方まとめ【Webデザイン】"},{"content":"ある日突然、iTerm2が使えなくなった おろろ？ 先日、iTerm2で新しいタブを開こうと思ったところ、以下のようなエラーが出るようになりました。\nログ dyld: Library not loaded: /usr/local/opt/gdbm/lib/libgdbm.4.dylib Referenced from: /usr/local/bin/zsh Reason: image not found ぐぬぬ。。。\n原因 今回はbrew updateが実行されたタイミングで発生しているようです。\nエラーログを見る限り、Zshを動かすための/usr/local/opt/gdbm/lib/libgdbm.4.dylibが、なんらかの原因で無くなってしまっているらしいです。\nなので、Zshを再インストールすると治るとのことです。\n手順 bashに変更 まずは、ターミナルを使えるようにしないと話になりませんので、標準のターミナルでZshではなくBashを使うように変えましょう。\n環境設定から開くコマンドを完全パスで以下を指定してください。\nBash /bin/bash Zsh関連を再インストール 次に以下のコマンドでZsh関連のモジュールを再インストールしましょう。\n再インストール brew reinstall zsh \u0026amp;\u0026amp; brew unlink zsh \u0026amp;\u0026amp; brew link zsh 実行ログ ==\u0026gt; Reinstalling zsh --without-etcdir ==\u0026gt; Downloading https://downloads.sourceforge.net/project/zsh/zsh/5.5.1/zsh-5.5. ==\u0026gt; Downloading from https://jaist.dl.sourceforge.net/project/zsh/zsh/5.5.1/zsh- ######################################################################## 100.0% ==\u0026gt; ./configure --prefix=/usr/local/Cellar/zsh/5.5.1 --enable-fndir=/usr/local/C ==\u0026gt; make install ==\u0026gt; make install.info ==\u0026gt; Downloading https://downloads.sourceforge.net/project/zsh/zsh-doc/5.5.1/zsh- ==\u0026gt; Downloading from https://jaist.dl.sourceforge.net/project/zsh/zsh-doc/5.5.1/ ######################################################################## 100.0% 🍺 /usr/local/Cellar/zsh/5.5.1: 1,444 files, 12MB, built in 2 minutes 16 seconds Unlinking /usr/local/Cellar/zsh/5.5.1... 1405 symlinks removed Linking /usr/local/Cellar/zsh/5.5.1... 1405 symlinks created 確認 この状態で、もう一度iTerm2を開いてみましょう。\n正常にZshが開くようになりましたね。めでたしめでたし。\n終わりに 以上のように、Homebrewは便利ですが、たまにこのようにアプリケーションが動かなくなってしまうことがあります。\nそんな時は慌てずに調べれば先人の知恵がネット上に転がっているので、頑張って対処方法を探してみてください。\n","date":"2018-07-07T15:08:06+09:00","image":"/wp-content/uploads/2018/07/dylibErrorEye.png","permalink":"/2018/07/07/4966/","title":"【Zshが動かない】dyld: Library not loaded: /usr/local/opt/gdbm/lib/libgdbm.4.dylibが出た時の対処【iTerm2が動かない】"},{"content":"開封動画をやってみたくなった 筆者は仕事柄、いろいろなパソコンパーツやカメラ機材を買うのですが、せっかくなら開封動画やレビュー動画をYouTubeにあげてみたいなー、と思うようになりました。\n写真より読者に伝わりやすいでしょうし、YouTubeの広告収入がどれくらい頑張れば発生するのか？と言う興味もあったので。\nそこで、YouTubeの開封動画をいろいろ参考に見てみたのですが、基本的には真俯瞰撮影で投稿している方がほとんどでした。\n真俯瞰撮影？ What\u0026rsquo;s?? 真俯瞰(まふかん)撮影とは、真上から見下ろしたアングルでの撮影の事を指し、開封動画や料理動画などの手元の動きをより繊細に撮影することが出来る手法のことです。\n機材を使わないと難しい この真俯瞰撮影ですが、普通の三脚等でも一応撮影することは可能ではありますが準備やセッティングが大変です。\n実際に筆者も手持ちの三脚で試してみましたが、角度やアングル、被写体を映像におさめるのが大変で苦戦しました。笑\nそんな中、真俯瞰撮影を手軽に行うことを可能にするカメラ機材を見つけたので今回まとめて購入してみました。\n購入物 Velbon 三脚アクセサリー クランプキットII まずは、Velbon 三脚アクセサリー クランプキットIIです\nAmazon Velbon 三脚アクセサリー クランプキットII 473264 こちらは、机などにポールを固定するための器具になります。\nこちらを利用することで垂直方向の調整が可能になります。\nSLIK 雲台アクセサリー スライディングアーム SLARM2 次は、SLIK 雲台アクセサリー スライディングアーム SLARM2です。\nAmazon SLIK 雲台アクセサリー スライディングアーム 2 俯瞰撮影・接写などに便利 SLARM2 こちらは、水平方向への調整を可能にしてくれます。\n先ほどの器具と組み合わせることでかなり自由度の高い調整が可能になります。\n自由雲台 Sinvitron ボールヘッド 次は、自由雲台 Sinvitron ボールヘッドです。\nAmazon 自由雲台 Sinvitron ボールヘッド 雲台 360度回転可能 クイックシュー付き アルミ製 軽量小型 水準器付き縦横調節可能 最大荷重10kg こちらは取り付けたカメラのアングルを360度調整が可能になります。\n先ほどの器具と合わせることで調整力がMAXになります。笑\n山善(YAMAZEN) テーブル ミニ 折りたたみ式 今回は、作業用のミニテーブルも買ってみました。\nAmazon 山善(YAMAZEN) テーブル ミニ 折りたたみ式 サイドテーブル 幅50×奥行48×高さ70cm ハイタイプ アンティーク調 アイボリー YST-5040H(AIV) パソコンデスク等がある方は特に購入する必要は無いとは思います。\nただ、折りたたみ可能でちょうど良いサイズ感なのであっても困らないアイテムだと思います。\nセッティング テーブルにクランプキットを取り付け では、実際に取り付けていきましょう。\nまずはクランプキットです。\nクランプキットはテーブル板にかませる形で取り付けを行います。\nクランプキットの上部には、雲台取付ネジがついています。\nクランプキットにスライディングアームを取り付け 次にスライディングアームです。\nこちらはクランプキットの雲台取付ネジに取り付けを行います。\nこちらも、カメラ取り付け側には雲台取付ネジがついています。\n反対側にはフックがあるので、カメラの重さに合わせて調整をすることが可能です。\n※重りは付属されていません\nスライディングアームに自由雲台を取り付け 次は自由雲台です。\nこちらはスライディングアームの雲台取付ネジに取り付けます。\nクイックシューは簡単に取り外しが可能で、つまみのあるのでコイン等を用いる必要はありません。\n自由雲台にカメラを取り付け 次はカメラです。\nこちらはクイックシュー経由で自由雲台に取り付けます。\nこんな感じ！！\nおー。いいですね♪\n終わりに これで開封動画を撮影する準備が出来ました。\n少しずつ開封動画等をアップしていこうと思いますので宜しかったらそちらも見てみてくださいね♪\n","date":"2018-06-30T16:59:26+09:00","image":"/wp-content/uploads/2018/06/mafukanSetEye.png","permalink":"/2018/06/30/4914/","title":"【真上視点を実現】自宅で真俯瞰撮影するために必要な機材を一通り買ってみた【開封動画には必須】"},{"content":"複数PC使いの悩み USB HDDだとマシン間の共有が出来ない 筆者はWindowsデスクトップマシンと、Macbook Proの2台使いをしています。\nブログ執筆や簡単な動画編集、コーディングはMacbook Proで行い、その他のマシンパワーが必要な作業はWindwsoマシンで行っています。\nその際に、撮影データ等を双方のマシンで共有したくなるのですが、USB HDDだと、毎回繋げ直す必要があるのですが、\nまー、これがめんどくさい。。。orz\n以前、Windowsマシンの共有フォルダを閲覧可能にする記事は紹介しましたが、正直なところ使い勝手は悪いです。 関連記事 【複数のパソコンを無線で繋ごう】ネットワークの設定方法-Windows版 2017/10/15 1160文字 約3分で読めます 共有元のPCの電源を入れておく必要もありますし。。。\nNAS最強説 そんな時に、NASの存在を知りました。\nNASとは、「Network Attached Storage」の略で、PCではなくネットワークに接続して使うHDDのことを指します。\n一般的なHDDはPCに対してUSB接続して利用をするかと思います。\nネットワークに接続する事で、同一ネットワーク内の複数のPCから同時に利用が出来る、と言う仕組みですね。\nNASのメリット NASを利用するメリットは以下だと思っています。\nメリット\r複数マシンで同時利用可能\r省エネ\rセキュリティがしっかりしている\r自宅外からの利用も可能\rAndroid,iPhoneからも利用可能\rNASのデメリット 一方で、デメリットは以下だと思っています。\nデメリット\rお高い\rネットワークのスピードに依存する\r持ち運びがしにくい\rついに我が家にも導入 筆者はデメリットよりも導入するメリットの方が大きいと思ったので、先日購入しました。\nAmazon I-O DATA NAS 6TB RAID 1(ミラーリング)/デュアルコアCPU/高速モデル/2ドライブ/3年保証/日本製 HDL2-AA6/E こちらは大容量モデルとなっており、RAIDという仕組みによる自動バックアップも可能となっております。\nまた、HDDの交換にも対応しており長く使えると思い購入しました。\n容量についてはいろいろなサイズあるので、お財布状況と保存するデータに合わせて決めると良いでしょう。\nでは、実際に導入していきましょう。\n手順 開封の儀 パッケージの外観はこんな感じ。\n付属品は以下です。\nPoint\rNAS本体\rLANケーブル\rACアダプタ\r電源コード\r取扱説明書\rでは、実際に取り付けていきましょう。\nルーターとの接続 まずはNASをルーターと接続する必要があります。\n付属の電源ケーブルとLANケーブルを接続し、電源ボタンを押しましょう。\nすると、ランプが点灯するのでこれでNAS本体側の設定は完了です。\nスゴイ！簡単！！\nPC側の設定 次にPC側の設定を行います。\nWindows まずは、エクスプローラを開き、ネットワークにLANDISKが表示されていると思うので、ダブルクリックします。\nすると、LANDISKの簡単セットアップ画面が表示されるので、セットアップスタートボタンをクリックしダウンロードされるexeファイルを実行しましょう。\nすると、LAN DISKが管理に追加になると思います。\nこれでセットアップは完了です。\nMac まずはコチラにアクセスしてください。\nすると、以下のようなMagicalFinderのダウンロード画面が表示されるので、MasOSを選択しダウンロードページに進むボタンをクリックします。\n次の画面ではそのままダウンロードボタンをクリックします。\nダウンロードが完了したらファイルを実行してインストールしましょう。\nインストールが完了して、ソフトを起動すると設定可能なネットワークデバイス一覧にlandisk-XXXXと表示されると思いますのでこれでセットアップは完了です。\n初期設定 次に、NASの初期設定を行いましょう。\n今回はMacでの手順を紹介します。\n管理ユーザーの設定 まずは、設定可能なネットワークデバイス一覧にlandisk-XXXXの、ブラウザボタンをクリックします。\nすると、以下のような画面が表示されます。\n初期表示では管理者のパスワードは未設定なので、何も入力せずにログインボタンをクリックします。\n次の画面では、パスワードの設定を求められるので、任意のパスワードを入力の上適用ボタンをクリックします。\nすると初期設定画面が表示されます。\n今回は初期設定のままで良いので、初期設定を保持ボタンをクリックします。\nこれで初期設定は完了です。\nアクセスユーザーの作成 次に、実際にNASに接続するためのアクセスユーザーを作成します。\nホームからユーザー\u0026グループ\u003eユーザー\u003e追加に進みます。\n次のユーザー追加画面では、ユーザー名/パスワード/パスワード(確認)を入力し、追加ボタンをクリックします。\nこれでユーザーが正常に作成されました。\nフォルダへのアクセス許可 次に、作成したユーザーへフォルダへのアクセス権限を追加します。\nホームから共有\u003eフォルダ\u003e一覧に進みます。\nすると、ディスク一覧が表示されるので、disk1の変更ボタンをクリックします。\n次の画面では作成したユーザーが禁止ユーザーになっているので、選択して読み書きユーザー側の選択をクリックすることで移動することが出来ますので、その状態で変更ボタンをクリックします。\nこれで先ほど作成したユーザーでのNASへのアクセスが可能となりました。\nNASにアクセス では、実際にNASにアクセスしてみましょう。\nMAC Finderを開くと、landisk-xxxxと言う共有ディスクが表示されると思いますので、別名で接続を選びます。\n先ほど作成したユーザーのID/PWを入れることでアクセスが可能になります。\nWindows 追加されたLAN DISKに表示されているアイコンをダブルクリクをすると、ネットワーク資格情報の入力ダイアログが表示されるので、先ほど作成したユーザー情報を入力の上OKボタンをクリックします。\nすると、アクセスが可能になります。\ndisk1フォルダに入ると、先ほどMac側の作業時に作成したフォルダが確認が出来ると思います。\n終わりに これで、二つのマシンから共用ディスクとして使えるようになりました。\n繋ぎ直す手間が無くなったり、自動バックアップ機能もとても便利なので、HDDの買い替えを考えている方はぜひNASを導入してみてはいかがでしょうか♪\n","date":"2018-06-28T21:43:47+09:00","image":"/wp-content/uploads/2018/06/setupNasEye.png","permalink":"/2018/06/28/4847/","title":"【複数マシン使いには必須】NASを買ったのでWindowsとMacで繋げてみた【HDD】"},{"content":"EC2のスペックアップをしたい クラウド化の特権 AWSでインフラ構築をしている場合、パフォーマンス等の兼ね合いでEC2インスタンスのサイズを構築後に変えたいというケースがあると思います。\n上記の要望については、AWSを使っていれば簡単に構築後でもサーバーのスケールアップを行う事が可能です。\nクラウドの特権ですね♪\n手順 対象のインスタンスを停止する インスタンスのサイズを変更するにはまずインスタンスを止めなければいけないので、対象のインスタンスにチェックを入れ、アクション\u003eインスタンスの状態\u003e停止から、インスタンスを停止しましょう。\n※本番運用等をしている場合は気をつけてください\nすると、以下のような確認ダイアログが表示されます。\nエフェメラルストレージ内のデータは消えてしまいますので、確認の上問題がなければ停止するボタンをクリックします。\nインスタンスの状態がstoppedになったら、アクション\u003eインスタンスの設定\u003eインスタンスタイプの変更を選択します。\nすると、インスタンスタイプの変更ダイアログが表示されるので、任意のタイプを選択の上適用ボタンをクリックします。\nこれで、インスタンスタイプが変更されましたので、再度インスタンスを起動します。\nアクション\u003eインスタンスの状態\u003e開始を選択します。\nすると、以下のようなインスタンスの開始ダイアログが表示されるので、問題が無ければ開始するボタンをクリックします。\nこれで再起動されればインスタンスサイズの変更作業は完了です♪\n終わりに 以上のように、マネジメントコンソール内で数クリックするだけでインスタンスタイプの変更作業は完結出来てしまいます。\nAWSを使えば、サーバーを作り直す必要がほぼ無くなるので、どんどんAWSを使っていきましょう♪\n","date":"2018-06-25T18:44:35+09:00","image":"/wp-content/uploads/2018/06/changeInstanceSizeEye.png","permalink":"/2018/06/25/4899/","title":"【瞬殺】AWSのEC2インスタンスのサイズを構築後に変更する方法【スケーリング】"},{"content":"Windows10ではスクリーンショットが楽チンに 筆者は今までWindowsで画面のキャプチャを保存する際には、以下の2パターンで行っていましたが、どちらも手間がかかりとても面倒くさく感じていました。。。\n方法\r手順\r不満点\rPrintScreen + ペイント\rキーボードのPrintScreenキーでキャプチャをコピーし、Paintを立ち上げて貼り付けた上で保存をする\r・１枚保存するのに複数の操作が必要\n・連続で保存するのが大変\rSnippingTool\rWindows標準搭載のアプリでキャプチャ範囲を選択して保存をする\r・連続保存時に毎回保存ダイアログが出るのが邪魔\rPrintScreen機能が進化 自動保存 Windows10では、PrintScreenキーでキャプチャを撮る際に、キーと同時押しをする事で、自動的にPictureフォルダにファイルが保存されていくようになりました。\nMacのスクリーンショット機能にとても近い感じになり、キーボード操作のみで保存まで行われるので、とても使い勝手が良くなりましたね♪\n範囲指定 さらに、キー+Shiftキー+sキーを同時に押すことで、範囲選択も可能になりました。\n画面が白くなり、ドラッグ\u0026ドロップで範囲選択をすることでクリップボードへの保存がされます。\n※自動保存は出来ません\nSnnipingToolを起動することなく範囲キャプチャの保存が出来るので、とても便利です。\n終わりに 以上のように、操作手順等を連続して画面キャプチャに収めたい場合にとてもスムーズに保存を出来るようになりました。\n範囲選択についても、SnnipingToolを起動する必要が無くなったのはとてもでかいので、是非試してみてはいかがでしょうか。\n","date":"2018-06-24T15:25:32+09:00","image":"/wp-content/uploads/2018/06/windows10CaputureEye.png","permalink":"/2018/06/24/4886/","title":"【キャプチャ機能が進化】Windows10でスクリーンショットを簡単に撮る方法"},{"content":"収益が住所確認額に到達！！ 支払のためには住所確認が必要 GoogleAdsenseを仕込んだブログでのんびりちまちま記事を書いていたのですが、ついにある程度の収益が溜まりGoogleAdsenseのダッシュボードに以下のようなメッセージが表示されるようになりました。\nGoogleAdsenseでは、収益が住所確認基準額の1000円に到達した際に、住所確認を行う必要があります。\nその際にPINコードの入力を行うのですが、このPINコードはハガキで郵送されます。\n上記のメッセージはハガキを郵送したので届いたらPINコードを入れて住所確認をしてね！と言う旨のメッセージとなります。\n今回は手元にハガキが届いたのでPINコードの登録手順をまとめてみました。\n手順 注意 このハガキですが、以下のように2~4週間ほどで到着します、と書かれていますが筆者の場合は1ヶ月くらいかかりました。\nなので、到着するまで気長に待ちましょう。笑\n開封の儀 ハガキはしっかりと封が閉じられています。\nですので、開封をしましょう。\nビリビリビリ。\nぱかっ。っつって。\n中には登録方法とPIN番号が記載されていますね。\nPINコードの登録 では、実際に登録をしてみましょう。\nGoogleAdsenseのダッシュボードにログインし、左部メニューから歯車アイコン\u003eアカウント情報をクリックします。\nすると、アカウント情報画面が表示されるので住所の確認リンクをクリックします。\n次の画面のページ下部にPINコードの入力エリアがあるので、ハガキに記載のPINコードを入力し、PINを送信ボタンをクリックします。\n※3回失敗すると広告の配信が停止してしまうので気をつけましょう\n正しく入力されると、赤いメッセージが表示されなくなりました。\nこれでPINコードの認証が終わり住所確認が完了しました。\n終わりに PINコードの登録自体はとても簡単です。\nこれで支払の準備が整ったので、あとは記事をどんどん執筆して収益を増やしていくだけですね！\nまずは初めての支払に向けて頑張って行きましょう！！\n","date":"2018-06-22T21:21:54+09:00","image":"/wp-content/uploads/2018/06/adsenseRegisterPinEye.png","permalink":"/2018/06/22/4811/","title":"【祝不労所得】GoogleAdsenseの収益が基準額に到達したのでPINコードが記載されたハガキが届いたよ"},{"content":"あれ、Pingが通らないぞ・・・？ 先日、EC2インスタンスを構築し、疎通確認のためにローカルマシンからPing通信を送ったところ、何も反応がありませんでした。。。\nPingコマンド ping {ElasticIP} PING {ElasticIP} ({ElasticIP}): 56 data bytes Request timeout for icmp_seq 0 Request timeout for icmp_seq 1 Request timeout for icmp_seq 2 ^C --- {ElasticIP} ping statistics --- 4 packets transmitted, 0 packets received, 100.0% packet loss むむ。。。\nサーバーにはSSH通信で入れるし、試しにApacheを入れてみると正常にindex.htmlが表示されるので、サーバーが止まっているわけではなさそうなのに。。。orz\n原因はAWSのデフォルトのセキュリティグループの設定 これは、AWSのセキュリティグループでPing通信に該当するICMP(Internet Control Message Protocol)の接続許可がデフォルトでは許されていないのが原因でした。\n\u003c[adsense-responsive]/div\u003e\rなので、セキュリティグループのインバウンドに以下のような設定を追加すればPing通信が可能になります。\nタイプ\rすべてのICMP\rプロトコル\rICMP\rポート範囲\r0 - 65535\rソース\rカスタム：{許可するIPアドレス}\r説明\r任意\r確認 では、もう一度タイムアウトが発生していたサーバーにPing通信を試みてみましょう。\nPingコマンド ping {ElasticIP} PING {ElasticIP} ({ElasticIP}): 56 data bytes 64 bytes from {ElasticIP}: icmp_seq=0 ttl=236 time=19.232 ms 64 bytes from {ElasticIP}: icmp_seq=1 ttl=236 time=13.820 ms 64 bytes from {ElasticIP}: icmp_seq=2 ttl=236 time=13.606 ms ^C --- {ElasticIP} ping statistics --- 3 packets transmitted, 3 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 13.606/15.553/19.232/2.603 ms 正常にパケットが返ってくるようになりましたね。\n終わりに とても初歩的なことですが、当たり前のようにPingが出来るものだと思い込んでいると、この原因に気付かずにインフラ環境構築でハマってしまう可能性がありますので、AWSでサーバー構築をする際には是非念頭に入れておくといいでしょう。\n","date":"2018-06-20T21:34:45+09:00","image":"/wp-content/uploads/2018/06/pingEc2Eye.png","permalink":"/2018/06/20/4805/","title":"【罠】AWSのEC2インスタンスにPingが通らない原因と解決方法【瞬殺】"},{"content":"GoProの弱み GoProはアクションカメラとしてはトップ 皆さんはGoProをご存知でしょうか。\n筆者はGoPro信者ということもあり、本ブログでもいくつか記事を執筆しています。\n関連記事 【HERO/Session】GoPro製品の最新ラインナップ一覧【Fusion/Karma】 2018/04/18 1800文字 約4分で読めます 関連記事 水中と水面を一枚の写真に！GoPro用アクセサリ「FiftyFifty」 2017/10/25 548文字 約2分で読めます 関連記事 【2017年新型】GoPro Hero6 Blackが遂に9/29に発売！！ 2017/09/29 1336文字 約3分で読めます 関連記事 【GoProの良さ比較】GoProと他のアクションカメラを使ってみて分かったコト！ 2017/09/13 1658文字 約4分で読めます やはり、防水/防塵/防衝撃やサイズ感、スーパースローモーションや4K撮影を考えるとアクションカメラの第一線を走り続けていると言っても過言ではありません。\n筆者が感じた弱点 しかし、何年も使っていると、気になってしまう部分が見えてきてしまいます。\nそれは、\n暗所での撮影\nです。\n夏にBBQやキャンプなどでGoProを使うのですが、少し暗い場所での撮影を行うと、すぐ映像が映らなくなってしまいます。\nProTurnモードで対応出来るが・・・ 一応、ProTurnモードでISOの数値を上げて対応する事は出来ますが、その代わりノイズが大量に発生することになってしまうので、解決策とは言えません。\nあくまで、応急処置って感じですね。orz\nGoPro向けLEDライト そんな問題を解決してくれるのが、LEDライトアクセサリです。\nGoProに使用できるLEDライトアクセサリは純正のものは存在しませんが、サードパーティ製のものがいくつか発売されています。\nそこで、現在発売されているLEDライトアクセサリをいくつかピックアップしてご紹介致します。\n比較 Knog QUDOS アクションライト まずはKnog QUDOS アクションライトです。\nhttps://player.vimeo.com/video/140150880\rAmazon Knog QUDOS アクションライト ブラック AKGQDL-BK こちらは防水製となっており、電池も充電式となっております。\nLEDの強さも細かく分かれており、最大出力時のパワーはものすごく強い光が発せられます。目が痛いくらい。。。笑\nGoProにつける場合は付属のマウントを利用してサイドにつける形になります。\nこちらはGoProHERO5/6どちらでも利用可能となっております。\nただ、お値段が高いです。。。orz\nManfrotto Off road 次はManfrotto Off road GoPro用LEDライト MLOFFROADです。\nAmazon Manfrotto Off road GoPro用LEDライト MLOFFROAD こちらも充電式となっており、ライトの強さも3段階の調整が可能です。\nGoProにつける場合は付属のマウントを利用して上部につける形になります。\nただ、GoProHERO5/6にはサイズ的に合わないっぽいです。。。orz\nAndoer アクションカメラ用 LEDリングライト 次はAndoer アクションカメラ用 LEDリングライト ミニです。\nAmazon Andoer アクションカメラ用 LEDリングライト ミニ LEDライト 調光可能 80個 ビーズ GoPro Hero 5/4/3 \u0026#43; / 3 などスポーツカメラ用 こちらは電池交換式となっており、ライトの強さはダイヤルでの調整が可能です。\nGoProにつける場合は中央部分に埋め込む形になります。\nただし、こちらもGoProHERO6にはサイズ的に合わないです。。。orz\nそして、装着時のサイズがめちゃくちゃでかくなってしまいます。。。orz\nAndoer SL-109 30 LED ダイビングライト 次はAndoer SL-109 30 LED ダイビングライトです。\nAmazon Andoer SL-109 30 LED ダイビングライト 防水40m 3モード GoPro Hero 6/5/4/3 \u0026#43; / 3 Yi 4K SJCAM アクションカメラ用 こちらは防水となっており、ライトの強さも調整が可能です。\nGoProにつける場合は中央部分のマウントに装着する形になります。\nこちらは、GoProHERO5/6やその他ほかのアクションカメラも装着することが出来るようですね。\nほかのLEDライトアクセサリより良さそうな気がしています。\n価格も良心的！安い！\n一番おすすめ★LED 16 Waterproof GoPro Action Light 最後はLED 16 Waterproof GoPro Action Lightです。\nこちらは充電式で防水となっており、ライトの強さも調整が可能です。\nGoProにつける場合は専用のマウントを利用してフロント側に装着する形になります。\nこちらは、GoProHERO5/6に完全にサイズが一致しており、装着時のサイズもそこまで変わりません。\n価格も日本円で6000円くらいなので良心的です。\nただし、日本ではAmazon含め出品されていないので、海外サイトから個人輸入する必要があります。。。orz\n筆者は初めて個人輸入をしました。笑\nしかし、使い勝手は抜群です！\n興味のある方は是非個人輸入をしてみてください。\n終わりに 以上のようにサードパーティ製のLEDライトアクセサリは色々あります。\n今回紹介していないものについても、似たようなものがゴロゴロあるので自分の理想にあったものを探してみてください。\nLEDライトアクセサリがあると、今までは弱かった夜や暗所での撮影が可能になるので、よりGoProの活躍場所が広がります！！\nGoPro純正のLEDライトアクセサリが販売されればめちゃくちゃ売れると思うのになー・・・(´・ω・`)w\n","date":"2018-06-17T12:13:57+09:00","image":"/wp-content/uploads/2018/06/goproLedEye.png","permalink":"/2018/06/17/4759/","title":"【比較】GoProのLED照明をいろいろ試した上でのオススメ製品【HERO6対応】"},{"content":"プライベートサブネットでyumエラー yumインストールが出来ない いつも通りpublicサブネットとprivateサブネットのEC2インスタンスに対して、Ansibleを使ってサーバー構築をしていた際に、yumを使ってモジュールをインストールしようとしたところpublicサブネット上のEC2インスタンスには正常にインストール出来ましたが、privateサブネット上のEC2インスタンスでは以下のエラーが発生してしまい、インストールが出来ませんでした。\nエラーログ Failure talking to yum: Cannot find a valid baseurl for repo: amzn-main/latest 一体これは一体何が原因なのでしょう。。。\nインターネットに出れない事が原因 これは、AWSのyumリポジトリへのアクセスをする際に、デフォルトのyum設定の場合は、AWSのインターネットゲートウェイを介して通信が行われるのですが、プライベートサブネット内のEC2インスタンスは内部アドレスしか持ってないのでインターネットへの接続が出来ません。\nNATゲートウェイの利用 その問題を解決するために、AWSにはNATゲートウェイというものが存在しています。\nNATとはNetwork Address Translationの略で、AWSのNATゲートウェイは自分自身へのインターネットからの接続は遮断するが、自分自身のインターネットへの接続は許可するための機能です。\nでは、実際に作成してみましょう。\n手順 NATゲートウェイの作成 AWSのサービスメニューからネットワーキング\u0026コンテンツ配信\u003eVPCを選択します。\n次に、左部メニューからNATゲートウェイを選択し、NATゲートウェイの作成ボタンをクリックします。\nすると、NATゲートウェイの作成ダイアログが表示されるので、privateサブネットを選択し、ElasticIPを選択(必要があれば新しいEIPの作成ボタンをクリックして作成)し、NATゲートウェイの作成ボタンをクリックします。\n正常に作成が完了すると、以下のような画面が表示されるのでルートテーブルの編集ボタンをクリックします。\n次に、関連付けたいprivateルートテーブルにチェックを入れ、ルートタブを選択し、編集ボタンをクリックします。\n送信先に0.0.0.0/0を入力し、ターゲットにNATゲートウェイのIDを入力したら保存ボタンをクリックします。\nこれでprivateルートテーブルからインターネットへの接続が出来るようになりました。\n確認 では、もう一度yumインストールを試してみましょう。\n実行ログ Installed: docker.x86_64 0:18.03.1ce-2.141.amzn1 Dependency Installed: bzip2.x86_64 0:1.0.6-8.12.amzn1 dash.x86_64 0:0.5.5.1-4.5.amzn1 device-mapper.x86_64 0:1.02.135-1.31.amzn1 device-mapper-libs.x86_64 0:1.02.135-1.31.amzn1 dracut.noarch 0:004-409.31.amzn1 file.x86_64 0:5.30-11.34.amzn1 grubby.x86_64 0:7.0.15-7.8.amzn1 kbd.x86_64 0:1.15-11.4.amzn1 kbd-misc.noarch 0:1.15-11.4.amzn1 kernel.x86_64 0:4.14.42-52.37.amzn1 libcgroup.x86_64 0:0.40.rc1-5.11.amzn1 libseccomp.x86_64 0:2.3.1-2.4.amzn1 libtool-ltdl.x86_64 0:2.4.2-20.4.8.5.32.amzn1 xfsprogs.x86_64 0:4.5.0-9.21.amzn1 Complete! 正常にyumインストールが出来るようになりましたね。\n終わりに AWSのゲートウェイ周りの仕組みが分かってないと、原因と対応方法がわかりにくい現象でしたね。\nお困りの際は、是非この記事を参考にして対応してみてください。\n","date":"2018-06-16T13:15:36+09:00","image":"/wp-content/uploads/2018/06/privateSubnetYumErrorEye.png","permalink":"/2018/06/16/4744/","title":"【NATゲートウェイ】プライベートサブネットでCannot find a valid baseurl for repo: amzn-main/latestが出てしまう際の対応方法【AWS VPC】"},{"content":"終わりは突然訪れる 終わりの始まり 筆者がいつも通り仕事から帰宅し、デスクトップPCでYouTubeでも垂れ流しにしながらMacで仕事をしようと思ってデスクトップPCの電源を入れたところ、\n何分待っても画面が表示されない。\n気のせいだろうと、強制的に電源を切って再度電源を入れても、\n起動画面すら表示されない。。。\nついに来てしまったか。。。\n8年プレイヤーのベテランPC このデスクトップマシンは、知人に組んでもらった自作PCであり結構良いスペックでした。\nそのためか、AfterEffectsやPhotoShop、Eclipseを使っても快適な作業をこなす事が出来、ゆえに8年間も現役最前線を突っ走ってくれてました。\nそう考えると、寿命が来てもおかしく無いですね。\nということで自作デビュー☆ そんなこんなで新しいデスクトップPCが必要になったわけですが、当時はPCもITも全く知らない大学生だったので知人に依頼しましたが、今はIT業界で働いている身になったので、せっかくなので自作してみようと思いました！\nせっかくならブログ記事にも出来ますしね☆\n最低限欲しいスペック 今回作成する自作PCは以下の用途を考えているので、それぞれストレスにならないレベルのスペックを考えています。\n課題\r4K動画の再生/編集\rAdobe製品のストレスフリーな使用\rOffice製品のストレスフリーな使用\rPCゲームは行わない\r無線Wi-fiでインターネット接続したい\rこんな感じですね。\nでは、次から必要なものと実際に購入した製品を紹介していきます。\n必要なものと購入品 CPU まずはCPUです。\nCPUとは、Central Processing Unitの略で人間でいうところの脳の役割を果たしています。\n頭がいいと複数のタスクを同時にこなす事が出来ますよね。\nパソコンも同様で、このCPUが優秀なほどマルチタスクをこなす事が可能になります。\nCPUの分野ではIntelが有名でしたが、近年はRyzenというメーカーが伸びてきました。\nまた、2018年4月に最新モデルのRyzen7 2700Xが出たので、今回はそちらを購入してみようと思います。\nAmazon AMD CPU Ryzen 7 2700 with Wraith Spire (LED) cooler YD2700BBAFBOX マザーボード 次はマザーボードです。\nマザーボードは人間でいうところの神経のような役割をしています。\n手や足、指などの様々なパーツに繋がっており、それぞれに信号を送ります。\nPCの場合は手や足はメモリやHDDなどのパーツにあたります。\n今回はRyzen7 2700に取り付け可能なAsusのマザーボードを購入しました。\nちなみに、AsusはPCメーカーとしても有名なのでなんとなく安心感はあります。笑\nAmazon ASUS AMD X470搭載 マザーボード Socket AM4対応 PRIME X470-PRO【ATX】 GPU 次はGPUです。\nGPUとは、Graphics Processing Unitの略で主に画像や映像の描写機能を担当しています。\n今回はAdobe認定製品のお墨付きがあるGEFORCEの1050を購入します。\n1080や1070、1060というモデルがありますが、とてつもなく高いので今回は1050で妥協しました。。。orz\nAmazon 玄人志向 ビデオカードGEFORCE GTX 1050搭載 GF-GTX1050-2GB/OC/SF メモリ 次にメモリです。\n動画編集を行う際にプレビューやエンコード時のパフォーマンスを決めるのがこのメモリです。\n4K画質を編集するのであれば、少なくとも16GBは確保しておいたほうが良いでしょう。\nまた、メモリの規格としてDDR3に代わるDDR4が登場しています。\nDDR4は前モデルの3倍以上の速さなので、買うならDDR4でしょう。\n今後メモリ増設する際に、Maxの64GBまで対応できるように以下の16GBのメモリを単品で購入したかったのですが、価格高騰により手が出せなかったのでこちらを購入。\nAmazon G.Skill F4-3200C14D-16GFX (DDR4-3200 CL14 8GB×2) AMD Ryzen用メモリ ストレージ 次はストレージです。\nストレージはHDDとSSDの2択となっています。\nそれぞれの特徴については、今回は触れませんが、OSやソフトウェアはSSDにインストールし、動画編集の素材等はHDDに入れたいので、以下を購入です。\nAmazon Samsung SSD 250GB 860EVO 2.5インチ内蔵型 5年保証 正規代理店保証品 MZ-76E250B/EC Amazon Seagate 内蔵ハードディスク 3.5インチ 2TB PCユーザー向け BarraCuda (SATA 6Gb/s/7200rpm/2年保証) 正規代理店品 ST2000DM006 PCケース 次はPCケースです。\nPCケースには複数のサイズがあるので、配置するスペースに合わせたサイズを購入すると良いでしょう。\n今回はミドルタワーサイズのこちらを購入。\nAmazon Fractal Design Define R5 Titanium Grey PCケース CS4988 FD-CA-DEF-R5-TI CPUクーラー 次はCPUクーラーです。\nCPUは熱を持ちやすいのでそちらを冷却するためのファンです。\n今回購入したCPUにはファンが付属されているので今回は未購入です。\n電源ユニット 次は電源ユニットです。\nこちらもPCケースに取り付け可能なサイズのものを購入する必要があります。\n今回は以下のものを購入しました。\nAmazon 玄人志向 NEXTシリーズ 80 PLUS Bronze 600W ATX電源 KRPW-N600W/85\u0026#43; PCファン 次はPCファンです。\nこちらはPC内部の熱を外部に排出するためのファンとなっています。\n今回購入するケースには標準でファンが2基搭載されているようなので、未購入です。\n無線LANアダプタ 次は無線LANアダプタです。\n今回は家の構造上、有線で繋ぐことが厳しく今まではUSBで無線化していましたが、せっかくなので無線LANアダプタを試してみようと思いました。\n今回購入したのはこちらです。\nAmazon ASUS 11ac/n/g/b対応 1300Mbps高速無線アダプタ PCE-AC68 OS 次はOSです。\nPCを組んでも、こちらを入れないと元も子もありません。笑\n今回はリモートデスクトップをやりたいので、Microsoft Windows 10 Proを購入しました。\nAmazon Microsoft Windows 10 Pro Fall Creators Update適用済み 32bit/64bit 日本語版 (最新)|パッケージ版 終わりに 必要なものは一旦上記で出揃ったと思われます。\n全ての商品が届いたら、実際に組み立ててみて、そちらも記事にまとめたいと思いますので楽しみにしていただければなと思います。\n追記 組み立て編を執筆したので宜しければこちらもご覧ください♪\n関連記事 【自作PCデビュー】組み立ててインターネットに繋げるとこまでやってみた【Ryzen/X470/GEFORCE/G.Skill/SamsungSSD】 2018/07/23 4143文字 約9分で読めます ","date":"2018-06-13T22:57:53+09:00","image":"/wp-content/uploads/2018/06/createPcEye.png","permalink":"/2018/06/13/4726/","title":"【自作PCデビュー】4K動画を編集出来るレベルのパソコンを作ってみた【Ryzen/X470/GEFORCE/G.Skill/SamsungSSD】"},{"content":"EC2のIPアドレス 再起動のたびにIPが動的に変わる説 EC2を利用する際、EC2のパブリックIPアドレスはEC2インスタンスが再起動されるたびに変わるという、という話はよく聞きます。\nパブリックIPアドレスが変わってしまうと接続時の情報が変わってしまい、システムが動かなくなってしまう恐れがあります。\nAWSには、この問題を防ぐためにElasticIPというものが良いされています。\nElasticIPとは？ ElasticIPとは、EC2インスタンスに割り当てることの出来る不変なGIPとなっています。\nこのIPをあらかじめEC2インスタンスに割り当てておけば、再起動によりEC2インスタンス自体のパブリックIPアドレスが変わっても、外部からは不変のElasticIPを参照しているので、システムが動かなくなるという事が起きない、という事になります。\n独自VPCを利用するとパブリックIPアドレスが変わらない？ ある時、独自VPCを用いて構築したEC2インスタンスについては、再起動をかけてもパブリックIPアドレスが変わらない、という話を聞きました。\n果たして本当なのでしょうか？実際に検証してみました。\n検証 参考 AWSへのVPC作成については以下の記事をご参考にしていただければなと思います。\n関連記事 【仮想ネットワーク】AWS上に独自VPCを作ってみよう【AWSの土台】 2018/06/07 2545文字 約6分で読めます 関連記事 【AWS】public/privateサブネット上にEC2インスタンスを乗せてSSH通信をしてみよう【VPC】 2018/06/11 3870文字 約8分で読めます IPアドレスについて IPアドレスをここで公開すると、いろいろとセキュリティ的に怖いので、ダミー値を使った記事とさせて頂いてますのでご了承ください。\nデフォルトVPC まずは、デフォルトVPCにEC2インスタンスを作成し、確認してみます。\n各種IPアドレス(作成直後) 作成直後のIPアドレスは以下の通りとなっています。\nIPv4 パブリック IP\r111.222.333.444\rプライベート IP\r999.888.777.666\r各種IPアドレス(再起動) では、EC2インスタンスを再起動してみましょう。\n再起動後の各IPアドレスは以下のようになりました。\nIPv4 パブリック IP\r111.222.333.444\rプライベート IP\r999.888.777.666\rどうやら再起動ではパブリック/プライベートともにIPアドレスは変わらないようですね。\n2,3回行いましたが変わりませんでした。\n各種IPアドレス(停止→起動) では、次はEC2インスタンスを一度停止してから起動してみました。\n停止→起動後のIPアドレスは以下のようになりました。\nIPv4 パブリック IP\r111.222.333.555\rプライベート IP\r999.888.777.666\r一度停止すると、その時点でパブリックIPアドレスが解放されてしまい、そのタイミングで変わってしまうようですね。\nただ、プライベートIPアドレスは変わらなかったので、同ネットワーク内であれば気にする必要は無いのかもしれません。\n独自VPC では、次に独自VPCで作業を行ってみましょう。\n各種IPアドレス(作成直後) 起動直後のIPアドレスは以下の通りとなっています。\nIPv4 パブリック IP\r222.222.333.444\rプライベート IP\r888.888.777.666\r各種IPアドレス(再起動) では、EC2インスタンスを再起動してみましょう。\n再起動後のIPアドレスは以下のようになりました。\nIPv4 パブリック IP\r222.222.333.444\rプライベート IP\r888.888.777.666\rこちらも同様に再起動ではパブリック/プライベートともにIPアドレスは変わらないようですね。\n各種IPアドレス(停止→起動) では、次はEC2インスタンスを一度停止してから起動してみました。\n停止→起動後のIPアドレスは以下のようになりました。\nIPv4 パブリック IP\r222.222.333.444\rプライベート IP\r888.888.777.666\r独自VPCの方のEC2は一度停止してから再起動してもパブリックIPアドレス/プライベートIPアドレスともに変わりませんでした。\n停止した時点でもデフォルトVPCとは違い、設定されたままとなっていました。\n結論 結論\r独自VPCでは停止→再起動をしてもパブリックIPアドレスは変わらない\rデフォルトVPCでも、再起動ではパブリックIPアドレスは変わらない\r※今回はたまたま変わらなかっただけで、とある設定や条件下では変わる可能性がありますので、くれぐれも1参考例として捉えていただければなと思います。いずれにせよ、ElasticIPを使う/使わないの判断は要件によって合わせるようにお願いします。\n終わりに てっきり、自分はEC2インスタンスの再起動だけでもパブリックIPは変わってしまうのだと思っていました。\nAWSのネットワーク周りはまだまだ知識不足でわからない部分が多々ありますので、少しずつ理解を深めていければなと思っております\n","date":"2018-06-12T17:34:43+09:00","image":"/wp-content/uploads/2018/06/ec2IpUpdateEye.png","permalink":"/2018/06/12/4719/","title":"【勘違い事案】独自VPCのEC2インスタンスは再起動してもプライベートIPが変わらなかった件"},{"content":"VPCにEC2を構築 おさらい 前回は、AWSにVPCの土台を作成しました。\n関連記事 【仮想ネットワーク】AWS上に独自VPCを作ってみよう【AWSの土台】 2018/06/07 2545文字 約6分で読めます 全体像としてはこんな感じです。\n実際にEC2を構築 今回は作成したVPCの各サブネットにbastion(踏み台)サーバー、webサーバー、dbサーバーを構築してみようと思います。\n本来は冗長化構成のため各サーバーのインスタンスを複数作成する必要がありますが、今回は一台ずつのみ構築します。\n手順は同じなので必要に合わせて冗長構成にしてみてください。\n手順 publicサブネット bastion(踏み台)サーバー では、まずは踏み台サーバーを作成しましょう。\nこのサーバーは外部からアクセスするのでpublicサブネット内に作成します。\nただし、IP制限等でアクセスを絞る必要があります。\nAWSのマネジメントコンソールにログインし、サービスメニューからコンピューティング\u003eEC2を選択します。\n次に、左部メニューのインスタンスを選択し、インスタンスの作成ボタンをクリックします。\nまずは、Amazon マシンイメージ (AMI)画面が表示されます。\n任意のAMIの選択ボタンをクリックします。\n次に、インスタンスサイズの選択画面が表示されます。\n今回は無料枠のt2.microにチェックを入れて、次の手順：インスタンスの詳細の設定ボタンをクリックします。\n次に、インスタンスの詳細の設定画面が表示されます。\nここでは、ネットワークは作成したVPCを選択し、サブネットは作成したpublic-subnet-Aを選択し、その他はデフォルト設定のまま次の手順：ストレージの追加ボタンをクリックします。\n※冗長化の際は他のサブネットを選択しましょう。\n次のストレージの追加画面は何もいじらずそのままで次の手順：タグの追加ボタンをクリックします。\n次のタグの追加画面も特にいじらずそのままで次の手順：セキュリティグループの追加ボタンをクリックします。\n次のセキュリティグループの設定画面では、SSH通信を特定のIPからのみ受け付けるセキュリティグループを作成したいので、新しいセキュリティグループにチェックを入れて許可するIPを入力し、確認と作成ボタンをクリックします。\n今回はグループを新たに作成しましたが、この辺はお使いの環境に合わせて設定してください。\n次のインスタンス作成の確認画面では、設定した内容が表示されるので内容を確認の上、問題が無ければ作成ボタンをクリックします。\nすると、EC2インスタンスに紐付けるキーペアの選択を求められます。\n本来は新しく作成したほうが良いですが、今回は既存のキーペアを利用します。\n任意のキーペアを選択し、インスタンスの作成ボタンをクリックします。\nこれでEC2インスタンスの作成は完了です。\n同様に、サブネットのpublic/privateを分けてwebサーバーとdbサーバーを作成してみてください。\n合計3つのインスタンスの作成が完了しました。\nElasticIPの設定 次に、publicサブネット上に作成したEC2インスタンス2台に対して、ローカルからSSH接続を行えるようにするためにそれぞれにElasticIPを取得し設定しましょう。\nこの設定を行わないとGIPが割り振られないので、SSH接続が出来ません。\nもちろんインターネットゲートウェイを設定したpublicサブネットに作ったEC2だからと言って、privateIPでの接続が出来るわけでもないので気をつけましょう。\n左部メニューのElastic IPを選択し、新しいアドレスの割り当てボタンをクリックします。\n次の画面では何も気にせず割り当てボタンをクリックします。\nすると新しいElasticIPが発行されたので、閉じるボタンをクリックします。\nElasticIPの関連付け 次にEC2インスタンスに関連付けを行います。\n作成したElasticIPにチェックを入れ、アクションからアドレスの関連付けを選択します。\nインスタンスは、publicサブネットに作成したEC2インスタンスを選択し、プライベートIPは一つしかないと思うのでそちらを選択し、関連付けボタンをクリックします。\nこれでアドレスの関連付けは完了です。\nもう一つのEC2インスタンスについても同様に関連付けを行ってください。\nセキュリティグループの作成 EC2インスタンスを作成した際に、セキュリティグループは同じものを設定したので、現在はwebサーバーにもSSH接続が可能な状態になっています。\n今回はwebサーバー、dbサーバーへのSSHはbastionサーバーからのみ行えるように制限をしてみます。\n左部メニューのセキュリティグループを選択し、セキュリティグループの作成ボタンをクリックします。\nすると、セキュリティグループの作成ダイアログが表示されるので、任意のセキュリティグループ名/説明を入力し、VPCは作成したものを選択します。\nそして22ポートのソースのIPにbastionサーバーのprivateIPを入力します。\nここでbastionサーバーのElasticIPを入力すると、publicサブネットに構築したwebサーバーには接続出来ますが、privateサブネットに作成したdbサーバーには接続出来ないので気をつけましょう。\n入力が完了したら、作成ボタンをクリックします。\nこれでセキュリティグループの作成は完了です。\nセキュリティグループの設定 次に、webサーバーとdbサーバーに上記で作成したセキュリティグループを紐付けます。\n左部メニューのインスタンスを選択し、セキュリティグループを変更したいインスタンスにチェックを入れ、アクションメニューからネットワーキング\u003eセキュリティグループの変更をクリックします。\nすると、セキュリティグループの変更ダイアログが表示されるので、先ほど作成したセキュリティグループのみにチェックを入れ、セキュリティグループの割り当てボタンをクリックします。\nこれで準備は完了です\nSSHの接続確認 [adsense]\rでは、この状態でローカルからSSH接続を試みてみましょう。\nbastionサーバー まずは踏み台サーバーにアクセスしてみます。\n踏み台サーバーにはインターネット経由で特定IPからのみ接続出来る設定としています。\n以下のコマンドを実行してみてください。\nSSH接続 ssh -i {キーペアファイルへのパス} ec2-user@{bastionサーバーElasticIP} すると、以下のような形でEC2インスタンスに接続出来ると思います。\nログ The authenticity of host \u0026#39;xxx.xxx.xxx.xxx (xxx.xxx.xxx.xxx)\u0026#39; can\u0026#39;t be established. ECDSA key fingerprint is SHA256:XXXXXXXXXX/XXXXXXXXXXXXXXXXX. Are you sure you want to continue connecting (yes/no)? yes Warning: Permanently added \u0026#39;xxx.xxx.xxx.xxx\u0026#39; (ECDSA) to the list of known hosts. __| __|_ ) _| ( / Amazon Linux AMI ___|\\___|___| https://aws.amazon.com/amazon-linux-ami/2018.03-release-notes/ [ec2-user@ip-xxx.xxx.xxx.xxx ~]$ これは想定通りなので特に問題はありません。\nwebサーバー 次にWebサーバーです。\nこのサーバーにもElasticIPでGIPの設定はされていますが、SSHはbastionサーバーからのみしか受け付けないようなセキュリティをかけています。\nまずは直接GIP指定でSSH接続をしてみましょう。\nおそらく、通信が遮断されるのでタイムアウトすると思います。\n以下のコマンドを実行してみてください。\nSSH接続 ssh -i {キーペアファイルへのパス} ec2-user@{webサーバーElasticIP} やはりダメでしたね。\n正常にセキュリティグループが働いています。\nログ ssh: connect to host xxx.xxx.xxx.xxx port 22: Operation timed out ✘ では、次はbastion経由でSSH接続してみましょう。\nコマンドは以下の形になります。\n踏み台経由SSH接続 ssh -i {キーペアへのパス} -oProxyCommand=\u0026#39;ssh -i {キーペアへのパス} -W %h:%p ec2-user@{bastionサーバーElasticIP}\u0026#39; ec2-user@{webサーバーElasticIP} こちらは正常に接続出来ましたね。\n想定通りです。\nログ The authenticity of host \u0026#39;xxx.xxx.xxx.xxx (\u0026lt;no hostip for proxy command\u0026gt;)\u0026#39; can\u0026#39;t be established. ECDSA key fingerprint is SHA256:XXXXXXXXXXXXXXXXXXXX Are you sure you want to continue connecting (yes/no)? yes Warning: Permanently added \u0026#39;xxx.xxx.xxx.xxx\u0026#39; (ECDSA) to the list of known hosts. __| __|_ ) _| ( / Amazon Linux AMI ___|\\___|___| https://aws.amazon.com/amazon-linux-ami/2018.03-release-notes/ [ec2-user@ip-xxx.xxx.xxx.xxx ~]$ dbサーバー では、最後にdbサーバーにSSH接続してみましょう。\nもちろんローカルから直接SSH接続しようとするとタイムアウトで接続出来ません。\n以下のコマンドを実行してみてください。\nSSH接続 ssh -i {キーペアファイルへのパス} ec2-user@{dbサーバーElasticIP} こちらもセキュリティグループによって制限されています。\nログ ssh: connect to host xxx.xxx.xxx.xxx port 22: Operation timed out ✘ では、webサーバーと同じようにbastionサーバー経由でSSH接続を試みてみましょう。\n踏み台経由SSH接続 ssh -i {キーペアへのパス} -oProxyCommand=\u0026#39;ssh -i {キーペアへのパス} -W %h:%p ec2-user@{bastionサーバーElasticIP}\u0026#39; ec2-user@{dbサーバーprivateIP} こちらもbastionサーバー経由だと正常に接続されましたね。\nログ The authenticity of host \u0026#39;xxx.xxx.xxx.xxx (\u0026lt;no hostip for proxy command\u0026gt;)\u0026#39; can\u0026#39;t be established. ECDSA key fingerprint is SHA256:XXXXXXXXXXXXXXXXXXXX Are you sure you want to continue connecting (yes/no)? yes Warning: Permanently added \u0026#39;xxx.xxx.xxx.xxx\u0026#39; (ECDSA) to the list of known hosts. __| __|_ ) _| ( / Amazon Linux AMI ___|\\___|___| https://aws.amazon.com/amazon-linux-ami/2018.03-release-notes/ [ec2-user@ip-xxx.xxx.xxx.xxx ~]$ 参考 終わりに これでVPC内に構築したpublicサブネットとprivateサブネットを利用したEC2周りの整備が出来ましたね。\nちょっと準備は多くなりますが、その分セキュリティも向上されますし、各サーバーの役割も明確になるので、長い目で見ると良いインフラの土台になると思いますので、興味のある方は是非試してみてください。\n","date":"2018-06-11T12:23:12+09:00","image":"/wp-content/uploads/2018/06/createEc2AwsVpcEye.png","permalink":"/2018/06/11/4662/","title":"【AWS】public/privateサブネット上にEC2インスタンスを乗せてSSH通信をしてみよう【VPC】"},{"content":"VPCとは What\u0026rsquo;s? 皆さんはVPCという言葉をご存知でしょうか？\nサーバーサイドエンジニアやインフラエンジニアの方には馴染みがあると思いますが、やフロントサイドエンジニアやアプリエンジニアの方はピンとこないかもしれませんね。\nVPCとはVirtual Private Cloudの略で、AWSアカウント専用の仮想ネットワークの事を指します。\n似た言葉にVPNというものもありますが、あちらはVirtual Private Networkの略で少し意味が違います。\nAWSが主流になりつつある AWSはご存知の通り、クラウド環境にインフラを構築していくことが可能です。\nWebシステムを開発する場合、近年ではAWSにインフラを構築するケースがデファクトスタンダードになってきています。\nまた、基本的にはAWSではEC2インスタンスを構築してWebシステムを稼働する形になると思います。\nこのEC2などのモジュールはAWS上のVPC内に構築されていくのですが、VPCの作成をしていないと、アカウントに最初から用意されているデフォルトVPC内に追加していくことになります。\nしかし、カスタマイズ性や細かいセキュリティを考えると、専用のVPC環境を作っておいたほうが良いです。\n今回はVPC周りの作成作業をまとめてみましたので、作成手順をご紹介致します。\n手順 [adsense]\rVPCの作成 まずは土台となるVPCの作成を行います。\nAWSのマネジメントコンソールにログインし、サービスメニューからネットワーク\u0026コンテンツ配信\u003eVPCを選択します。\n次に、左部メニューのVPCを選択し、VPCの作成ボタンをクリックします。\nすると、VPCの作成ダイアログが表示されますので、名前タグ/IPv4 CIDRブロックを入力し、その他は初期値のままではい、作成するボタンをクリックします。\nこれでVPCの作成は出来ました。\nサブネットの作成 次にサブネットを作成します。\nサブネットとは、VPCに割り振ったIPをさらに細かく分割したものを指します。\n各サブネットに紐付けたEC2を複数台構成しELBを挟むことで冗長構成などを実現することが可能になります。\n今回はごく一般的な冗長構成を実現するための、publicとprivateのサブネットをそれぞれ2つずつ作成をしてみます。\n用途としては、publicサブネットはAPIやWebサイトなどの外部に公開するモジュールを乗せ、privateサブネットはDatabaseなどの外部に公開しないモジュールを乗せて使い分けを行います。\n左部メニューのサブネットを選択し、VPCの作成ボタンをクリックします。\nすると、サブネットの作成ダイアログが表示されるので、任意の名前タグ/先ほど作成したVPC/任意のアベイラビリティゾーン/サブネットに割り符るIPv4 CIDR ブロックを入力の上、はい、作成するボタンをクリックします。\n同じように、冗長構成用の２つ目のサブネットを作ってください。\nその際に、アベイラビリティゾーンはかぶらないように変えて作成しましょう。\npublic/private合わせて4つ作成したら、サブネットの作成は完了です。\nインターネットゲートウェイの作成 次にインターネットゲートウェイを作成します。\nこちらを作成して設定しないと、publicサブネット内のモジュールに外部ネットワークからの接続が出来ません。\nまた、privateサブネットには設定しないように気をつけましょう。\nあくまで、privateサブネットはVPC内部からのみのアクセスに留めたいからです。\n左部メニューのインターネットゲートウェイを選択し、VPCの作成ボタンをクリックします。\nすると、インターネットゲートウェイ作成画面に遷移するので、任意の名前タグを入力し作成ボタンをクリックします。\n以下のような画面が表示されればインターネットゲートウェイの作成は完了なので閉じるボタンをクリックします。\nVPCにアタッチ 作成されたインターネットゲートウェイは状態がdetachedになっていると思います。\nですので、先ほど作成したVPCにアタッチをしましょう。\n作成したインターネットゲートウェイにチェックを入れ、アクションメニューからVPCにアタッチを選択します。\nすると、VPCにアタッチ画面が表示されるので、作成したVPCを選択し、アタッチボタンをクリックします。\nこれでインターネットゲートウェイがVPCにアタッチされました。\nルートテーブルの作成 次にルートテーブルを作成します。\nこちらもpublicとprivateの2つを作る必要があります。\n左部メニューのルートテーブルを選択し、ルートテーブルの作成ボタンをクリックします。\n次に、ルートテーブルの作成ダイアログが表示されるので、任意の名前タグ/先ほど作成したVPCを選択し、はい、作成するボタンをクリックします。\nこれでルートテーブルの作成は完了です。\nルートテーブルとサブネットを関連付け 次に、ルートテーブルとサブネットを関連付けします。\n作成したルートテーブルにチェックを入れ、サブネットの関連付けタブを選択し、編集ボタンをクリックします。\nすると、作成済みのサブネットを選択することが可能なので、publicルートテーブルならpublicサブネット、privateルートテーブルならprivateサブネットをそれぞれ選択し、保存ボタンをクリックします。\nこれでルートテーブルとサブネットの関連付けは完了です。\nルートテーブルとインターネットゲートウェイの関連付け 次に、同様にルートテーブルとインターネットゲートウェイを紐付けます。\nこちらは、publicのみインターネットに公開したいのでpublicのルートテーブルのみ行う作業となります。\n作成したpublicルートテーブルにチェックを入れ、ルートタブを選択し、編集ボタンをクリックします。\n次に、別のルートを追加ボタンを押すと、入力行が追加されるので、送信先に0.0.0.0/0を入力し、ターゲットは作成したインターネットゲートウェイを選択し、保存ボタンをクリックします。\nこれでルートテーブルとインターネットゲートウェイの関連付けは完了です。\n終わりに 以上の作業で、AWSのVPC周りの下準備は完了しました。\n次回はpublicサブネットとprivateサブネットにそれぞれEC2を構築し、踏み台サーバー経由で接続するところまでまとめようと思っています。\n興味があれば、是非そちらも見て頂ければなと思います。\n","date":"2018-06-07T22:25:04+09:00","image":"/wp-content/uploads/2018/06/createAwsVpcEye.png","permalink":"/2018/06/07/4601/","title":"【仮想ネットワーク】AWS上に独自VPCを作ってみよう【AWSの土台】"},{"content":"Cronってよく聞くけどなんなんだろう What\u0026rsquo;s? 皆さんはCron(クーロン)をご存知でしょうか？\nサーバーサイド開発やインフラ管理をしている方はご存知だと思います。\nこれは、UnixやLinuxで多く使われるスケジューラーを設定/実行するためのプログラムの事です。\nコマンドラインから、xx時になったらyyを実行してね、という命令を簡単に設定する事が出来るので、シェルスクリプトなどを定期実行する際によく多用されています。\nCronはスケジューリングの設定に専念 Cronを使って処理をスケジューリングすると、命令に従ってしっかりと処理を実行してくれます。\nただ、命令した以外の事はもちろん行わないので、細かい動きはシェルスクリプト内に記述するようにしてあくまで実行タイミングのスケジューリングのみをCronで行うようにしましょう。\nCronのスケジューリングで実行処理を設定するのは好ましくありません。\n設定の癖が強いんじゃ！！ ただ、このCronですが実行タイミングを設定する際の設定がかなり癖が強いため、慣れていないとパッと設定するのがちょっと難しいです。\n設定方法は分 時 日 月 曜日 実行コマンドの形式で指定する必要があります。\nまた、それぞれの項目に指定出来る値は以下のようになっています。\n項目\r入力値\r分\r0~59\r時\r0~23\r日\r1~31\r月\r1~12\r曜日\r0~7\n※0,7=日曜、1=月曜、2=火曜...\rまた、それぞれの項目には以下のような値も設定をする事が可能です。\n記号\r説明\r設定例\r-\r範囲指定\r分フィールドに5-10とした場合は、5~10分の毎分にCronが実行される\r*\r全範囲\r時フィールドに*とした場合は、毎時にCronが実行される\r,\r複数指定\r分フィールドに1,3,5-10とした場合は、1,3,5分と10分までの毎分にCronが実行される\r/\r間隔値指定\r分フィールドに5-10/2とした場合は、5~10分の間を2分間隔で実行し、*/5だと5分毎にCronが実行される\rこれらを多種多様に組み合わせてCronを設定する事になるので、慣れるまでは一瞬でスケジューリングを把握するのが難しいですね。。。\nでは、それを踏まえて実際にCronを使ってみましょう。\n手順 準備 今回は以下のような、実行日時をlogファイルに追記していくとてもシンプルなシェルスクリプトを用意し、そちらをCronに設定して動かしてみようと思います。\n実行日時書き込みスクリプト #!/bin/sh date \u0026gt;\u0026gt; /Users/{ユーザー名}/tmp/work/cron/cron_sample.log スケジューリングを登録 今回は例として、1分毎に上位のシェルを実行するCronを設定してみましょう。\n以下のコマンドでCronの編集エディタを開きましょう。\nCronの編集コマンド crontab -e すると、エディターが設定しているエディタが表示されるので、以下を追加して保存してください。\nCronの設定 * * * * * /Users/{ユーザー名}/tmp/work/cron/sample.sh ~ -- INSERT -- 保存をすると以下のようなログが表示され、Cronの設定が完了します。\nログ crontab: no crontab for {ユーザー名} - using an empty one crontab: installing new crontab ちなみに、すでにCronの設定がある場合は1行目が表示されません。\nスケジューリングの確認 現在登録しているCronを確認するには以下のコマンドで確認出来ます。\nCron確認 crontab -l crontab -eで登録した情報がリスト表示されます。\n出力 * * * * * /Users/{ユーザー名}/tmp/work/cron/sample.sh . . . 実行されないぞ。。。 1分待ってもログファイルが生成されません。\nデフォルトでは、Cron実行時のエラーログは/var/mail/{ユーザー名}に追記されていきます。\n今回の原因もそちらに記載されているはずなので、以下のコマンドで確認してみましょう。\ncommand cat /var/mail/{ユーザー名} すると、以下のようなエラーが出力されていました。\nログ From {ユーザー名}@xxx.xxx.xxx.xxx.static.zoot.jp Tue Jun 5 00:29:02 2018 Return-Path: \u0026lt;{ユーザー名}@xxx.xxx.xxx.xxx.static.zoot.jp\u0026gt; X-Original-To: {ユーザー名} Delivered-To: {ユーザー名}@xxx.xxx.xxx.xxx.static.zoot.jp Received: by xxx.xxx.xxx.xxx.static.zoot.jp (Postfix, from userid 501) id B0F0419E7A75; Tue, 5 Jun 2018 00:29:01 +0900 (JST) From: {ユーザー名}@xxx.xxx.xxx.xxx.static.zoot.jp (Cron Daemon) To: {ユーザー名}@xxx.xxx.xxx.xxx.static.zoot.jp Subject: Cron \u0026lt;{ユーザー名}@xxx\u0026gt; /Users/{ユーザー名}/tmp/work/cron/sample.sh X-Cron-Env: \u0026lt;SHELL=/bin/sh\u0026gt; X-Cron-Env: \u0026lt;PATH=/usr/bin:/bin\u0026gt; X-Cron-Env: \u0026lt;LOGNAME={ユーザー名}\u0026gt; X-Cron-Env: \u0026lt;USER={ユーザー名}\u0026gt; X-Cron-Env: \u0026lt;HOME=/Users/{ユーザー名}\u0026gt; Message-Id: \u0026lt;20180604152902.XXXXXXXXXX@xxx.xxx.xxx.xxx.static.zoot.jp\u0026gt; Date: Tue, 5 Jun 2018 00:29:01 +0900 (JST) /bin/sh: /Users/{ユーザー名}/tmp/work/cron/sample.sh: Permission denied どうやら、シェルの実行権限が無いようです。\n現在、このシェルスクリプトのファイルは644となっています。\nコマンドからはsh /Users/{ユーザー名}/tmp/work/cron/sample.shで正常に実行出来たとしても、Cronから実行する場合はしっかりとファイル権限を変えないと動かないようですね。\nですので、以下のコマンドで実行権限を追加しましょう。\n実行権限追加 chmod 744 /Users/{ユーザー名}/tmp/work/cron/sample.sh 確認 これで毎分ログファイルに実行日付が追記されていくようになったと思います。\ncron_sample.log Tue Jun 5 00:45:00 JST 2018 Tue Jun 5 00:46:00 JST 2018 Tue Jun 5 00:47:00 JST 2018 Tue Jun 5 00:48:00 JST 2018 Tue Jun 5 00:49:00 JST 2018 スケジューリングの削除 Cronで登録したスケジューリングは意図して消さない限り残り続けます。\nですので、そのまま残していると次の年に去年設定していたCronが動いて問題に！という事も十分ありえます。\nCronの削除はcrontab -eコマンドから削除する事が可能です。\nまた、一括して削除したい場合はcrontab -rでも可能です。\nただ、確認無しで全て消えてしまうので、使うときは気をつけましょう。\n終わりに 以上のように、Cronを利用すればコマンドから簡単に定期実行処理を設定する事が可能です。\n今まで手作業で定期実行していた部分を自動化する事が可能になるので、使いようによっては作業効率が格段にアップします。\nまた、スケジューリングの仕方もとても柔軟性が高いので、是非使いこなしてみてください。\n","date":"2018-06-05T10:46:14+09:00","image":"/wp-content/uploads/2018/06/cronSettingEye.png","permalink":"/2018/06/05/2294/","title":"【自動化への第一歩】Cronのスケジューリング設定の書き方と使い方【crontab】"},{"content":"CSRとは？ What\u0026rsquo;s? 皆さんはCSRをご存知でしょうか？\nCSRとは、Certificate Signing Requestの略で、SSLサーバ証明書を取得する際に認証局に提出する署名リクエストの事です。\nCSRには、公開鍵の情報や、生成時に組織側が指定する情報が含まれます。\n認証局が認証処理を実施した後に、提出したCSRに含まれる組織の公開鍵に署名をし、SSLサーバ証明書として発行します。\nブログやサイトにはほぼ必須 CSRを利用して取得したSSLサーバ証明書をサーバーに設定することにより、HTTPS通信が保証されるようになります。\n非SSL化サイト\nSSL化サイト\nこれにより、利用者へ安全なサイトであることを伝えることが可能になります。\nまた、近年ではGoogleが、2018年7月リリースの「Chrome 68」から、すべてのHTTPサイトで「保護されていません」を表示する、という公式アナウンスがされ、話題になりました。\nまた、SSL通信の可否はSEOにも影響がある、と明言されているので、まだHTTPS化していないサイトは今のうちからSSL化の準備をしておいたほうが良いでしょう。\nCSRはどのサーバーで作っても問題無い CSRはコマンドにて簡単に作成する事が出来ます。\nまた、このCSR作成作業はSSLサーバ証明書を設定するサーバーで作らないといけないという事は無いので、Mac端末上でまとめて作成してもなんら問題ありません。\n作成時に必要な情報 CSRをコマンドで作成する場合、ディスティングイッシュネームと呼ばれる以下の情報の入力を順次求められます。\n項目\rメッセージ\r例\r必須\r国別番号\rCountry Name (2 letter code) [AU]:\rJP\r●\r都道府県名\rState or Province Name (full name) [Some-State]:\rKanagawa\r●\r市区町村名\rLocality Name (eg, city) []:\rKawasaki\r●\r組織名\rOrganization Name (eg, company) [Internet Widgits Pty Ltd]:\rBlogenist, Ltd.\r●\r部門名\rOrganizational Unit Name (eg, section) []:\rCustomer Service\r●\rコモンネーム\rCommon Name (e.g. server FQDN or YOUR name) []:\rblogenist.jp\r●\rメールアドレス\rEmail Address []:\rxxx@example.jp\r国別番号\rA challenge password []:\rxxxxxx\r会社名の略称\rA challenge password []:\rxxxxxx\r必須のものに関しては、正しい情報を入れる必要がありますが、任意の3項目については基本的には未入力でも問題は無いので、そのままエンターを押してしまって構いません。\nでは、実際に証明書を作ってみましょう。\n手順 秘密鍵の生成 まずはCSRに使う秘密鍵を作成しましょう。\n以下のコマンドを実行してください。\nCSRの生成 openssl genrsa 2048 \u0026gt; {出力ファイル名} すると、以下のようなログが表示され、秘密鍵が生成されます。\nログ Generating RSA private key, 2048 bit long modulus .+++ ..............+++ e is 65537 (0x10001) CSRの生成 では、次にCSRを作成します。\n以下のコマンドを実行してください。\nCSRの生成 openssl req -new -key {作成した秘密鍵へのパス} -out {出力CSRファイル名} すると、先ほどのディスティングイッシュネームの入力を一つずつ求められるので、それぞれ入力してエンターを押していきましょう。\nディスティングイッシュネームの設定 You are about to be asked to enter information that will be incorporated into your certificate request. What you are about to enter is what is called a Distinguished Name or a DN. There are quite a few fields but you can leave some blank For some fields there will be a default value, If you enter \u0026#39;.\u0026#39;, the field will be left blank. ----- Country Name (2 letter code) [AU]:JP State or Province Name (full name) [Some-State]:Kanagawa Locality Name (eg, city) []:Kawasaki Organization Name (eg, company) [Internet Widgits Pty Ltd]:Blogenist, Ltd. Organizational Unit Name (eg, section) []:Customer Service Common Name (e.g. server FQDN or YOUR name) []:blogenist.jp Email Address []: Please enter the following \u0026#39;extra\u0026#39; attributes to be sent with your certificate request A challenge password []: An optional company name []: これで正常にCSRファイルが作成されました。\n終わりに これでCSRの作成は完了です。\nあとは認証局にCSRを提出し、後日SSLサーバ証明書関連の情報が届きます。\nその際に、今回使用した秘密鍵の情報も必要になるので、紛失しないようにしっかりと管理しておきましょう。\n","date":"2018-06-03T11:35:29+09:00","image":"/wp-content/uploads/2018/06/createCsrEye.png","permalink":"/2018/06/03/2228/","title":"【SSL化】SSL証明書を取得するためのCSRの作成方法【HTTPS化】"},{"content":"YouTubeチャンネルをカスタマイズ そのままだとイマイチ YouTubeチャンネルを作成する際に、特に気にせず初期設定のまま作成すると以下のようなパッとしないチャンネルになってしまっていると思います。\nなので、動画を投稿していく前にチャンネルのクオリティを整えていきましょう。\nGoogleAccount側 チャンネル名 まずはチャンネルの名前を設定しましょう。\nアカウントメニューから歯車アイコンをクリックします。\n次に、左部メニューのアカウントを選び、Googleで編集するリンクをクリックします。\nすると、他のユーザーに表示されるあなたの情報の管理画面が表示されます。\nその中の鉛筆アイコンをクリックします。\nここで、チャンネルの名前を変えることが可能ですので、お好きな名前を設定しましょう。\nアイコンの設定 次に、アイコンを設定しましょう。\nチャンネルアイコンは、とても大事な画像です。\n閲覧者のファーストビューとして、目に止まる部分なので目を引いたり自分のチャンネルだという事が一目でわかるものが良いでしょう。\nそれでも設定をしていきましょう。\n先ほどの画面のカメラマークをクリックします。\n以下のようなダイアログが表示されるのでアイコンに設定したい画像をドラッグ\u0026ドロップしましょう。\nすると、クロップ画面が表示されるので、調整の上完了ボタンをクリックします。\n確認 GoogleAccount側は以上で終わりです。\nOKボタンで設定を保存しましょう。\nYouTube側 チャンネルアートの設定 チャンネルアートとは、YouTubeチャンネルのヘッダー部分の画像の事を言います。\nこの画像を作るには、少し工夫が必要となっています。\nまずはTV画面で表示される際の最大サイズに合わせた2560×1440ピクセルで画像を作成する必要があります。\nまた、その中の中心部に全てのデバイス（PC、スマートフォン、TVなど）にて正常に表示されるエリアの1546×423ピクセルに情報を入れていきます。\n画像を作成したら、チャンネルメニューのチャンネルアートを追加ボタンをクリックします。\n次にチャンネルアート画像アップロード画面が表示されるので、作成したアート画像をアップロードしましょう。\nすると、PC/テレビ/モバイルでのチャンネルアートの見え方が表示されますので、調整して問題が無ければ選択ボタンをクリックします。\n確認 正常にチャンネルアートの設定が反映されていますね♪\n終わりに 以上でチャンネルに関する初期設定が完了しました。\nアイコンやチャンネルアートなどのビジュアルは、閲覧者の印象に残る部分なので、いろいろ工夫をして目に止まるものを探し求めるようにしてみましょう。\n","date":"2018-06-01T20:22:53+09:00","image":"/wp-content/uploads/2018/06/youtubeChannelCustomEye.png","permalink":"/2018/06/01/4546/","title":"【アイコン】YouTubeチャンネルの設定を変えてみよう！【チャンネル名】"},{"content":"Youtubeの広告収入 Adsenseアカウントには2種類ある 皆さんはアドセンスアカウントを持っているでしょうか？\n本ブログでもブログで利用出来るGoogleAdsenseアカウントの取得方法についてご紹介しています。\n関連記事 【2017年9月最新版！】クリックされるだけでお小遣いが溜まっていく！Google Adsenseの申請から設定まで！ 2017/09/06 3990文字 約8分で読めます このアドセンスアカウントには、「YouTubeのみで使えるもの」と「YouTubeとブログ両方で使えるもの」の2種類があります。\n今回は、後者のYouTubeとブログ両方で使えるものをYouTubeアカウントに連携してみようと思います。\n手順 準備するもの 連携を行いたいGoogleAccountをあらかじめ用意しておきましょう。\nまた、GoogleAdsenseも先ほどの記事を参考に、あらかじめ申請が通過したものを用意しておいてください。\nGoogleAccountとYouTubeの連携 では、まずはGoogleAccountとYouTubeを連携しましょう。\nコチラにアクセスし、右上のログインボタンをクリックします。\nすると、連携するGoogleAccountを選択するダイアログが表示されます。\n今回はまだ連携していないGoogleAccountを選択するので、別のアカウントを使用を選択します。\n次に、連携するGoogleAccountのアドレスを入力し、次へボタンをクリックします。\n次に、GoogleAccountのパスワードを入力しし、次へボタンをクリックします。\n認証が正しく通れば、以下のようなアカウント保護のダイアログが表示されますので、今回は特に設定せずに完了ボタンをクリックします。\nこれでYouTubeとGoogleAccountの連携は完了です。\nチャンネルの作成 次に、YouTubeのチャンネルを作成します。\nアカウントメニューからマイチャンネルメニューを選択します。\nすると、YouTubeを利用するアカウント情報を入力する画面が表示されるので、情報を入力の上チャンネルを作成ボタンをクリックします。\nこれでチャンネルは作成されました。\n収益の有効化 次に、YouTubeで収益を取得出来るように設定してみましょう。\nチャンネルメニューからクリエイターツールボタンをクリックします。\n左部メニューのチャンネルを選択し、収益の選択エリアの有効にするボタンをクリックします。\n次に、以下のような収益受け取りプログラムの画面が表示されるので、YouTube パートナー プログラムの利用規約を読み、内容に同意しますの開始ボタンをクリックします。\nすると、YouTubeパートナー プログラム規定ダイアログが表示されるので、内容を確認の上問題が無ければ、チェック項目を選択の上同意するボタンをクリックします。\n次に、AdSense に申し込みますの開始ボタンをクリックします。\n次の画面ではそのまま次へボタンをクリックします。\nすると、YouTubeのAdsense申請するGoogleAccountの選択が求められるので、Adsenseの申請時に利用したGoogleAccountを選択します。\nすると、今回作成したYouTubeチャンネルへの関連付けの承認画面が表示されるので、関連付けを承認ボタンをクリックします。\nすると、以下のようなダイアログが表示された後にYouTubeにリダイレクトされます。\n次に、収益化の設定をしますの開始ボタンをクリックします。\nすると、以下のようなダイアログが表示されるので、特に問題が無ければそのまま保存ボタンをクリックします。\nこれで今出来る設定は完了です。\n過去 12 か月間の総再生時間が 4,000 時間、チャンネル登録者数が 1,000 人に達すると審査の対象になりますについては、日々動画を投稿してカウントを増やしていく必要があります。\n気長に頑張りましょう。\n※ちなみに、これは2018年2月20日YouTube パートナープログラムへの参加条件の改定によってかなり厳しい条件となってしまったようです\n終わりに これでGoogleAdsenseとの関連付けは完了です。\nただ、昔と違い収益が発生するまでの道のりが長く険しいものになってしまっていますが、これくらい乗り越えれないとそもそも稼げるようなチャンネルは作れないと思うので、頑張って乗り切りましょう！\n","date":"2018-05-28T23:49:36+09:00","image":"/wp-content/uploads/2018/05/youtubeAdsenseAccountCreateEye.png","permalink":"/2018/05/28/4505/","title":"【Youtuber】Youtubeに取得済みのGoogleAdsenseアカウントを連携する方法"},{"content":"保存先を変えたい ファイル名を変えたい場合 以前、Macのスクリーンキャプチャ機能で撮影した画像のファイル名を変更する方法は以下の記事にてご紹介しました。\n関連記事 【標準お便利機能】Macのスクリーンショットの名称を変える 2018/03/21 665文字 約2分で読めます 保存先も変えたい この画像ファイルは、デフォルトではデスクトップに保存されていくと思います。\nこの保存先ですが、もちろん設定で変更することが可能です。\n現在の設定を確認 では、変更をする際に現在どのような設定状態になっているのか確認してみましょう。\n以下のコマンドを実行してください。\ncommand defaults read com.apple.screencapture すると、以下のような形式のログが出力されると思います。\n結果 { name = \u0026#34;{ファイル名接頭辞}\u0026#34;; //保存ファイル名を変えている場合 } デスクトップに保存される場合は、特に情報が含まれていない状態だと思います。\nでは、実際に設定を変えてみましょう。\n手順 保存先の設定 以下のコマンドで保存先を設定することが出来ます。\ncommand defaults write com.apple.screencapture location {保存先パス} 今回は/Users/{ユーザー名}/Pictures/screen-caputureというディレクトリを用意して、そちらに保存されるようにしてみます。\nこれで保存先の設定は完了です。\n設定の反映 このままでは設定が反映されていないので、以下のコマンドで設定を反映する必要があります。\ncommand killall SystemUIServer 確認 では、実際にスックリーンショットを撮影してみてください。\n設定した保存先フォルダにファイルが保存されていると思います。\nまた、最初に実行したコマンドをもう一度実行すると以下のように設定にlocationの項目が追加されていることが確認出来ます。\n確認 defaults read com.apple.screencapture { location = \u0026#34;{保存先パス}\u0026#34;; name = \u0026#34;{ファイル名接頭辞}\u0026#34;; } デスクトップに戻したい場合 設定を取り消して保存先をデスクトップに戻したい場合は以下のコマンドを叩くことで元に戻せます。\ncommand defaults delete com.apple.screencapture location killall SystemUIServer 終わりに 以上のように簡単に保存先の変更が可能です。\nスクリーンショットを多用する場合は、専用のディレクトリを作成して、そこをlocation指定することでファイルが管理がスッキリするので、是非試してみてください。\n","date":"2018-05-26T20:39:43+09:00","image":"/wp-content/uploads/2018/05/screenCaptureModifyStorageEye.png","permalink":"/2018/05/26/2896/","title":"【フォルダ整理におすすめ】Macのスクリーンショット保存先変更"},{"content":"あれ、FeedがS3に転送されない・・・ Feedをいい感じに出す事は出来てる StaticPressとStaticPressS3を利用してサイトを運営している場合、RSSなどのFeedを利用したいケースがあると思います。\nその場合のStaticPress(S3)経由でおかしくなってしまう部分については、以下の記事で対応方法をご紹介しました。\n関連記事 【WordpressのRSS】StaticPressでFeedをhtml形式では無くxml形式で出力する方法 2018/05/18 1263文字 約3分で読めます Feedへのlinkタグ消えてしまう問題 しかし、headタグ内にlinkタグでFeedへのURLを追加してS3にファイル転送しようとすると、StaticPressで吐き出されたファイル内から追加したはずのlinkタグが消えてしまいます。。。\nWordpress側のソース \u0026lt;title\u0026gt;【WordpressのRSS】StaticPressでFeedをhtml形式では無くxml形式で出力する方法 | Blogenist – ブロゲニスト\u0026lt;/title\u0026gt; \u0026lt;link rel=\u0026#34;alternate\u0026#34; type=\u0026#34;application/rss+xml\u0026#34; title=\u0026#34;Blogenist - ブロゲニスト RSS Feed\u0026#34; href=\u0026#34;http://{WordpressURL}/feed\u0026#34;\u0026gt; \u0026lt;script async=\u0026#34;\u0026#34; src=\u0026#34;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; S3側のソース \u0026lt;title\u0026gt;【WordpressのRSS】StaticPressでFeedをhtml形式では無くxml形式で出力する方法 | Blogenist – ブロゲニスト\u0026lt;/title\u0026gt; \u0026lt;script async=\u0026#34;\u0026#34; src=\u0026#34;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; 消えてる！！！\nなんでやねん・・・orz\nそして、StaticPressはクローリングしたHTMLのリンクをどんどん辿ってファイルを生成しているようなので、linkタグを消されるとFeed関連のHTMLも生成されなくなってしまい、S3にも転送がされなくなってしまいます。\n原因 原因はStaticPressプラグインのもともとの仕様でした。\nclass-static_press.phpの453行目あたりの関数にで、特定のlinkタグをHTMLから除去する処理が書かれていました。\nclass-static_press.php //453行目あたり public function remove_link_tag($content, $http_code = 200) { $content = preg_replace( \u0026#39;#^[ \\t]*\u0026lt;link [^\u0026gt;]*rel=[\\\u0026#39;\u0026#34;](pingback|EditURI|shortlink|wlwmanifest)[\\\u0026#39;\u0026#34;][^\u0026gt;]+/?\u0026gt;\\n#ism\u0026#39;, \u0026#39;\u0026#39;, $content); $content = preg_replace( \u0026#39;#^[ \\t]*\u0026lt;link [^\u0026gt;]*rel=[\\\u0026#39;\u0026#34;]alternate[\\\u0026#39;\u0026#34;] [^\u0026gt;]*type=[\\\u0026#39;\u0026#34;]application/rss\\+xml[\\\u0026#39;\u0026#34;][^\u0026gt;]+/?\u0026gt;\\n#ism\u0026#39;, \u0026#39;\u0026#39;, $content);//こいつが犯人や！！ return $content; } なるほど。\n原因さえ分かればこっちのモン!!!\n対応方法は簡単ですね♪\n手順 class-static_press.phpの修正 原因となっている部分の処理を一部行わないようにしましょう。以下のようにコメントアウトしてください。\nclass-static_press.php //453行目あたり public function remove_link_tag($content, $http_code = 200) { $content = preg_replace( \u0026#39;#^[ \\t]*\u0026lt;link [^\u0026gt;]*rel=[\\\u0026#39;\u0026#34;](pingback|EditURI|shortlink|wlwmanifest)[\\\u0026#39;\u0026#34;][^\u0026gt;]+/?\u0026gt;\\n#ism\u0026#39;, \u0026#39;\u0026#39;, $content); /* $content = preg_replace( \u0026#39;#^[ \\t]*\u0026lt;link [^\u0026gt;]*rel=[\\\u0026#39;\u0026#34;]alternate[\\\u0026#39;\u0026#34;] [^\u0026gt;]*type=[\\\u0026#39;\u0026#34;]application/rss\\+xml[\\\u0026#39;\u0026#34;][^\u0026gt;]+/?\u0026gt;\\n#ism\u0026#39;, \u0026#39;\u0026#39;, $content); */ return $content; } 修正はこれだけでOKです。\n確認 では、実際にStaticPressで再構築を行ってみましょう。\n正常にS3にFeed関連のファイルが転送されるようになりましたね♪\n終わりに StaticPressプラグインに限らず、Wordpressプラグインは非常に便利ですが、今回のように余計なことまでしてしまっている部分も良くあります。\nそんな時は自分でプラグインのソースコードを読んで修正する必要があります。\nですので、多少なりともプログラミングの勉強をしておくと、より良いサイトが作れるようになるので、暇な時に少しずつPHP等の勉強をしておくと良いでしょう♪\n","date":"2018-05-25T19:07:51+09:00","image":"/wp-content/uploads/2018/05/staticPressLinkRemoveStopEye.png","permalink":"/2018/05/25/4463/","title":"【Wordpress】StaticPressS3でfeedへのlinkタグが消されてしまう原因と対処方法"},{"content":"初心者は必ずハマるであろう壁 EC2インスタンス作成時のキーペア AWSでEC2インスタンスを新たに作成する際に、使用するキーペアを求められます。\nキーペアを指定しなくても作成することは可能ですが、セキュリティ上危ないので必ず既存のキーペアを使うか新たに作成するようにしましょう。\npemキーでのSSH時のエラー このキーペアファイルですが、ブラウザからダウンロードしてそのまま使用すると以下のようなエラーが表示される事があります。\n実行時エラー ssh -i ~/.ssh/sample.pem ec2-user@xx.xx.xx.xx The authenticity of host \u0026#39;xx.xx.xx.xx (xx.xx.xx.xx)\u0026#39; can\u0026#39;t be established. ECDSA key fingerprint is SHA256:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX. Are you sure you want to continue connecting (yes/no)? yes Warning: Permanently added \u0026#39;xx.xx.xx.xx\u0026#39; (ECDSA) to the list of known hosts. @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ Permissions 0644 for \u0026#39;/Users/blogenist/.ssh/sample.pem\u0026#39; are too open. It is required that your private key files are NOT accessible by others. This private key will be ignored. Load key \u0026#34;/Users/blogenist/.ssh/sample.pem\u0026#34;: bad permissions Permission denied (publickey). おそらく、初めてEC2インスタンスにSSH接続しようとすると、ほとんどの方がこのエラーに巡り合っているのではないでしょうか。笑\n原因 まずは、エラー内容を解析してみましょう。\nログ WARNING: UNPROTECTED PRIVATE KEY FILE! これは保護されていない秘密鍵ファイルだよ！という警告文ですね。\n具体的な理由は以下です。\nログ Permissions 0644 for \u0026#39;/Users/blogenist/.ssh/sample.pem\u0026#39; are too open. /Users/blogenist/.ssh/sample.pemのパーミッションが0644なので緩すぎだよ！という意味となります。\n0644とはファイルモードのことを指しており、このファイルの所有者以外にも見えてしまう設定となってしまっているのが警告の原因と思われます。\n確かに、対象のファイルが644を表すrw-r--r--状態になってしまっていますね。\nファイルモード ls -la ~/.ssh total xxx drwxr-xr-x 21 blogenist staff 714 5 22 14:54 . drwxr-xr-x+ 108 blogenist staff 3672 5 23 14:48 .. -rw-r--r--@ 1 blogenist staff 1692 5 22 14:53 sample.pem では、原因が分かったところで対応してみましょう。\n手順 ファイルモードを600に変更 結論を言うと、ファイルモードを所有者以外は読み取りを出来ないように変更すれば良いです。\n以下のコマンドを実行してみましょう。\nファイルモード変更 chmod 600 ~/.ssh/{対象の秘密鍵キーペア}.pem たったこれだけです。\n確認 では確認をしてみましょう。\nまずはファイルモードが変わっているか確認します。\nファイルモード ls -la ~/.ssh total xxx drwxr-xr-x 21 blogenist staff 714 5 22 14:54 . drwxr-xr-x+ 108 blogenist staff 3672 5 23 14:48 .. -rw-------@ 1 blogenist staff 1692 5 22 14:53 sample.pem 正常に変わっていますね。\nでは、実際にSSH接続を試みてみましょう。\nSSH接続 ssh -i ~/.ssh/sample.pem ec2-user@xx.xx.xx.xx __| __|_ ) _| ( / Amazon Linux AMI ___|\\___|___| https://aws.amazon.com/amazon-linux-ami/2018.03-release-notes/ 6 package(s) needed for security, out of 7 available Run \u0026#34;sudo yum update\u0026#34; to apply all updates. [ec2-user@ip-yy-yy-yy-yy ~]$ 無事にエラーが出ずにEC2インスタンスへのSSH接続が出来ましたね♪\n終わりに 以上のように、頻繁に起こりやすいエラーですが、エラーの原因さえ分かれば簡単に対応する事が可能となっています。\nお困りの方は是非この記事を参考にして対応を行ってみてください。\n","date":"2018-05-24T23:53:41+09:00","image":"/wp-content/uploads/2018/05/awsEc2SSHPermissionErrorEye.png","permalink":"/2018/05/24/4465/","title":"【備忘録】AWSのEC2インスタンスにSSH通信する際のWARNING: UNPROTECTED PRIVATE KEY FILE!の解決方法"},{"content":"アンインストールが出来ない・・・ 本来はチョチョイとアンインストール出来るはず Homebrew Caskはとても便利なので利用しているMacユーザーの方は多いと思います。\nインストールに加えアンインストールも以下のようにさくさくっと出来てしまいます。\nHomebrew Cask アンインストール brew cask uninstall {パッケージ名} ==\u0026gt; Uninstalling Cask {パッケージ名} ==\u0026gt; Backing App \u0026#39;{パッケージ名}.app\u0026#39; up to \u0026#39;/usr/local/Caskroom/{パッケージ名}/v.x.y.z/{パッケージ名}.app\u0026#39;. ==\u0026gt; Removing App \u0026#39;/Applications/{パッケージ名}.app\u0026#39;. ==\u0026gt; Purging files for version v.x.y.z of Cask {パッケージ名} こんな感じで簡単にGUIアプリの管理をする事が出来ます。\nエラーが出てしまう しかし、稀に以下のようなエラーが出てアンインストールが出来ない場合が発生します。\nHomebrew Cask アンインストール brew cask uninstall {パッケージ名} Error: undefined method `release\u0026#39; for OS::Mac:Module Follow the instructions here: https://github.com/caskroom/homebrew-cask#reporting-bugs /usr/local/Caskroom/{パッケージ名}/.metadata/latest/20160517135146.887/Casks/{パッケージ名}.rb:2:in `block in load\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cask.rb:23:in `instance_eval\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cask.rb:23:in `initialize\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cask_loader.rb:31:in `new\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cask_loader.rb:31:in `cask\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cask_loader.rb:67:in `cask\u0026#39; /usr/local/Homebrew/Library/Homebrew/compat/hbc/cask_loader.rb:10:in `cask\u0026#39; /usr/local/Caskroom/{パッケージ名}/.metadata/latest/20160517135146.887/Casks/{パッケージ名}.rb:1:in `load\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cask_loader.rb:57:in `instance_eval\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cask_loader.rb:57:in `load\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cask_loader.rb:170:in `load\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cli/uninstall.rb:19:in `block in run\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cli/uninstall.rb:12:in `each\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cli/uninstall.rb:12:in `run\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cli/abstract_command.rb:35:in `run\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cli.rb:98:in `run_command\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cli.rb:168:in `run\u0026#39; /usr/local/Homebrew/Library/Homebrew/cask/lib/hbc/cli.rb:132:in `run\u0026#39; /usr/local/Homebrew/Library/Homebrew/cmd/cask.rb:8:in `cask\u0026#39; /usr/local/Homebrew/Library/Homebrew/brew.rb:101:in `\u0026lt;main\u0026gt;\u0026#39; こうなってしまうと、通常のuninstallコマンドでは消せなくなってしまいます。。。\nなので、別のコマンドを利用して削除する必要があります。\n手順 作業前に 今回使用するコマンドは間違えるとMacが使えなくなり、復元も出来ない状態にしてしまう恐れのあるコマンドです。\n実行する際はコマンド内容をチェックの上、自己責任でお願い致します。\n/opt/homebrew-cask/Caskroom/配下のファイルを削除 Homebrew Caskでインストールしたアプリは/opt/homebrew-cask/Caskroom/に保存されるので、そのファイルを削除する必要があります。\n以下のコマンドを実行してください。\ncommand rm -rf /opt/homebrew-cask/Caskroom/{アプリ名} /Applications/配下のファイルを削除 Homebrew Caskのインストール先を/Applications/にしている場合は、そちらも削除する必要があるので以下のコマンドを実行してください。\ncommand rm -rf /Applications/{アプリ名}.app 確認 では、実際にアンインストールされたか確認してみましょう。\n今回はskypeのアプリでエラーが発生したので削除しました。\ncommand brew cask list alfred docker google-chrome night-owl sourcetree xquartz android-file-transfer dropbox hyperswitch opera tableau astah-community eclipse-ide iterm2 pgadmin3 the-unarchiver atom electron-api-demos karabiner quicklook-csv vagrant burn firefox libreoffice quicklook-json virtualbox chatwork gimp mysqlworkbench slack visual-studio-code 正常にskypeが削除されていますね。\n終わりに 今回のように、便利なツールもたまに正常に動かない事があります。\nしかし、有名なツールほどインターネット上で同じ問題にぶつかった人の記事が転がっているので、諦めずにGoogle先生等で解決策を探してみてください。\n","date":"2018-05-23T20:46:47+09:00","image":"/wp-content/uploads/2018/05/homebrewCaskUninstallEye.png","permalink":"/2018/05/23/4455/","title":"【Homebrew Cask】undefined method `release' for OS::Mac:Moduleでbrew cask uninstallが出来ないときの対象方法"},{"content":"巷で人気の無水鍋 過去に人気を博した「圧力鍋」 鍋を使った料理をする際に、通常の鍋とは違う圧力鍋と呼ばれるものが一時期話題になりました。\n圧力鍋とは、鍋の内部を密閉し食材に圧力をかけることによって調理する鍋の事を差し、煮物などは圧力の力によって短時間で仕上げることができます。\nまた、圧力の力のおかげで肉などがとても柔らかく調理する事が可能で、骨もある程度柔らかく仕上げる事が可能です。\n新たな勢力「無水鍋」 そんな中、最近は無水鍋というものが話題になっています。\n無水鍋とは蒸気を極力逃がさないようにすることで、食材の持つ水分だけで調理が可能になり、使用する水をかなり減らすことが出来ます。\n上記を逃がさないようにすることで、食材の水分のみでの調理が可能になり、食材の持つ栄養をほとんど逃がさないで調理する事が出来ますし、味も染み込みやすくなります。\nただ、圧力鍋と違い調理時間を短縮出来るという訳ではないので注意しましょう。\n無水鍋の利点 無水鍋を使うことで以下のようなメリットがあります。\nメリット\r熱伝導が優秀\r保温性が優秀\r油を不要\r具材の水分のみで調理可能\r野菜の甘み・旨味が色濃く出る\r栄養価の高い料理が作れる\r無水鍋の弱点 逆に以下のようなデメリットもあります。\nデメリット\r調理のコツが必要\r器具が高い\r重い\r火加減が難しい\r手入れが大変\rまた、無水鍋にも様々なものが販売されているので次はそちらの商品を紹介していきます。\n紹介 ストウブ（STAUB） 公式サイト\nPoint\rセルフ・ベイスティング・システム\rエマイユ(ホーロー)加工\rオーブン調理も可能\rガスの直火、オーブンはもちろんIH(100V、200V)にも対応\r黒マットエマイユ加工\r高い気密性による無水調理\rAmazon staub ストウブ 「 ココット ラウンド ブラック 20cm 」 両手 ホーロー 鍋 IH対応 【日本正規販売品】 La Cocotte Round 40509-487 ル・クルーゼ（LE CREUSET） 公式サイト\nPoint\rすぐれた熱伝導\r高い保温性\r独自のスチームコントロール機能\r100年でも持ちこたえる丈夫さ\r計算されたドーム型のフタ\rエナメルコーティング技術\r多様なデザイン\rAmazon ルクルーゼ ココット ロンド ホーロー 鍋 IH 対応 20cm オレンジ バーミキュラ（VERMICULAR） 公式サイト\nPoint\r後発製品だからこその最新技術\rグリルパンのように凹凸があり、焦げ付き防止\r蓋に取っ手とつまみがついている\r日本製\rAmazon バーミキュラ オーブンポットラウンド 22cm マットブラック SUMI(炭) スミ 無水鍋® 公式サイト\nPoint\r１つで８通りの調理方法が可能\r高い気密性\r軽量性\r優れた熱効率\r高い保温性\r日本製\rAmazon 無水鍋 24cm 終わりに 無水鍋は様々なメーカーから販売されています。\nですので、希望にマッチする製品は必ずあると思いますので、ぜひ無水料理に挑戦してみてはいかがでしょうか♪\n","date":"2018-05-22T16:09:52+09:00","image":"/wp-content/uploads/2018/05/musuinabeEye.png","permalink":"/2018/05/22/3416/","title":"【簡単料理】今話題の無水鍋とは？【男の手料理向け】"},{"content":"更新日時の必要性 Wordpressでは自動でセットされる Wordpressで記事を作成していると、記事に対して投稿日時と更新日時が登録されます。\nもちろん、投稿した時点では投稿日時と更新日時は同じ日付が登録されますが、後日記事を修正することで更新日時だけが更新されていきます。\nSEO観点で重要 この記事の更新日時ですが、SEO観点では非常に有効な情報として認識されます。\nコンテンツ量の多い記事はそれだけで価値のあるページとして判断されます。\nしかし、いくらコンテンツ量が多くても何年も前に書かれた記事だと古い情報となってしまうので、それだけで価値が下がってしまいます。\nそこで、記事の更新日時を入れることで、いつ書かれた記事なのか？ということを検索エンジン側に伝えることが可能になります。\nそして、数年も前に書いた記事でも定期的に更新することで記事の鮮度を保ち、長く価値のあるコンテンツとして保ち続けることが出来ます。\nこの考え方はSEO対策としてとても重要です。\nWordpressの管理画面では更新日時が確認出来ない では、定期的に記事を更新して鮮度を保てば良いのですが、Wordpressの管理画面の投稿一覧では、日付という投稿日時を表示する項目は用意されていますが、更新日時は表示されていません。\n毎回、詳細画面やプレビューを開いて確認するのはとても手間がかかり無駄な時間となってしまいます。\nカスタマイズで項目追加可能 しかし、そこはWordpress。\nカスタマイズ性が特徴のCMSですので、もちろんカスタマイズをすることで更新日時を投稿一覧に追加することが出来ます。\n今回は管理画面の投稿一覧に更新日時を追加する方法をご紹介致します。\n手順 作業の前に 今回の作業はfunctions.phpを修正します。\n間違えたコードで保存するとWordpressが動かなくなってしまう事があるので、バックアップの上作業は自己責任でお願いします。\nfunctions.phpに追記 今回はこちらの記事を参考にさせていただきました。\nありがとうございます！\n参考\rWordPressの管理画面に「最終更新日」の項目を増やし、ソートで並び替えたい！\r追加の仕方はとても簡単です。\nfunctions.phpの末尾に以下のコードを追加してください。\nfunctions.php add_filter( \u0026#39;manage_edit-post_columns\u0026#39;, \u0026#39;aco_last_modified_admin_column\u0026#39; ); // Create the last modified column function aco_last_modified_admin_column( $columns ) { $columns[\u0026#39;modified-last\u0026#39;] =__( \u0026#39;最終更新日\u0026#39;, \u0026#39;aco\u0026#39; ); return $columns; } add_filter( \u0026#39;manage_edit-post_sortable_columns\u0026#39;, \u0026#39;aco_sortable_last_modified_column\u0026#39; ); // Allow that content to be sortable by modified time information function aco_sortable_last_modified_column( $columns ) { $columns[\u0026#39;modified-last\u0026#39;] = \u0026#39;modified\u0026#39;; return $columns; } add_action( \u0026#39;manage_posts_custom_column\u0026#39;, \u0026#39;aco_last_modified_admin_column_content\u0026#39;, 10, 2 ); // Format the output function aco_last_modified_admin_column_content( $column_name, $post_id ) { // Do not continue if this is not the modified column if ( \u0026#39;modified-last\u0026#39; != $column_name ) return; $modified_date = the_modified_date( \u0026#39;Y年Md日Ag時i分\u0026#39; ); $modified_author = get_the_modified_author(); echo $modified_date; } たったこれだけです。\n確認 では、確認してみましょう。\n正常に最終更新日時項目が追加され、さらにソートも出来るようになりました♪\n終わりに これで、簡単に最終更新日時が古いものを定期的に更新して、過去に投稿したコンテンツの鮮度を保ちやすくなりました。\n新しい情報ほどインターネット上では重宝されるので、執筆してからのメンテナンスも定期的に行うように心がけましょう♪\n","date":"2018-05-21T20:48:14+09:00","image":"/wp-content/uploads/2018/05/customUpdateTimeEye.png","permalink":"/2018/05/21/4432/","title":"【SEO対策】Wordpressの管理画面に記事の最終更新日時を表示してみよう【カスタマイズ】"},{"content":"遂に一眼ゲット カメラ男子デビュー 常日頃からGoProを持ち運び、動画メインに旅の思い出やレポートを撮影しておりましたが、先日遂に念願のレフ機を購入しました！！！\n٩( ‘ω’ )و\nミラーレスと一眼レフで迷いましたが、せっかくなので一眼レフにしました。\nCanon EOS Kiss X9i 今回購入したのは、Canon デジタル一眼レフカメラ EOS Kiss X9i レンズキットです。\nAmazon Canon デジタル一眼レフカメラ EOS Kiss X9i レンズキット EF-S18-135mm F3.5-5.6 IS USM 付属 EOSKISSX9I-18135ISUSMLK 同時購入したほうが良い備品 これからの快適な一眼レフを過ごすために、合わせて買っておいたほうが良いものが幾つかあります。\n一眼カメラケース 基本的には首からかけたまま持ち運びますが、バッグやキャリーケースに入れる際に、そのままだと衝撃をもろに受けてしまうため故障に繋がってしまう可能性があります。\nなので、この一眼カメラケースも一緒に買っておいたほうが良いでしょう。\nAmazon HAKUBA 一眼カメラケース プラスシェル スリムフィット02 カメラジャケット M-180 ブラックカモ DCS-SF02M180BC スポンジかつストレンジ素材なので、大きめのレンズをつけたままの収納・取り出しが出来るのでとても便利です♪\nもちろん首かけ状態でもつけることが出来るので人混みや満員電車でも衝撃から守ってくれます。\nSigmaの魚眼レンズをつけたままでも問題なく収納出来ました！\n関連記事 【魚眼】Sigma 15mm F2.8 EX DG DIAGONAL FISHEYEの使いやすさが抜群だった件【Canon一眼向け】 2018/08/31 1514文字 約4分で読めます レンズプロテクター レフ機はレンズに傷がついてしまうと\n終わり\nです。\nなので、レンズに直接傷がつかないようにプロテクターを購入しましょう。\n今回は、Canon X9iに合う58mmのレンズプロテクターを購入してみました。\nAmazon MARUMI カメラ用 フィルター MC-N58mm 保護用 フィルター 19095 レンズフード プロテクターと合わせてレンズフードも購入しておいたほうが良いでしょう。\nこちらもレンズへの傷付きを防止する他、光の差し込みによるフレアやゴーストなども抑えることが出来るので、より綺麗な写真を取ることが出来ます。\n今回は純正の以下のレンズフードを購入しました。\nAmazon Canon レンズフード EW-63C 液晶保護フィルム X9iには液晶画面があります。\nこちらも、使い始める前にしっかりと液晶保護フィルムを貼っておきましょう。\n今回は以下の液晶保護フィルムを購入しました。\nAmazon HAKUBA デジタルカメラ液晶保護フィルムMarkII Canon PowerShot G9 X MarkII / G7 X MarkII / G5 X / G9 X専用 DGF2-CAG9XM2 SDカード 前述したように、SDカードもあらかじめ用意しておく必要があります。\n今であれば、Class10 UHS-I対応の規格のものであれば、不都合はないと思うので以下のSDカードを購入しました。\nAmazon 【Amazon.co.jp限定】Transcend SDHCカード 32GB Class10 UHS-I対応 (最大転送速度90MB/s) TS32GSDHC10U1E (FFP) レンズクリーナーセット レフ機は日々の手入れも必要です。\nレンズが汚れていたまま放置するとそれだけで傷んでしまうので、手入れ用の小物も用意しておきましょう。\nAmazon カメラ レンズ クリーニング キット Greleaves クリーナー 清掃用品 カメラレンズクリーナー 一眼レフカメラ デジタルカメラ 対応 (10点セット) それで早速、開封の儀を行っていきましょう♪\n開封の儀 内容物 付属品は以下となっております。\n付属品\rCanon EOS Kiss X9i 本体\r肩かけストラップ\rバッテリー\rバッテリーチャージャー\r取り扱い説明書\r※SDカードは付属していないので別途用意する必要があります。\nセッティング完了！ 上記の備品を含めて、取り付けが完了しました。\nこんな感じ。\nあら良いですねぇ〜。\n一眼ケースも問題なくフィットしています♪\nこれからこの一眼でどんどん写真をとっていこうと思います♪\n旅先や美味しいものの写真はコチラにアップしているので宜しければ見てください♪\n\u0026nbsp;\n終わりに 今回は開封して使い始めるための準備や、合わせて購入しておいたほうが良い備品を紹介しました。\nこれからは、このレフ機を使ってどんどん写真をとっていくと思いますので、定期的に皆さんに披露出来たらなと思っています♪\n","date":"2018-05-20T20:21:22+09:00","image":"/wp-content/uploads/2018/05/canonX9iSetupEye.png","permalink":"/2018/05/20/4406/","title":"【一眼初心者向けレフ機】Canon EOS Kiss X9i買ったから開封するよー！【エントリーモデル】"},{"content":"はてなブログでもjQueryを使いたい！！ 人間の欲深さ炸裂☆ 以前、はてなブログに登録をしてブログを開設するまでの手順をまとめました。\n関連記事 【ブロガーへの第一歩】はてなブログに登録方法してブログをサクッと作ってみた 2018/05/04 1208文字 約3分で読めます はてなブログを利用していて、慣れてくるとJavaScriptを使ってさらにカスタマイズをしたくなると思います。\n開発者ツールでソースを確認してみると、多少バージョンは古いようですがjQueryを読み込んでいるので使えそうですね♪\nしかし世の中そう甘くはない jQueryが使えない・・・？ 試しに以下のようなアラートを表示させるスクリプトを詳細設定のheadに要素を追加エリアに追加して動作を確認してみました。\njQuery動作確認用コード(エラー) \u0026lt;script type=\u0026#34;text/javascript\u0026#34;\u0026gt; $(document).ready(function () { alert(\u0026#34;jQuery Test Alert.\u0026#34;); }) \u0026lt;/script\u0026gt; しかし、結果は以下のようなエラーログが表示されアラートが出ませんでした。\nこれはjQueryのグローバル変数の「$」が見つからないというエラーになります。\n原因は読み込みタイミング どうやら、はてなブログの標準ではjQueryの読み込みをHTML構造の下部(タイミングとしてはかなり後)で行っている影響で、jQueryファイルを読み込み前に$(document)が実行されてしまい、結果として$が見つからないというエラーになってしまっているようです。\nじゃあどうすれば良いのか・・・orz\n回避方法 addEventListenerを使おう 基本的に、JavaScriptはDOM要素全て読み込まれてから実行する必要があります。\nこれは、JavaScriptの性質上クリックイベント等の仕込みは実行時点のDOM要素に対してセットされます。\n後から動的に追加したDOMなどには適用されないので気をつけましょう。\nちなみに、CSSは後から追加されたDOMに対してもセレクターがマッチすれば適用されるので動きが少し違います。\nその上で、jQueryも基本的には$(document).ready(function () {});を使ってDOM要素を全て描写し終えたら処理を行うという暗黙のルールが一般的となっています。\nしかし、今回はこちらが使えないので、addEventListenerという似たような動きをするJavaScript標準のメソッドを使って似たような事を行うことではてなブログでもjQueryを使うことが可能です。\n今回の場合は、以下のように記述を変更する事になります。\njQuery動作確認用コード(成功) \u0026lt;script type=\u0026#34;text/javascript\u0026#34;\u0026gt; document.addEventListener(\u0026#34;DOMContentLoaded\u0026#34;, function(){ alert(\u0026#34;jQuery Test Alert.\u0026#34;); }); \u0026lt;/script\u0026gt; 確認 では、実際にはてなブログにアクセスしてみましょう。\n正常にjQueryの処理が実行されるようになりましたね♪\n終わりに 仕組みがわからない人ではハマってしまいそうな部分ですが、理解をしてしまえば解決策がすぐ見つかります。\n後は、他のサイトと同じようにjQueryでのカスタマイズが自由に出来るようになりますので、ブログを見やすくするために試行錯誤を行ってみてください。\n","date":"2018-05-19T23:54:36+09:00","image":"/wp-content/uploads/2018/05/userJqueryFromHatenaEye.png","permalink":"/2018/05/19/3982/","title":"【ひと手間必要】はてなブログでjQueryを使えるようにする方法"},{"content":"Feedの必要性 WordpressはRSS標準搭載 Wordpressでサイトを生成すると、標準で以下のようなURLが用意されます。\nPoint\rhttp://example.com/?feed=rss\rhttp://example.com/?feed=rss2\rhttp://example.com/?feed=rdf\rhttp://example.com/?feed=atom\rパーマリンクをカスタムしている場合は以下のURLとなります。\nPoint\rhttp://example.com/feed/\rhttp://example.com/feed/rss/\rhttp://example.com/feed/rss2/\rhttp://example.com/feed/rdf/\rhttp://example.com/feed/atom/\rアクセスするとこんな感じです。\nStaticPressを利用した際の問題 HTMLファイルになってしまう StaticPressを使用して、上記のFeed情報を出力するとHTMLファイルとして出力されてしまいます。\nこれはURLがfeed/となっているため、デフォルトでindex.htmlに出力されてしまっています。\n解決方法 こちらを解決するには、StaticPressS3にてS3バケットに転送する際にファイルの拡張子をhtmlからxmlに変更するようにします。\nそのためにclass-S3_helper.phpの62行目辺りを以下のように修正してください。\n※{}内の部分は置き換えてください\n※2019年6月8日追記　以前の方法だと後に行われたfeedページで上書きされていたのでトップのフィードのみ対象にするように修正\nclass-S3_helper.php //62行目辺り // S3 Upload public function upload($filename, $upload_path = null, $bucket = null) { if (!file_exists($filename) || !$this-\u0026gt;s3) return false; $object_filename = $filename; $isFeed = false; try { if( strstr($filename, \u0026#39;{Wordpressインストールディレクトリ}/{StaticPress出力ディレクトリ}/feed/index.html\u0026#39;) ){ $object_filename = \u0026#39;{Wordpressインストールディレクトリ}/{StaticPress出力ディレクトリ}/feed/index.xml\u0026#39;; $upload_path = \u0026#39;feed/index.xml\u0026#39;; $isFeed = true; }elseif(strstr($upload_path, \u0026#39;feed/index.html\u0026#39;)){ return; } if (!$upload_path) $upload_path = $filename; $args = array_merge($this-\u0026gt;options, array( \u0026#39;Key\u0026#39; =\u0026gt; $upload_path, \u0026#39;Body\u0026#39; =\u0026gt; $this-\u0026gt;file_body($filename), \u0026#39;ContentType\u0026#39; =\u0026gt; $this-\u0026gt;mime_type($object_filename, $isFeed),//$object_filenameに変更、第二引数も追加 StaticPressプラグインの全容が分かればもっとスマートにいけそうですが、今回はそこまではやりません。\n気になる方はやってみてください。笑\nまた、mime_typeもtext/htmlではなくapplication/rss+xml; charset=UTF-8に変える必要があるので、class-S3_helper.phpの194行目辺りを以下のように修正してください。\n※charset=UTF-8を入れないと日本語が文字化けしてしまいます\nclass-S3_helper.php private function mime_type($filename, $isFeed){//第二引数追加 static $info; if (!isset($info)) { $magic_file = \u0026#39;/etc/httpd/conf/magic\u0026#39;; $info = file_exists($magic_file) ? new FInfo(FILEINFO_MIME_TYPE, $magic_file) : new FInfo(FILEINFO_MIME_TYPE); } if( $isFeed ){//feedファイルの場合の早期リターン文の追加 return \u0026#39;application/rss+xml; charset=UTF-8\u0026#39;;//rss用のMimeType指定 } 確認 では、実際に再構築して確認してみましょう。\n正常に、xml形式で転送されるようになりましたね♪\nFeedのURLが管理サーバーのものになる 出力されたFeedの内容をみると、一部のURLがWordpressを載せているサーバーのURLになったままの部分があると思います。\nこのままだとうまくFeedが働きません。\n対応方法 こちらを解決するには、StaticPressのplugin.phpの末尾に以下を追加する必要があります。\nplugin.php add_action(\u0026#39;StaticPress::file_put\u0026#39;, \u0026#39;replace_url_of_feed\u0026#39;, 2); function replace_url_of_feed($file_dest, $url){ if(strstr($file_dest, \u0026#39;/feed/index.html\u0026#39;)){ $buff = file_get_contents($file_dest); $replace = substr(static_press_admin::static_url(), 0, -1); $content = str_replace(home_url(),$replace,$buff); file_put_contents($file_dest, $content); } } 確認 では、実際に再構築して確認してみましょう。\nこちらも正常に運用しているドメインに置き換わるようになりましたね♪\n終わりに Feed情報は他のサイトに更新情報を伝える上では、非常に貴重な情報です。\n使わないとしても、いつでも使える状態にしておくと良いでしょう♪\n","date":"2018-05-18T14:46:22+09:00","image":"/wp-content/uploads/2018/05/rssStaticPressSettingEye.png","permalink":"/2018/05/18/4382/","title":"【WordpressのRSS】StaticPressでFeedをhtml形式では無くxml形式で出力する方法"},{"content":"コメント欄が無いサイト StaticPress運用サイト 本ブログは以前もご紹介した通り、AWSのS3バケットを利用した静的ページとして運用をしており、そのためコメント機能を除去しています。\n関連記事 【瞬殺】Wordpressのコメント機能を無効化する方法 2018/05/10 771文字 約2分で読めます JavaScriptファイルの読み取りエラーが発生 そして、StaticPressで不要ファイルを転送しないように以下の記事で/wp-includes/をS3バケットに転送しないようにしました。\n関連記事 しかし、その際に以下のようなエラーが発生するようになりました。\n原因はwp-includesを除外したため これは、wp-includesを除外したため、comment-reply.min.jsが読み込めずにエラーとなってしまっています。\nこのJavaScriptファイルはコメントに返事をする際に利用するものらしく、コメント機能を使っていない本ブログでは読み込む必要が無いファイルのようなので、そもそも読み込まないように修正してみましょう。\n手順 function.phpに追記 以下の記述をfunctions.phpの末尾に追加してください。\nfunctions.php function comment_js_queue(){ if ( (is_single() \u0026amp;\u0026amp; comments_open() \u0026amp;\u0026amp; get_option(\u0026#39;thread_comments\u0026#39;)) ){ wp_enqueue_script( \u0026#39;comment-reply\u0026#39; ); }else{ wp_deregister_script(\u0026#39;comment-reply\u0026#39;); } } add_action(\u0026#39;wp_footer\u0026#39;,\u0026#39;comment_js_queue\u0026#39;); 上記は、今後のことも考えて、記事ページかつコメントが公開されていてかつコメントを階層表示する場合は、comment-reply.min.jsを読み込む、という指定をしています。\n確認 では、実際にStaticPressで再構築して確認してみましょう。\n正常にエラーが出ないようになりました。\n終わりに このように、エラーが出るからといってファイルを用意するのではなく、そもそも必要なのか？という観点を持っておく事がサイト運営をしていく上で大切です。\nまた、JavaScriptの過度な読み込みはページ読み込みスピードを下げてしまい、利用者へのストレスにもつながってしまうので、極力読み込み量を減らすように心がけてみましょう。\n","date":"2018-05-17T11:42:23+09:00","image":"/wp-content/uploads/2018/05/ignoreCommentJsEye.png","permalink":"/2018/05/17/4374/","title":"【瞬殺】Wordpressのcomment-reply.min.jsをロードしないようにする【パフォーマンスアップ】"},{"content":"おさらい CloudFrontの自動Invalidateまで 前回までの記事では、StaticPressでHTML化し、\n関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます StaticPressS3でS3バケットに転送し、\n関連記事 【StaticPressS3】WordpressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】 2018/05/06 3508文字 約8分で読めます CloudFrontとRoute53を使って独自ドメインでアクセスし、\n関連記事 【Wordpress】AWSのS3とCloudFrontとRoute53を連携して独自ドメインで公開する方法【お名前.com】 2018/05/07 2981文字 約6分で読めます サイトをSSL化し、\n関連記事 【無料SSL証明書】AWSでHTTPS通信を取得してCloudFrontに設定してみよう！【Wordpress】 2018/05/08 3849文字 約8分で読めます AWSのLambda関数を利用したStaticPressS3での転送時に自動でCloudFrontをInvalidateするところまで設定しました。\n関連記事 【自動キャッシュ削除】StaticPressで転送した際にCloudFrontでInvalidateを自動でする方法 2018/05/15 2521文字 約6分で読めます 不要なファイルの除去 Wordpress関連の不要ファイルも転送されてしまっている 今の状態だと、Wordpressで利用するテーマファイルやプラグイン、その他不要なファイルまでS3バケットに転送されてしまっています。\n転送不要なファイル その中で以下のファイルは不要なのでStaticPressの出力対象に含めないようにしてみましょう。\nファイルパス\r説明\r/{year}/{month}/{day}/{post_id}/{アップロード画像名}/\r添付ファイルページを保存するディレクトリ。\nこのページを直接参照する事はほぼ無いので不要。\r/author/*\r投稿者アーカイブページを保存するディレクトリ。\n今回のブログは自分一人で運営しているので、こちらのページは不要。\r/wp-admin/*\rWordpressの管理画面で使用するファイルを保存するディレクトリ。\nS3側で管理画面を開くことは無いので不要。\r/wp-content/plugins/*\rWordpressのpluginを保存しているディレクトリ。\nS3でpluginを動かすことは無いので不要。\r/wp-includes/*\rWordpressの様々な機能を動かすための主要なファイルを保存しているディレクトリ。\nS3で運用する上では参照する箇所は無いので不要。\r/wp-json/*\rWordpressのAPIレスポンスを保存するディレクトリ。\nS3側ではこの機能は使わないので不要。\r上記を対象外にするには、複数のファイルを修正する必要があるので一つずつ紹介して行きます。\n手順 作業をする前に 今回の作業では、pluginのファイルを修正するので万が一記述を間違えるとpluginが動かなくなってしまうので、バックアップ取る等してから作業をするようにお願いします。\nまた、pluginによっては除外するとページ側でエラーが発生する可能性があるので、お使いのpluginに合わせて除外するディレクトリを精査した上で、自己責任でお願いします。\n添付ファイルページを除外 class-static_press.phpの721行目辺り 添付ファイルページを出力しないようにするには、class-static_press.phpの721行目辺りを以下のように修正する必要があります。\n\u0026lt;Wordpressインストールディレクトリ\u0026gt;/wp-content/plugins/staticpress/includes/class-static_press.php $posts = $wpdb-\u0026gt;get_results(\u0026#34; select ID, post_type, post_content, post_status, post_modified from {$wpdb-\u0026gt;posts} where (post_status = \u0026#39;publish\u0026#39; /* or post_type = \u0026#39;attachment\u0026#39; */ ) and post_type in ({$this-\u0026gt;post_types}) order by post_type, ID \u0026#34;); authorを除外 class-static_press.phpの643行目辺り authorを出力しないようにするには、class-static_press.phpの643行目辺りを以下のように修正する必要があります。\n\u0026lt;Wordpressインストールディレクトリ\u0026gt;/wp-content/plugins/staticpress/includes/class-static_press.php //643行目辺り private function get_urls(){ global $wpdb; $wpdb-\u0026gt;query(\u0026#34;truncate table `{$this-\u0026gt;url_table}`\u0026#34;); $this-\u0026gt;post_types = \u0026#34;\u0026#39;\u0026#34;.implode(\u0026#34;\u0026#39;,\u0026#39;\u0026#34;,get_post_types(array(\u0026#39;public\u0026#39; =\u0026gt; true))).\u0026#34;\u0026#39;\u0026#34;; $urls = array(); $urls = array_merge($urls, $this-\u0026gt;front_page_url()); $urls = array_merge($urls, $this-\u0026gt;single_url()); $urls = array_merge($urls, $this-\u0026gt;terms_url()); //$urls = array_merge($urls, $this-\u0026gt;author_url());　←コメントアウト $urls = array_merge($urls, $this-\u0026gt;static_files_url()); $urls = array_merge($urls, $this-\u0026gt;seo_url()); return $urls; } plugins.phpの末尾 次に、pluginsの末尾に以下を追記してください。\n\u0026lt;Wordpressインストールディレクトリ\u0026gt;/wp-content/plugins/staticpress/plugin.php add_action(\u0026#39;StaticPress::file_put\u0026#39;, \u0026#39;static_rm\u0026#39;, 1); function static_rm($file_dest, $url){ if(strstr($file_dest, \u0026#39;/author/\u0026#39;)){ unlink($file_dest); } } wp-admin、wp-includesを除外 class-static_press.phpの863行目辺り wp-admin及びwp-includesを出力しないようにするには、class-static_press.phpの863行目辺りを以下のように修正する必要があります。\n\u0026lt;Wordpressインストールディレクトリ\u0026gt;/wp-content/plugins/staticpress/includes/class-static_press.php //863行目辺り private function static_files_url($url_type = \u0026#39;static_file\u0026#39;){ $urls = array(); $static_files_filter = apply_filters(\u0026#39;StaticPress::static_files_filter\u0026#39;, $this-\u0026gt;static_files_ext); foreach ($static_files_filter as \u0026amp;$file_ext) { $file_ext = \u0026#39;*.\u0026#39;.$file_ext; } $static_files = array_merge( $this-\u0026gt;scan_file(trailingslashit(ABSPATH), \u0026#39;{\u0026#39;.implode(\u0026#39;,\u0026#39;,$static_files_filter).\u0026#39;}\u0026#39;, false), //$this-\u0026gt;scan_file(trailingslashit(ABSPATH).\u0026#39;wp-admin/\u0026#39;, \u0026#39;{\u0026#39;.implode(\u0026#39;,\u0026#39;,$static_files_filter).\u0026#39;}\u0026#39;, true),←コメントアウト //$this-\u0026gt;scan_file(trailingslashit(ABSPATH).\u0026#39;wp-includes/\u0026#39;, \u0026#39;{\u0026#39;.implode(\u0026#39;,\u0026#39;,$static_files_filter).\u0026#39;}\u0026#39;, true),←コメントアウト $this-\u0026gt;scan_file(trailingslashit(WP_CONTENT_DIR), \u0026#39;{\u0026#39;.implode(\u0026#39;,\u0026#39;,$static_files_filter).\u0026#39;}\u0026#39;, true) ); wp-content/pluginsと/wp-json/を除外 plugins.phpの末尾 authorの除外で追加した関数を以下のように修正してください。\n\u0026lt;Wordpressインストールディレクトリ\u0026gt;/wp-content/plugins/staticpress/plugin.php add_action(\u0026#39;StaticPress::file_put\u0026#39;, \u0026#39;static_rm\u0026#39;, 1); function static_rm($file_dest, $url){ if(strstr($file_dest, \u0026#39;/author/\u0026#39;) or strstr($file_dest, \u0026#39;/wp-content/plugins/\u0026#39;) or strstr($file_dest, \u0026#39;/wp-json/\u0026#39;)){ unlink($file_dest); } 確認 では、一度S3バケットと出力ディレクトリを削除した上で再構築を実行してみましょう。\n正常に転送から除外されるようになりましたね♪\n終わりに 以上のように、AWSのLambda関数を利用する事でCloudFrontを使っていてもコンテンツの即時反映がされるようになりました。\nこれで記事を書いて転送することだけに集中出来るので、どんどんコンテンツを増やしてPV増加を狙ってみてください♪\n","date":"2018-05-16T12:23:43+09:00","image":"/wp-content/uploads/2018/05/staticPressIgnoreFileEye.png","permalink":"/2018/05/16/4352/","title":"【ゴミファイルを減らす】StaticPressで不要ファイルをS3バケットに転送しないようにしてみよう"},{"content":"おさらい サイトのSSL化まで 前回までの記事では、StaticPressでHTML化し、\n関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます StaticPressS3でS3バケットに転送し、\n関連記事 【StaticPressS3】WordpressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】 2018/05/06 3508文字 約8分で読めます CloudFrontとRoute53を使って独自ドメインでアクセスし、\n関連記事 【Wordpress】AWSのS3とCloudFrontとRoute53を連携して独自ドメインで公開する方法【お名前.com】 2018/05/07 2981文字 約6分で読めます サイトをSSL化するところまで設定をしました。\n関連記事 【無料SSL証明書】AWSでHTTPS通信を取得してCloudFrontに設定してみよう！【Wordpress】 2018/05/08 3849文字 約8分で読めます 更新されない問題 CloudFrontが悪さをしてしまう 今の状態だと、新しい記事を公開してStaticPressで転送する分には問題なくほぼ即時反映されるが、公開済みの記事を更新した場合は即時反映がされない状態となってしまっています。\nこれは、CloudFrontに備わっているキャッシュ機能が働いているからです。\n本来はCloudFrontはコンテンツを高速配信するためのCDNのサービスです。\nそれをS3バケットと連携させてWebサイトをホスティングしているので、今回のような即時反映がされない現象が発生してしまっています。\n今回はCloudFrontのキャッシュ機能を残したまま、意図的にキャッシュを削除し即時反映されるように設定をしてみようと思います。\n手順 手動で行う場合 CloudFrontからInvalidate CloudFrontのキャッシュは意図的に削除して即時反映することは可能です。\nAWSのマネジメントコンソールにアクセスし、上部サービスメニューからネットワーキング \u0026 コンテンツ配信\u003eCloudFrontを選択します。\n次に対象のDistributionsを選択します。\nそしたら、Invalidatinosタブを選択し、Create Invalidationをクリックします。\nすると、以下のようなダイアログが表示されます。\nObject Pathsにはキャッシュを削除したいオブジェクトを指定します。\n今回はとりあえず全てのオブジェクトのキャッシュを削除したいので、/*を入力してInvalidateボタンをクリックします。\nすると、In Progresssという状態で処理が始まります。\nこのStatusがCompletedになるとキャッシュが削除されたのでコンテンツが更新されていると思います。\n自動で行う場合 Lambdaの作成 上記のように手動でもキャッシュを削除することは可能ですが、記事を追加/更新するたびにAWSのマネジメントコンソールにアクセスして、ボタンを押すのは毎回となるととてもめんどくさいです。\nですが、ここは自動化をすることが可能です。\n今回はStaticPressS3でS3バケットに転送した際に、自動でオブジェクトのキャッシュをクリアするような設定を入れてみましょう。\n自動でInvalidationをするにはLambdaを利用します。\nLambdaとは、あらかじめ登録しておいた関数を、様々なイベントをトリガーに実行することが出来るサービスとなっています。\n上部サービスメニューからコンピューティング\u003eLambdaをクリックします。\n次に、左部メニューのダッシュボードを選択し、関数の作成ボタンをクリックします。\n次の画面では、関数の設定を行っていきます。\nまずは一から作成を選択します。\n次に、任意の関数名を入力しランタイムはPython 2.7を選択します。\nそして、ロールはLambda実行用のロールを作成するので、カスタムロールの作成を選んでください。\nすると、ロールの作成画面が開くので、任意のロール名と以下のポリシーJsonを入力して許可ボタンをクリックしてください。\nポリシーJson { \u0026#34;Version\u0026#34;: \u0026#34;2012-10-17\u0026#34;, \u0026#34;Statement\u0026#34;: [ { \u0026#34;Effect\u0026#34;: \u0026#34;Allow\u0026#34;, \u0026#34;Action\u0026#34;: [ \u0026#34;logs:CreateLogGroup\u0026#34;, \u0026#34;logs:CreateLogStream\u0026#34;, \u0026#34;logs:PutLogEvents\u0026#34; ], \u0026#34;Resource\u0026#34;: \u0026#34;arn:aws:logs:*:*:*\u0026#34; }, { \u0026#34;Effect\u0026#34;: \u0026#34;Allow\u0026#34;, \u0026#34;Action\u0026#34;: [ \u0026#34;cloudfront:CreateInvalidation\u0026#34; ], \u0026#34;Resource\u0026#34;: [ \u0026#34;*\u0026#34; ] } ] } 先ほどの画面に戻り、既存のロールを選択に変更すると既存のロールに先ほど作成したロールが追加されているので、そちらを選択し関数の作成ボタンをクリックします。\n次に、トリガーの設定を行います。\n今回はS3バケットへのアクションがトリガーなので、設定タブのS3を選択します。\nすると、トリガーエリアにS3が追加されるので、必要な設定リンクをクリックします。\nすると、トリガーの設定画面が開くので、監視したいバケットを選択、イベントタイプをオブジェクトの作成(すべて)を選択、トリガーの有効化にチェックを入れて追加ボタンをクリックします。\n次に、実行するPythonの関数を登録します。\n画面中段あたりの関数コードエリアに進み、以下のコードを追加してください。\n※${DistributionId}は自分のものを入れてください\nPython関数 from __future__ import print_function import boto3 import time def lambda_handler(event, context): for items in event[\u0026#34;Records\u0026#34;]: path = \u0026#34;/\u0026#34; + items[\u0026#34;s3\u0026#34;][\u0026#34;object\u0026#34;][\u0026#34;key\u0026#34;] print(path) client = boto3.client(\u0026#39;cloudfront\u0026#39;) invalidation = client.create_invalidation(DistributionId=\u0026#39;${DistributionId}\u0026#39;, InvalidationBatch={ \u0026#39;Paths\u0026#39;: { \u0026#39;Quantity\u0026#39;: 1, \u0026#39;Items\u0026#39;: [path] }, \u0026#39;CallerReference\u0026#39;: str(time.time()) }) これでLambdaの設定は完了なので、上部の保存ボタンをクリックしましょう。\n確認 では、実際にStaticPressを利用して記事を更新し、自動でキャッシュが削除されているかの確認をしてみましょう。\n更新前は以下のようなタイトルになっています。\nWordpress側でタイトルを更新し、StaticPressで転送しCloudFrontのInvalidationsを確認してみると・・・\nお、自動でInvalidateが実行されてキャッシュが削除されていますね！\nブラウザでも確認してみましょ。う！\nキタコレ！！！！\n無事に即時反映が自動でされるようになりましたね♪\n終わりに 以上のように、AWSのLambda関数を利用する事でCloudFrontを使っていてもコンテンツの即時反映がされるようになりました。\nこれで記事を書いて転送することだけに集中出来るので、どんどんコンテンツを増やしてPV増加を狙ってみてください♪\n","date":"2018-05-15T14:54:24+09:00","image":"/wp-content/uploads/2018/05/cloudFrontInvalidationEye.png","permalink":"/2018/05/15/4308/","title":"【自動キャッシュ削除】StaticPressで転送した際にCloudFrontでInvalidateを自動でする方法"},{"content":"誰だこんなに無駄なファイルを作ったのは！ 身に覚えのない謎ファイルを発見 ある日、Wordpressディレクトリの整理をしていると、アップロードした画像の中に身に覚えの無い画像ファイルが大量に作成されているのに気づいました。\n\u0026lt;Wordpressインストールディレクトリ\u0026gt;/wp-content/uploads/\u0026lt;year\u0026gt;/\u0026lt;month\u0026gt;/ ls -la 合計 21464 drwxr-xr-x 2 apache apache 12288 5月 10 11:18 . drwxr-xr-x 4 apache apache 4096 5月 3 16:52 .. -rw-r--r-- 1 apache apache 231468 5月 5 15:23 fujiokaSkyDivingEye-1024x560.png -rw-r--r-- 1 apache apache 36185 5月 5 15:23 fujiokaSkyDivingEye-300x164.png -rw-r--r-- 1 apache apache 141142 5月 5 15:23 fujiokaSkyDivingEye-730x410.png -rw-r--r-- 1 apache apache 145848 5月 5 15:23 fujiokaSkyDivingEye-768x420.png -rw-r--r-- 1 apache apache 189967 5月 5 15:23 fujiokaSkyDivingEye.png この中の、fujiokaSkyDivingEye.pngについては意図的に管理画面からアップロードしたファイルですが、その他の各サイズごとに分かれているファイルはアップロードした記憶がありません。\nWordpressのありがた迷惑機能の仕業 これはWordpressの画像アップロード時の初期設定として、大サイズ/中サイズ/小サイズというように、1つのアップロード画像につき3つ以上のファイルを設定値次第で自動生成してしまっているようです。\nここで自動生成された画像ファイルについては、記事にメディアを追加する際のサイズにて選択可能です。\n不要なら設定を変えないと深刻な問題に この設定、しっかりと把握しておかないと後々サーバーのディスク容量が圧迫されてしまい、新しい画像をアップロード出来なくなってしまいます。\nまた、あとから不要ファイルを消すにしても膨大な量だとかなり大変な作業になってしまいます。\n今回は手遅れになる前に、設定を変えて自動で複数サイズが生成されないようにしてみましょう。\n手順 [adsense]\r設定値変更 管理画面の左部メニューから設定\u003eメディアを選択します。\n初期の数値は以下のような数値が入っていると思います。\n自動生成をしないようにするには、以下のように全ての数値に0と入力し、変更を保存ボタンをクリックします。\n確認 では、もう一度画像をアップロードしてみましょう。\nプルダウンはアップロードした実際の画像ファイルしか選べなくなりましたね。\nしかし、ディレクトリにはまだ他のサイズの画像が生成されてしまっています。。。\nls -la 合計 22587 drwxr-xr-x 2 apache apache 57344 5月 13 18:18 . drwxr-xr-x 7 apache apache 4096 5月 1 17:43 .. -rw-r--r-- 1 apache apache 105979 5月 13 18:18 autoGeneraterSample-768x199.png -rw-r--r-- 1 apache apache 416917 5月 13 18:18 autoGeneraterSample.png\nこれはスマホ用の画像が生成されてしまっています。\nこれも生成されていないようにするには、{Wordpressサイト}/wp-admin/options.phpにアクセスすると、詳細設定画面が表示されるので、その中のmedium_large_size_wの値に0を入れて設定を保存ボタンをクリックします。\n再確認 もう一回画像をアップロードして確認してみましょう。\nls -la 合計 22109 drwxr-xr-x 2 apache apache 57344 5月 13 18:18 . drwxr-xr-x 7 apache apache 4096 5月 1 17:43 .. -rw-r--r-- 1 apache apache 416917 5月 13 18:18 autoGeneraterSample.png\n正常に出力されないようになりましたね。\n終わりに これで不要な画像ファイルが生成されないようになりました。\n必要なファイルをしっかり絞り込むことでサーバー管理が楽になるので、今一度設定を見直してみてはいかがでしょうか。\n","date":"2018-05-14T00:41:41+09:00","image":"/wp-content/uploads/2018/05/wordpressAutoGenerateStopEye.png","permalink":"/2018/05/14/4203/","title":"【ゴミ屋敷回避】Wordpressが無駄に画像を生成しないように設定を変更しよう"},{"content":"StaticPressでsitemapが転送されない あれ、sitemapが無い・・・？ 先日、Wordpressサイトにおけるsitemapファイルの自動生成プラグインの導入方法について紹介しました。\n関連記事 【SEO】Sitemapを出力してくれるWordpressプラグイン「Google XML Sitemaps」のインストール方法 2018/05/11 994文字 約2分で読めます 基本的にはこのプラグインを利用していれば問題は無いのですが、StaticPress等を利用してS3バケットでサイト運用をする際は、そのままだとsitemapファイルやrobots.txtファイルが転送されません。\n関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます sitemapがないと、検索エンジンが正しくサイトコンテンツを解析してくれないので、PVが伸びにくくなってしまいます。\nアドセンスやアフェリエイトをやっている方だとPVの伸び悩みは深刻な問題ですよねorz\n現状の確認 試しに、sitemap.xmlが生成されている状態で、管理画面から再構築ボタンをクリックし、出力ディレクトリを確認したところ、確かにsitemap関連のxmlとrobots.txtが対象ディレクトリに出力されていませんでした。\nStaticPress出力ディレクトリ ls -la 合計 164 drwxr-xr-x 14 apache apache 4096 5月 12 06:06 . drwxr-xr-x 7 apache apache 4096 4月 25 17:24 .. drwxr-xr-x 4 apache apache 4096 5月 12 06:06 2018 -rw-r--r-- 1 apache apache 49707 5月 12 06:06 404.html drwxr-xr-x 3 apache apache 4096 5月 12 06:06 author drwxr-xr-x 4 apache apache 4096 5月 12 06:06 category drwxr-xr-x 3 apache apache 4096 5月 12 06:06 comments drwxr-xr-x 2 apache apache 4096 5月 12 06:06 feed -rw-r--r-- 1 apache apache 53292 5月 12 06:04 index.html drwxr-xr-x 5 apache apache 4096 5月 12 06:05 wp-admin drwxr-xr-x 4 apache apache 4096 5月 12 06:06 wp-content drwxr-xr-x 7 apache apache 4096 5月 12 06:06 wp-includes drwxr-xr-x 2 apache apache 4096 5月 12 06:06 wp-json drwxr-xr-x 3 apache apache 4096 5月 12 06:06 未分類 確かに出力されていませんね。\nこのままだと、StaticPressS3を使ってS3バケットに転送されないので、SEO対策が足りていない状態となります。\nまた、GoogleSearchConsoleへの登録も出来ません。\n原因は既存バグ？ 原因を特定するために、pluginのソースを読んで見たところ、class-static_press.phpに原因がありました。\nまずは、658行目辺りをみると、sitemap.xmlやrobots.txtをクローリングするための関数は定義されています。\nここではSEO関連ファイルをseo_filesというグループで定義しています。\n/wp-content/plugins/staticpress/includes/class-static_press.php //658行目辺り // Check correct sitemap url by robots.txt private function seo_url($url_type = \u0026#39;seo_files\u0026#39;){ ・・・ } では、次に実際にファイル出力をしているところを確認してみました。\n373行目辺りを見ていると、クローリング対象のファイルを出力している部分があるのですが、ここで先ほどの関数で定義したseo_filesが出力対象として指定されていませんでした。\nswitch ($file_type) { case \u0026#39;front_page\u0026#39;: case \u0026#39;single\u0026#39;: case \u0026#39;term_archive\u0026#39;: case \u0026#39;author_archive\u0026#39;: case \u0026#39;other_page\u0026#39;: // get remote file ・・・\n手順 [adsense]\r一行追加するだけ では、原因は特定出来たので、問題を解決するために以下の一行をcase句に追加してみましょう。\n/wp-content/plugins/staticpress/includes/class-static_press.php //375行目辺り case \u0026#39;author_archive\u0026#39;: case \u0026#39;seo_files\u0026#39;://追加 case \u0026#39;other_page\u0026#39;: 確認 修正が終わったら、もう一度再構築ボタンをクリックしてみましょう。\nls -la 合計 236 drwxr-xr-x 14 apache apache 4096 5月 13 06:00 . drwxr-xr-x 7 apache apache 4096 4月 25 17:24 .. drwxr-xr-x 4 apache apache 4096 5月 13 06:00 2018 -rw-r--r-- 1 apache apache 49707 5月 13 06:00 404.html drwxr-xr-x 3 apache apache 4096 5月 13 06:00 author drwxr-xr-x 4 apache apache 4096 5月 13 06:00 category drwxr-xr-x 3 apache apache 4096 5月 13 06:00 comments drwxr-xr-x 2 apache apache 4096 5月 13 06:00 feed -rw-r--r-- 1 apache apache 53292 5月 13 05:58 index.html -rw-r--r-- 1 apache apache 49707 5月 13 06:00 robots.txt -rw-r--r-- 1 apache apache 998 5月 13 06:00 sitemap-misc.xml -rw-r--r-- 1 apache apache 849 5月 13 06:00 sitemap-pt-page-2018-04.xml -rw-r--r-- 1 apache apache 867 5月 13 06:00 sitemap-pt-post-2018-04.xml -rw-r--r-- 1 apache apache 890 5月 13 06:00 sitemap-pt-post-2018-05.xml -rw-r--r-- 1 apache apache 1199 5月 13 06:00 sitemap.xml drwxr-xr-x 5 apache apache 4096 5月 13 05:59 wp-admin drwxr-xr-x 4 apache apache 4096 5月 13 06:00 wp-content drwxr-xr-x 7 apache apache 4096 5月 13 06:00 wp-includes drwxr-xr-x 2 apache apache 4096 5月 13 06:00 wp-json drwxr-xr-x 3 apache apache 4096 5月 13 06:00 未分類\n正常に出力されるようになりましたね♪\nもちろんS3バケットにも転送がされています。\n終わりに 以上のように、プラグインのソースコードを修正しないと直らない問題でした。\n原因さえ分かれば1行の修正で直るので、もし同じようにハマって困っている方がいましたらこの記事を参考にしてみてください。\n","date":"2018-05-13T17:17:38+09:00","image":"/wp-content/uploads/2018/05/staticPressSeoEye.png","permalink":"/2018/05/13/4154/","title":"【StaticPress】sitemap関連のファイルが出力されない場合の対処方法"},{"content":"再構築が進まない・・・ 先日、WordpressサイトをStaticPressプラグインを利用して静的ページ化する方法についてご紹介致しました。\n関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます しかし、たまに以下のように再構築を行った際に処理中のまま動かなくなってしまう事があります。\nうぅむ。。。なぜだ。。。orz\n原因 開発者ツールを開いてみると、以下のようなエラーログが出力されていました。\nエラーログ Uncaught TypeError: Cannot read property \u0026#39;top\u0026#39; of undefined at Object.success (admin.php:261) at i (load-scripts.php:2) at Object.fireWith [as resolveWith] (load-scripts.php:2) at y (load-scripts.php:4) at XMLHttpRequest.c (load-scripts.php:4) エラーが発生している部分はこの部分のようですね。\n/var/www/html/\u0026lt;Wordpressインストールディレクトリ\u0026gt;/wp-content/plugins/staticpress/includes/class-static_press_admin.php //311行目辺り $(\u0026#39;html,body\u0026#39;).animate({scrollTop: $(\u0026#39;li:last-child\u0026#39;, ul).offset().top},\u0026#39;slow\u0026#39;); どうやら、jQueryで取得しようとしている$('li:last-child', ul).offset()の要素が取れずにいるため、結果としてtopプロパティが読めずにエラーが発生しているようです。\nこれはおそらくプラグイン側の既存バグのようです。\n対処方法 対処方法はとても簡単です。\nエラーが発生していた行の前に以下のように1行追加してみましょう。\n/var/www/html/\u0026lt;Wordpressインストールディレクトリ\u0026gt;/wp-content/plugins/staticpress/includes/class-static_press_admin.php //311行目辺り if( !($(\u0026#39;li:last-child\u0026#39;, ul).offset() === void 0) )//追加 $(\u0026#39;html,body\u0026#39;).animate({scrollTop: $(\u0026#39;li:last-child\u0026#39;, ul).offset().top},\u0026#39;slow\u0026#39;); 確認 では、もう一度再構築ボタンを押して動作確認してみましょう。\nエラーが出ずに処理が進むようになりましたね♪\n終わりに 以上のように、プラグイン側の既存バグなのでプログラミングの知識が無い方では、ハマってしまうポイントだと思われます。\n同じように困っている方はこちらの記事を参考に対応してみてください。\n","date":"2018-05-12T17:32:18+09:00","image":"/wp-content/uploads/2018/05/staticPressSitemapEye.png","permalink":"/2018/05/12/4257/","title":"StaticPressで再構築ボタンを押した際に処理中のまま止まってしまう場合の対処方法"},{"content":"sitemapの必要性 自分で作るのは大変 Wordpressでサイト運営をしている場合、記事やページを追加するごとにSEO対策のためにsitemapを更新する必要がありますが、この作業を毎回自分で行うのは非常に大変です。\nURLを間違えたり、sitemapに追加し忘れたりすると検索エンジンがページを正常に見つけてくれないのでせっかく作ったコンテンツが無駄になってしまします。\nWordpressならプラグインを使おう しかし、Wordpressであればプラグインを使うことでsitemapを自動で作成してくれます。\nこれにより記述ミスや追加漏れも無くなり、SEO対策も最適化されるので非常に便利です。\nGoogle XML Sitemaps sitemapを自動生成してくれるプラグインは多くの種類が存在しています。\n今回はその中の「Google XML Sitemaps」をご紹介致します。\nこちらのプラグインの特徴は以下の通りです。\nPoint\rGoogleの規定に準拠したsitemapを自動生成\rコンテンツの生成/更新時に自動でsitemapを生成/更新\rsitemapの生成/更新後、自動で検索エンジンに通知\rsitemapに追加/除外するコンテンツの指定\rコンテンツの更新頻度/優先順位の指定\r管理画面から簡単に設定可能\rこのように導入をしてしまえばあとは自動でsitemapの保守を行ってくれるのでとても便利です♪\nインストールから導入までもとても便利なのでご紹介します。\n手順 プラグインのインストール まずはプラグインをインストールしましょう。\n管理画面の左部メニューからプラグイン\u003e新規追加を選択し、検索ボックスにGoogle XML Sitemapsと入力しましょう。\nすると以下のプラグインがヒットするので、今すぐインストールボタンをクリックしましょう。\nそして、インストールが完了したら有効化ボタンをクリックしてプラグインを有効にします。\n導入手順はたったこれだけです♪\n確認 では、ブラウザからhttp://{WordpressURL}/sitemap.xmlにアクセスしてみてください。\n正常にsitemap.xmlが生成されているようですね♪\n設定も基本的には初期値のままでも良いので、sitemapのディティールに拘りたい方はいろいろ設定を変更してみると良いでしょう。\n終わりに 以上のように数クリックでWordpressサイトのサイトマップが生成されるようになりました。\nプラグインをインストールして有効化するだけで、以降は何もsitemapの事を考えなくて良くなるので、一番最初に導入しておくと良いでしょう♪\n","date":"2018-05-11T23:55:07+09:00","image":"/wp-content/uploads/2018/05/installGoogleXmlEye.png","permalink":"/2018/05/11/4243/","title":"【SEO】Sitemapを出力してくれるWordpressプラグイン「Google XML Sitemaps」のインストール方法"},{"content":"コメント機能をOFFにしたい 標準装備 Wordpressには標準でコメント機能が備わっています。\nこのコメント機能を通じて、執筆者と閲覧者との交流を行うことが可能になっています。\nStaticPressだと動かない しかし、このコメント機能はPHPを利用して実装されています。\nですので、StaticPress等を使ってWordpressサイトを静的ページにすると、ページには表示されているがボタンを押しても動かなくなってしまいます。\r関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます なので、上記のような運営をしている場合はコメント機能をOFFにして表示をしないようにする必要があります。\n管理画面ではコメント機能自体をOFFに出来ない Wordpressでは、管理画面のディスカッション設定にてコメントに関する細かい設定は可能ですが、コメント機能自体をOFFにすることは出来ないようです。。。orz\nじゃあどうすればよいのか・・・。\nfunctions.phpに1行追加でおk コメント機能自体をOFFにするには、functions.phpにある記述を1行追記するだけで実現可能です。\n以下のコードを追加してみてください。\nfunctions.php add_filter(\u0026#39;comments_open\u0026#39;, \u0026#39;__return_false\u0026#39;); これは、add_filter関数を利用して、comments_open関数が呼ばれたら強制的にfalseを返すようにする、という記述になります。\n確認 では、実際に記事ページを確認してみましょう。\n正常にコメント機能がOFFになっていますね。\nこれでStaticPressで転送しても、使えない機能が表示されるということは無くなりました♪\n終わりに 以上のように、関数を1行追加するだけでコメント機能をサイト全体としてOFFにすることが出来ました。\nコメント機能がいらないサイトの場合は最初にこの設定をしておくのを忘れないようにしましょう。\n","date":"2018-05-10T21:25:57+09:00","image":"/wp-content/uploads/2018/05/disableWordpressCommentEye.png","permalink":"/2018/05/10/3997/","title":"【瞬殺】Wordpressのコメント機能を無効化する方法"},{"content":"Wordpressのショートコード機能 What\u0026rsquo;s? Wordpressには、標準機能として搭載されているショートコード機能というものがあります。\nこれは、あらかじめfunctions.phpに登録しておいたPHP関数を、記事投稿画面から呼び出して利用することが出来る機能です。\nこの機能を使うことで、計算や文字列整形を自分でやらずにPHP関数を利用した動的処理を簡単に実行することが出来ます。\nクイックタグとはどう違う？ Wordpressには、よく使う文章をボタン一つで簡単に挿入するための機能としてクイックタグというものがあることは以前ご紹介致しました。\n関連記事 【QuickTagsで効率化】Wordpressのクイックタグをカスタマイズして記事投稿をスピードアップ！ 2018/02/23 1391文字 約3分で読めます しかし、クイックタグはあらかじめ登録している文字列をそのまま貼り付ける機能となるので、動的処理をした結果を挿入したい！という用途では利用することが出来ません。\nあくまで静的な挿入に限られます。\nこの機能はとても便利 前述の通り、この機能を使うこなすことで複雑なHTML構造を簡単かつ動的に挿入したり数字の計算を行うことが出来るので、記事の作成スピードが格段に上がります！\nまた、ショートコードの作り方もとても簡単です。\n今回はショートコードの作り方をまとめてみましたのでご紹介致します。\n手順 [adsense]\r前提 ショートコードは使用しているテーマのfunctions.phpを編集することになります。\nこのファイルが壊れてしまうとWordpressの管理画面が表示されなくなってしまうので必ずバックアップを取った上で作業を行うようにしてください。\nまた、作業は自己責任でお願い致します。\n独立型ショートコード まずは、単純にテキストを挿入するだけのショートコードを作ってみましょう。\nfunctions.phpに以下のコードを追記して保存をしてください。\nfunctions.php function helloWorldShotCode() { return \u0026#34;Hello, World!!\u0026#34;; } add_shortcode(\u0026#39;helloWorld\u0026#39;, \u0026#39;helloWorldShotCode\u0026#39;); 保存が完了したら、投稿の編集画面のテキストビューにて以下のコードを追加してプレビューしてみてください。\nテキストビュー [helloWorld] すると、以下のようにテキストが表示されたと思います。\nこれは、Wordpressのadd_shortcode( $tag , $func )という関数を利用しています。\n$tagにはテキストエディターで呼び出す際の文字列を指定し、$funcにはfunctions.phpで定義したPHP関数名を指定します。\nそして、テキストエディターから[$tag]という形で呼び出すことが可能になっています。\n引数型ショートコード 次に、テキストエディターから呼び出す際に値を受け取ってそれを利用して処理を行うショートコードを作ってみましょう。\nfunctions.phpに以下のコードを追記して保存してください。\nfunctions.php function oldCheckShortCode( $atts ) { $atts = shortcode_atts( array( \u0026#39;old\u0026#39; =\u0026gt; NULL, ), $atts, \u0026#39;oldCheck\u0026#39; ); if (is_null($atts[\u0026#39;old\u0026#39;] )){ echo \u0026#39;oldを指定してください。\u0026#39;; }elseif($atts[\u0026#39;old\u0026#39;] \u0026lt; 20 ){ return \u0026#39;未成年です。\u0026#39;; }else{ return \u0026#39;成年です。\u0026#39;; } } add_shortcode( \u0026#39;oldCheck\u0026#39;, \u0026#39;oldCheckShortCode\u0026#39; ); 保存が完了したら、投稿の編集画面でテキストビューにて以下のコードを追加してプレビューしてみてください。\nテキストエディター [oldCheck] すると、以下のように表示されると思います。\n次に以下のように修正してプレビューしてみてください。\nテキストエディター [oldCheck old=18] すると、以下のようにoldで指定した値を元に判定処理が行われ表示テキストが変わりました。\nさらに以下のように修正してプレビューしてみてください。\nテキストエディター [oldCheck old=20] 同じようにoldで指定した値を元に判定が行われ表示テキストが変わりました。\nshortcode_atts($defaultArray, $inputArray, $targetShortCode)という関数は、引数を必要としているショートコードで、引数が指定されなかった場合の初期状態の値で上書きするための記述になります。\n終わりに 以上のように、PHP関数をエディター画面から呼べるようになるので、複雑な処理を簡単に挿入することが可能になります。\nただ、前述したようにfunctions.phpの編集はリスクが高いことなので、やりすぎないように注意しながらショートコードを使いこなすように心がけて使ってみてください。\n","date":"2018-05-09T19:34:58+09:00","image":"/wp-content/uploads/2018/05/wordpressShortcodeEye.png","permalink":"/2018/05/09/3971/","title":"【使いこなすと最強】Wordpressでショートコードを作って効率化をしてみた"},{"content":"おさらい S3経由でWebサイト公開まで 前回までの記事では、StaticPressでHTML化し、\n関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます StaticPressS3でS3バケットに転送し、\n関連記事 【StaticPressS3】WordpressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】 2018/05/06 3508文字 約8分で読めます CloudFrontとRoute53を使って独自ドメインでアクセス出来るところまで設定をしました。\n関連記事 【Wordpress】AWSのS3とCloudFrontとRoute53を連携して独自ドメインで公開する方法【お名前.com】 2018/05/07 2981文字 約6分で読めます 更にクオリティをあげたい SSL/HTTPS化 ひとまず、独自ドメインでのアクセスも設定出来たのでこのままでも良さそうなのですが、Webサイトとして更にクオリティをあげるにはSSL証明書を取得して、サイトをHTTPS化する必要があります。\nまた、天下のGoogle様も、今後HTTPS化されていないサイトをGoogleChromeで閲覧する場合は警告を出すようにしちゃうよ☆と、宣言しちゃうほどSSL化の必要性が上がってきています。\nまた、HTTPS化するのとしないのとではSEO効果としても差が出てくるようになっているようです。\nSSL？ SSLとはSecure Sockets Layerの略で、ブラウザでアクセスしようとしているサイトが実在していることを証明し、WebブラウザとWebサーバ間でSSL暗号化通信を行う事が保障されているよ！という、安全性を保管する仕組みのことです。\nそして、SSL証明書とはその仕組みが適用されていることを証明してくれる電子証明書の事です。\n基本的には有償で発行する必要がありますが、AWS Certificate Manageというサービスを使う事でAWS内で利用可能なSSL証明書を無料で発行する事が出来ます。\nまた、CloudFrontにそのSSL証明書を設定する事も可能ですので、結果的にWordpressのサイトを無料でHTTPS通信化をする事が可能なのです！！(ドヤァ)\nHTTPS？ まず、HTTPとはHyper Text Transfer Protocolの略で、Webページを閲覧する際に利用される通信方式の事を指します。\nそして、HTTPSは更に進化したHyper Text Transfer Protocol Secureの略となっています。\nこれは、SSLを利用したHTTPS通信の事を指しています。\nSSLを利用する事で通信内容を暗号化するので、安全にWeb情報のやりとりを行うことができます。万が一通信経路から情報が抜き取られたとしても、暗号化されているので内容を判別することは極めて難しいでしょう。\nでは、次にAWSを使ってSLL/HTTPS化するまでの手順をご紹介致します。\nちょっと難しいですが、頑張ってみましょう！\n手順 [adsense]\r前提 Point\rS3設定済み\rCloudFront設定済み\rRoute53設定済み\r【準備】S3側 SES用のバケット作成 まずは、後述のSESで使うバケットを一つ用意しておきましょう。\n設定はデフォルトのままで良いので手順は割愛しますが、バケットポリシーに以下のコードを元に値を適時変更して設定しておいてください。\nバケットポリシー { \u0026#34;Version\u0026#34;: \u0026#34;2012-10-17\u0026#34;, \u0026#34;Statement\u0026#34;: [ { \u0026#34;Sid\u0026#34;: \u0026#34;AllowSESPuts\u0026#34;, \u0026#34;Effect\u0026#34;: \u0026#34;Allow\u0026#34;, \u0026#34;Principal\u0026#34;: { \u0026#34;Service\u0026#34;: \u0026#34;ses.amazonaws.com\u0026#34; }, \u0026#34;Action\u0026#34;: \u0026#34;s3:PutObject\u0026#34;, \u0026#34;Resource\u0026#34;: \u0026#34;arn:aws:s3:::{バケット名}/*\u0026#34;, \u0026#34;Condition\u0026#34;: { \u0026#34;StringEquals\u0026#34;: { \u0026#34;aws:Referer\u0026#34;: \u0026#34;{AWSアカウントID}\u0026#34; } } } ] } 【準備】SES側 ドメインの確認 AWS Certificate ManageでSSL証明書を発行する上でメール検証があります。\nメールサーバー等がない場合はこのメールを受け取る事が出来ません。\nそこで、今回はAWSのSimple Email Serviceというサービスを使ってメールを受信出来るようにしてみます。\nAWSのマネジメントコンソールにログインしたら、上部サービスメニューのカスタマーエンゲージメント\u003eSimple Email Serviceを選択します。\n次に、右上のリージョンをオレゴンに設定し、左部メニューのDomainsを選び、Verify a New Domainボタンをクリックします。\nすると、以下のようなダイアログが表示されるので、SSL証明書を取得したいドメインを入力し、Verify This Domainボタンをクリックします。\n次に以下の画面が表示されます。\nいろいろ表示されていますが、今回はRoute53にお名前.comで取得したドメインを設定しているのでUse Route 53ボタンをクリックしましょう。\nすると、続けて以下のダイアログが表示されるのでEmail Receving Recordにチェックを入れ、 Create Record Setsボタンをクリックしましょう。\n以下のようにpending verifycationとなるので、verifiedになるまで気長に待ちましょう。\nRule Setsの作成 次に、SESのRule Setsを設定します。\n左部メニューのEmail Receiving\u003eRule Setsを選び、Create Receipt Ruleボタンをクリックします。\nRecipientsの設定画面が開かれますが、ここはそのままで良いのでNext Stepボタンをクリックしましょう。\n次にActionsの設定画面が開かれます。\nここでは先ほど作成したS3バケットを選択しNext Stepボタンをクリックしましょう。\n次にRule Detailsの設定画面が開かれます。\nここではルールの名称を入力しその他は特にいじらずにNext Stepボタンをクリックします。\n確認画面が表示されるので、問題が無ければCreate Ruleボタンをクリックします。\nRuleが作成されたら、対象のS3バケットに以下のようなファイルが作成されていればSESの設定は完了です。\n受信ドメインの設定 次に実際に受信するアドレスを設定します。\n作成したRuleをクリックします。\nそして、以下のRecipientを追加し、Save Ruleボタンをクリックします。\nRecipient admin@{取得ドメイン} これでSESの設定は全て完了です。\n【準備】AWS Certificate Manage側 SSL証明書の発行 次に、AWS Certificate ManageにてSSL証明書を発行します。\n上部サービスメニューからセキュリティ、アイデンティティ、 コンプライアンス\u003eCertificate Manageを選択します。\n次に、リージョンをバージニア北部に設定し、証明書のリクエストボタンをクリックします。\n次の画面では、初期設定のままで良いので証明書のリクエストボタンをクリックします。\nするとまずはドメイン名の追加画面が表示されます。\nSSL証明書を取得したいドメインを入力し次へボタンをクリックします。\n次に検証方法の選択画面が表示されます。\nここは先ほど作成したSESにてメール受信を行いたいので、Eメールの検証にチェックを入れ確認ボタンをクリックします。\nすると確認とリクエスト画面が表示されますので、内容に問題が無ければ確定とリクエストボタンをクリックします。\n検証画面が表示されるので、そのまま続行ボタンをクリックします。\n次の画面では、以下のように表示されています。\n先ほどのSES用のS3バケットにメールが届いているはずですので確認してみましょう。\n検証メールの確認 S3バケットを見てみると以下のようなランダム文字列？のファイルが作成されていると思います。\nこのままでは内容を確認出来ないのでダウンロードボタンをクリックしましょう。\nダウンロードしたファイルを開くと、長々とよくわからないテキストが記載されていますが、中段あたりのhttps://us-east-1.certificates.amazon.com/approvals?code=から始まるURLをブラウザに入力して開きましょう。\nすると以下のような画面が表示されるので、approveボタンをクリックしましょう。\nSuccess画面が表示されれば検証完了です。\nこれで証明書のステータスも発行済みに変わっていると思います。\n【準備】CloudFront側 SSL証明書の設定 では、次にCloudFrontに発行したSSL証明書を設定してみましょう。\n上部サービスメニューからネットワーキング\u0026コンテンツ配信\u003eCloudFrontを選択します。\n次にSSL証明書を設定したいDistributionを選択します。\nそしてGeneralタブを選びEditボタンをクリックします。\n中段あたりのSSL Certificate項目のCustom SSL Certificate (example.com):にチェックを入れ、プルダウンに先ほど取得したSSL証明書が選択出来るようになっているのでそちらを選択をしてページ下部のYes, Editボタンをクリックします。\nHTTPSの有効化 次に、サイトへの通信をHTTPS通信のみにしましょう。\nBehaviorsタブを選択し、対象のBehaviorにチェックを入れEditボタンをクリックします。\nViewer Protocol PolicyのRedirect HTTP to HTTPSにチェックを入れ、ページ下部のYes, Editボタンをクリックします。\nこれで設定は終わりです。お疲れ様でした。。。orz\nあとは、変更したCloudFrontのDistributionのStatusがDeployedになるまで気長に待ちましょう。(結構かかります。)\n確認 [adsense]\rでは、実際にブラウザでアクセスしてみましょう。\n正常にHTTPS通信になってますね！\nhttp://~でアクセスしても自動でHTTPSにリダイレクトされるのも確認出来ると思います！\n※作業の途中でテーマを変えたので別記事のレイアウトと変わっています\n終わりに 以上のようにAWSサービス群を利用してHTTPS通信のサイトの作成が出来ました♪\n今までの他の作業と比べてちょっと大変でしたが、その分動作確認が出来た時は感無量です・・・！！！笑\nこれでとりあえずWordpress + StaticPress(S3) + S3バケット + CloudFront + Route53 + Certificate Manage(SSL)でサイト運営をする準備は整いましたので\nあとは、以下の細かい調整をする必要がありますが、とりあえずは急ぐ必要は無いのでまた別の記事にて紹介しようと思います。\nPoint\r更新時のキャッシュ対策\r不要ファイルの転送制限\r記事を執筆した際には、そちらもご覧頂ければなと思います♪\n","date":"2018-05-08T00:28:31+09:00","image":"/wp-content/uploads/2018/05/cloudFrontSslEye.png","permalink":"/2018/05/08/4117/","title":"【無料SSL証明書】AWSでHTTPS通信を取得してCloudFrontに設定してみよう！【Wordpress】"},{"content":"おさらい S3経由でWebサイト公開 前回までの記事では、StaticPressでHTML化し、\n関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます StaticPressS3でS3バケットに転送し、公開するところまで進めました。\n関連記事 【StaticPressS3】WordpressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】 2018/05/06 3508文字 約8分で読めます ドメイン設定 独自ドメイン化 しかし今のままだと、ブラウザで正常にアクセス出来るようになりましたが、ドメインがS3バケット標準の形式のままになってしまっています。\nhttp://{バケット名}.s3-website-ap-northeast-1.amazonaws.com","date":"2018-05-07T00:52:40+09:00","image":"/wp-content/uploads/2018/05/settingS3AndDomainEye.png","permalink":"/2018/05/07/4031/","title":"【Wordpress】AWSのS3とCloudFrontとRoute53を連携して独自ドメインで公開する方法【お名前.com】"},{"content":"前回の続き おさらい 前回は、StaticPressプラグインを導入し、WordpressサイトをHTMLファイルに吐き出して正常に表示出来るところまで確認しました。\n関連記事 【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】 2018/05/05 3820文字 約8分で読めます 今回は、さらにStaticPressS3プラグインを利用して、AWSのS3バケットにHTMLファイルを転送し、サイト公開するところまでを紹介致します。\nStaticPressS3? What\u0026rsquo;s? StaticPressS3とは、サーバー内のファイルをAWSのS3バケットに転送していくれるプラグインとなっています。\nこのプラグインは単独で利用することは出来ずに、StaticPressプラグインの拡張プラグインという形になっています。\nS3バケット？ S3バケットとは、ファイルサーバーという役割を持っているAWSのサービスの一つです。\nHTMLや画像ファイルなどの全てのファイルを保存することが出来ます。\nまた、このS3バケット自体をインターネット上に公開することが可能なのでHTML等を配置しておけば、サーバーを借りることなくホームページをインターネット上に公開することが可能です。\nまた、料金もとても安いのでおすすめです。\nただ、AWSの知識が多少必要になるので中級者以上の方向けの運用方法ですね。\n本ブログもS3バケットを利用して運用しています。\nでは、早速StaticPressS3の導入方法を紹介していきます。\n手順 前提 Point\rStaticPressプラグイン導入済み\rAWSアカウント取得済み\rAWSアクセスキー/シークレットキー取得済み\rGitインストール済み\rSSHコマンド等でサーバーに入れる事\rお名前.comでドメイン取得済み\r【準備】S3側 バケットの作成 まずは、転送先のS3バケットを作成しておきましょう。\nAWSマネジメントコンソールにアクセスし、上部サービスメニューからストレージ\u003eS3を選択します。\n次に、バケットを作成するボタンをクリックします。\nすると、バケットの作成ダイアログが表示されるのでバケット名とリージョンを設定します。\n任意のバケット名とリージョンを入力し、次へボタンをクリックします。\n次に、プロパティの設定を求められますが、一旦は何もいじらずに次へボタンをクリックします。\n次にアクセス許可の設定を求められます。\nこの設定もそのままで問題はないので次へボタンをクリックします。\n最後に、設定の確認画面が表示されるので問題が無ければバケットを作成ボタンをクリックします。\nこれで正常にバケットの作成は完了しました。\n【準備】StaticPressS3側 プラグインのインストール では、次にStaticPressS3プラグインをインストールしましょう。\nただ、このプラグインは管理画面からインストールする事は出来ません。\n試しにstaticpressと入力しても2件しかヒットしません。。。\nじゃあどうすれば良いのかorz\nStaticPressS3プラグインはGitコマンドでインストールする必要があります。\nなので、SSHコマンド等でWordpressサーバーに入り、直接インストールする必要があります。\n※サーバーコマンドを失敗すると全てのファイルが消えたりサーバーが壊れて動かなくなる可能性があるので、自己責任でお願いします\nまず、サーバーに入り以下のディレクトリに移動してください。\n作業ディレクトリ /var/www/html/{ワードプレスインストールディレクトリ}/wp-content/plugins そして、以下のコマンドでStaticPressS3のリポジトリーをクローンします。\n※sudoコマンドが使えるユーザーで実行してください\ncommand sudo git clone https://github.com/megumiteam/staticpress-s3.git 以下のログが出力されればクローン完了です。\n成功ログ Cloning into \u0026#39;staticpress-s3\u0026#39;... remote: Counting objects: 23, done. remote: Total 23 (delta 0), reused 0 (delta 0), pack-reused 23 Unpacking objects: 100% (23/23), done. 次に、所有者をapacheに変更します。\n同じディレクトリで以下のコマンドを実行してください。\ncommand sudo chown -R apache:apache staticpress-s3 正常に変更されていれば以下のようになっているはずです。\ncommand ls -la 合計 32 drwxr-xr-x 6 apache apache 4096 5月 5 09:26 . drwxr-xr-x 7 apache apache 4096 5月 5 09:19 .. drwxr-xr-x 4 apache apache 4096 4月 24 14:34 akismet -rw-r--r-- 1 apache apache 2230 4月 24 14:34 hello.php -rw-r--r-- 1 apache apache 28 4月 24 14:34 index.php drwxr-xr-x 5 apache apache 4096 4月 25 13:29 staticpress drwxr-xr-x 4 apache apache 4096 5月 5 09:26 staticpress-s3 drwxr-xr-x 4 apache apache 4096 4月 24 14:34 wp-multibyte-patch StaticPressS3プラグインのインストールはこれで完了です。\nプラグインの設定 では、次にStaticPressS3の設定を行っていきましょう。\nインストール済みプラグイン画面を表示すると、StaticPressS3プラグインが表示されるようになっていると思います。\nまずは、プラグインを有効化しましょう。\n有効化すると、StaticPressの設定画面に以下のような項目が追加されているので、AWSのアクセスキー/シークレットキー/リージョンを設定して、変更を保存ボタンをクリックしましょう。\n設定値が正しければ、さらにS3バケットを選ぶプルダウンが追加されているので、StaticPressで出力したファイル群を転送を行いたいバケットを選択し、変更を保存ボタンをクリックします。\n確認 では、試しにStaticPressを実行してみましょう。\nエラーが発生する場合 主に、AWSのEC2でWordpressを構築している場合、以下のようなエラーが発生する事があります。\nログを見てみると以下のような出力がされています。\nエラーログ [05-May-2018 10:55:37 UTC] PHP Warning: finfo::finfo(): Failed to load magic database at \u0026#39;/usr/share/misc/magic\u0026#39;. in /var/www/html/{Wordpressインストールディレクトリ}/wp-content/plugins/staticpress-s3/includes/class-S3_helper.php on line 190 [05-May-2018 10:55:37 UTC] PHP Fatal error: Call to a member function file() on null in /var/www/html/{Wordpressインストールディレクトリ}/wp-content/plugins/staticpress-s3/includes/class-S3_helper.php on line 195 EC2では、この/usr/share/misc/magicの場所が違うらしいのでここを以下のように修正してみてください。\n/var/www/html/\u0026lt;ワードプレスインストールディレクトリ\u0026gt;/wp-content/plugins/staticpress-s3/includes/class-S3_helper.php //188行目辺り //$magic_file = \u0026#39;/usr/share/misc/magic\u0026#39;; $magic_file = \u0026#39;/etc/httpd/conf/magic\u0026#39;; これで再度実行をしてみましょう。\n正常に転送されている事が確認出来ましたね。\nブラウザからもアクセス出来るか確認してみましょう。","date":"2018-05-06T14:33:43+09:00","image":"/wp-content/uploads/2018/05/installStaticPressS3Eye.png","permalink":"/2018/05/06/4001/","title":"【StaticPressS3】WordpressのブログやサイトをAWSのS3に転送して公開してみよう！【静的サイト】"},{"content":"WordpressをHTML化したい うわっ…私のサイト(ブログ)、重すぎ…？ Wordpressでブログやサイトを作成・公開していると、コンテンツ量の増加に比例してパフォーマンスが悪くなってしまいます。\nこれは、１リクエスト毎にPHPの処理が走り、膨大なデータベースの中から該当する情報を毎回検索を行い、さらにデータ加工等の処理を行ってからブラウザに表示しているからです。\n表示に時間がかかると利用者のストレスにもなりますし、表示がされる前にページ離脱されてせっかくの訪問者を逃してしまうことになります。\nまた、ここで逃してしまった訪問者には、「xxxのサイトは重いから見るのやめよう。」という固定概念が生まれてしまうので、今後訪れてもらうことが期待出来なくなってしまいます。。。\nこれは深刻ですよね。\nよく、アクセスしてから3秒以内に表示されるようなパフォーマンスが好ましい、という記事をよく見ます。\nでは、どうすれば良いのでしょうか？\n静的コンテンツ管理化 サイトを構成するパターンは以下の２種類があります。\n名称\r概要\r静的\r要求されたURLに対して、毎回同じデータが返ってくるWebページを静的ページと言い、その中の情報を静的コンテンツと呼びます。\n例えば、HTMLやCSS、JavaScript、画像ファイル(jpg/png/gif...)などはファイルの中身をそのままレスポンス情報として返すので、静的コンテンツと言えます。\n静的ページはサーバー側で処理が走らないので、描写スピードは早いです。\r動的\r要求されたURLにパラメータとともに送られたリクエストに対して、Webサーバーがプログラムを呼び出して毎回処理を実行し、パラメータに応じた結果を返すWebページを動的ページと言い、その中の情報を動的コンテンツと呼びます。\n例えば、ブログ等でよくある人気記事ベスト5は、アクセスする日によってランキングが動的に変わっているので動的コンテンツと言えます。\n動的ページはサーバー側で様々な処理が走るので、描写スピードは遅いです。\rWordpressはPHPやMySQLが絡んでくるので後者の動的ページに当たります。\n記事数が多くなると、重くなるのは理解出来ますね。\nStaticPressプラグイン Wordpressには様々なプラグインが公開されています。\nもちろんその中に、Wordpressのサイトを丸々静的コンテンツに書き出してくれるものもあるのです！！\nそれが、StaticPressプラグインです。\nこちらを使えば、Wordpressで構築したページ全てをHTML化することが可能になります。\nHTML化して静的ページにすれば、パフォーマンス改善に繋がりますし、管理も簡単になるのでオススメです。\n出来なくなることもある ただし、HTML化することで実現が出来なくなる事があります。\nHTML化＝静的化＝動的機能が使えなくなる\nと、いうことなので、以下の機能が使えなくなります。\n使えなくなる\rサイト内検索\r購読者管理\rコメント機能\rこれらの機能は、PHPによって実現出来ていたのでHTML化した後の静的ページでは機能として使えなくなりますので、サイトからは除去しておく必要があります。\n上記の機能が無くなるとまずい！！という方はWordpressのHTML化は向いていませんので、ご注意ください。\nでは、実際にStaticPressの導入方法について紹介していきます。\n手順 前提 Point\rWordpress構築済み\r【準備】WordPress側 パーマリンクの設定 まずは、Wordpressの記事URLをデフォルトの状態から、StaticPressで吐き出した際に正しく表示されるようにしましょう。\n今回は以下のようにパーマリンクを変更してみます。\nパーマリンク /%category%/%year%/%monthnum%/%day%/%post_id%.html 左部メニューから設定\u003eパーマリンク設定を選択し、カスタム構造にチェックを入れ、上記のフォーマットを入力し、変更を保存ボタンをクリックします。\nmod_rewriteの有効化 しかし、この状態だとまだアクセスしても以下のようなエラーが表示されます。\nこれは、URLの書き換えをおこなうApacheの「mod_rewrite」が正しく動いていないのが原因です。\nなので、Apacheのhttpd.confファイルの編集と.htaccessファイルの作成をする必要があります。\nまずは、httpd.confファイルに以下を追記してください。\n/etc/httpd/conf/httpd.conf LoadModule rewrite_module modules/mod_rewrite.so \u0026lt;Directory \u0026#34;/var/www/html/{Wordpressインストールディレクトリ}\u0026#34;\u0026gt; AllowOverride All \u0026lt;/Directory\u0026gt; 次に、Wordpressインストールディレクトリに.htaccessファイルがあるか確認します。\nパーマリンクの設定をしていれば自動で生成されていると思いますが、万が一無かったら以下の内容で作成してください。\n/var/www/html/\u0026lt;Wordpressインストールディレクトリ\u0026gt; # BEGIN WordPress \u0026lt;IfModule mod_rewrite.c\u0026gt; RewriteEngine On RewriteBase /{Wordpressインストールディレクトリ}/ RewriteRule ^index\\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /{Wordpressインストールディレクトリ}/index.php [L] \u0026lt;/IfModule\u0026gt; # END また、このファイルの所有者とグループをapacheにして、かつモードを644にする必要があるので、以下のコマンドを実行してください。\ncommand sudo chown apache:apache .htaccess sudo chmod 644 .htaccess Apacheの再起動 ここまで終わったら以下のコマンドでApacheを再起動しておきましょう。\nApache再起動 service httpd restart Stopping httpd: [ OK ] Starting httpd: [ OK ] 【準備】StaticPress側 プラグインの有効化 まずは、StaticPressのプラグインを導入しましょう。\n管理画面にログインし、左部メニューのプラグイン\u003e新規追加を選択し、キーワード検索に「staticpress」と入力すると、StaticPressプラグインがヒットするので今すぐインストールボタンをクリックします。\nボタンを押すと、インストール中に変わります。\n少し待つと、有効化ボタンに変わるのでクリックしましょう。\nこれでプラグインが有効化されました。\n設定 次に、StaticPressの設定を行いましょう。\n左部メニューからプラグイン\u003eインストール済みプラグインを選択し、StaticPressの設定リンクをクリックします。\nすると、以下のような画面が表示されるので各項目を設定の上、変更を保存ボタンをクリックします。\n項目\r説明\r必須\r静的サイトURL\rサイト内のWordpressのURL(リンクやパス)をここに設定したURLに置換した上でHTMLを生成してくれます。\r◯\r出力先ディレクトリ\n(ドキュメントルート)\rHTMLファイルを出力する同一サーバー内のパスを絶対パス指定します。\nこちらのディレクトリは存在しなかった場合は実行時に自動で生成してくれます。\r◯\rBASIC認証\nユーザー名\rWordpressサーバーにBASIC認証を入れている場合はユーザー名を指定します。\rBASIC認証\nパスワード\rWordpressサーバーにBASIC認証を入れている場合はパスワードを指定します。\rRequest Timeout\rリクエストのタイムアウト時間を指定します。\n重いページがある場合は長めに設定してみましょう。\rHTMLの出力確認 では、一旦StaticPressでHTMLを生成してみましょう。\n左部メニューからStaticPress\u003eStaticPressを選択し、再構築ボタンをクリックします。\nすると、どんどんファイルが生成されていくので、終了の表示がされるまで待ちましょう。\n出力先ディレクトリ配下のファイル一覧を出力して確認してみると、正常に各ファイルがコピーされていますね。\n※ファイル数が多いので、一部の階層までの出力に留めています\n出力階層 /var/www/html/sample/static-press/sample-static /var/www/html/sample/static-press/sample-static/404.html /var/www/html/sample/static-press/sample-static/index.html /var/www/html/sample/static-press/sample-static/index.php /var/www/html/sample/static-press/sample-static/index.php/2018 /var/www/html/sample/static-press/sample-static/index.php/author /var/www/html/sample/static-press/sample-static/index.php/category /var/www/html/sample/static-press/sample-static/index.php/comments /var/www/html/sample/static-press/sample-static/wp-admin /var/www/html/sample/static-press/sample-static/wp-admin/css /var/www/html/sample/static-press/sample-static/wp-admin/images /var/www/html/sample/static-press/sample-static/wp-admin/js /var/www/html/sample/static-press/sample-static/wp-content /var/www/html/sample/static-press/sample-static/wp-content/plugins /var/www/html/sample/static-press/sample-static/wp-content/themes /var/www/html/sample/static-press/sample-static/wp-includes /var/www/html/sample/static-press/sample-static/wp-includes/ID3 /var/www/html/sample/static-press/sample-static/wp-includes/css /var/www/html/sample/static-press/sample-static/wp-includes/fonts /var/www/html/sample/static-press/sample-static/wp-includes/images /var/www/html/sample/static-press/sample-static/wp-includes/js /var/www/html/sample/static-press/sample-static/wp-includes/wlwmanifest.xml HTMLが生成されずに終了する場合 ボタンを押した後に、jsやcssは生成されるが、HTMLは一つも生成されずに正常終了する場合は、Basic認証やサーバーのIP制限が原因の可能性が高いです。\n前者のファイル(css/js/画像etc...)はWordpressサーバー内のコンテンツをそのままディレクトリにコピーしているようですが、HTMLについてはPHPでクローリングしているようなので、外部のネットワークからのアクセスが発生するのでそこでセキュリティに弾かれてしまって、HTML情報が生成出来ない状態だと思われます。\n今一度Basic認証やIP制限の確認をしてみましょう。\n確認 では、試しに生成したファイルをApacheのドキュメントルートにコピーしてブラウザで確認してみましょう。","date":"2018-05-05T01:12:41+09:00","image":"/wp-content/uploads/2018/05/installStaticPressEye.png","permalink":"/2018/05/05/3690/","title":"【StaticPress】WordpressのブログやサイトをHTML化して爆速管理しよう【使い方/インストール】"},{"content":"ブログサービスを使ってみたい 当ブログはWordpress+AWS S3を用いて低コストかつ高速化を狙って運用しています。\n筆者自身、仕事でWebシステムを構築しているので、いきなり独自ブログを作成しましたが、知識が薄い方はそうは出来ないと思います。\n以前、そのような方向けに無料ブログサービスの比較記事を執筆しましたが、\n関連記事 【無料ブログサービス比較】自分で準備をせずにブログを始めるためのサービスまとめ 2018/05/03 1482文字 約3分で読めます 今回、その中のはてなブログを試しに登録することになったので、せっかくなので記事にまとめてみました。\n手順 会員登録 まずはコチラにアクセスしてください。\nすると、はてなユーザー登録画面が表示されるので、必要項目を入力の上入力内容を確認ボタンをクリックします。\nすると、入力内容の確認画面が表示されるので、確認の上問題が無ければ登録するボタンをクリックします。\nすると、先ほど入力したメールアドレスにメールを送信したので確認をしてくれと言われます。\n以下のようなメールが届いていると思うので、本登録用URLにアクセスしましょう。\nアクセスすると、以下のようなメッセージが表示され、はてなIDの登録が完了します。これで会員登録はOKです。\nブログ開設 では、次にはてなブログを作成しましょう。\n会員ページにログインし、左部メニューのブログをクリックします。\n次に上部メニューのブログ開設(無料)をクリックします。\nすると、URLの設定画面が表示されるので、任意の情報を入力し、全体公開か自分にだけの公開を選びブログを作成ボタンをクリックします。\nこれではてなブログの作成は完了です。\n最初にやっておくべき設定 基本設定 上部のブログメニューをクリックし、設定を選択しましょう。\nまずは基本設定タブのブログタイトル/ブログアイコン/ブログの説明を設定します。\n入力が完了したらページ下部の変更するボタンをクリックします。\n詳細設定 次に、詳細設定を行います。\n今回は、GoogleAnalyticsとGoogleSearchConsoleの設定を行います。\nまずは詳細設定タブを選択します。\n画面中段あたりに値の入力ボックスがあるので、それぞれ値を入力してください。\n入力が完了したらページ下部の変更するボタンをクリックします。\nデザイン設定 次にサイトデザインを設定してみましょう。\n上部のブログメニューをクリックし、デザインを選択しましょう。\nデザイン管理画面が表示されたら、カスタムタブを選択し、ファイルを選択ボタンをクリックします。\n任意の画像を選ぶと表示位置を調整出来るので調整が済んだら適用ボタンをクリックします。\n一旦はこれで必須の初期設定は完了です。\nあとは必要があれば追加で各設定を行ってください。\n終わりに 以上のように簡単に登録からブログ開設、初期設定が完了しました。\nはてなブログはSEOにも強いので、自分で独自ドメインを取得してWordpressで構築するよりも格段にPV数を稼ぐことが可能になります。\n皆さんもどんどん記事を書いてまずはPVを稼いでみてください♪\n","date":"2018-05-04T00:13:50+09:00","image":"/wp-content/uploads/2018/05/hatenaBlogRegisterEye.png","permalink":"/2018/05/04/3893/","title":"【ブロガーへの第一歩】はてなブログに登録方法してブログをサクッと作ってみた"},{"content":"LION MEDIA? What\u0026rsquo;s? LION MEDIAとは、無料で利用出来るWordpress用のテーマファイルです。\nSEO最適化やレスポンシブ、表示高速化などがしっかり対応されていてとても使いやすいテーマとなっています。\nLION MEDIA(ライオン メディア)は、AMP対応・SEO最適化・レスポンシブ・高機能。そして、表示速度が速い、無料のデザイナーズ WordPressテーマです。全体としてメディアサイト向けに作っていますが、個人ブログなどでももちろん利用できますし、カスタマイズ次第で様々なタイプのサイトに利用できるテーマになっています。\nテーマ導入だけで使える55の機能 また、テーマをインストールするだけで利用出来る機能が55機能あるという点も強みだと思われます。\n他のテーマでそれらの機能を実現するために様々なプラグインを入れると、それだけで管理が大変になりますし、表示速度も遅くなってしまいますしね。。。orz\n日々進化 LION MEDIAは現在も新機能やバグ修正が頻繁にされております。\n一番最近ですと、2018年2月15日にLION MEDIA Ver2.0.0として最新版がリリースされました。\n世の中に出回っている無料のテーマは、開発やサポートが終了してしまっているものも多いので、利用する側としてこの辺は非常に助かりますね。\n導入も簡単 LION MEDIAは導入もとても簡単です。\n今回導入するまでの手順をまとめてみましたので、参考にして頂ければなと思います。\n手順 ダウンロード まずは配布サイトからテーマファイルをダウンロードしましょう。\nコチラにアクセスし、LION MEDIAの無料テーマ-ダウンロードボタンをクリックします。\nすると、会員登録画面が表示されます。\nLION MEDIAのテーマを利用するためには会員登録が必須となっています。\nユーザー名とメールアドレスを入力し、利用規約等に同意したら登録ボタンをクリックします。\nすると、以下のような画面が表示されるので、入力したメールアドレスに届いたメールに記載されているユーザー名とパスワードを入力し、ログインをします。\n正常にログインすると、以下の画面が表示されるのでダウンロードページへボタンをクリックします。\nすると最初の画面に戻ってくるので、再度LION MEDIAの無料テーマ-ダウンロードボタンをクリックします。\nすると、今回はダウンロードが正常に始まると思います。\n同じように子テーマ-ダウンロードボタンをクリックして子テーマもダウンロードしておきましょう。\nインストール 次に、ダウンロードしたテーマをWordpressにインストールしてみましょう。\n左部メニューの外観\u003eテーマを選択し、新規追加ボタンをクリックします。\n画面上部のテーマをアップロードボタンをクリックするとZipファイルのアップロードが可能になるので、まずは親テーマを選択し今すぐインストールボタンをクリックしましょう。\n以下のようなインストール完了画面が表示されたら、ここでは有効化せずに、次に同じように子テーマもインストールし、そちらを有効化しましょう。\nすると、以下の画面が表示されLION MEDIA Childのテーマが有効化された事がわかります。\n確認 では、実際にサイトにアクセスし確認してみましょう。\n正常にテーマが反映されていますね♪\n終わりに 以上のようにLION MEDIAのテーマは簡単に導入する事が可能です。\nまた、今回は子テーマを利用しているのでガリガリ独自カスタマイズすることも可能ですので、皆さん専用のオリジナルテーマにカスタマイズしてみてください♪\n","date":"2018-05-03T14:05:10+09:00","image":"/wp-content/uploads/2018/05/installLionMediaEye.png","permalink":"/2018/05/03/3805/","title":"【おすすめテーマ】Wordpressのメディアブログ向け無料テーマ「LION MEDIA」の導入方法"},{"content":"ブログを自分で作りたくない 知識が無いから不安 ブログを始めたいが一歩を踏み出せない方の多くは、自分でブログを構築する作業に苦手意識を持っている方がほとんどだと思います。\nもちろん、自分でサーバーを借りて、ドメインを取得して、Wordpressをインストールして、初期設定を行って、デザインを調整して、、、などの作業は知識が無い方からすると出来る気がしないのも確かです。\n無料のブログサービスを使う そんな人は、既存のブログサービスを使うと良いでしょう。\n多くのブログサービスは無料で利用でき、登録さえすれば小難しい設定を自分でやる必要は無いのですぐにブログを作成する事が出来ます♪\n比較 多種多様なサービス 「なるほど！じゃあブログサービスを使う！」となっても、実際には多くのブログサービスが存在し、それぞれ特徴を持っています。\n今回はメジャーどころの無料ブログサービスをまとめてみましたので、自分の好みにあったブログサービスを見つけてみてください。\nAmebaブログ Ameba ブログとは、サイバーエージェントが運営しているブログサービスです。\n基本的に有名人がやっているイメージはありますが、もちろん一般会員の方もブログを作ることは可能です。\nまた、足跡機能や購読管理、アメーバピグやamebaなうなどのサービスとも連携しています。\nしかし、原則としてamebaブログでのアフェリエイトについては、運営側で厳しく取り締まっているので、アフェリエイトをやるのであれば、避けたほうが良いでしょう。\nFC2ブログ FC2ブログとは、FC2 INC.が運営しているブログサービスです。\nブログのカスタマイズ性がとても高く、アフェリエイト利用も可能です。\nしかし、ブログサービス側の広告が表示されてしまい、無料プランでは消す事が出来ません。\nライブドアブログ ライブドアブログとは、LINEが運営しているブログサービスです。\nこちらもカスタマイズ性が強く、スマートフォンからの投稿・編集が可能になっています。もちろんアフェリエイトも可能です。\nただ、こちらもブログサービス側の広告が表示されてしまい、有料プランにしないと消す事が出来ません。\nSeesaa Seesaaとは、シーサー株式会社が運営しているブログサービスです。\nこちらはブログサービス側の広告が少なく、そのため利用しているアフェリエイターの方も少なくありません。\nただ、他のブログサービスに比べ、知名度が低く、結果としてSEO効果も負けてしまっています。\nHatenaBlog HatenaBlogとは、株式会社はてなが運営しているブログサービスです。\nシンプルなデザインで、さらにソーシャルブックマーク機能の「はてなブックマーク」がとても強力で、この機能のおかげで知名度の低いブログでも閲覧を増やす事が可能です。\nただ、こちらも有料会員にならないとブログサービス側の広告を消す事が出来ません。\nJUGEM JUGEMとは、GMOペパボが運営しているブログサービスです。\nこちらは、様々なテンプレートを組み合わせることでブログを作成し、組み合わせ次第ではオリジナルのブログを作成する事が可能です。\nこちらも無料会員ではブログサービス側の広告を消すことは出来ません。\n終わりに ブログを始めたいが、準備する知識が無い。。。という方向けのブログサービスはとても多く存在します。\nまた、サービスごとに出来る事・出来ない事が異なるので色々と調べてみると自分の好みにあったブログサービスが見つかると思います。\nまずは無料のブログサービスでブログを書き始め、慣れてきたらWordpress等で独自ブログに移行する事も可能なので、ブロガーへの第一歩が踏み出せない方がいましたら是非試してみてはいかがでしょうか♪\n","date":"2018-05-03T01:52:18+09:00","image":"/wp-content/uploads/2018/05/blogCompareEye.png","permalink":"/2018/05/03/3878/","title":"【無料ブログサービス比較】自分で準備をせずにブログを始めるためのサービスまとめ"},{"content":"Wordpressのテーマ テーマ？ Wordpressをインストールすると、デフォルトでは以下のようなTwenty Seventeenというテーマが設定されていると思います。\nテーマとは、Wordpressのレイアウトや機能を管理するものになります。\nテーマを切り変えることで、記事の内容はそのままで、サイトの見た目を好きに変えることが可能になります。\nもちろん、このデフォルトテーマのままブログを作成しても良いのですが、世の中には様々なWordpressテーマが用意されています。\nWordpressテーマの種類 Wordpressのテーマには、大きく分けて以下の種類があります。\n種類\r説明\r公式\rWordpressの管理画面からダウンロードすることが可能なテーマです。\n基本的には管理画面からインストール出来るテーマは無料です。\r非公式(無料)\rWordpressの管理画面からダウンロードすることが不可能で、配布サイト等でダウンロードする事が可能なテーマです。\nこちらは、ダウンロードした後にWordpressにアップロードしてインストール必要があります。\n公式のテーマよりかなり使いやすいデザイン等になっているものが多いです。\nStinger8などがこれにあたります。\r非公式（有料）\rWordpressの管理画面からダウンロードすることが不可能で、支払い等を済ませた後にダウンロードする事が可能なテーマです。\nこちらは、ダウンロードした後にWordpressにアップロードしてインストール必要があります。\n非公式(無料)のテーマよりさらに使いやすいデザイン等になっているものが多く、SEO対策やアフェリエイトを導入しやすい機能が整っているものが多いです。\nSANGOやAFFINGERが有名ですね。\r親テーマと子テーマ また、テーマはさらに以下の区分に分かれます。\n区分\r説明\r親テーマ\r公式やサイトで配布されている状態で完成しているWordpressテーマ\r子テーマ\r親テーマから、機能とスタイルを引き継いだ上で、さらに細かい独自カスタマイズを追加したい場合に編集するためのテーマ。\rWordPressの「親テーマ」は初期設定だと、テーマに機能などが追加されたりすると自動アップデートを行います。\nこの親テーマのアップデートの際に、すべての関連テーマファイルが上書きされ、親テーマに追加した全ての修正内容が消えてしまうので、今までの作業がすべて無駄になってしまい絶望に陥ります。笑\n一方で、子テーマを作成した上でそちらに修正を入れることで、親テーマが自動アップデートされても子テーマの内容には影響がないので、消えることなく残り続けます。\n初心者の方はこの関係性を知らずに、親テーマをガリガリカスタマイズする方が多いと思いますが、必ず子テーマをカスタマイズする癖をつけておいたほうが良いでしょう！\nメリットは？ デザインが多種多様 基本的にはテーマ毎にサイトデザインやレイアウトが異なります。\nなので、自分の好みに合うテーマを導入する事で、自分で何も手を加えなくてもサイト全体のレイアウトを変える事が可能です。\nレイアウトが自動で調整されている 最近のテーマはレスポンシブ対応がされているのがほとんどなので、スマホ/PCどちらでアクセスしても崩れないような素晴らしいレイアウトデザインされているので、自分でレイアウトを1から作る必要はありません。\nもちろん、気になったところは子テーマを作った上で独自カスタマイズしていく事も可能です♪\n機能拡張 テーマを導入すると、新機能が使えるようになるものもあります。\n例えば、記事につけたタグを一覧で表示させるタグクラウド機能が使えるようになるものもあります。\nこの機能を自分で追加しようとするとプログラミングの知識が必要になるので、とても助かります。\n他にもテーマ毎に使えるようになる機能は色々あるので調べてみると良いでしょう♪\n終わりに Wordpressを使ってサイトを作る際に、テーマの概念は避けては通れない道です。\nまた、テーマがサイト全体のデザインベースになるので、基本を良く理解しておくと、カスタマイズする際に理想のサイトに近づける事が出来るので、知識をつけておきましょう\n","date":"2018-05-02T20:15:18+09:00","image":"/wp-content/uploads/2018/05/wordpressThemeEye.png","permalink":"/2018/05/02/3798/","title":"【ブロガー初心者向け】Wordpressのテーマ周りを理解してみよう【必須知識】"},{"content":"パーマリンクを変える際は要注意 SEOはURL単位 以前、Wordpressでサイトを作成する際のパーリンクの必要性と設定方法について紹介しました。\n関連記事 【初心者必見】Wordpressのパーマリンク(記事URL)を変えてみよう 2018/04/30 840文字 約2分で読めます SEOとしては、このパーマリンクで設定したURL単位で、GoogleSearchConsoleなどの検索エンジンに収集されていきます。\n例：\n/2018/05/01/3833/\nパーマリンクの設定変更によってURLが変わった場合、新しいURLが収集されるまでは検索結果に表示されなくなってしまいます。\nまた、変更後数日間は古いURLが検索結果に表示され続けるので、場合によってはクリックしてもエラーが画面が表示される事になり、利用者に信用出来ないサイトだなー。という印象を与えてしまいます。\nSNSでのシェアもURL単位 また、TwitterやFacebookなどのSNSで記事をシェアする際も、その時の記事URLを添えてシェアする事になるので、URLを変えてしまうとこちらも同じようにエラー画面になってしまい、過去のシェアが無効になってしまいますorz\n同じ人がまたシェアしてくれるとは限らないので、このリセットはサイトとしても非常にもったいないです。\n筆者のやらかし では、筆者はどのようなミスを犯してしまったか？という点を実体験をもとに紹介致します。\n最初のパーマリンク設定 筆者はこのブログで様々なカテゴリ(6カテゴリほど)の記事を書く予定だったので、パーマリンクにはカテゴリを含む以下の形でサイト構築時に設定しておきました。\n初期のパーマリンク /%category%/%year%/%monthnum%/%day%/%post_id% GoogleAdsenseの合格前 しかし、Google Adsenseの申請をする上で、1カテゴリの記事数が少ないと申請が通りにくい、という記事をチラホラ見かけたので、申請時点では6カテゴリを2カテゴリに減らして1カテゴリあたりの記事数を暫定的に増やすように記事を書いていきました。\nGoogleAdsenseの合格後 そして、無事にGoogleAdsenseに合格し、カテゴリを分ける作業もそんなに優先度が高くなかったので、とりあえずはそのまま数ヶ月記事を増やし続け、そろそろ記事のカテゴリを細かく分けよう！と思い、先日記事のカテゴリを変更して更新をしたところ事件は起こりました。\nURLが変わってしまった。。。 パーマリンクにカテゴリを含めていたせいで、URLが変わってしまったのです。。。\n例として、最初に生活カテゴリに含めていた記事をグルメカテゴリに変更すると、以下のようにURLが変わります。\n変更前\r変更後\r/生活/2018/05/01/3833/\r/グルメ/2018/05/01/3833/\rWordpressでは、パーマリンクの変更を行った際に、変更前のURLにアクセスがあった場合に変更後のURLに自動でリダイレクトしてくれる場合もあるらしいですが、確実ではないので期待しないでおいたほうが良いでしょう。\nまた、リダイレクトされたとしてもURL文字列を見た際に、生活カテゴリのURLにアクセスしたのに、いつの間にかグルメカテゴリの記事に変わっている！という不安を煽ってしまうことにもつながってしまいます。\nなので、最初に良く考えずにパーマリンク設定を設定してしまった自分が悪かったんだ！と、SEO効果とSNSシェアがリセットされる事を割り切り、また今後同じように記事を別のカテゴリに移動させる可能性が0ではないので、その際にURLが変わらないようにパーマリンクからカテゴリを除去した以下の形に修正をしました。\n修正後のパーマリンク /%year%/%monthnum%/%day%/%post_id% これなら、パーマリンクに含んでいる年/月/日/記事IDは記事を変更しても不変な情報なのでどれだけ変更してもURLは変わる事はありません。\n変更後はPVも収入もほぼ0に これは仕方ないことですが、変更直後はどちらもブログ開設時並みの状態になってしまいました。orz\nしかし神は見放さなかった ただ、予想していたよりも早く数日で徐々に戻ってきているので１ヶ月くらいあれば変更前の数値に戻りそうなペースです。\nなので、そこまで深刻に考えなくても良さそうですね♪\n終わりに 以上のように、変更後も少しずつPVや収益を取り戻すことは可能ですが、やはり一番最初にしっかりと考えていれば起こらない問題です。\nですので、皆さんは一番最初にパーマリンクを設定する際は、今後のブログの展開を構想しながらURLを考えるようにしてみてください。\n","date":"2018-05-01T19:12:37+09:00","image":"/wp-content/uploads/2018/05/wordpressPermlinkModifyEye.png","permalink":"/2018/05/01/3833/","title":"【絶望】パーマリンクは後から変更するとSEOがリセットされてしまう【Wordpress】"},{"content":"記事URLは大事 Wordpressのデフォルトはいまいち Wordpressで記事を作成した際の記事ページのURLはデフォルトでは以下のようになります。\nこれはパーマリンクの設定が基本の状態になっているからです。\nURLは、SEO観点やページ訪問者から見てもとても意味のある文字列になります。\nパーマリンク？ Wordpressでは、パーマリンクという標準機能を利用することで、この記事URLを自由にカスタマイズすることが可能です。\n左部メニューの設定\u003eパーマリンク設定をクリックすることでパーマリンクの設定画面を開けます。\nこちらの画面を開くと、幾つかのテンプレートパーマリンクが用意されています。\nが、今回はせっかくなのでカスタム構造で設定してみましょう。\nパーマリンクには、以下のタグを指定することが可能です。\nタグ\r説明\r%year%\r記事の投稿年をURLに使用します\r%monthnum%\r記事の投稿月をURLに使用します\r%day%\r記事の投稿日をURLに使用します\r%hour%\r記事の投稿時間をURLに使用します\r%minute%\r記事の投稿分をURLに使用します\r%second%\r記事の投稿秒をURLに使用します\r%post_id%\r記事の記事IDをURLに使用します\r%postname%\r記事の記事名をURLに使用します\r%category%\r記事の記事カテゴリをURLに使用します\r%author%\r記事の投稿者をURLに使用します\r今回は、1日1記事以上投稿することはないため以下のように設定をしてみました。\nパーマリンク /%year%/%monthnum%/%day%/%post_id% 1日1記事以上投稿する場合は、以下のように投稿時間まで含めると良いでしょう。\nパーマリンク /%year%/%monthnum%/%day%/%hour%/%minute%/%post_id% カスタム構造にチェックを入れ、パーマリンクのルールを入力したら変更を保存ボタンをクリックします。\n確認 では、もう一度記事ページにアクセスしてみましょう。\n正常にパーマリンクが反映されていますね♪\n終わりに このように、簡単にURLのルールを変えることが可能です。\n前述したように、URLはとても意味のある情報なので、Wordpressでブログ開設した場合は、一番最初に設定すべき項目なので、忘れないように設定しておきましょう！\n","date":"2018-04-30T22:51:12+09:00","image":"/wp-content/uploads/2018/04/wordpressPermlinkEye.png","permalink":"/2018/04/30/3825/","title":"【初心者必見】Wordpressのパーマリンク(記事URL)を変えてみよう"},{"content":"記事ページのタイトル デフォルトは「–」区切り Wordpressで作成した記事は、デフォルトでは以下のような形でタイトルが設定されます。\n{記事タイトル} – {サイトタイトル}\nただ、最近のtitleタグの構成の傾向としては、「–」ではなく「|」で区切るのが主流になってきています。\n※もちろん好みがあります\nカスタマイズ可能 Wordpressではこの記事タイトル部分の表示を簡単にカスタマイズすることが可能ですが、WordPress4.4以前と以降ではカスタマイズの仕方が異なるので気をつけましょう。\n今回はWordPress4.4以降のカスタマイズ方法を紹介致します。\n手順 前提 Point\rWordPress4.4以降\rfunction.phpに追記 やり方は簡単です。\nfunction.phpに以下を追記してください。\nfunction.php function wp_document_title_separator( $separator ) { $separator = \u0026#39;|\u0026#39;; return $separator; } add_filter( \u0026#39;document_title_separator\u0026#39;, \u0026#39;wp_document_title_separator\u0026#39; ); 修正はたったこれだけです。\n確認 ブラウザの開発者ツールで確認してみましょう。\n正常にtitleタグの区切り文字が「–」から「|」に変更されていますね♪\n終わりに 以上のようにtitleタグの区切り文字を変更することが出来ましたね♪\n細かい部分ですが、Titleタグの内容は検索結果にも表示されるので好みに合わせて微調整してみましょう。\n","date":"2018-04-29T22:31:17+09:00","image":"/wp-content/uploads/2018/04/wordpressCustomTitleEye.png","permalink":"/2018/04/29/3812/","title":"【瞬殺】Wordpressのtitleタグのテキストを変更する方法【区切り文字変更】"},{"content":"Playbook実行時に謎のエラーが いつも通りAnsibleにてプレイブックを実行していると以下のようなエラーが発生しました。\nError Log fatal: [127.0.0.1]: FAILED! =\u0026gt; { \u0026#34;msg\u0026#34;: \u0026#34;Failed to set permissions on the temporary files Ansible needs to create when becoming an unprivileged user (rc: 1, err: chown: `/tmp/ansible-tmp-1524573884.53-191197441027150/\u0026#39; の所有者を変更中: 許可されていない操作です chown: `/tmp/ansible-tmp-1524573884.53-191197441027150/command.py\u0026#39; の所有者を変更中: 許可されていない操作です }). For information on working around this, see https://docs.ansible.com/ansible/become.html#becoming-an-unprivileged-user\u0026#34; } 何ぞこれ・・・。orz\nansible.cfgで解決 こちらはansible.cfgに以下を追記すれば回避することが可能になります。\nansible.cfg [ssh_connection] pipelining = true 誰かの助けになるように備忘録として記事にしておきます。\n","date":"2018-04-28T23:56:10+09:00","image":"/wp-content/uploads/2018/04/ansibleError1Eye.png","permalink":"/2018/04/28/3751/","title":"【Ansible備忘録】Failed to set permissions on the temporary files Ansible needs to create when becoming an unprivileged userの対処方法"},{"content":"概要 前提 Point\rAnsibleインストール済み\rAWSのEC2サーバーを想定\r対象サーバーへの公開鍵設定済み\rApache2系インストール済み\rApacheのポートは80\rMySQLインストール済み\rPHPインストール済み\r参考 関連記事 【脱魔境インフラ】AWSのEC2にAnsibleをインストールしてみよう 2018/02/26 2612文字 約6分で読めます 関連記事 【失われしベストプラクティスを求めて】Ansibleでの特殊な動きをするディレクトリについて 2018/03/13 1640文字 約4分で読めます ディレクトリ構造 ディレクトリ構造 . ├── ansible.cfg ├── files │ └── local │ └── wordpress │ └── cli │ └── config.yml ├── handlers │ └── httpd │ └── restart.yml ├── inventories │ └── local │ ├── group_vars │ │ └── all.yml │ ├── host_vars │ │ └── 127.0.0.1.yml │ └── hosts ├── roles │ ├── mysql │ │ ├── create │ │ │ └── tasks │ │ │ └── main.yml │ │ └── user │ │ └── create │ │ └── tasks │ │ └── main.yml │ ├── php │ │ └── mysql │ │ └── install │ │ └── tasks │ │ └── main.yml │ └── wordpress │ ├── cli │ │ ├── config │ │ │ └── tasks │ │ │ └── main.yml │ │ └── install │ │ └── tasks │ │ └── main.yml │ ├── config │ │ └── tasks │ │ └── main.yml │ ├── download │ │ └── tasks │ │ └── main.yml │ └── install │ └── tasks │ └── main.yml └── wordpress-install.yml ファイル群 ansible.cfg ansible.cfg [ssh_connection] pipelining = true hosts inventories/local/hosts [all-servers:children] local-servers [local-servers:children] local [local] 127.0.0.1:12 group_vars inventories/local/group_vars/all.yml #------------------------------------------ # 環境 #------------------------------------------ ENV: \u0026#34;local\u0026#34; TEMP: DIRECTORY: /tmp host_vars inventories/local/host_vars/127.0.0.1.yml HTTPD: DOCUMENT_ROOT_DIRECTORY: /var/www/html SERVICE: NAME: httpd PHP: MYSQL: YUM: NAME: php56-mysqlnd WORDPRESS: NAME: sample DB: HOST: localhost NAME: sample USER: sample_user PASS: sample#user PREFIX: sample_ ADMIN: USER: NAME: sampleAdmin PASSWORD: sample#admin MAIL_ADDRESS: sample@example.com URL: http://localhost CLI: PHAR: URL: https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar NAME: wp_cli NAME: wp SSH: DIRECTORY: .wp-cli handlers handlers/httpd/restart.yml - name: \u0026#34;httpd restart\u0026#34; action: service name={{ HTTPD.SERVICE.NAME }} state=restarted roles MySQL roles/mysql/create/tasks/main.yml - name: create mysql_db: name: \u0026#34;{{ WORDPRESS.DB.NAME }}\u0026#34; state: present roles/mysql/user/create/tasks/main.yml - name: create mysql_user: name: \u0026#34;{{ WORDPRESS.DB.USER }}\u0026#34; host: \u0026#34;{{ WORDPRESS.DB.HOST }}\u0026#34; password: \u0026#34;{{ WORDPRESS.DB.PASS }}\u0026#34; priv: \u0026#34;{{ WORDPRESS.DB.NAME }}.*:ALL,GRANT\u0026#34; state: present php roles/php/mysql/install/tasks/main.yml - name: install yum: name: \u0026#34;{{ PHP.MYSQL.YUM.NAME }}\u0026#34; state: present notify: \u0026#34;httpd restart\u0026#34; Worepress roles/wordpress/cli/install/tasks/main.yml - name: get wordpress cli get_url: url: \u0026#34;{{ WORDPRESS.CLI.PHAR.URL }}\u0026#34; dest: \u0026#34;{{ TEMP.DIRECTORY }}/{{ WORDPRESS.CLI.PHAR.NAME }}\u0026#34; mode: 0755 - name: Rename wp-cli shell: \u0026#34;mv {{ TEMP.DIRECTORY }}/{{ WORDPRESS.CLI.PHAR.NAME }} /usr/local/bin/{{ WORDPRESS.CLI.NAME }}\u0026#34; - name: create Symlink file: src: /usr/local/bin/{{ WORDPRESS.CLI.NAME }} dest: /usr/bin/{{ WORDPRESS.CLI.NAME }} owner: root group: root state: link roles/wordpress/cli/config/tasks/main.yml - name: Dir exists stat: path=~/{{ WORDPRESS.CLI.SSH.DIRECTORY }} register: target - name: \u0026#34;Create Directory\u0026#34; file: dest=~/{{ WORDPRESS.CLI.SSH.DIRECTORY }} state=directory mode=755 when: not target.stat.exists tags: - always - name: copy copy: src={{ ENV }}/wordpress/cli/config.yml dest=~/{{ WORDPRESS.CLI.SSH.DIRECTORY }}/config.yml tags: - always roles/wordpress/download/tasks/main.yml - name: Dir exists stat: path={{ HTTPD.DOCUMENT_ROOT_DIRECTORY }}/{{ WORDPRESS.NAME }} register: target - name: \u0026#34;Create Directory\u0026#34; file: dest={{ HTTPD.DOCUMENT_ROOT_DIRECTORY }}/{{ WORDPRESS.NAME }} state=directory mode=755 group=apache owner=apache when: not target.stat.exists tags: - always - name: WordPress Core Download become_user: apache shell: | wp core download \\ --locale=ja when: not target.stat.exists args: chdir: \u0026#34;{{ HTTPD.DOCUMENT_ROOT_DIRECTORY }}/{{ WORDPRESS.NAME }}\u0026#34; roles/wordpress/config/tasks/main.yml - name: Setup Wordpress Config become_user: apache shell: | wp core config \\ --dbname={{ WORDPRESS.DB.NAME }} \\ --dbuser={{ WORDPRESS.DB.USER }} \\ --dbpass={{ WORDPRESS.DB.PASS }} \\ --dbhost={{ WORDPRESS.DB.HOST }} \\ --dbprefix=wp_ \\ --path={{ HTTPD.DOCUMENT_ROOT_DIRECTORY }}/{{ WORDPRESS.NAME }} roles/wordpress/install/tasks/main.yml - name: Wordpress Install become_user: apache shell: | wp core \\ install \\ --title={{ WORDPRESS.NAME }} \\ --admin_user={{ WORDPRESS.ADMIN.USER.NAME }} \\ --admin_password={{ WORDPRESS.ADMIN.USER.PASSWORD }} \\ --admin_email={{ WORDPRESS.ADMIN.USER.MAIL_ADDRESS }} \\ --url={{ WORDPRESS.URL }}/{{ WORDPRESS.NAME }} \\ args: chdir: \u0026#34;{{ HTTPD.DOCUMENT_ROOT_DIRECTORY }}/{{ WORDPRESS.NAME }}\u0026#34; playbook wordpress-install.yml --- - hosts: local-servers become: yes roles: - wordpress/cli/install - wordpress/cli/config - mysql/create - mysql/user/create - wordpress/download - wordpress/config - wordpress/install - php/mysql/install handlers: - import_tasks: handlers/httpd/restart.yml 実行 playbook実行コマンド ansible-playbook --private-key={秘密鍵へのパス} -u {実行ユーザー} -i inventories/local wordpress-install.yml -K ※実行ユーザーのパスワードの入力が求められます\n実行ログ SUDO password: PLAY [local-servers] *************************************************************************************************************************************** TASK [Gathering Facts] ************************************************************************************************************************************* ok: [127.0.0.1] TASK [wordpress/cli/install : get wordpress cli] *********************************************************************************************************** changed: [127.0.0.1] TASK [wordpress/cli/install : Rename wp-cli] *************************************************************************************************************** changed: [127.0.0.1] TASK [wordpress/cli/install : create Symlink] ************************************************************************************************************** changed: [127.0.0.1] TASK [wordpress/cli/config : Dir exists] ******************************************************************************************************************* ok: [127.0.0.1] TASK [wordpress/cli/config : Create Directory] ************************************************************************************************************* changed: [127.0.0.1] TASK [wordpress/cli/config : copy] ************************************************************************************************************************* changed: [127.0.0.1] TASK [mysql/create : create] ******************************************************************************************************************************* changed: [127.0.0.1] TASK [mysql/user/update : update mysql user] *************************************************************************************************************** changed: [127.0.0.1] TASK [wordpress/download : Dir exists] ********************************************************************************************************************* ok: [127.0.0.1] TASK [wordpress/download : Create Directory] *************************************************************************************************************** changed: [127.0.0.1] TASK [wordpress/download : WordPress Core Download] ******************************************************************************************************** changed: [127.0.0.1] TASK [wordpress/config : Setup Wordpress Config] *********************************************************************************************************** changed: [127.0.0.1] TASK [wordpress/install : Wordpress Install] ********************************************************************************************************* changed: [127.0.0.1] TASK [php/mysql/install : install] ************************************************************************************************************************* changed: [127.0.0.1] RUNNING HANDLER [httpd restart] **************************************************************************************************************************** changed: [127.0.0.1] PLAY RECAP ************************************************************************************************************************************************* 127.0.0.1 : ok=3 changed=15 unreachable=0 failed=0 確認 ブラウザで、http://localhost/sampleにアクセスして、以下の画面が表示されればインストール完了です♪\n","date":"2018-04-27T01:06:09+09:00","image":"/wp-content/uploads/2018/04/ansibleWordpressInstallEye.png","permalink":"/2018/04/27/3749/","title":"【Ansible備忘録】Wordpressをインストールするplaybook"},{"content":"概要 前提 Point\rAnsibleインストール済み\rAWSのEC2サーバーを想定\r対象サーバーへの公開鍵設定済み\r参考 関連記事 【脱魔境インフラ】AWSのEC2にAnsibleをインストールしてみよう 2018/02/26 2612文字 約6分で読めます 関連記事 【失われしベストプラクティスを求めて】Ansibleでの特殊な動きをするディレクトリについて 2018/03/13 1640文字 約4分で読めます ディレクトリ構造 ディレクトリ構造 ├── inventories │ └── local │ ├── group_vars │ │ └── all.yml │ ├── host_vars │ │ └── 127.0.0.1.yml │ └── hosts ├── mysql-install.yml ├── roles │ └── mysql │ └── aws │ ├── init │ │ └── tasks │ │ └── main.yml │ └── install │ └── tasks │ └── main.yml └── templates └── local └── mysql ファイル群 inventories local/hosts inventories/local/hosts [all-servers:children] local-servers [local-servers:children] local [local] 127.0.0.1:10000 local/group_vars inventories/local/group_vars/all.yml --- #------------------------------------------ # 環境 #------------------------------------------ ENV: \u0026#34;local\u0026#34; local/host_vars inventories/local/host_vars/127.0.0.1.yml #------------------------------------------ # MySQL #------------------------------------------ MYSQL: SERVICE: NAME: mysqld DEFAULT_FILE: /root/.my.cnf ROOT: PASSWORD: {ROOTユーザーパスワード} SERVER: YUM: NAME: mysql56-server PYTHON: YUM: NAME: MySQL-python27 roles MySQL install roles/mysql/aws/install/tasks/main.yml - name: yum install yum: name={{ item }} with_items: - \u0026#34;{{ MYSQL.SERVER.YUM.NAME }}\u0026#34; - \u0026#34;{{ MYSQL.PYTHON.YUM.NAME }}\u0026#34; - name: start mysql service: name: \u0026#34;{{ MYSQL.SERVICE.NAME }}\u0026#34; state: started enabled: yes init roles/mysql/aws/init/tasks/main.yml - name: check init shell: | mysqladmin \\ --defaults-file={{ MYSQL.DEFAULT_FILE }} \\ ping | grep alive ignore_errors: true register: init_flag - name: modify root password mysql_user: name: \u0026#34;root\u0026#34; host: \u0026#34;{{ item }}\u0026#34; password: \u0026#34;{{ MYSQL.ROOT.PASSWORD }}\u0026#34; with_items: - 127.0.0.1 - ::1 - localhost.localdomain - localhost when: init_flag.rc == 1 - name: create cnf template: src: \u0026#34;{{ ENV }}/mysql/.my.cnf.j2\u0026#34; dest: \u0026#34;{{ MYSQL.DEFAULT_FILE }}\u0026#34; owner: root group: root mode: 0600 when: init_flag.rc == 1 templates MySQL templates/local/mysql/.my.cnf.j2 [client] port=3307 user=root password=\u0026#34;{{ MYSQL.ROOT.PASSWORD }}\u0026#34; playbook mysql-install.yml - hosts: all-servers become: yes roles: - mysql/aws/install - mysql/aws/init 実行 playbook実行コマンド ansible-playbook --private-key={秘密鍵へのパス} -u {実行ユーザー} -i inventories/local mysql-install.yml -K ※実行ユーザーのパスワードの入力が求められます\n実行ログ SUDO password: PLAY [all-servers] ***************************************************************************************************************************************** TASK [Gathering Facts] ************************************************************************************************************************************* ok: [127.0.0.1] TASK [mysql/aws/install : yum install] ********************************************************************************************************************* changed: [127.0.0.1] =\u0026gt; (item=[u\u0026#39;mysql56-server\u0026#39;, u\u0026#39;MySQL-python27\u0026#39;]) TASK [mysql/aws/install : start mysql] ********************************************************************************************************************* changed: [127.0.0.1] TASK [mysql/aws/init : check init] ************************************************************************************************************************* fatal: [127.0.0.1]: FAILED! =\u0026gt; {\u0026#34;changed\u0026#34;: true, \u0026#34;cmd\u0026#34;: \u0026#34;mysqladmin --defaults-file=/root/.my.cnf ping | grep alive\u0026#34;, \u0026#34;delta\u0026#34;: \u0026#34;0:00:00.121704\u0026#34;, \u0026#34;end\u0026#34;: \u0026#34;2018-04-23 07:43:59.540812\u0026#34;, \u0026#34;msg\u0026#34;: \u0026#34;non-zero return code\u0026#34;, \u0026#34;rc\u0026#34;: 1, \u0026#34;start\u0026#34;: \u0026#34;2018-04-23 07:43:59.419108\u0026#34;, \u0026#34;stderr\u0026#34;: \u0026#34;Could not open required defaults file: /root/.my.cnf\\nFatal error in defaults handling. Program aborted\u0026#34;, \u0026#34;stderr_lines\u0026#34;: [\u0026#34;Could not open required defaults file: /root/.my.cnf\u0026#34;, \u0026#34;Fatal error in defaults handling. Program aborted\u0026#34;], \u0026#34;stdout\u0026#34;: \u0026#34;\u0026#34;, \u0026#34;stdout_lines\u0026#34;: []} ...ignoring TASK [mysql/aws/init : modify root password] *************************************************************************************************************** changed: [127.0.0.1] =\u0026gt; (item=127.0.0.1) changed: [127.0.0.1] =\u0026gt; (item=::1) changed: [127.0.0.1] =\u0026gt; (item=localhost.localdomain) changed: [127.0.0.1] =\u0026gt; (item=localhost) TASK [mysql/aws/init : create cnf] ************************************************************************************************************************* changed: [127.0.0.1] PLAY RECAP ************************************************************************************************************************************************* 127.0.0.1 : ok=0 changed=8 unreachable=0 failed=0 確認 正常パスワード command mysql -u root -p Enter password: Welcome to the MySQL monitor. Commands end with ; or \\g. Your MySQL connection id is 12 Server version: 5.6.39 MySQL Community Server (GPL) Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners. Type \u0026#39;help;\u0026#39; or \u0026#39;\\h\u0026#39; for help. Type \u0026#39;\\c\u0026#39; to clear the current input statement. mysql\u0026gt; 不正パスワード command mysql -u root -p Enter password: ERROR 1045 (28000): Access denied for user \u0026#39;root\u0026#39;@\u0026#39;localhost\u0026#39; (using password: YES) ","date":"2018-04-26T12:05:49+09:00","image":"/wp-content/uploads/2018/04/ansibleMysqlInstallEye.png","permalink":"/2018/04/26/3701/","title":"【Ansible備忘録】MySQLをインストールするplaybook"},{"content":"概要 前提 Point\rAnsibleインストール済み\rAWSのEC2サーバーを想定\r対象サーバーへの公開鍵設定済み\rApache2系インストール済み\rApacheのポートは80\r参考 関連記事 【脱魔境インフラ】AWSのEC2にAnsibleをインストールしてみよう 2018/02/26 2612文字 約6分で読めます 関連記事 【失われしベストプラクティスを求めて】Ansibleでの特殊な動きをするディレクトリについて 2018/03/13 1640文字 約4分で読めます 関連記事 【Ansible備忘録】Apacheをインストールするplaybook 2018/04/02 503文字 約2分で読めます ディレクトリ構造 ディレクトリ構造 . ├── files │ └── local │ └── php │ ├── index.php │ └── php.ini ├── handlers │ └── httpd │ └── restart.yml ├── inventories │ └── local │ ├── group_vars │ │ └── all.yml │ ├── host_vars │ │ └── 127.0.0.1.yml │ └── hosts ├── php-install.yml └── roles └── php ├── install │ └── tasks │ └── main.yml └── setup └── tasks └── main.yml ファイル群 hosts inventories/local/hosts [all-servers:children] local-servers [local-servers:children] local [local] 127.0.0.1:12 group_vars inventories/local/group_vars/all.yml --- #------------------------------------------ # 環境 #------------------------------------------ ENV: \u0026#34;local\u0026#34; host_vars inventories/local/host_vars/127.0.0.1.yml HTTPD: DOCUMENT_ROOT_DIRECTORY: /var/www/html SERVICE: NAME: httpd PHP: YUM: NAME: php56 INI: DIRECTORY: /etc handlers handlers/httpd/restart.yml - name: \u0026#34;httpd restart\u0026#34; action: service name={{ HTTPD.SERVICE.NAME }} state=restarted files files/local/php/index.php \u0026lt;?php phpinfo(); ?\u0026gt; ※以下はデフォルトの内容なので用途に合わせて変えてみてください。\nfiles/local/php/php.ini [PHP] ;;;;;;;;;;;;;;;;;;; ; About php.ini ; ;;;;;;;;;;;;;;;;;;; ; PHP\u0026#39;s initialization file, generally called php.ini, is responsible for ; configuring many of the aspects of PHP\u0026#39;s behavior. ; PHP attempts to find and load this configuration from a number of locations. ; The following is a summary of its search order: ; 1. SAPI module specific location. ; 2. The PHPRC environment variable. (As of PHP 5.2.0) ; 3. A number of predefined registry keys on Windows (As of PHP 5.2.0) ; 4. Current working directory (except CLI) ; 5. The web server\u0026#39;s directory (for SAPI modules), or directory of PHP ; (otherwise in Windows) ; 6. The directory from the --with-config-file-path compile time option, or the ; Windows directory (C:\\windows or C:\\winnt) ; See the PHP docs for more specific information. ; http://php.net/configuration.file ; The syntax of the file is extremely simple. Whitespace and lines ; beginning with a semicolon are silently ignored (as you probably guessed). ; Section headers (e.g. [Foo]) are also silently ignored, even though ; they might mean something in the future. ; Directives following the section heading [PATH=/www/mysite] only ; apply to PHP files in the /www/mysite directory. Directives ; following the section heading [HOST=www.example.com] only apply to ; PHP files served from www.example.com. Directives set in these ; special sections cannot be overridden by user-defined INI files or ; at runtime. Currently, [PATH=] and [HOST=] sections only work under ; CGI/FastCGI. ; http://php.net/ini.sections ; Directives are specified using the following syntax: ; directive = value ; Directive names are *case sensitive* - foo=bar is different from FOO=bar. ; Directives are variables used to configure PHP or PHP extensions. ; There is no name validation. If PHP can\u0026#39;t find an expected ; directive because it is not set or is mistyped, a default value will be used. ; The value can be a string, a number, a PHP constant (e.g. E_ALL or M_PI), one ; of the INI constants (On, Off, True, False, Yes, No and None) or an expression ; (e.g. E_ALL \u0026amp; ~E_NOTICE), a quoted string (\u0026#34;bar\u0026#34;), or a reference to a ; previously set variable or directive (e.g. ${foo}) ; Expressions in the INI file are limited to bitwise operators and parentheses: ; | bitwise OR ; ^ bitwise XOR ; \u0026amp; bitwise AND ; ~ bitwise NOT ; ! boolean NOT ; Boolean flags can be turned on using the values 1, On, True or Yes. ; They can be turned off using the values 0, Off, False or No. ; An empty string can be denoted by simply not writing anything after the equal ; sign, or by using the None keyword: ; foo = ; sets foo to an empty string ; foo = None ; sets foo to an empty string ; foo = \u0026#34;None\u0026#34; ; sets foo to the string \u0026#39;None\u0026#39; ; If you use constants in your value, and these constants belong to a ; dynamically loaded extension (either a PHP extension or a Zend extension), ; you may only use these constants *after* the line that loads the extension. ;;;;;;;;;;;;;;;;;;; ; About this file ; ;;;;;;;;;;;;;;;;;;; ; PHP comes packaged with two INI files. One that is recommended to be used ; in production environments and one that is recommended to be used in ; development environments. ; php.ini-production contains settings which hold security, performance and ; best practices at its core. But please be aware, these settings may break ; compatibility with older or less security conscience applications. We ; recommending using the production ini in production and testing environments. ; php.ini-development is very similar to its production variant, except it is ; much more verbose when it comes to errors. We recommend using the ; development version only in development environments, as errors shown to ; application users can inadvertently leak otherwise secure information. ; This is php.ini-production INI file. ;;;;;;;;;;;;;;;;;;; ; Quick Reference ; ;;;;;;;;;;;;;;;;;;; ; The following are all the settings which are different in either the production ; or development versions of the INIs with respect to PHP\u0026#39;s default behavior. ; Please see the actual settings later in the document for more details as to why ; we recommend these changes in PHP\u0026#39;s behavior. ; display_errors ; Default Value: On ; Development Value: On ; Production Value: Off ; display_startup_errors ; Default Value: Off ; Development Value: On ; Production Value: Off ; error_reporting ; Default Value: E_ALL \u0026amp; ~E_NOTICE \u0026amp; ~E_STRICT \u0026amp; ~E_DEPRECATED ; Development Value: E_ALL ; Production Value: E_ALL \u0026amp; ~E_DEPRECATED \u0026amp; ~E_STRICT ; html_errors ; Default Value: On ; Development Value: On ; Production value: On ; log_errors ; Default Value: Off ; Development Value: On ; Production Value: On ; max_input_time ; Default Value: -1 (Unlimited) ; Development Value: 60 (60 seconds) ; Production Value: 60 (60 seconds) ; output_buffering ; Default Value: Off ; Development Value: 4096 ; Production Value: 4096 ; register_argc_argv ; Default Value: On ; Development Value: Off ; Production Value: Off ; request_order ; Default Value: None ; Development Value: \u0026#34;GP\u0026#34; ; Production Value: \u0026#34;GP\u0026#34; ; session.gc_divisor ; Default Value: 100 ; Development Value: 1000 ; Production Value: 1000 ; session.hash_bits_per_character ; Default Value: 4 ; Development Value: 5 ; Production Value: 5 ; short_open_tag ; Default Value: On ; Development Value: Off ; Production Value: Off ; track_errors ; Default Value: Off ; Development Value: On ; Production Value: Off ; url_rewriter.tags ; Default Value: \u0026#34;a=href,area=href,frame=src,form=,fieldset=\u0026#34; ; Development Value: \u0026#34;a=href,area=href,frame=src,input=src,form=fakeentry\u0026#34; ; Production Value: \u0026#34;a=href,area=href,frame=src,input=src,form=fakeentry\u0026#34; ; variables_order ; Default Value: \u0026#34;EGPCS\u0026#34; ; Development Value: \u0026#34;GPCS\u0026#34; ; Production Value: \u0026#34;GPCS\u0026#34; ;;;;;;;;;;;;;;;;;;;; ; php.ini Options ; ;;;;;;;;;;;;;;;;;;;; ; Name for user-defined php.ini (.htaccess) files. Default is \u0026#34;.user.ini\u0026#34; ;user_ini.filename = \u0026#34;.user.ini\u0026#34; ; To disable this feature set this option to empty value ;user_ini.filename = ; TTL for user-defined php.ini files (time-to-live) in seconds. Default is 300 seconds (5 minutes) ;user_ini.cache_ttl = 300 ;;;;;;;;;;;;;;;;;;;; ; Language Options ; ;;;;;;;;;;;;;;;;;;;; ; Enable the PHP scripting language engine under Apache. ; http://php.net/engine engine = On ; This directive determines whether or not PHP will recognize code between ; \u0026lt;? and ?\u0026gt; tags as PHP source which should be processed as such. It is ; generally recommended that \u0026lt;?php and ?\u0026gt; should be used and that this feature ; should be disabled, as enabling it may result in issues when generating XML ; documents, however this remains supported for backward compatibility reasons. ; Note that this directive does not control the \u0026lt;?= shorthand tag, which can be ; used regardless of this directive. ; Default Value: On ; Development Value: Off ; Production Value: Off ; http://php.net/short-open-tag short_open_tag = Off ; Allow ASP-style \u0026lt;% %\u0026gt; tags. ; http://php.net/asp-tags asp_tags = Off ; The number of significant digits displayed in floating point numbers. ; http://php.net/precision precision = 14 ; Output buffering is a mechanism for controlling how much output data ; (excluding headers and cookies) PHP should keep internally before pushing that ; data to the client. If your application\u0026#39;s output exceeds this setting, PHP ; will send that data in chunks of roughly the size you specify. ; Turning on this setting and managing its maximum buffer size can yield some ; interesting side-effects depending on your application and web server. ; You may be able to send headers and cookies after you\u0026#39;ve already sent output ; through print or echo. You also may see performance benefits if your server is ; emitting less packets due to buffered output versus PHP streaming the output ; as it gets it. On production servers, 4096 bytes is a good setting for performance ; reasons. ; Note: Output buffering can also be controlled via Output Buffering Control ; functions. ; Possible Values: ; On = Enabled and buffer is unlimited. (Use with caution) ; Off = Disabled ; Integer = Enables the buffer and sets its maximum size in bytes. ; Note: This directive is hardcoded to Off for the CLI SAPI ; Default Value: Off ; Development Value: 4096 ; Production Value: 4096 ; http://php.net/output-buffering output_buffering = 4096 ; You can redirect all of the output of your scripts to a function. For ; example, if you set output_handler to \u0026#34;mb_output_handler\u0026#34;, character ; encoding will be transparently converted to the specified encoding. ; Setting any output handler automatically turns on output buffering. ; Note: People who wrote portable scripts should not depend on this ini ; directive. Instead, explicitly set the output handler using ob_start(). ; Using this ini directive may cause problems unless you know what script ; is doing. ; Note: You cannot use both \u0026#34;mb_output_handler\u0026#34; with \u0026#34;ob_iconv_handler\u0026#34; ; and you cannot use both \u0026#34;ob_gzhandler\u0026#34; and \u0026#34;zlib.output_compression\u0026#34;. ; Note: output_handler must be empty if this is set \u0026#39;On\u0026#39; !!!! ; Instead you must use zlib.output_handler. ; http://php.net/output-handler ;output_handler = ; Transparent output compression using the zlib library ; Valid values for this option are \u0026#39;off\u0026#39;, \u0026#39;on\u0026#39;, or a specific buffer size ; to be used for compression (default is 4KB) ; Note: Resulting chunk size may vary due to nature of compression. PHP ; outputs chunks that are few hundreds bytes each as a result of ; compression. If you prefer a larger chunk size for better ; performance, enable output_buffering in addition. ; Note: You need to use zlib.output_handler instead of the standard ; output_handler, or otherwise the output will be corrupted. ; http://php.net/zlib.output-compression zlib.output_compression = Off ; http://php.net/zlib.output-compression-level ;zlib.output_compression_level = -1 ; You cannot specify additional output handlers if zlib.output_compression ; is activated here. This setting does the same as output_handler but in ; a different order. ; http://php.net/zlib.output-handler ;zlib.output_handler = ; Implicit flush tells PHP to tell the output layer to flush itself ; automatically after every output block. This is equivalent to calling the ; PHP function flush() after each and every call to print() or echo() and each ; and every HTML block. Turning this option on has serious performance ; implications and is generally recommended for debugging purposes only. ; http://php.net/implicit-flush ; Note: This directive is hardcoded to On for the CLI SAPI implicit_flush = Off ; The unserialize callback function will be called (with the undefined class\u0026#39; ; name as parameter), if the unserializer finds an undefined class ; which should be instantiated. A warning appears if the specified function is ; not defined, or if the function doesn\u0026#39;t include/implement the missing class. ; So only set this entry, if you really want to implement such a ; callback-function. unserialize_callback_func = ; When floats \u0026amp; doubles are serialized store serialize_precision significant ; digits after the floating point. The default value ensures that when floats ; are decoded with unserialize, the data will remain the same. serialize_precision = 17 ; open_basedir, if set, limits all file operations to the defined directory ; and below. This directive makes most sense if used in a per-directory ; or per-virtualhost web server configuration file. This directive is ; *NOT* affected by whether Safe Mode is turned On or Off. ; http://php.net/open-basedir ;open_basedir = ; This directive allows you to disable certain functions for security reasons. ; It receives a comma-delimited list of function names. This directive is ; *NOT* affected by whether Safe Mode is turned On or Off. ; http://php.net/disable-functions disable_functions = ; This directive allows you to disable certain classes for security reasons. ; It receives a comma-delimited list of class names. This directive is ; *NOT* affected by whether Safe Mode is turned On or Off. ; http://php.net/disable-classes disable_classes = ; Colors for Syntax Highlighting mode. Anything that\u0026#39;s acceptable in ; \u0026lt;span style=\u0026#34;color: ???????\u0026#34;\u0026gt; would work. ; http://php.net/syntax-highlighting ;highlight.string = #DD0000 ;highlight.comment = #FF9900 ;highlight.keyword = #007700 ;highlight.default = #0000BB ;highlight.html = #000000 ; If enabled, the request will be allowed to complete even if the user aborts ; the request. Consider enabling it if executing long requests, which may end up ; being interrupted by the user or a browser timing out. PHP\u0026#39;s default behavior ; is to disable this feature. ; http://php.net/ignore-user-abort ;ignore_user_abort = On ; Determines the size of the realpath cache to be used by PHP. This value should ; be increased on systems where PHP opens many files to reflect the quantity of ; the file operations performed. ; http://php.net/realpath-cache-size ;realpath_cache_size = 16k ; Duration of time, in seconds for which to cache realpath information for a given ; file or directory. For systems with rarely changing files, consider increasing this ; value. ; http://php.net/realpath-cache-ttl ;realpath_cache_ttl = 120 ; Enables or disables the circular reference collector. ; http://php.net/zend.enable-gc zend.enable_gc = On ; If enabled, scripts may be written in encodings that are incompatible with ; the scanner. CP936, Big5, CP949 and Shift_JIS are the examples of such ; encodings. To use this feature, mbstring extension must be enabled. ; Default: Off ;zend.multibyte = Off ; Allows to set the default encoding for the scripts. This value will be used ; unless \u0026#34;declare(encoding=...)\u0026#34; directive appears at the top of the script. ; Only affects if zend.multibyte is set. ; Default: \u0026#34;\u0026#34; ;zend.script_encoding = ;;;;;;;;;;;;;;;;; ; Miscellaneous ; ;;;;;;;;;;;;;;;;; ; Decides whether PHP may expose the fact that it is installed on the server ; (e.g. by adding its signature to the Web server header). It is no security ; threat in any way, but it makes it possible to determine whether you use PHP ; on your server or not. ; http://php.net/expose-php expose_php = On ;;;;;;;;;;;;;;;;;;; ; Resource Limits ; ;;;;;;;;;;;;;;;;;;; ; Maximum execution time of each script, in seconds ; http://php.net/max-execution-time ; Note: This directive is hardcoded to 0 for the CLI SAPI max_execution_time = 30 ; Maximum amount of time each script may spend parsing request data. It\u0026#39;s a good ; idea to limit this time on productions servers in order to eliminate unexpectedly ; long running scripts. ; Note: This directive is hardcoded to -1 for the CLI SAPI ; Default Value: -1 (Unlimited) ; Development Value: 60 (60 seconds) ; Production Value: 60 (60 seconds) ; http://php.net/max-input-time max_input_time = 60 ; Maximum input variable nesting level ; http://php.net/max-input-nesting-level ;max_input_nesting_level = 64 ; How many GET/POST/COOKIE input variables may be accepted ; max_input_vars = 1000 ; Maximum amount of memory a script may consume (128MB) ; http://php.net/memory-limit memory_limit = 128M ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ; Error handling and logging ; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ; This directive informs PHP of which errors, warnings and notices you would like ; it to take action for. The recommended way of setting values for this ; directive is through the use of the error level constants and bitwise ; operators. The error level constants are below here for convenience as well as ; some common settings and their meanings. ; By default, PHP is set to take action on all errors, notices and warnings EXCEPT ; those related to E_NOTICE and E_STRICT, which together cover best practices and ; recommended coding standards in PHP. For performance reasons, this is the ; recommend error reporting setting. Your production server shouldn\u0026#39;t be wasting ; resources complaining about best practices and coding standards. That\u0026#39;s what ; development servers and development settings are for. ; Note: The php.ini-development file has this setting as E_ALL. This ; means it pretty much reports everything which is exactly what you want during ; development and early testing. ; ; Error Level Constants: ; E_ALL - All errors and warnings (includes E_STRICT as of PHP 5.4.0) ; E_ERROR - fatal run-time errors ; E_RECOVERABLE_ERROR - almost fatal run-time errors ; E_WARNING - run-time warnings (non-fatal errors) ; E_PARSE - compile-time parse errors ; E_NOTICE - run-time notices (these are warnings which often result ; from a bug in your code, but it\u0026#39;s possible that it was ; intentional (e.g., using an uninitialized variable and ; relying on the fact it is automatically initialized to an ; empty string) ; E_STRICT - run-time notices, enable to have PHP suggest changes ; to your code which will ensure the best interoperability ; and forward compatibility of your code ; E_CORE_ERROR - fatal errors that occur during PHP\u0026#39;s initial startup ; E_CORE_WARNING - warnings (non-fatal errors) that occur during PHP\u0026#39;s ; initial startup ; E_COMPILE_ERROR - fatal compile-time errors ; E_COMPILE_WARNING - compile-time warnings (non-fatal errors) ; E_USER_ERROR - user-generated error message ; E_USER_WARNING - user-generated warning message ; E_USER_NOTICE - user-generated notice message ; E_DEPRECATED - warn about code that will not work in future versions ; of PHP ; E_USER_DEPRECATED - user-generated deprecation warnings ; ; Common Values: ; E_ALL (Show all errors, warnings and notices including coding standards.) ; E_ALL \u0026amp; ~E_NOTICE (Show all errors, except for notices) ; E_ALL \u0026amp; ~E_NOTICE \u0026amp; ~E_STRICT (Show all errors, except for notices and coding standards warnings.) ; E_COMPILE_ERROR|E_RECOVERABLE_ERROR|E_ERROR|E_CORE_ERROR (Show only errors) ; Default Value: E_ALL \u0026amp; ~E_NOTICE \u0026amp; ~E_STRICT \u0026amp; ~E_DEPRECATED ; Development Value: E_ALL ; Production Value: E_ALL \u0026amp; ~E_DEPRECATED \u0026amp; ~E_STRICT ; http://php.net/error-reporting error_reporting = E_ALL \u0026amp; ~E_DEPRECATED \u0026amp; ~E_STRICT ; This directive controls whether or not and where PHP will output errors, ; notices and warnings too. Error output is very useful during development, but ; it could be very dangerous in production environments. Depending on the code ; which is triggering the error, sensitive information could potentially leak ; out of your application such as database usernames and passwords or worse. ; For production environments, we recommend logging errors rather than ; sending them to STDOUT. ; Possible Values: ; Off = Do not display any errors ; stderr = Display errors to STDERR (affects only CGI/CLI binaries!) ; On or stdout = Display errors to STDOUT ; Default Value: On ; Development Value: On ; Production Value: Off ; http://php.net/display-errors display_errors = Off ; The display of errors which occur during PHP\u0026#39;s startup sequence are handled ; separately from display_errors. PHP\u0026#39;s default behavior is to suppress those ; errors from clients. Turning the display of startup errors on can be useful in ; debugging configuration problems. We strongly recommend you ; set this to \u0026#39;off\u0026#39; for production servers. ; Default Value: Off ; Development Value: On ; Production Value: Off ; http://php.net/display-startup-errors display_startup_errors = Off ; Besides displaying errors, PHP can also log errors to locations such as a ; server-specific log, STDERR, or a location specified by the error_log ; directive found below. While errors should not be displayed on productions ; servers they should still be monitored and logging is a great way to do that. ; Default Value: Off ; Development Value: On ; Production Value: On ; http://php.net/log-errors log_errors = On ; Set maximum length of log_errors. In error_log information about the source is ; added. The default is 1024 and 0 allows to not apply any maximum length at all. ; http://php.net/log-errors-max-len log_errors_max_len = 1024 ; Do not log repeated messages. Repeated errors must occur in same file on same ; line unless ignore_repeated_source is set true. ; http://php.net/ignore-repeated-errors ignore_repeated_errors = Off ; Ignore source of message when ignoring repeated messages. When this setting ; is On you will not log errors with repeated messages from different files or ; source lines. ; http://php.net/ignore-repeated-source ignore_repeated_source = Off ; If this parameter is set to Off, then memory leaks will not be shown (on ; stdout or in the log). This has only effect in a debug compile, and if ; error reporting includes E_WARNING in the allowed list ; http://php.net/report-memleaks report_memleaks = On ; This setting is on by default. ;report_zend_debug = 0 ; Store the last error/warning message in $php_errormsg (boolean). Setting this value ; to On can assist in debugging and is appropriate for development servers. It should ; however be disabled on production servers. ; Default Value: Off ; Development Value: On ; Production Value: Off ; http://php.net/track-errors track_errors = Off ; Turn off normal error reporting and emit XML-RPC error XML ; http://php.net/xmlrpc-errors ;xmlrpc_errors = 0 ; An XML-RPC faultCode ;xmlrpc_error_number = 0 ; When PHP displays or logs an error, it has the capability of formatting the ; error message as HTML for easier reading. This directive controls whether ; the error message is formatted as HTML or not. ; Note: This directive is hardcoded to Off for the CLI SAPI ; Default Value: On ; Development Value: On ; Production value: On ; http://php.net/html-errors html_errors = On ; If html_errors is set to On *and* docref_root is not empty, then PHP ; produces clickable error messages that direct to a page describing the error ; or function causing the error in detail. ; You can download a copy of the PHP manual from http://php.net/docs ; and change docref_root to the base URL of your local copy including the ; leading \u0026#39;/\u0026#39;. You must also specify the file extension being used including ; the dot. PHP\u0026#39;s default behavior is to leave these settings empty, in which ; case no links to documentation are generated. ; Note: Never use this feature for production boxes. ; http://php.net/docref-root ; Examples ;docref_root = \u0026#34;/phpmanual/\u0026#34; ; http://php.net/docref-ext ;docref_ext = .html ; String to output before an error message. PHP\u0026#39;s default behavior is to leave ; this setting blank. ; http://php.net/error-prepend-string ; Example: ;error_prepend_string = \u0026#34;\u0026lt;span style=\u0026#39;color: #ff0000\u0026#39;\u0026gt;\u0026#34; ; String to output after an error message. PHP\u0026#39;s default behavior is to leave ; this setting blank. ; http://php.net/error-append-string ; Example: ;error_append_string = \u0026#34;\u0026lt;/span\u0026gt;\u0026#34; ; Log errors to specified file. PHP\u0026#39;s default behavior is to leave this value ; empty. ; http://php.net/error-log ; Example: ;error_log = php_errors.log ; Log errors to syslog. ;error_log = syslog ;windows.show_crt_warning ; Default value: 0 ; Development value: 0 ; Production value: 0 ;;;;;;;;;;;;;;;;; ; Data Handling ; ;;;;;;;;;;;;;;;;; ; The separator used in PHP generated URLs to separate arguments. ; PHP\u0026#39;s default setting is \u0026#34;\u0026amp;\u0026#34;. ; http://php.net/arg-separator.output ; Example: ;arg_separator.output = \u0026#34;\u0026amp;amp;\u0026#34; ; List of separator(s) used by PHP to parse input URLs into variables. ; PHP\u0026#39;s default setting is \u0026#34;\u0026amp;\u0026#34;. ; NOTE: Every character in this directive is considered as separator! ; http://php.net/arg-separator.input ; Example: ;arg_separator.input = \u0026#34;;\u0026amp;\u0026#34; ; This directive determines which super global arrays are registered when PHP ; starts up. G,P,C,E \u0026amp; S are abbreviations for the following respective super ; globals: GET, POST, COOKIE, ENV and SERVER. There is a performance penalty ; paid for the registration of these arrays and because ENV is not as commonly ; used as the others, ENV is not recommended on productions servers. You ; can still get access to the environment variables through getenv() should you ; need to. ; Default Value: \u0026#34;EGPCS\u0026#34; ; Development Value: \u0026#34;GPCS\u0026#34; ; Production Value: \u0026#34;GPCS\u0026#34;; ; http://php.net/variables-order variables_order = \u0026#34;GPCS\u0026#34; ; This directive determines which super global data (G,P,C,E \u0026amp; S) should ; be registered into the super global array REQUEST. If so, it also determines ; the order in which that data is registered. The values for this directive are ; specified in the same manner as the variables_order directive, EXCEPT one. ; Leaving this value empty will cause PHP to use the value set in the ; variables_order directive. It does not mean it will leave the super globals ; array REQUEST empty. ; Default Value: None ; Development Value: \u0026#34;GP\u0026#34; ; Production Value: \u0026#34;GP\u0026#34; ; http://php.net/request-order request_order = \u0026#34;GP\u0026#34; ; This directive determines whether PHP registers $argv \u0026amp; $argc each time it ; runs. $argv contains an array of all the arguments passed to PHP when a script ; is invoked. $argc contains an integer representing the number of arguments ; that were passed when the script was invoked. These arrays are extremely ; useful when running scripts from the command line. When this directive is ; enabled, registering these variables consumes CPU cycles and memory each time ; a script is executed. For performance reasons, this feature should be disabled ; on production servers. ; Note: This directive is hardcoded to On for the CLI SAPI ; Default Value: On ; Development Value: Off ; Production Value: Off ; http://php.net/register-argc-argv register_argc_argv = Off ; When enabled, the ENV, REQUEST and SERVER variables are created when they\u0026#39;re ; first used (Just In Time) instead of when the script starts. If these ; variables are not used within a script, having this directive on will result ; in a performance gain. The PHP directive register_argc_argv must be disabled ; for this directive to have any affect. ; http://php.net/auto-globals-jit auto_globals_jit = On ; Whether PHP will read the POST data. ; This option is enabled by default. ; Most likely, you won\u0026#39;t want to disable this option globally. It causes $_POST ; and $_FILES to always be empty; the only way you will be able to read the ; POST data will be through the php://input stream wrapper. This can be useful ; to proxy requests or to process the POST data in a memory efficient fashion. ; http://php.net/enable-post-data-reading ;enable_post_data_reading = Off ; Maximum size of POST data that PHP will accept. ; Its value may be 0 to disable the limit. It is ignored if POST data reading ; is disabled through enable_post_data_reading. ; http://php.net/post-max-size post_max_size = 8M ; Automatically add files before PHP document. ; http://php.net/auto-prepend-file auto_prepend_file = ; Automatically add files after PHP document. ; http://php.net/auto-append-file auto_append_file = ; By default, PHP will output a character encoding using ; the Content-type: header. To disable sending of the charset, simply ; set it to be empty. ; ; PHP\u0026#39;s built-in default is text/html ; http://php.net/default-mimetype default_mimetype = \u0026#34;text/html\u0026#34; ; PHP\u0026#39;s default character set is set to empty. ; http://php.net/default-charset default_charset = \u0026#34;UTF-8\u0026#34; ; PHP internal character encoding is set to empty. ; If empty, default_charset is used. ; http://php.net/internal-encoding ;internal_encoding = ; PHP input character encoding is set to empty. ; http://php.net/input-encoding ;input_encoding = ; PHP output character encoding is set to empty. ; mbstring or iconv output handler is used. ; See also output_buffer. ; http://php.net/output-encoding ;output_encoding = ; Always populate the $HTTP_RAW_POST_DATA variable. PHP\u0026#39;s default behavior is ; to disable this feature and it will be removed in a future version. ; If post reading is disabled through enable_post_data_reading, ; $HTTP_RAW_POST_DATA is *NOT* populated. ; http://php.net/always-populate-raw-post-data ;always_populate_raw_post_data = -1 ;;;;;;;;;;;;;;;;;;;;;;;;; ; Paths and Directories ; ;;;;;;;;;;;;;;;;;;;;;;;;; ; UNIX: \u0026#34;/path1:/path2\u0026#34; ;include_path = \u0026#34;.:/php/includes\u0026#34; ; ; Windows: \u0026#34;\\path1;\\path2\u0026#34; ;include_path = \u0026#34;.;c:\\php\\includes\u0026#34; ; ; PHP\u0026#39;s default setting for include_path is \u0026#34;.;/path/to/php/pear\u0026#34; ; http://php.net/include-path ; The root of the PHP pages, used only if nonempty. ; if PHP was not compiled with FORCE_REDIRECT, you SHOULD set doc_root ; if you are running php as a CGI under any web server (other than IIS) ; see documentation for security issues. The alternate is to use the ; cgi.force_redirect configuration below ; http://php.net/doc-root doc_root = ; The directory under which PHP opens the script using /~username used only ; if nonempty. ; http://php.net/user-dir user_dir = ; Directory in which the loadable extensions (modules) reside. ; http://php.net/extension-dir ; extension_dir = \u0026#34;./\u0026#34; ; On windows: ; extension_dir = \u0026#34;ext\u0026#34; ; Directory where the temporary files should be placed. ; Defaults to the system default (see sys_get_temp_dir) ; sys_temp_dir = \u0026#34;/tmp\u0026#34; ; Whether or not to enable the dl() function. The dl() function does NOT work ; properly in multithreaded servers, such as IIS or Zeus, and is automatically ; disabled on them. ; http://php.net/enable-dl enable_dl = Off ; cgi.force_redirect is necessary to provide security running PHP as a CGI under ; most web servers. Left undefined, PHP turns this on by default. You can ; turn it off here AT YOUR OWN RISK ; **You CAN safely turn this off for IIS, in fact, you MUST.** ; http://php.net/cgi.force-redirect ;cgi.force_redirect = 1 ; if cgi.nph is enabled it will force cgi to always sent Status: 200 with ; every request. PHP\u0026#39;s default behavior is to disable this feature. ;cgi.nph = 1 ; if cgi.force_redirect is turned on, and you are not running under Apache or Netscape ; (iPlanet) web servers, you MAY need to set an environment variable name that PHP ; will look for to know it is OK to continue execution. Setting this variable MAY ; cause security issues, KNOW WHAT YOU ARE DOING FIRST. ; http://php.net/cgi.redirect-status-env ;cgi.redirect_status_env = ; cgi.fix_pathinfo provides *real* PATH_INFO/PATH_TRANSLATED support for CGI. PHP\u0026#39;s ; previous behaviour was to set PATH_TRANSLATED to SCRIPT_FILENAME, and to not grok ; what PATH_INFO is. For more information on PATH_INFO, see the cgi specs. Setting ; this to 1 will cause PHP CGI to fix its paths to conform to the spec. A setting ; of zero causes PHP to behave as before. Default is 1. You should fix your scripts ; to use SCRIPT_FILENAME rather than PATH_TRANSLATED. ; http://php.net/cgi.fix-pathinfo ;cgi.fix_pathinfo=1 ; FastCGI under IIS (on WINNT based OS) supports the ability to impersonate ; security tokens of the calling client. This allows IIS to define the ; security context that the request runs under. mod_fastcgi under Apache ; does not currently support this feature (03/17/2002) ; Set to 1 if running under IIS. Default is zero. ; http://php.net/fastcgi.impersonate ;fastcgi.impersonate = 1 ; Disable logging through FastCGI connection. PHP\u0026#39;s default behavior is to enable ; this feature. ;fastcgi.logging = 0 ; cgi.rfc2616_headers configuration option tells PHP what type of headers to ; use when sending HTTP response code. If set to 0, PHP sends Status: header that ; is supported by Apache. When this option is set to 1, PHP will send ; RFC2616 compliant header. ; Default is zero. ; http://php.net/cgi.rfc2616-headers ;cgi.rfc2616_headers = 0 ;;;;;;;;;;;;;;;; ; File Uploads ; ;;;;;;;;;;;;;;;; ; Whether to allow HTTP file uploads. ; http://php.net/file-uploads file_uploads = On ; Temporary directory for HTTP uploaded files (will use system default if not ; specified). ; http://php.net/upload-tmp-dir ;upload_tmp_dir = ; Maximum allowed size for uploaded files. ; http://php.net/upload-max-filesize upload_max_filesize = 8M ; Maximum number of files that can be uploaded via a single request max_file_uploads = 20 ;;;;;;;;;;;;;;;;;; ; Fopen wrappers ; ;;;;;;;;;;;;;;;;;; ; Whether to allow the treatment of URLs (like http:// or ftp://) as files. ; http://php.net/allow-url-fopen allow_url_fopen = On ; Whether to allow include/require to open URLs (like http:// or ftp://) as files. ; http://php.net/allow-url-include allow_url_include = Off ; Define the anonymous ftp password (your email address). PHP\u0026#39;s default setting ; for this is empty. ; http://php.net/from ;from=\u0026#34;john@doe.com\u0026#34; ; Define the User-Agent string. PHP\u0026#39;s default setting for this is empty. ; http://php.net/user-agent ;user_agent=\u0026#34;PHP\u0026#34; ; Default timeout for socket based streams (seconds) ; http://php.net/default-socket-timeout default_socket_timeout = 60 ; If your scripts have to deal with files from Macintosh systems, ; or you are running on a Mac and need to deal with files from ; unix or win32 systems, setting this flag will cause PHP to ; automatically detect the EOL character in those files so that ; fgets() and file() will work regardless of the source of the file. ; http://php.net/auto-detect-line-endings ;auto_detect_line_endings = Off ;;;;;;;;;;;;;;;;;;;;;; ; Dynamic Extensions ; ;;;;;;;;;;;;;;;;;;;;;; ; If you wish to have an extension loaded automatically, use the following ; syntax: ; ; extension=modulename.extension ; ; For example, on Windows: ; ; extension=msql.dll ; ; ... or under UNIX: ; ; extension=msql.so ; ; ... or with a path: ; ; extension=/path/to/extension/msql.so ; ; If you only provide the name of the extension, PHP will look for it in its ; default extension directory. ;;;; ; Note: packaged extension modules are now loaded via the .ini files ; found in the directory /etc/php.d; these are loaded by default. ;;;; ;;;;;;;;;;;;;;;;;;; ; Module Settings ; ;;;;;;;;;;;;;;;;;;; [CLI Server] ; Whether the CLI web server uses ANSI color coding in its terminal output. cli_server.color = On [Date] ; Defines the default timezone used by the date functions ; http://php.net/date.timezone ;date.timezone = ; http://php.net/date.default-latitude ;date.default_latitude = 31.7667 ; http://php.net/date.default-longitude ;date.default_longitude = 35.2333 ; http://php.net/date.sunrise-zenith ;date.sunrise_zenith = 90.583333 ; http://php.net/date.sunset-zenith ;date.sunset_zenith = 90.583333 [filter] ; http://php.net/filter.default ;filter.default = unsafe_raw ; http://php.net/filter.default-flags ;filter.default_flags = [iconv] ; Use of this INI entry is deprecated, use global input_encoding instead. ; If empty, default_charset or input_encoding or iconv.input_encoding is used. ; The precedence is: default_charset \u0026lt; intput_encoding \u0026lt; iconv.input_encoding ;iconv.input_encoding = ; Use of this INI entry is deprecated, use global internal_encoding instead. ; If empty, default_charset or internal_encoding or iconv.internal_encoding is used. ; The precedence is: default_charset \u0026lt; internal_encoding \u0026lt; iconv.internal_encoding ;iconv.internal_encoding = ; Use of this INI entry is deprecated, use global output_encoding instead. ; If empty, default_charset or output_encoding or iconv.output_encoding is used. ; The precedence is: default_charset \u0026lt; output_encoding \u0026lt; iconv.output_encoding ; To use an output encoding conversion, iconv\u0026#39;s output handler must be set ; otherwise output encoding conversion cannot be performed. ;iconv.output_encoding = [intl] ;intl.default_locale = ; This directive allows you to produce PHP errors when some error ; happens within intl functions. The value is the level of the error produced. ; Default is 0, which does not produce any errors. ;intl.error_level = E_WARNING [sqlite] ; http://php.net/sqlite.assoc-case ;sqlite.assoc_case = 0 [sqlite3] ;sqlite3.extension_dir = [Pcre] ;PCRE library backtracking limit. ; http://php.net/pcre.backtrack-limit ;pcre.backtrack_limit=100000 ;PCRE library recursion limit. ;Please note that if you set this value to a high number you may consume all ;the available process stack and eventually crash PHP (due to reaching the ;stack size limit imposed by the Operating System). ; http://php.net/pcre.recursion-limit ;pcre.recursion_limit=100000 [Pdo] ; Whether to pool ODBC connections. Can be one of \u0026#34;strict\u0026#34;, \u0026#34;relaxed\u0026#34; or \u0026#34;off\u0026#34; ; http://php.net/pdo-odbc.connection-pooling ;pdo_odbc.connection_pooling=strict ;pdo_odbc.db2_instance_name [Pdo_mysql] ; If mysqlnd is used: Number of cache slots for the internal result set cache ; http://php.net/pdo_mysql.cache_size pdo_mysql.cache_size = 2000 ; Default socket name for local MySQL connects. If empty, uses the built-in ; MySQL defaults. ; http://php.net/pdo_mysql.default-socket pdo_mysql.default_socket= [Phar] ; http://php.net/phar.readonly ;phar.readonly = On ; http://php.net/phar.require-hash ;phar.require_hash = On ;phar.cache_list = [mail function] ; For Unix only. You may supply arguments as well (default: \u0026#34;sendmail -t -i\u0026#34;). ; http://php.net/sendmail-path sendmail_path = /usr/sbin/sendmail -t -i ; Force the addition of the specified parameters to be passed as extra parameters ; to the sendmail binary. These parameters will always replace the value of ; the 5th parameter to mail(), even in safe mode. ;mail.force_extra_parameters = ; Add X-PHP-Originating-Script: that will include uid of the script followed by the filename mail.add_x_header = On ; The path to a log file that will log all mail() calls. Log entries include ; the full path of the script, line number, To address and headers. ;mail.log = ; Log mail to syslog; ;mail.log = syslog [SQL] ; http://php.net/sql.safe-mode sql.safe_mode = Off [ODBC] ; http://php.net/odbc.default-db ;odbc.default_db = Not yet implemented ; http://php.net/odbc.default-user ;odbc.default_user = Not yet implemented ; http://php.net/odbc.default-pw ;odbc.default_pw = Not yet implemented ; Controls the ODBC cursor model. ; Default: SQL_CURSOR_STATIC (default). ;odbc.default_cursortype ; Allow or prevent persistent links. ; http://php.net/odbc.allow-persistent odbc.allow_persistent = On ; Check that a connection is still valid before reuse. ; http://php.net/odbc.check-persistent odbc.check_persistent = On ; Maximum number of persistent links. -1 means no limit. ; http://php.net/odbc.max-persistent odbc.max_persistent = -1 ; Maximum number of links (persistent + non-persistent). -1 means no limit. ; http://php.net/odbc.max-links odbc.max_links = -1 ; Handling of LONG fields. Returns number of bytes to variables. 0 means ; passthru. ; http://php.net/odbc.defaultlrl odbc.defaultlrl = 4096 ; Handling of binary data. 0 means passthru, 1 return as is, 2 convert to char. ; See the documentation on odbc_binmode and odbc_longreadlen for an explanation ; of odbc.defaultlrl and odbc.defaultbinmode ; http://php.net/odbc.defaultbinmode odbc.defaultbinmode = 1 ;birdstep.max_links = -1 [Interbase] ; Allow or prevent persistent links. ibase.allow_persistent = 1 ; Maximum number of persistent links. -1 means no limit. ibase.max_persistent = -1 ; Maximum number of links (persistent + non-persistent). -1 means no limit. ibase.max_links = -1 ; Default database name for ibase_connect(). ;ibase.default_db = ; Default username for ibase_connect(). ;ibase.default_user = ; Default password for ibase_connect(). ;ibase.default_password = ; Default charset for ibase_connect(). ;ibase.default_charset = ; Default timestamp format. ibase.timestampformat = \u0026#34;%Y-%m-%d %H:%M:%S\u0026#34; ; Default date format. ibase.dateformat = \u0026#34;%Y-%m-%d\u0026#34; ; Default time format. ibase.timeformat = \u0026#34;%H:%M:%S\u0026#34; [MySQL] ; Allow accessing, from PHP\u0026#39;s perspective, local files with LOAD DATA statements ; http://php.net/mysql.allow_local_infile mysql.allow_local_infile = On ; Allow or prevent persistent links. ; http://php.net/mysql.allow-persistent mysql.allow_persistent = On ; If mysqlnd is used: Number of cache slots for the internal result set cache ; http://php.net/mysql.cache_size mysql.cache_size = 2000 ; Maximum number of persistent links. -1 means no limit. ; http://php.net/mysql.max-persistent mysql.max_persistent = -1 ; Maximum number of links (persistent + non-persistent). -1 means no limit. ; http://php.net/mysql.max-links mysql.max_links = -1 ; Default port number for mysql_connect(). If unset, mysql_connect() will use ; the $MYSQL_TCP_PORT or the mysql-tcp entry in /etc/services or the ; compile-time value defined MYSQL_PORT (in that order). Win32 will only look ; at MYSQL_PORT. ; http://php.net/mysql.default-port mysql.default_port = ; Default socket name for local MySQL connects. If empty, uses the built-in ; MySQL defaults. ; http://php.net/mysql.default-socket mysql.default_socket = ; Default host for mysql_connect() (doesn\u0026#39;t apply in safe mode). ; http://php.net/mysql.default-host mysql.default_host = ; Default user for mysql_connect() (doesn\u0026#39;t apply in safe mode). ; http://php.net/mysql.default-user mysql.default_user = ; Default password for mysql_connect() (doesn\u0026#39;t apply in safe mode). ; Note that this is generally a *bad* idea to store passwords in this file. ; *Any* user with PHP access can run \u0026#39;echo get_cfg_var(\u0026#34;mysql.default_password\u0026#34;) ; and reveal this password! And of course, any users with read access to this ; file will be able to reveal the password as well. ; http://php.net/mysql.default-password mysql.default_password = ; Maximum time (in seconds) for connect timeout. -1 means no limit ; http://php.net/mysql.connect-timeout mysql.connect_timeout = 60 ; Trace mode. When trace_mode is active (=On), warnings for table/index scans and ; SQL-Errors will be displayed. ; http://php.net/mysql.trace-mode mysql.trace_mode = Off [MySQLi] ; Maximum number of persistent links. -1 means no limit. ; http://php.net/mysqli.max-persistent mysqli.max_persistent = -1 ; Allow accessing, from PHP\u0026#39;s perspective, local files with LOAD DATA statements ; http://php.net/mysqli.allow_local_infile ;mysqli.allow_local_infile = On ; Allow or prevent persistent links. ; http://php.net/mysqli.allow-persistent mysqli.allow_persistent = On ; Maximum number of links. -1 means no limit. ; http://php.net/mysqli.max-links mysqli.max_links = -1 ; If mysqlnd is used: Number of cache slots for the internal result set cache ; http://php.net/mysqli.cache_size mysqli.cache_size = 2000 ; Default port number for mysqli_connect(). If unset, mysqli_connect() will use ; the $MYSQL_TCP_PORT or the mysql-tcp entry in /etc/services or the ; compile-time value defined MYSQL_PORT (in that order). Win32 will only look ; at MYSQL_PORT. ; http://php.net/mysqli.default-port mysqli.default_port = 3306 ; Default socket name for local MySQL connects. If empty, uses the built-in ; MySQL defaults. ; http://php.net/mysqli.default-socket mysqli.default_socket = ; Default host for mysql_connect() (doesn\u0026#39;t apply in safe mode). ; http://php.net/mysqli.default-host mysqli.default_host = ; Default user for mysql_connect() (doesn\u0026#39;t apply in safe mode). ; http://php.net/mysqli.default-user mysqli.default_user = ; Default password for mysqli_connect() (doesn\u0026#39;t apply in safe mode). ; Note that this is generally a *bad* idea to store passwords in this file. ; *Any* user with PHP access can run \u0026#39;echo get_cfg_var(\u0026#34;mysqli.default_pw\u0026#34;) ; and reveal this password! And of course, any users with read access to this ; file will be able to reveal the password as well. ; http://php.net/mysqli.default-pw mysqli.default_pw = ; Allow or prevent reconnect mysqli.reconnect = Off [mysqlnd] ; Enable / Disable collection of general statistics by mysqlnd which can be ; used to tune and monitor MySQL operations. ; http://php.net/mysqlnd.collect_statistics mysqlnd.collect_statistics = On ; Enable / Disable collection of memory usage statistics by mysqlnd which can be ; used to tune and monitor MySQL operations. ; http://php.net/mysqlnd.collect_memory_statistics mysqlnd.collect_memory_statistics = Off ; Size of a pre-allocated buffer used when sending commands to MySQL in bytes. ; http://php.net/mysqlnd.net_cmd_buffer_size ;mysqlnd.net_cmd_buffer_size = 2048 ; Size of a pre-allocated buffer used for reading data sent by the server in ; bytes. ; http://php.net/mysqlnd.net_read_buffer_size ;mysqlnd.net_read_buffer_size = 32768 [OCI8] ; Connection: Enables privileged connections using external ; credentials (OCI_SYSOPER, OCI_SYSDBA) ; http://php.net/oci8.privileged-connect ;oci8.privileged_connect = Off ; Connection: The maximum number of persistent OCI8 connections per ; process. Using -1 means no limit. ; http://php.net/oci8.max-persistent ;oci8.max_persistent = -1 ; Connection: The maximum number of seconds a process is allowed to ; maintain an idle persistent connection. Using -1 means idle ; persistent connections will be maintained forever. ; http://php.net/oci8.persistent-timeout ;oci8.persistent_timeout = -1 ; Connection: The number of seconds that must pass before issuing a ; ping during oci_pconnect() to check the connection validity. When ; set to 0, each oci_pconnect() will cause a ping. Using -1 disables ; pings completely. ; http://php.net/oci8.ping-interval ;oci8.ping_interval = 60 ; Connection: Set this to a user chosen connection class to be used ; for all pooled server requests with Oracle 11g Database Resident ; Connection Pooling (DRCP). To use DRCP, this value should be set to ; the same string for all web servers running the same application, ; the database pool must be configured, and the connection string must ; specify to use a pooled server. ;oci8.connection_class = ; High Availability: Using On lets PHP receive Fast Application ; Notification (FAN) events generated when a database node fails. The ; database must also be configured to post FAN events. ;oci8.events = Off ; Tuning: This option enables statement caching, and specifies how ; many statements to cache. Using 0 disables statement caching. ; http://php.net/oci8.statement-cache-size ;oci8.statement_cache_size = 20 ; Tuning: Enables statement prefetching and sets the default number of ; rows that will be fetched automatically after statement execution. ; http://php.net/oci8.default-prefetch ;oci8.default_prefetch = 100 ; Compatibility. Using On means oci_close() will not close ; oci_connect() and oci_new_connect() connections. ; http://php.net/oci8.old-oci-close-semantics ;oci8.old_oci_close_semantics = Off [PostgreSQL] ; Allow or prevent persistent links. ; http://php.net/pgsql.allow-persistent pgsql.allow_persistent = On ; Detect broken persistent links always with pg_pconnect(). ; Auto reset feature requires a little overheads. ; http://php.net/pgsql.auto-reset-persistent pgsql.auto_reset_persistent = Off ; Maximum number of persistent links. -1 means no limit. ; http://php.net/pgsql.max-persistent pgsql.max_persistent = -1 ; Maximum number of links (persistent+non persistent). -1 means no limit. ; http://php.net/pgsql.max-links pgsql.max_links = -1 ; Ignore PostgreSQL backends Notice message or not. ; Notice message logging require a little overheads. ; http://php.net/pgsql.ignore-notice pgsql.ignore_notice = 0 ; Log PostgreSQL backends Notice message or not. ; Unless pgsql.ignore_notice=0, module cannot log notice message. ; http://php.net/pgsql.log-notice pgsql.log_notice = 0 [Sybase-CT] ; Allow or prevent persistent links. ; http://php.net/sybct.allow-persistent sybct.allow_persistent = On ; Maximum number of persistent links. -1 means no limit. ; http://php.net/sybct.max-persistent sybct.max_persistent = -1 ; Maximum number of links (persistent + non-persistent). -1 means no limit. ; http://php.net/sybct.max-links sybct.max_links = -1 ; Minimum server message severity to display. ; http://php.net/sybct.min-server-severity sybct.min_server_severity = 10 ; Minimum client message severity to display. ; http://php.net/sybct.min-client-severity sybct.min_client_severity = 10 ; Set per-context timeout ; http://php.net/sybct.timeout ;sybct.timeout= ;sybct.packet_size ; The maximum time in seconds to wait for a connection attempt to succeed before returning failure. ; Default: one minute ;sybct.login_timeout= ; The name of the host you claim to be connecting from, for display by sp_who. ; Default: none ;sybct.hostname= ; Allows you to define how often deadlocks are to be retried. -1 means \u0026#34;forever\u0026#34;. ; Default: 0 ;sybct.deadlock_retry_count= [bcmath] ; Number of decimal digits for all bcmath functions. ; http://php.net/bcmath.scale bcmath.scale = 0 [browscap] ; http://php.net/browscap ;browscap = extra/browscap.ini [Session] ; Handler used to store/retrieve data. ; http://php.net/session.save-handler session.save_handler = files ; Argument passed to save_handler. In the case of files, this is the path ; where data files are stored. Note: Windows users have to change this ; variable in order to use PHP\u0026#39;s session functions. ; ; The path can be defined as: ; ; session.save_path = \u0026#34;N;/path\u0026#34; ; ; where N is an integer. Instead of storing all the session files in ; /path, what this will do is use subdirectories N-levels deep, and ; store the session data in those directories. This is useful if ; your OS has problems with many files in one directory, and is ; a more efficient layout for servers that handle many sessions. ; ; NOTE 1: PHP will not create this directory structure automatically. ; You can use the script in the ext/session dir for that purpose. ; NOTE 2: See the section on garbage collection below if you choose to ; use subdirectories for session storage ; ; The file storage module creates files using mode 600 by default. ; You can change that by using ; ; session.save_path = \u0026#34;N;MODE;/path\u0026#34; ; ; where MODE is the octal representation of the mode. Note that this ; does not overwrite the process\u0026#39;s umask. ; http://php.net/session.save-path ; RPM note : session directory must be owned by process owner ; for mod_php, see /etc/httpd/conf.d/php.conf ; for php-fpm, see /etc/php-fpm.d/*conf ;session.save_path = \u0026#34;/tmp\u0026#34; ; Whether to use strict session mode. ; Strict session mode does not accept uninitialized session ID and regenerate ; session ID if browser sends uninitialized session ID. Strict mode protects ; applications from session fixation via session adoption vulnerability. It is ; disabled by default for maximum compatibility, but enabling it is encouraged. ; https://wiki.php.net/rfc/strict_sessions session.use_strict_mode = 0 ; Whether to use cookies. ; http://php.net/session.use-cookies session.use_cookies = 1 ; http://php.net/session.cookie-secure ;session.cookie_secure = ; This option forces PHP to fetch and use a cookie for storing and maintaining ; the session id. We encourage this operation as it\u0026#39;s very helpful in combating ; session hijacking when not specifying and managing your own session id. It is ; not the be-all and end-all of session hijacking defense, but it\u0026#39;s a good start. ; http://php.net/session.use-only-cookies session.use_only_cookies = 1 ; Name of the session (used as cookie name). ; http://php.net/session.name session.name = PHPSESSID ; Initialize session on request startup. ; http://php.net/session.auto-start session.auto_start = 0 ; Lifetime in seconds of cookie or, if 0, until browser is restarted. ; http://php.net/session.cookie-lifetime session.cookie_lifetime = 0 ; The path for which the cookie is valid. ; http://php.net/session.cookie-path session.cookie_path = / ; The domain for which the cookie is valid. ; http://php.net/session.cookie-domain session.cookie_domain = ; Whether or not to add the httpOnly flag to the cookie, which makes it inaccessible to browser scripting languages such as JavaScript. ; http://php.net/session.cookie-httponly session.cookie_httponly = ; Handler used to serialize data. php is the standard serializer of PHP. ; http://php.net/session.serialize-handler session.serialize_handler = php ; Defines the probability that the \u0026#39;garbage collection\u0026#39; process is started ; on every session initialization. The probability is calculated by using ; gc_probability/gc_divisor. Where session.gc_probability is the numerator ; and gc_divisor is the denominator in the equation. Setting this value to 1 ; when the session.gc_divisor value is 100 will give you approximately a 1% chance ; the gc will run on any give request. ; Default Value: 1 ; Development Value: 1 ; Production Value: 1 ; http://php.net/session.gc-probability session.gc_probability = 1 ; Defines the probability that the \u0026#39;garbage collection\u0026#39; process is started on every ; session initialization. The probability is calculated by using the following equation: ; gc_probability/gc_divisor. Where session.gc_probability is the numerator and ; session.gc_divisor is the denominator in the equation. Setting this value to 1 ; when the session.gc_divisor value is 100 will give you approximately a 1% chance ; the gc will run on any give request. Increasing this value to 1000 will give you ; a 0.1% chance the gc will run on any give request. For high volume production servers, ; this is a more efficient approach. ; Default Value: 100 ; Development Value: 1000 ; Production Value: 1000 ; http://php.net/session.gc-divisor session.gc_divisor = 1000 ; After this number of seconds, stored data will be seen as \u0026#39;garbage\u0026#39; and ; cleaned up by the garbage collection process. ; http://php.net/session.gc-maxlifetime session.gc_maxlifetime = 1440 ; NOTE: If you are using the subdirectory option for storing session files ; (see session.save_path above), then garbage collection does *not* ; happen automatically. You will need to do your own garbage ; collection through a shell script, cron entry, or some other method. ; For example, the following script would is the equivalent of ; setting session.gc_maxlifetime to 1440 (1440 seconds = 24 minutes): ; find /path/to/sessions -cmin +24 -type f | xargs rm ; Check HTTP Referer to invalidate externally stored URLs containing ids. ; HTTP_REFERER has to contain this substring for the session to be ; considered as valid. ; http://php.net/session.referer-check session.referer_check = ; How many bytes to read from the file. ; http://php.net/session.entropy-length ;session.entropy_length = 32 ; Specified here to create the session id. ; http://php.net/session.entropy-file ; Defaults to /dev/urandom ; On systems that don\u0026#39;t have /dev/urandom but do have /dev/arandom, this will default to /dev/arandom ; If neither are found at compile time, the default is no entropy file. ; On windows, setting the entropy_length setting will activate the ; Windows random source (using the CryptoAPI) ;session.entropy_file = /dev/urandom ; Set to {nocache,private,public,} to determine HTTP caching aspects ; or leave this empty to avoid sending anti-caching headers. ; http://php.net/session.cache-limiter session.cache_limiter = nocache ; Document expires after n minutes. ; http://php.net/session.cache-expire session.cache_expire = 180 ; trans sid support is disabled by default. ; Use of trans sid may risk your users\u0026#39; security. ; Use this option with caution. ; - User may send URL contains active session ID ; to other person via. email/irc/etc. ; - URL that contains active session ID may be stored ; in publicly accessible computer. ; - User may access your site with the same session ID ; always using URL stored in browser\u0026#39;s history or bookmarks. ; http://php.net/session.use-trans-sid session.use_trans_sid = 0 ; Select a hash function for use in generating session ids. ; Possible Values ; 0 (MD5 128 bits) ; 1 (SHA-1 160 bits) ; This option may also be set to the name of any hash function supported by ; the hash extension. A list of available hashes is returned by the hash_algos() ; function. ; http://php.net/session.hash-function session.hash_function = 0 ; Define how many bits are stored in each character when converting ; the binary hash data to something readable. ; Possible values: ; 4 (4 bits: 0-9, a-f) ; 5 (5 bits: 0-9, a-v) ; 6 (6 bits: 0-9, a-z, A-Z, \u0026#34;-\u0026#34;, \u0026#34;,\u0026#34;) ; Default Value: 4 ; Development Value: 5 ; Production Value: 5 ; http://php.net/session.hash-bits-per-character session.hash_bits_per_character = 5 ; The URL rewriter will look for URLs in a defined set of HTML tags. ; form/fieldset are special; if you include them here, the rewriter will ; add a hidden \u0026lt;input\u0026gt; field with the info which is otherwise appended ; to URLs. If you want XHTML conformity, remove the form entry. ; Note that all valid entries require a \u0026#34;=\u0026#34;, even if no value follows. ; Default Value: \u0026#34;a=href,area=href,frame=src,form=,fieldset=\u0026#34; ; Development Value: \u0026#34;a=href,area=href,frame=src,input=src,form=fakeentry\u0026#34; ; Production Value: \u0026#34;a=href,area=href,frame=src,input=src,form=fakeentry\u0026#34; ; http://php.net/url-rewriter.tags url_rewriter.tags = \u0026#34;a=href,area=href,frame=src,input=src,form=fakeentry\u0026#34; ; Enable upload progress tracking in $_SESSION ; Default Value: On ; Development Value: On ; Production Value: On ; http://php.net/session.upload-progress.enabled ;session.upload_progress.enabled = On ; Cleanup the progress information as soon as all POST data has been read ; (i.e. upload completed). ; Default Value: On ; Development Value: On ; Production Value: On ; http://php.net/session.upload-progress.cleanup ;session.upload_progress.cleanup = On ; A prefix used for the upload progress key in $_SESSION ; Default Value: \u0026#34;upload_progress_\u0026#34; ; Development Value: \u0026#34;upload_progress_\u0026#34; ; Production Value: \u0026#34;upload_progress_\u0026#34; ; http://php.net/session.upload-progress.prefix ;session.upload_progress.prefix = \u0026#34;upload_progress_\u0026#34; ; The index name (concatenated with the prefix) in $_SESSION ; containing the upload progress information ; Default Value: \u0026#34;PHP_SESSION_UPLOAD_PROGRESS\u0026#34; ; Development Value: \u0026#34;PHP_SESSION_UPLOAD_PROGRESS\u0026#34; ; Production Value: \u0026#34;PHP_SESSION_UPLOAD_PROGRESS\u0026#34; ; http://php.net/session.upload-progress.name ;session.upload_progress.name = \u0026#34;PHP_SESSION_UPLOAD_PROGRESS\u0026#34; ; How frequently the upload progress should be updated. ; Given either in percentages (per-file), or in bytes ; Default Value: \u0026#34;1%\u0026#34; ; Development Value: \u0026#34;1%\u0026#34; ; Production Value: \u0026#34;1%\u0026#34; ; http://php.net/session.upload-progress.freq ;session.upload_progress.freq = \u0026#34;1%\u0026#34; ; The minimum delay between updates, in seconds ; Default Value: 1 ; Development Value: 1 ; Production Value: 1 ; http://php.net/session.upload-progress.min-freq ;session.upload_progress.min_freq = \u0026#34;1\u0026#34; [MSSQL] ; Allow or prevent persistent links. mssql.allow_persistent = On ; Maximum number of persistent links. -1 means no limit. mssql.max_persistent = -1 ; Maximum number of links (persistent+non persistent). -1 means no limit. mssql.max_links = -1 ; Minimum error severity to display. mssql.min_error_severity = 10 ; Minimum message severity to display. mssql.min_message_severity = 10 ; Compatibility mode with old versions of PHP 3.0. mssql.compatibility_mode = Off ; Connect timeout ;mssql.connect_timeout = 5 ; Query timeout ;mssql.timeout = 60 ; Valid range 0 - 2147483647. Default = 4096. ;mssql.textlimit = 4096 ; Valid range 0 - 2147483647. Default = 4096. ;mssql.textsize = 4096 ; Limits the number of records in each batch. 0 = all records in one batch. ;mssql.batchsize = 0 ; Specify how datetime and datetim4 columns are returned ; On =\u0026gt; Returns data converted to SQL server settings ; Off =\u0026gt; Returns values as YYYY-MM-DD hh:mm:ss ;mssql.datetimeconvert = On ; Use NT authentication when connecting to the server mssql.secure_connection = Off ; Specify max number of processes. -1 = library default ; msdlib defaults to 25 ; FreeTDS defaults to 4096 ;mssql.max_procs = -1 ; Specify client character set. ; If empty or not set the client charset from freetds.conf is used ; This is only used when compiled with FreeTDS ;mssql.charset = \u0026#34;ISO-8859-1\u0026#34; [Assertion] ; Assert(expr); active by default. ; http://php.net/assert.active ;assert.active = On ; Issue a PHP warning for each failed assertion. ; http://php.net/assert.warning ;assert.warning = On ; Don\u0026#39;t bail out by default. ; http://php.net/assert.bail ;assert.bail = Off ; User-function to be called if an assertion fails. ; http://php.net/assert.callback ;assert.callback = 0 ; Eval the expression with current error_reporting(). Set to true if you want ; error_reporting(0) around the eval(). ; http://php.net/assert.quiet-eval ;assert.quiet_eval = 0 [mbstring] ; language for internal character representation. ; This affects mb_send_mail() and mbstrig.detect_order. ; http://php.net/mbstring.language ;mbstring.language = Japanese ; Use of this INI entry is deprecated, use global internal_encoding instead. ; internal/script encoding. ; Some encoding cannot work as internal encoding. (e.g. SJIS, BIG5, ISO-2022-*) ; If empty, default_charset or internal_encoding or iconv.internal_encoding is used. ; The precedence is: default_charset \u0026lt; internal_encoding \u0026lt; iconv.internal_encoding ;mbstring.internal_encoding = ; Use of this INI entry is deprecated, use global input_encoding instead. ; http input encoding. ; mbstring.encoding_traslation = On is needed to use this setting. ; If empty, default_charset or input_encoding or mbstring.input is used. ; The precedence is: default_charset \u0026lt; intput_encoding \u0026lt; mbsting.http_input ; http://php.net/mbstring.http-input ;mbstring.http_input = ; Use of this INI entry is deprecated, use global output_encoding instead. ; http output encoding. ; mb_output_handler must be registered as output buffer to function. ; If empty, default_charset or output_encoding or mbstring.http_output is used. ; The precedence is: default_charset \u0026lt; output_encoding \u0026lt; mbstring.http_output ; To use an output encoding conversion, mbstring\u0026#39;s output handler must be set ; otherwise output encoding conversion cannot be performed. ; http://php.net/mbstring.http-output ;mbstring.http_output = ; enable automatic encoding translation according to ; mbstring.internal_encoding setting. Input chars are ; converted to internal encoding by setting this to On. ; Note: Do _not_ use automatic encoding translation for ; portable libs/applications. ; http://php.net/mbstring.encoding-translation ;mbstring.encoding_translation = Off ; automatic encoding detection order. ; \u0026#34;auto\u0026#34; detect order is changed according to mbstring.language ; http://php.net/mbstring.detect-order ;mbstring.detect_order = auto ; substitute_character used when character cannot be converted ; one from another ; http://php.net/mbstring.substitute-character ;mbstring.substitute_character = none ; overload(replace) single byte functions by mbstring functions. ; mail(), ereg(), etc are overloaded by mb_send_mail(), mb_ereg(), ; etc. Possible values are 0,1,2,4 or combination of them. ; For example, 7 for overload everything. ; 0: No overload ; 1: Overload mail() function ; 2: Overload str*() functions ; 4: Overload ereg*() functions ; http://php.net/mbstring.func-overload ;mbstring.func_overload = 0 ; enable strict encoding detection. ; Default: Off ;mbstring.strict_detection = On ; This directive specifies the regex pattern of content types for which mb_output_handler() ; is activated. ; Default: mbstring.http_output_conv_mimetype=^(text/|application/xhtml\\+xml) ;mbstring.http_output_conv_mimetype= [gd] ; Tell the jpeg decode to ignore warnings and try to create ; a gd image. The warning will then be displayed as notices ; disabled by default ; http://php.net/gd.jpeg-ignore-warning ;gd.jpeg_ignore_warning = 0 [exif] ; Exif UNICODE user comments are handled as UCS-2BE/UCS-2LE and JIS as JIS. ; With mbstring support this will automatically be converted into the encoding ; given by corresponding encode setting. When empty mbstring.internal_encoding ; is used. For the decode settings you can distinguish between motorola and ; intel byte order. A decode setting cannot be empty. ; http://php.net/exif.encode-unicode ;exif.encode_unicode = ISO-8859-15 ; http://php.net/exif.decode-unicode-motorola ;exif.decode_unicode_motorola = UCS-2BE ; http://php.net/exif.decode-unicode-intel ;exif.decode_unicode_intel = UCS-2LE ; http://php.net/exif.encode-jis ;exif.encode_jis = ; http://php.net/exif.decode-jis-motorola ;exif.decode_jis_motorola = JIS ; http://php.net/exif.decode-jis-intel ;exif.decode_jis_intel = JIS [Tidy] ; The path to a default tidy configuration file to use when using tidy ; http://php.net/tidy.default-config ;tidy.default_config = /usr/local/lib/php/default.tcfg ; Should tidy clean and repair output automatically? ; WARNING: Do not use this option if you are generating non-html content ; such as dynamic images ; http://php.net/tidy.clean-output tidy.clean_output = Off [soap] ; Enables or disables WSDL caching feature. ; http://php.net/soap.wsdl-cache-enabled soap.wsdl_cache_enabled=1 ; Sets the directory name where SOAP extension will put cache files. ; http://php.net/soap.wsdl-cache-dir ; RPM note : cache directory must be owned by process owner ; for mod_php, see /etc/httpd/conf.d/php.conf ; for php-fpm, see /etc/php-fpm.d/*conf soap.wsdl_cache_dir=\u0026#34;/tmp\u0026#34; ; (time to live) Sets the number of second while cached file will be used ; instead of original one. ; http://php.net/soap.wsdl-cache-ttl soap.wsdl_cache_ttl=86400 ; Sets the size of the cache limit. (Max. number of WSDL files to cache) soap.wsdl_cache_limit = 5 [sysvshm] ; A default size of the shared memory segment ;sysvshm.init_mem = 10000 [ldap] ; Sets the maximum number of open links or -1 for unlimited. ldap.max_links = -1 [mcrypt] ; For more information about mcrypt settings see http://php.net/mcrypt-module-open ; Directory where to load mcrypt algorithms ; Default: Compiled in into libmcrypt (usually /usr/local/lib/libmcrypt) ;mcrypt.algorithms_dir= ; Directory where to load mcrypt modes ; Default: Compiled in into libmcrypt (usually /usr/local/lib/libmcrypt) ;mcrypt.modes_dir= [dba] ;dba.default_handler= [curl] ; A default value for the CURLOPT_CAINFO option. This is required to be an ; absolute path. ;curl.cainfo = [openssl] ; The location of a Certificate Authority (CA) file on the local filesystem ; to use when verifying the identity of SSL/TLS peers. Most users should ; not specify a value for this directive as PHP will attempt to use the ; OS-managed cert stores in its absence. If specified, this value may still ; be overridden on a per-stream basis via the \u0026#34;cafile\u0026#34; SSL stream context ; option. ;openssl.cafile= ; If openssl.cafile is not specified or if the CA file is not found, the ; directory pointed to by openssl.capath is searched for a suitable ; certificate. This value must be a correctly hashed certificate directory. ; Most users should not specify a value for this directive as PHP will ; attempt to use the OS-managed cert stores in its absence. If specified, ; this value may still be overridden on a per-stream basis via the \u0026#34;capath\u0026#34; ; SSL stream context option. ;openssl.capath= ; Local Variables: ; tab-width: 4 ; End: roles install roles/php/install/tasks/main.yml - name: install yum: name={{ item }} state=latest with_items: - \u0026#34;{{ PHP.YUM.NAME }}\u0026#34; setup roles/php/setup/tasks/main.yml - name: copy php.ini copy: src={{ ENV }}/php/php.ini dest={{ PHP.INI.DIRECTORY }}/php.ini owner=root group=root notify: httpd restart tags: - always - name: copy index.php copy: src={{ ENV }}/php/index.php dest={{ HTTPD.DOCUMENT_ROOT_DIRECTORY }}/index.php owner=apache group=apache tags: - always playbook php-install.yml --- - hosts: all-servers become: yes roles: - php/install - php/setup handlers: - import_tasks: handlers/httpd/restart.yml 実行 playbook実行コマンド ansible-playbook \\ --private-key={秘密鍵へのパス} \\ -u {実行ユーザー} \\ -i inventories/local php-install.yml \\ -K ※実行ユーザーのパスワードの入力が求められます\n実行ログ SUDO password: PLAY [local-servers] *************************************************************************************************************************************** TASK [Gathering Facts] ************************************************************************************************************************************* ok: [127.0.0.1] TASK [php/install : install] ******************************************************************************************************************************* changed: [127.0.0.1] =\u0026gt; (item=[u\u0026#39;php56\u0026#39;]) TASK [php/setup : copy php.ini] **************************************************************************************************************************** changed: [127.0.0.1] TASK [php/setup : copy index.php] ************************************************************************************************************************** changed: [127.0.0.1] RUNNING HANDLER [httpd restart] **************************************************************************************************************************** changed: [127.0.0.1] PLAY RECAP ************************************************************************************************************************************************* 127.0.0.1 : ok=5 changed=4 unreachable=0 failed=0 確認 ブラウザで、http://localhost/にアクセスして、以下のような画面が表示されればインストール完了です♪\n","date":"2018-04-25T00:02:29+09:00","image":"/wp-content/uploads/2018/04/ansiblePhpInstallEye.png","permalink":"/2018/04/25/3720/","title":"【Ansible備忘録】PHP5.6をインストールするplaybook"},{"content":"記事内の特定の文字列を一括置換したい Wordpressを運用していて、サーバーを変えたりドメインを変えた場合、投稿記事内に古いURLを直接記述してしまっていると、移行後にエラーが表示されてしまう可能性があります。\n全ての記事の中身を確認して、手作業でURL等を直していくのはとても無理があります。(記事数が100件を超えると地獄を見ます。。。orz)\n魔法のようなSQL関数 そんな時は、SQLを使ってコマンド一発で全て置換しちゃいましょう！\nMySQLには様々な便利な関数が用意されています。\n今回は、その中のREPLACE関数を使用します。\nREPLACE関数とは、対象のデータ内の特定の文字列を別の文字列に置換することが可能な関数です。\n今回はLIKE句と合わせて利用して、変換対象の文字列を含んだデータを検索し、REPLACE関数で置換して、UPDATE文で更新する、という作業を行ってみましょう。\n手順 前提 Point\rPHPMyAdminインストール済み\rデータベースバックアップ済み\r※データベースのデータをSQLを変えるのは、危険を伴うのでデータベースのバックアップを必ず行ってください。\nまた、作業をする場合は自己責任でお願いします。\nSQLを用意 まずは、以下のような置換前と置換後の文字列を指定したSQLを用意してください。\nSQL UPDATE `wp_posts` SET post_content=REPLACE(post_content, \u0026#34;{置換前}\u0026#34;, \u0026#34;{置換後}\u0026#34;) where post_content like \u0026#34;%{置換前}%\u0026#34;; PHPMyAdminで実行 次に、PHPMyAdminにログインし、対象のデータベースを選択し、SQLタブを開き、SQLを貼り付けて、実行ボタンをクリックします。\n実行後、以下のように表示されれば一括置換が完了です。\n終わりに 上記のように、手作業でやると果てしない時間がかかるものも、便利な機能や関数を知っていれば一瞬で作業を終えることが出来ます。\n思い立ったらいきなり手を動かすより、まずは便利な方法がないか？と、調べる癖を付けると良いでしょう♪\n","date":"2018-04-24T01:57:21+09:00","image":"/wp-content/uploads/2018/04/bulkUpdateWordpressByPHPMyAdminEye.png","permalink":"/2018/04/24/3722/","title":"【移行時に便利】Wordpressの全記事内の投稿内容の文字列をSQLで一括置換してみよう"},{"content":"以下のようなエラーが。。。 DockerコンテナにMySQLをインンストールし、いざ起動をしようとすると以下のようなエラーが発生して起動出来ない事があると思います。\nError Log /etc/init.d/mysqld: line 23: /etc/sysconfig/network: No such file or directory ムムム。。。\n原因 これは/etc/sysconfig/networkというファイルが存在しないことが原因ぽいです。\n詳しい原因まではわかりませんが、Dockerコンテナを利用するとデフォルトでは上記のファイルは存在しないのですが、mysqlの起動にはこのファイルが必須らしいです。\n対応 なので、以下のコマンドでDockerコンテナに入り、\ncommand docker exec -it {Dockerコンテナ名} bash 以下のコマンドでnetworkファイルを作成しましょう。\ncommand echo \u0026#34;NETWORKING=yes\u0026#34; \u0026gt;/etc/sysconfig/network これでMySQLの起動は正常に完了しました。\n些細なことですが、知っていないとハマってしまう恐れのあるポイントですので、Dockerを使っているのであれば知っておくと良いでしょう♪\n","date":"2018-04-23T20:25:03+09:00","image":"/wp-content/uploads/2018/04/dockerInMySQLRunErrorEye.png","permalink":"/2018/04/23/3710/","title":"【Docker備忘録】DockerコンテナにインストールしたMySQL起動時の「/etc/sysconfig/network: No such file or directory」エラーの対象方法"},{"content":"恒例の謎書体紹介 以前、インパクトのある﴾pͪoͣnͬpͣoͥnͭpͣa͡inͥ﴿の表示方法について紹介させていただきました。\n関連記事 【腹痛い】吸引力がものすごいパワーワード「﴾pͪoͣnͬpͣoͥnͭpͣa͡inͥ﴿」の表示方法【ポンポンペイン】 2017/10/11 799文字 約2分で読めます そして、また最近似たような謎のワードを見つけてしまいました。。。。\n謎書体キタコレ！！！\n一目で分かる謎の言葉ですね。。。笑\n組み合わせ例\rቻﾝቻﾝがቺቻቺቻ\rቻቻがቺቻቺቻ\rቺｯቻቺቻのቺቻ\r[adsense-responsive]\rアムハラ語 これは、アムハラ語の文字らしいです。\nエチオピアの事実上の公用語になっているらしく、以下のような文字があります。\n※お使いのPCによって表示されない文字があります\nሀሁሂሃሄህሆሇለሉሊላሌልሎሏ\rሐሑሒሓሔሕሖሗመሙሚማሜምሞሟ\rሠሡሢሣሤሥሦሧረሩሪራሬርሮሯ\rሰሱሲሳሴስሶሷሸሹሺሻሼሽሾሿ\rቀቁቂቃቄቅቆቇቈ቉ቊቋቌቍ቎቏\rቐቑቒቓቔቕቖ቗ቘ቙ቚቛቜቝ቞቟\rበቡቢባቤብቦቧቨቩቪቫቬቭቮቯ\rተቱቲታቴትቶቷቸቹቺቻቼችቾቿ\rኀኁኂኃኄኅኆኇኈ኉ኊኋኌኍ኎኏\rነኑኒናኔንኖኗኘኙኚኛኜኝኞኟ\rአኡኢኣኤእኦኧከኩኪካኬክኮኯ\rኰ኱ኲኳኴኵ኶኷ኸኹኺኻኼኽኾ኿\rዀ዁ዂዃዄዅ዆዇ወዉዊዋዌውዎዏ\rዐዑዒዓዔዕዖ዗ዘዙዚዛዜዝዞዟ\rዠዡዢዣዤዥዦዧየዩዪያዬይዮዯ\rደዱዲዳዴድዶዷዸዹዺዻዼዽዾዿ\rጀጁጂጃጄጅጆጇገጉጊጋጌግጎጏ\rጐ጑ጒጓጔጕ጖጗ጘጙጚጛጜጝጞጟ\rጠጡጢጣጤጥጦጧጨጩጪጫጬጭጮጯ\rጰጱጲጳጴጵጶጷጸጹጺጻጼጽጾጿ\rፀፁፂፃፄፅፆፇፈፉፊፋፌፍፎፏ\rፐፑፒፓፔፕፖፗፘፙፚ፛፜፝፞፟\r፠፡።፣፤፥፦፧፨፩፪፫፬፭፮፯\r፰፱፲፳፴፵፶፷፸፹፺፻፼፽፾፿\r終わりに 見慣れない文字は色々な使い方があって面白いですね。笑\nこういう言葉遊びが出来るもの日本語の特徴ですかね♪\nこれからもどんどん紹介していこうと思います！！\n","date":"2018-04-21T14:31:39+09:00","image":"/wp-content/uploads/2018/04/chinchinMochimochiEye.png","permalink":"/2018/04/21/3671/","title":"【謎の呪文】「ቻﾝቻﾝがቺቻቺቻ」の表示方法【ちんちんがもちもち】"},{"content":"Templateのパーツ化 パーツ化の必要性 WebサイトやWebシステムを作成していると複数ページの中で似たような記述をする必要がある部分が出てくると思います。\nheadタグ/footerタグ/navタグ/汎用パーツ(プログレスサークル等)・・・\nこれらの情報をすべてのページのHTMLに同じように記述すると、修正が必要になった場合に同じ修正をHTML数分行わないといけなくなるので、保守がとても大変になってします。\ninclude 上記のような懸念の解消機能として、Djangoのtemplateにはインクルード機能が搭載されています。\nこの機能を利用することで、HTMLの任意の部分に別のHTMLの情報を追加することが可能になります。\nなので、汎用的なHTMLをパーツとして部分切り出しして管理した上で、各HTMLにてインクルードするようにすれば、一箇所修正すればすべてのページに修正が適用されるので、保守がとても簡単になります。\n使い方 インクルード機能を利用するには、HTMLを挿入したい部分に以下のカスタムタグを追記してください。\nインクルードカスタムタグ {% include \u0026#34;{挿入したHTMLへのパス}\u0026#34; %} 今回は例として以下のようなディレクトリ構造でtemplate/sample/index.htmlからtemplate/parts/common.htmlをインクルードしてみます。\nディレクトリ構造 birdBreeder ├── admin.py ├── apps.py ├── static │ ├── css │ │ ├── materialize.css │ │ ├── materialize.min.css │ │ └── style.css │ ├── image │ │ └── icon.png │ └── js │ ├── index.js │ ├── materialize.js │ └── materialize.min.js ├── templates │ ├── base.html │ ├── parts │ │ └── common.html │ └── sample │ └── index.html ├── urls │ └── main.py └── views ├── main.py └── sample └── main.py まずは以下のようなパーツHTMLを用意します。\ntemplates/parts/common.html \u0026lt;div\u0026gt; \u0026lt;p\u0026gt; 共通パーツだよ！ \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; 次に、上記パーツを読み込むインクルード指定を追加します。\ntemplates/sample/index.html ~省略~ \u0026lt;div\u0026gt; {% include \u0026#39;parts/common.html\u0026#39; %} \u0026lt;/div\u0026gt; ~省略~ 確認 では、実際にブラウザにアクセスして読み込まれているか確認してみましょう。\n正常にインクルードされていますね。\n終わりに DjangoのTemplate周りは他にも便利な機能がいろいろあるので、少しずつ紹介していけたらなと思います♪\n","date":"2018-04-20T23:02:37+09:00","image":"/wp-content/uploads/2018/04/djangoTemplateIncludeEye.png","permalink":"/2018/04/20/3428/","title":"【プログラミング備忘録】Djangoのテンプレートをパーツ化して読み込む方法"},{"content":"GoProのラインナップ GoProは最強のアクションカメラと思っている 筆者はGoProが大好きです。\nもちろん、ネームバリューのブランド性もありますが、画質や機能、持ち運び性がとても気に入っています。\nまた、アクセサリーも豊富ですし、何よりそのままで雪山や水中で撮影出来るのがとても助かります！\n毎回防水ケースに入れるのは地味にめんどくさいですし。。。(GoProHERO4まではそんな感じでしたorz)\n現在のGoProの機種 2018年現在、以下の機種がそれぞれ最新版のモデルとなっています。\nGoProHERO6 [embed]https://www.youtube.com/watch?v=vr0qNXmkUJ8[/embed]\rAmazon 【国内正規品】GoPro アクションカメラ HERO6 Black CHDHX-601-FW こちらはGoProの基本的なHEROシリーズの最新モデルです。\n通常撮影の他に、240fps(1080p)のスーパースローモーションや4K/60fps、タイムラプス、Raw形式での撮影が可能となっています。\nまた、タッチパネルディスプレイが標準で搭載されているので、画角の確認もしやすく、Protuneと呼ばれる細かい設定も可能です。\nGoProHERO5 Session [embed]https://www.youtube.com/watch?v=PjGkVCAo8Fw[/embed]\rAmazon 【国内正規品】 GoPro ウェアラブルカメラ HERO5 Session CHDHS-502-AP こちらはGoProの小型カメラSessionシリーズの最新モデルです。\n通常撮影の他に、240fps(720p)のスーパースローモーションや4K/30fps、タイムラプスの撮影が可能となっています。\nまた、Protuneと呼ばれる細かい設定も可能です。\nしかし、こちらのモデルには小型化するにあたり、ディスプレイの搭載がされていません。\n最小限の撮影状態の確認は可能ですが、それ以外の確認はスマートフォンアプリと連携して行う必要があります。\nGoProHERO Amazon 【国内正規品】GoPro HERO CHDHB-501-RW こちらはGoProの基本的なHEROシリーズのエントリー向けの最新モデルです。\n通常撮影の他に、1440/60fps、タイムラプスの撮影が可能となっています。\nまた、タッチパネルディスプレイが標準で搭載されているので、画角の確認もしやすいです。\nGoPro Fusion [embed]https://www.youtube.com/watch?v=MBOzgo1RA8U[/embed]\rAmazon 【国内正規品】GoPro Fusion CHDHZ-103-FW こちらはGoProの360°カメラのFusionシリーズの最新モデルです。\nこちらは全方位撮影が可能となっており、さらに5K/30fpsやRaw形式での撮影が可能となっています。\n日本では2018年4月2日に発売されたので、まだ復旧している最中だと思います。\nGoPro Karma [embed]https://www.youtube.com/watch?v=sIWwDH0mSb0[/embed]\rAmazon 【国内正規品】GoPro Karma Drone HERO5 Black カメラ付き QKWXX-511-JK こちらはGoProのドローンKarmaシリーズの最新モデルです。\nこちらはドローンを使った空撮が可能となっており、カメラ部分はGoProHERO6を使用した撮影が可能となっています。\nGoProの今後 新製品の期待 GoProはほぼ毎年新製品を発表しています。\n発売日(日本)\r商品名\r2016年10月8日\rGoPro HERO 5 Black\r2016年10月15日\rGoPro HERO5 Session\r2017年6月2日\rGoPro Karma\r2017年9月29日\rGoPro HERO 6 Black\r2018年4月2日\rGoPro HERO\r2018年4月2日\rGoPro Fusion\r今までは秋に新製品の発表をしていましたが、今回は4月に発表したので年内の新製品の発表は無いかもしれませんね。\n買収問題 筆者が気になっているのはこの件ですね。\nアメリカのGoPro社の買収を中国のXiaomi社が検討中とのニュースが4月12日に出ました。\nアクションカメラ界の立役者であるGoProですが、中国製の安価なアクションカメラの登場によって、現在は経営難に陥っているとのことです。\nこの買収が成立しても、GoProが無くなることはないと思いますが、今後の動向が気になりますね。\nちなみに、買収しようとしているこのXiaomi社も安価なアクションカメラを発売している会社の一つです。\nドローン事業の失敗 GoProは事業展開の一環として、GoPro Karmaを発売し、ドローン業界への参入を試みました。\nしかし、結果としては大失敗をしてしまい、2018年1月8日（米国時間）に正式にドローン事業からの撤退を発表しました。\nなので、現在販売中のドローン機種の「Karma」がGoProの最初で最後のドローン製品となります。\nとは言えやはり強い！ いろいろと気になる部分はありますが、やはりGoProは使いやすいですしデザインも良いと思っています。\n買収自体は悪いことではないので、買収によってGoProがさらに発展していけば良いなと思っています。\n","date":"2018-04-18T00:07:50+09:00","image":"/wp-content/uploads/2018/04/GoProItemEye.png","permalink":"/2018/04/18/3606/","title":"【HERO/Session】GoPro製品の最新ラインナップ一覧【Fusion/Karma】"},{"content":"おさらい 前回の記事ではAmazon Echo Plusと付属のPhilips Hueを連携して操作をしてみました。\n関連記事 【IoTの時代】Amazon Echo Plusを買ってPhilips Hueを操作してみた【Alexa】 2018/04/15 2825文字 約6分で読めます 今回はPhilips Hueの別製品を購入したので、こちらのセットアップ方法をまとめてみました。\n手順 購入 今回購入したのは以下の商品です。\nAmazon Philips Hue(ヒュー) スターターセット v3 929001367901【Works with Alexa認定製品】 こちらの商品は、1600万色以上のフルカラー変色にも対応をしています。\nただ、Amazon Echo Plusに付属されているHueLEDライトとは違い、単体ではAmazon Echo Plusとの連携は出来ません。\n代わりに、Hueブリッジと呼ばれるハブを利用する必要があります。\nなので、最初は上記のようなHue LEDライト+Hueブリッジが付いたスターターセットを購入すると良いでしょう。\n※Amazon Echo Plusとの連携もこのHueブリッジを介して連携を行います\nまた、こちらのLEDランプをつけるためのライトスタンドとして、以下も同時に購入しました。\nAmazon ボーベル(BeauBelle) フロアライト 3灯 アロンザフロア ブラック・ブラウン BBF-032 BB こちらのスタンドはE26口金系のLEDライト(60W)が3個まで同時利用可能だったので、ピッタリじゃん！という事で購入を決めました。\n結論としては、何も問題を起こさずに動作が確認取れましたのでオススメです♪\n開封の儀 こんな感じのパッケージとなっています。\n付属品は以下の6点です。\nPoint\rPhilips Hue シングルランプ v3 ×3個\rACアダプター\rPhilips Hue ブリッジ\r取扱い説明書\rセットアップ [adsense]\rHueブリッジの接続 まずは、Hueブリッジを設定しましょう。\nブリッジに電源ケーブルと有線LANケーブルを繋ぎインターネット環境を用意しましょう。\n以下のようにライトがつけばOKです。\nHueアプリのインストール 次にHueアプリをインストールしましょう。\nAmazon Echoのように、基本的な操作はHueアプリから行うことになります。\nご利用の端末に合わせてインストールしてください。\nダウンロードリンク\rAndroid\riOS\r今回はAndroidでのセットアップを進めていきます。\nHueアプリの初期設定 インストールが完了したらアプリを起動してください。\nすると、自動でHueブリッジの検出を始めます。\nHueブリッジが正常に動いていると、アプリがHueブリッジを検出するのでセットアップボタンをタップします。\nすると、Hueブリッジのプッシュリンクボタンを押すように言われるので押しましょう。\nすると、アプリの画面が以下のように切り替わるので、利用規約を確認の上問題が無ければチェックを入れて有効にするボタンをタップします。\n場合によっては、Hueブリッジの更新を促されるので今すぐ更新ボタンをタップしましょう。\n少し待つと正常に更新が完了するので、完了ボタンをタップします。\nルームのセットアップ すると、ルームのセットアップ画面が表示されます。\nHueブリッジでは、機器の管理をルームという単位で行います。\nルームはリビングやキッチン、寝室などの括りになっており、その中に各Hueデバイスを紐付ける形になります。\n今回はHueLEDライトを3つ購入しているので、この3つのLEDライトをリビングに設定してみます。\n右下の+ボタンをタップしましょう。\n次にルームの設定に関する説明が表示されますので、その通りに設定をしてみましょう。\nこれでルームのセットアップが完了しました！\nスタートボタンをタップしましょう。\n操作 ルーム全体のON/OFF 登録したルームが表示されていると思うので、右部のスイッチをタップしてみましょう。\nすると、アプリ上でルームが有効表示に変更され、設定したHueLEDランプ全てが点灯します。\nルーム全体の光量調整 LEDランプが点灯している状態でスライダー部分をスライドすると、光量を%で指定することが可能になります。\nルーム全体の詳細 ルームのアイコン部分をタップすると、LEDランプの詳細な操作が可能になります。\nカラー カラーの調整が可能です。\nホワイト ホワイト各種の調整が可能です。\nレシピ レシピの選択が可能です。\nライト単位のON/OFF ルームに登録しているライト単位で調整をしたい場合は、ルームの名称部分をタップすると個々のランプの操作画面が表示されるので、同じような操作が可能になります。\n終わりに 以上のように、とても簡単に照明器具をスマートホーム化することが出来ました。\nPhilips Hueは他にも様々な照明器具を販売していますが、全てHueブリッッジ経由でアプリ操作をすることが可能になるので、少しずつ照明器具をPhilips Hueに統一していくのも良いかもしれませんね。\n次回はPhilips HueとAmazon Echo Plusとの連携方法について紹介しょうと思います。\n","date":"2018-04-17T00:06:46+09:00","image":"/wp-content/uploads/2018/04/PhilipsHueSetupEye.png","permalink":"/2018/04/17/3547/","title":"【便利さに脱帽】Philips Hue ブリッジで照明器具をスマートホーム化してみた"},{"content":"ある日見覚えのない入金が 筆者は事業用の口座を用意しているため、基本的に現金の出納についてはそちらの通帳と比較してずれて無ければ問題無いと判断しています。\nしかし、ある日ふと経理整理をしていると見覚えの無い記載がありました。\nなにやら、預入残高に対する利息の入金らしいのですが、ではこれは経費をつけるときにどのような仕分けをすれば良いのか？という疑問が生まれました。\n仕分けは事業主借で良い 結論から言うと、この預金利息の勘定科目は「事業主借」で処理する事になります。\n※法人の場合には「受取利息」で仕訳しますが、個人事業では「事業主借」で仕訳しますので気をつけましょう\n借方勘定科目\r借方金額\r貸方勘定科目\r貸方金額\r摘要\r普通預金\r20円\r事業主借\r20円\r預金利息\r預金口座の利息は、「利子所得」に該当するため事業所得や不動産所得の収入になりません。\n利子所得は、原則としてあらかじめ税金が差し引かれた上で振り込まれます。 ちなみに、あらかじめ税金を差し引いた額をもらうことを源泉徴収と言います。\n上記を踏まえると、振り込まれた預金利息は税金がすでに源泉徴収されているので、振込金額全てが個人事業主の受け取り分になるので、事業用口座で預金利息を受け取った場合は、プライベートな入金があったと考えて「事業主借」で処理のが正解となります。\n終わりに おそらく独立して1~2年目でこのような事例が発生するので、最初はどうすれば分からないと思いますが、一度仕組みを理解してしまえば翌年以降はなにも問題なく仕分けを行えるようになると思うので、是非覚えておくと良いでしょう。\n","date":"2018-04-16T10:20:28+09:00","image":"/wp-content/uploads/2018/04/InterestOnDepositsEye.png","permalink":"/2018/04/16/3473/","title":"【覚えておくべき】事業用口座に振り込まれた預金利息の勘定項目のつけ方【経費】"},{"content":"Amazon Echo Plusの種類 購入しました！ 以前、最近話題のAIスピーカーの比較記事を紹介しました。\n関連記事 【人工知能と共存】今流行りのスマートスピーカーを比較してみた 2018/04/06 1733文字 約4分で読めます 筆者は、現在のシステム開発の仕事で、Amazon Web Serviceを利用しているという点と、Amazon Echo Plusを購入すると、無料でPhilips Hue ホワイトグラデーション シングルランプが付属されており、お得だしすぐに試せるという点に惹かれて購入しました。\n今回は初期設定から動作確認までの手順を紹介してみようと思います。\nどれが良いか？ まず、Amazon Echoには複数のサイズがあります。\n長所短所はあるので、好みに合う方を購入すると良いでしょう。\n筆者は今回はAmazon Echo Plusを購入してみました。\nAmazon Amazon Echo Dot (Newモデル)、ブラック Amazon Amazon Echo (Newモデル)、サンドストーン (ファブリック) Amazon Amazon Echo Plus (Newモデル)、スマートホームハブ内蔵、ブラック ちなみに、Amazon Echo Plusを買うと、今だと以下の商品が無料で付属されます。\nAmazon Philips Hue(ヒュー) ホワイトグラデーション シングルランプ 口金直径26mm 【Works with Alexa認定製品】 お得！！\n手順 購入 まずは、Amazonでポチりましょう。\n今回は前述でもお話しした通り、一番お高いAmazon Echo Plusを購入してみました。\nAmazon Amazon Echo Plus (Newモデル)、スマートホームハブ内蔵、ブラック 開封の儀 2日ほどで商品が届きました！\n安定のAmazonスマイルマーク。笑\n入っているものは、以下の3点のみです。\nPoint\rAmazon Echo 本体\rACアダプター\r取扱説明書\rセットアップ 電源の接続 まずは、ACアダプターをコンセントに刺してからAmazon Echo本体に繋げましょう。\nすると、勝手に電源が入り、「こんにちは。Amazon Echo Plusのセットアップ準備ができました。Alexaアプリの手順にしたがって、セットアップを行ってください。」と自動音声が流れます。\nちょっとボリュームが大きめなので注意しましょう。笑\n上のLEG部分がくるくる光っております。\n音量の調整 まず、セットアップを進める前に音量を調整しておきましょう。\n初期だとちょっと音声のボリュームが大きめです。\nさて、音量を下げようかな。と思ったのですが音量ボタンがどこにもありません。。。orz\nなんと、Amazon Echo Plusでは音量を調整するには以下のように上部のLED部分を回すことで調整をするようです。\nなんか画期的ですね。笑\nAlexaアプリのインストール 次に、セットアップをするためのAlexaアプリをインストールします。\nご利用の端末に合わせてインストールしてください。\nDownloadリンク\riOS\rAndroid\r今回はAndroidでのセットアップを進めてみます。\nセットアップ Alexaアプリのインストールが完了したら、実際にAmazon Echoのセットアップをしていきましょう。\nまず、Alexaアプリを起動するとAmazonアカウントでのログインを求められるのでメールアドレスとパスワードを入力し、ログインボタンをタップします。\n次に、利用条件が表示されるので、確認の上問題が無ければ続行ボタンをタップします。\n次に、セットアップするAmazon Echoの種類の選択を求められます。\n今回はAmazon Echo PlusなのでEcho Plusをタップします。\n次に言語の設定を行います。\nデフォルトで日本語が選ばれていると思うので、そのまま続行ボタンをタップします。\n次に、Wifiの設定を行います。\nAmazon Echoは音声インターフェースにてインターネットを介して操作をしてくれるのでWifiの設定は必須です。\nWI-FIに接続ボタンをタップします。\n次に、電源を入れてセットアップ待機にするように言われますが、先ほど行っているので続行ボタンをタップします。\nすると、以下のような画面が表示されますので端末のWifi設定画面にて設定を行いましょう。\nAmazon-XXXというWifiが見つかると思うのでアップをしましょう。\n※接続は出来ますが接続先にインターネット接続がありません。と出ますがこの時点ではまだ良いです\n接続が完了すると「Echo Plusに接続できました。Alexaアプリでセットアップを完了してください。」と言う音声が流れます。\nビックリしました。笑\nAlexaアプリに戻ると、以下のように接続完了画面が表示されていると思うので、続行ボタンをタップします。\n次にAmazon Echoが接続するWifiの設定を行います。\n任意のWifiネットワークをタップします。\nWifiの暗証番号を入力し、接続ボタンをタップします。\nすると、セットアップをしてくれるので少し待ちましょう。\n以下の画面が表示されたらWifiへの接続が完了したので、続行ボタンをタップします。\n次にEcho Plusの構成を求められます。\n今回は特に用意していないのでスピーカーなしをタップします。\nこれで初期設定は完了です。\n初めて利用する方は紹介動画があるのでタップして確認しておきましょう。\n動作確認 再度、アプリを起動すると以下のような画面になります。\n試しに、「アレクサ、『おかあさんといっしょそングス』をかけて」と言うと反応して音楽が流れ始めます。\nキタコレ！！！\nAmazon Echo本体の初期設定はこれで完了です♪\nとても簡単でしたね。\nPhilips Hueの設定 次に、付属のPhilips HueのランプをAmazon Echoと連携してみましょう。\n開封の儀 付属品は以下の2つです。\nPoint\rPhilips Hue ランプ(E26口金)\r取扱\bい説明書\r設定 では、実際にAmazon Echoで操作出来るようにしてみましょう。\nランプを照明器具に接続します。\n次に照明の電源を入れてライトを点灯状態にした上で、「アレクサ、デバイスを探して」と呼びかけます。\nすると、自動でデバイスを登録してくれます。\n今回は「一番目ライト」という名称で登録をしたとアレクサが伝えてくれます。\n確認 では、実際にアレクサ経由でPhilips Hue ランプを制御してみましょう。\n「アレクサ、一番目ライトをONにして」と言うと、照明がつきます。\n「アレクサ、一番目ライトをOFFにして」と言うと、照明が消えます。\nしゅごい。\nデバイスの管理 登録したデバイス情報は、Alexaアプリから変更/操作をすることも可能です。\nまずは、アプリの左上部のメニューボタンをクリックします。\nサイドメニューが表示されるので、スマートホームをタップします。\nすると、現在登録されているデバイス一覧が表示されます。\n終わりに 以上のように、Amazon EchoのセットアップとPhilips Hue ランプのセットアップも特に詰まることなく終えることが出来ました。\n今後、\b多くの家電はAIスピーカーとの連携に力を入れてくることは間違いないので、皆さんも是非購入してみてはいかがでしょうか？\n","date":"2018-04-15T00:22:08+09:00","image":"/wp-content/uploads/2018/04/amazonEchoSettingEye.png","permalink":"/2018/04/15/3537/","title":"【IoTの時代】Amazon Echo Plusを買ってPhilips Hueを操作してみた【Alexa】"},{"content":"ディレクトリ構造の表現方法 ディレクトリ構造をうまく表現したい 主にインフラ構築やWebシステムを開発していると、他の開発者にディレクトリ構造を共有したいという場合があると思います。\nその場合、自分でFinderやエクスプローラーを開きながら手打ちでディレクトリ構造をテキストエディターで作ると、ディレクトリ構造が複雑な場合に確実に死亡しますし、タイポやコピペミスで間違ったディレクトリ構造になってしまい、結果として正しくない情報を共有してしまう恐れがあります。\nまた、自前でディレクトリ構造を表現する場合、以下のような文字記号を利用して表現すると思いますが、半角や全角がまじるとうまくインデントが表現されずに見にくくなってしまうことも多々あります。\n罫線一覧 ┣ ┠ ┝ ├ ┫ ┨ ┥ ┤ │ ┃ ─ ━ ┌ ┏ ┓ ┐ └ ┗ ┛ ┘ 試しに以下のようなディレクトリを自前で上記の罫線で表現してみましょう。\nディレクトリ構造サンプル ../../../directory/tree ├──.DS_Store ├──.private │ └──security.txt ├──common │ └──common.html ├──empty ├──fuga │ └──fuga.html ├──hoge │ └──hoge.index └──日本語 └──こんにちは └──hello.txt すごくめんどくさいです。。。\ntreeコマンド そんな苦難から助けてくれるのがtreeコマンドです！\nこのコマンドを使えば、一発でディレクトリをテキスト表示してくれるので、正確な情報を抽出する事が可能になります。\n筆者はプログラミング関連の記事を多く執筆しているので、多用しています！！\nMacであれば、Homebrewから簡単にインストールする事が可能です。\n手順 インストール まずはtree本体をHomebrewでインストールしましょう。\n以下のコマンドを実行してください。\ncommand brew install tree 以下のような実行ログが表示されればインストール完了です。\n実効ログ ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/tree-1.7.0.el_capitan.bottle.1.tar.gz Already downloaded: /Users/{ユーザー名}/Library/Caches/Homebrew/tree-1.7.0.el_capitan.bottle.1.tar.gz ==\u0026gt; Pouring tree-1.7.0.el_capitan.bottle.1.tar.gz 🍺 /usr/local/Cellar/tree/1.7.0: 7 files, 113.4KB 使い方 まずはシンプルなディレクトリ構造を出力してみましょう。\n出力したいディレクトリにて、以下のコマンドを実行してみてください。\ncommand tree 以下のような表示になり、再起的にディレクトリ情報が表示されます。\n実効ログ . ├── common │ └── common.html ├── empty ├── fuga │ └── fuga.html ├── hoge │ └── hoge.index └── �\\227��\\234��\\236 └── �\\201\\223�\\202\\223�\\201��\\201��\\201� └── hello.txt しかし、日本語が文字化けしちゃってますね。。。\nオプション [adsense]\r日本語文字化け対応 -Nをつけて実効することで日本語が含まれていても文字化けすることなく表示することが可能になります。\n日本語文字化け対応 tree -N . ├── common │ └── common.html ├── empty ├── fuga │ └── fuga.html ├── hoge │ └── hoge.index └── 日本語 └── こんにちは └── hello.txt 空ディレクトリ非表示 --pruneをつけることで、ファイルが一つも存在しないディレクトリの出力を対象外にすることが可能になります。\n除外 tree --prune -N . ├── common │ └── common.html ├── fuga │ └── fuga.html ├── hoge │ └── hoge.index └── 日本語 └── こんにちは └── hello.txt 出力階層指定 -L {表示したい階層数}をつけることで、特定の階層までの出力に制御することが可能になります。\n出力階層指定 tree -L 2 -N . ├── common │ └── common.html ├── empty ├── fuga │ └── fuga.html ├── hoge │ └── hoge.index └── 日本語 └── こんにちは 相対パス表示 -f {パターン}をつけることで、実行ディレクトリからの相対パスでの出力をすることが可能になります。\n除外 tree -f -N . ├── ./common │ └── ./common/common.html ├── ./empty ├── ./fuga │ └── ./fuga/fuga.html ├── ./hoge │ └── ./hoge/hoge.index └── ./日本語 └── ./日本語/こんにちは └── ./日本語/こんにちは/hello.txt パターン指定 -P {パターン}をつけることで、パターンにマッチする情報のみ出力することが可能になります。\n正規表現での指定も可能です。\n※パターンにマッチするファイルがなくてもディレクトリは表示されてしまいます\nなので、--pruneオプションと組み合わせて使いましょう。\n除外 tree -P \u0026#39;fuga.html\u0026#39; -N . ├── common ├── empty ├── fuga │ └── fuga.html ├── hoge └── 日本語 └── こんにちは 除外 -I {場外対象}をつけることで、特定のディレクトリやファイルを除外して出力することが可能になります。\nもちろん、正規表現での指定も可能です。\n除外 tree -I 日本語 . ├── common │ └── common.html ├── empty ├── fuga │ └── fuga.html └── hoge └── hoge.index 複数除外 複数のファイルやディレクトリを場外したい場合、以下のように実行すると期待通りの出力になりません。\n複数除外(失敗) tree -I common -I 日本語 . ├── common │ └── common.html ├── empty ├── fuga │ └── fuga.html └── hoge └── hoge.index 原因としては、-Iオプションは複数指定する場合は-Iオプションを複数つけるのではなく、以下のように除外対象を「|(パイプ)」で区切って指定する必要があります。\n複数除外(成功) tree -I \u0026#34;common|日本語\u0026#34; . ├── empty ├── fuga │ └── fuga.html └── hoge └── hoge.index ディレクトリのみ出力 -dをつけることで、出力結果をディレクトリのみに絞ることが可能になります。\nディレクトリのみ tree -d -N . ├── common ├── empty ├── fuga ├── hoge └── 日本語 └── こんにちは 隠しファイル出力 -aをつけることで、隠しファイルや隠しフォルダも出力対象に含まれるようになります。\n※デフォルトでは出力対象外\n隠しファイル出力 tree -a -N . ├── .DS_Store ├── .private │ └── security.txt ├── common │ └── common.html ├── empty ├── fuga │ └── fuga.html ├── hoge │ └── hoge.index └── 日本語 └── こんにちは └── hello.txt ファイルサイズ出力 -hをつけることで、ファイルサイズも出力対象に含まれるようになります。\n隠しファイル出力 tree -h -N . ├── [ 102] common │ └── [ 0] common.html ├── [ 68] empty ├── [ 102] fuga │ └── [ 0] fuga.html ├── [ 102] hoge │ └── [ 0] hoge.index └── [ 102] 日本語 └── [ 102] こんにちは └── [ 0] hello.txt オーナー情報出力 -uをつけることで、オーナー情報も出力対象に含まれるようになります。\n隠しファイル出力 tree -u -N . ├── [{ユーザー名} ] common │ └── [{ユーザー名} ] common.html ├── [{ユーザー名} ] empty ├── [{ユーザー名} ] fuga │ └── [{ユーザー名} ] fuga.html ├── [{ユーザー名} ] hoge │ └── [{ユーザー名} ] hoge.index └── [{ユーザー名} ] 日本語 └── [{ユーザー名} ] こんにちは └── [{ユーザー名} ] hello.txt グループ情報出力 -gをつけることで、グループ情報も出力対象に含まれるようになります。\n隠しファイル出力 tree -g -N . ├── [{グループ名} ] common │ └── [{グループ名} ] common.html ├── [{グループ名} ] empty ├── [{グループ名} ] fuga │ └── [{グループ名} ] fuga.html ├── [{グループ名} ] hoge │ └── [{グループ名} ] hoge.index └── [{グループ名} ] 日本語 └── [{グループ名} ] こんにちは └── [{グループ名} ] hello.txt ファイル出力 -oをつけることで、出力内容をファイルに書き出すことが可能です。\n隠しファイル出力 tree -o tree -N cat tree . ├── common │ └── common.html ├── empty ├── fuga │ └── fuga.html ├── hoge │ └── hoge.index ├── tree └── 日本語 └── こんにちは └── hello.tx 終わりに [adsense]\r以上のように、手作業でやるにはリスクや手間のかかるところをコマンド一発で正確な情報を作成することが可能になります。\nまた、今回紹介しきれなかった便利なオプションもまだまだあります。\n開発をしている方なら必ず役に立つツールだと思いますので、是非使ってみてください♪\n","date":"2018-04-14T17:00:07+09:00","image":"/wp-content/uploads/2018/04/treeCommandEye.png","permalink":"/2018/04/14/3443/","title":"【めちゃくそ便利】treeコマンドでディレクトリ構造を出力しよう！【オプション多数】"},{"content":"Templateでの配列操作 ループ処理 サーバーロジックで配列をレスポンスとして返した場合、テンプレート側でリスト表示したい事があると思います。\nサーバー側 response = { \u0026#39;numbers\u0026#39;: [1,2,3,4,5] } return render(request, \u0026#39;list/index.html\u0026#39;, response) その場合は以下のように記述する事で配列をループ操作する事が可能になります。\nTemplate側 \u0026lt;div\u0026gt; {% for user in users %} \u0026lt;p\u0026gt;Name:{{user.name}}\u0026lt;/p\u0026gt; \u0026lt;p\u0026gt;Age:{{user.age}}\u0026lt;/p\u0026gt; {% endfor %} \u0026lt;/div\u0026gt; 配列の要素数 レスポンスに含まれる配列の要素数を取得したいケースもあると思います。\nその場合、以下のようにlen関数を使って取得しがちです。\nTemplate側 \u0026lt;p\u0026gt;Count:{{len(users)}}\u0026lt;/p\u0026gt; しかし、Djangoではエラーになってしまいます。\nエラー django.template.exceptions.TemplateSyntaxError: Could not parse the remainder: \u0026#39;(users)\u0026#39; from \u0026#39;len(users)\u0026#39; len関数はTemplate側では定義されていないので使う事が出来ません。\n正しくは以下のように「{配列}|(パイプ)length」を利用して取得します。\nAngulerJSのフィルターみたいな感じになりますね。\nTemplate側 \u0026lt;p\u0026gt;Count:{{users|length}}\u0026lt;/p\u0026gt; 無事に表示されましたね。\n","date":"2018-04-09T23:19:57+09:00","image":"/wp-content/uploads/2018/04/djangoTemplateEye.png","permalink":"/2018/04/09/3209/","title":"【プログラミング備忘録】Djangoのテンプレートでの配列操作(ループ/件数取得)について"},{"content":"Docker管理の課題 複数コンテナ管理のしにくさ 以前、Dockerfileを使ってコンテナを作成し、runコマンドを使ってコンテナを起動する方法を紹介しました。\n関連記事 【簡単サーバー構築】Dockerfileでnginxを立ち上げてみよう！ 2018/02/18 1282文字 約3分で読めます 単体のコンテナを起動して、単一のコンテナだけで完結するのであれば、コマンド一発で起動/停止を実行出来るのでそこまで使いづらさを感じることはありませんが、Docker内に複数のコンテナを起動し、それぞれで連携をするような構成にした場合、コマンドを実行する回数が増えてしまい、とても管理しにくい状態になってしまいます。\n例として、以下の記事でやったようなRedmineとMySQLを同時に動かす場合を考えてみましょう。\n関連記事 【炎上回避】 DockerにRedmineをインストールしてプロジェクト管理ツールを導入してみよう 2018/04/04 1825文字 約4分で読めます 起動するたびにコンテナの台数分コマンドを投げて動かす必要があるのですが、コンテナ数が増えると毎回コマンドを打つのはとても手間になってしまいます。\nまた、Shellスクリプトにしてもいいですが、多少複雑なスクリプトを書く必要がありちょっと敷居が高いです。\nそんな時にDockerCompose そんな複数のコンテナ管理を簡単にしてくれるツールが「Docker Compose」です。\ndocker-composeファイルに各コンテナの情報を記載し、起動コマンドで読み込ませることで一気に複数のコンテナを起動することが可能です。\nまた、docker-comoposeファイルはyaml形式での記述なので、スマートに設定を記述することが出来ます。\n今回は直接dockerコマンドで起動していたRedmineとMySQLをdocker-composeで起動するようにリファクタリングしてみましょう。\n手順 前提 Point\rDockerインストール済み(docker for macでインストール可能)\rDockerComposeインストール済み(docker for macでインストール可能)\rRedmineのDockerイメージ取得済み\rMySQLのDockerイメージ取得済み\r参考 関連記事 【楽チン素敵】Homebrew Caskを使ってDocker for macのインストールしてみる 2018/01/21 920文字 約2分で読めます 関連記事 【炎上回避】 DockerにRedmineをインストールしてプロジェクト管理ツールを導入してみよう 2018/04/04 1825文字 約4分で読めます docker-compose.ymlの作成 dockerコマンドで直接2つのコンテナを起動していた部分をdocker-composeに書き直すと以下のようになります。\n※docker-composeで動くように多少変更しています\ndocker-compose.yml version: \u0026#39;2\u0026#39; services: mysql-redmine: image: sameersbn/mysql:latest volumes: - {任意のディレクトリ}/redmine/datastore/mysql:/var/lib/mysql environment: - DB_NAME=redmine_production - DB_USER=redmine - DB_PASS=redpass redmine: image: sameersbn/redmine:3.3.1 ports: - \u0026#34;80:80\u0026#34; environment: - DB_HOST=mysql-redmine - DB_NAME=redmine_production - DB_USER=redmine - DB_PASS=redpass volumes: - {任意のディレクトリ}/redmine/datastore/redmine:/home/redmine/data links: - mysql-redmine 確認 では、実際に確認してみましょう。\n以下のコマンドで起動が出来ます。\ncommand docker-compose up -d 以下のようなログが出力されてコンテナが起動されます。\nlog Creating dockercomposesample_mysql-redmine_1 ... done Creating dockercomposesample_mysql-redmine_1 ... Creating dockercomposesample_redmine_1 ... done http://localhost/にアクセスして以下の画面が表示されればdocker-composeへのリファクタリング完了です。\n終わりに 以上のように、起動オプションをファイル管理出来るようになるので可視性や保守性が上がり、起動もコマンド一発で済むようになりました。\ndockerの技術はまだまだ発展しており、複数のコンテナを起動してサービスを実現する事も少なくないので、是非docker-composeの導入をされて見てはいかがでしょうか♪\n","date":"2018-04-07T23:54:33+09:00","image":"/wp-content/uploads/2018/04/DockerComposeEye.png","permalink":"/2018/04/07/2167/","title":"【Dockerサービスの必須ツール】docker-composeで複数コンテナを簡単管理"},{"content":"スマートスピーカー スマートスピーカーとは？ 世の中はAIの発展が進んできています。\nスマートフォンやペッパー君、自動車の自動運転などかなり身近なところに存在しています。\nスマートスピーカーはその中でも最近登場したアイテムとなります。\nまた、スマートスピーカーは、基本的に対話型の音声操作に対応したAIアシスタントを利用可能なスピーカーの事を指しており、、AIスピーカーとも呼ばれます。\nでは、どのようなスマートスピーカーがあるのかを紹介していきます。\nどんな種類があるの？ Google Home まずはGoogleHomeです。\nこちらはGoogleが発売しているスマートスピーカーとなっており、Google Assistance（グーグルアシスタンス）と呼ばれるAIを搭載しています。\nまた、GoogleMapやGoogle検索等のサービスと密に連携が取れるため、一番普及していると言えます。\nPoint\r2017年10月6日発売\r小型で安価な「Google Home Mini」と通常スペックの「Google Home」がある(高性能版の「Google Home Max」は日本未発売)\rGoogle Homeは15,120円/Google Home Miniは6,480円\rGoogleの各種サービス(検索やGoogleMap、Googleカレンダー、Gmail等)と連携可能\r日本語での対話音声認識能力が優秀\rGoogle製品(Android端末やChromeCast等)と連携可能\rActions on Googleで機能拡張可能\rGoogle Play Musicで楽曲の再生可能\rAmazon Echo 次に紹介するのはAmazon Echoです。\nこちらはAmazonが発売しているスマートスピーカーとなっており、Alexa(アレクサ)と呼ばれるAIを搭載しています。\n2018年4月までは招待制の販売しか対応していませんでしたが、2018年4月からは一般販売をされるようになったので、これから普及していく事が予想されます。\nまた、Amazonと連携しているので、簡単に商品を購入する事が可能です。\nPoint\r2017年11月15日発売\r小型で安価な「Amazon Echo Dot」、通常スペックの「Amazon Echo」、高性能版の「Amazon Echo Plus」がある\rAmazon Echo Dotが5,980円/Amazon Echoが11,980円/Amazon Echo Plusが17,980円\rAmazonの各サービス(通販、Prime、Musicなど)と連携可能\rAmazonPrime会員への割引サービスがある\rAlexaスキルで機能拡張可能\rLF-S50G 次に紹介するのはLF-S50Gです。\nこちらはSonyが発売しているスマートスピーカーで、搭載しているのはGoogle Assistanceなので、出来ることは基本的にGoogle Homeと同じとなっています。\nただ、全方向に広がる360°サウンドを搭載したり、IPX3相当の生活防水を満たしているので、水回り周辺での利用に配慮していたりと、他のスマートスピーカーに負けないように独自の機能を搭載しています。\nPoint\r2017年12月9日発売\rAmazon Echo Dotが24,880円/Amazon Echoが11,980円/Amazon Echo Plusが17,980円\rAmazonの各サービス(通販、Prime、Musicなど)と連携可能\r360度スピーカー\r生活防水仕様\rジェスチャーによる操作\rClova WAVE 次に紹介するのはClova WAVEです。\nこちらはLineが発売しているスマートスピーカーとなっており、Clova(クローバ)と呼ばれるAIアシスタントを搭載しています。\n最大の特徴はやはりLineアプリとの連携でしょう。\nメッセージの読み上げや送信をサポートしており、またLineミュージックやLineニュースにも対応しているので意外と出来ることが多いです。\nPoint\r2017年10月5日発売\r小型の「Clova Friends」がある\rClova WAVEが14,000円/Friendsが8,640円\rLine通話が無料\rLINEプラットフォーム(LINE, LINE News, LINE Musicなど)との連携可能\r終わりに 今回紹介しなかったスマートスピーカーも発売されていますが、メインは今回紹介した4つに絞られると思われます。\n筆者も先日AmazonEchoを購入してみましたので、到着したら使い方を記事にしてみようと思っていますので、宜しければそちらも見て頂ければなと思います♪\n","date":"2018-04-06T00:03:24+09:00","image":"/wp-content/uploads/2018/04/smartSpeakerEye.png","permalink":"/2018/04/06/3331/","title":"【人工知能と共存】今流行りのスマートスピーカーを比較してみた"},{"content":"プロジェクト管理ツールの必要性 プロジェクト管理ツール？ システム開発やサイト制作を行っていると、納期を守りながら、必要ページや機能等を実装しなければなりません。\n案件の規模によっては複数人で作業分担を行って作業を進めるのですが、各自の進捗や残タスクの管理を、メールやエクセル等での管理していると、必ず意思疎通が疎かになりに、認識のズレ等が発生し、結果として納期間際に大変な思いをする(いわゆる炎上)事が多々あると思います。\n炎上を避けるためには、プロジェクトをうまく回す必要があるのですが、プロジェクト管理をサポートするためのツールももちろん存在しています。\nその中でも以下の2つのツールが現在のIT業界ではメジャーとなっています。\nRedmine Redmineとは、プロジェクト管理ができるオープンソースソフトウェアです。\n複数のメンバーで、作業タスクの管理や進捗管理等の共有を、オンライン上で行うことを可能にするツールです。\nこちらは、サーバーにインストールして構築することで利用可能になります。\n多少の導入コストはかかりますが、その分カスタマイズ等も出来るので柔軟性は高いです。\nもちろんRedmine自体は無料です。(負担はサーバー代のみ)\nBacklog 一方で、Backlogという同じようなプロジェクト管理ツールが最近盛り上がってきています。\nこちらは、クラウドサービス型のツールとなっています。\n\u0010Redmineと違い、インストール等をする必要が無く、登録手続きだけ行えばすぐに利用が可能となっています。\nこちらは1プロジェクト10メンバーまでなら無料で利用することが出来ます。\nそれ以上の規模になると料金が発生しますので気をつけてください。\nRedmineならDockerで簡単に構築可能 Redmindeであれば、Dockerを利用すれば簡単に構築することが可能ですし、運用費用も安く抑えることが可能です。\n今回はDockerを利用したRedmineの構築方法についてご紹介致します。\n手順 [adsense]\r前提 Point\rDockerインストール済み\r例として、ローカル環境のDockerへの構築\r参考 関連記事 【簡単サーバー構築】Dockerfileでnginxを立ち上げてみよう！ 2018/02/18 1282文字 約3分で読めます イメージの取得 Redmine まずはredmineのイメージを取得します。\n以下のコマンドを実行してください。\ncommand docker pull sameersbn/redmine:3.3.1 少し時間がかかりますが、完了すると以下のログが表示されます。\nlog 3.3.1: Pulling from sameersbn/redmine bf5d46315322: Pull complete 9f13e0ac480c: Pull complete e8988b5b3097: Pull complete 40af181810e7: Pull complete e6f7c7e5c03e: Pull complete 5dc85c5ddcbb: Pull complete 1e33dd6caf01: Pull complete a85dd0b113c0: Pull complete 34c58ada6309: Pull complete 6250127556fc: Pull complete 858f7d6a4de7: Pull complete c40c360ab269: Pull complete Digest: sha256:656898cf641f3054822b1000dfb427113435c33d78e46c244b05549cb5c9b414 Status: Downloaded newer image for sameersbn/redmine:3.3.1 MySQL 次に、RedmineではデータはMySQLに登録していますのでMySQLのイメージも取得します。\n以下のコマンドを実行してください。\ncommand docker pull sameersbn/mysql:latest こちらも少し時間がかかりますが、完了すると以下のログが出力されます。\nlog latest: Pulling from sameersbn/mysql 8f7c85c2269a: Pull complete 9e72e494a6dd: Pull complete 3009ec50c887: Pull complete 9d5ffccbec91: Pull complete e872a2642ce1: Pull complete 958f9ff10a58: Pull complete 0c1d0f028c5b: Pull complete e99bd65ecbbc: Pull complete Digest: sha256:915a56fa82bdba803e63f4cea324a46a51a07cc1d8051f9f8d72ce970b62b68c Status: Downloaded newer image for sameersbn/mysql:latest データストアディレクトリの作成 次に、コンテナとホストのデータを同期するためのディレクトリを作成します。\n必要なのはredmineデータとmysqlデータの2つなので、以下のコマンドを実行して対象のディレクトリを作成してください。\ncommand {任意のディレクトリ}/datastore/redmine {任意のディレクトリ}/datastore/mysql コンテナの起動 MySQL では、まずはMySQLから起動する必要があるので以下のコマンドを実行してください。\ncommand docker run \\ --name=mysql-redmine \\ -d \\ --env=\u0026#39;DB_NAME={任意のDB名}\u0026#39; \\ --env=\u0026#39;DB_USER={任意のユーザー名}\u0026#39; \\ --env=\u0026#39;DB_PASS={任意のパスワード}\u0026#39; \\ -v {任意のディレクトリ}/datastore/mysql:/var/lib/mysql \\ sameersbn/mysql:latest Redmine 次にRedmineを起動しましょう。\n以下のコマンドを実行してください。\ncommand docker run \\ --name=redmine \\ -d \\ -p 80:80 \\ --link=mysql-redmine:mysql \\ -v {任意のディレクトリ}/datastore/redmine:/home/redmine/data \\ sameersbn/redmine:3.3.1 確認 では、実際にブラウザで確認をしてみましょう。\nhttp://localhost/にアクセスしてみてください。\n以下のような画面が表示されればインストール完了です♪\n※Redmineの起動まで数分かかりますので、時間をおいてからアクセスしてみてください\n終わりに Dockerを使えば簡単にRedmineの構築をする事が出来ます。\nAWS等でサーバーを借りてしまえば、格安でRedmineを運用出来ますので、プロジェクト管理ツールをまだ使われていない方は是非導入を検討してみては如何でしょうか？\n","date":"2018-04-04T23:01:54+09:00","image":"/wp-content/uploads/2018/04/dockerRedmineEye.png","permalink":"/2018/04/04/3287/","title":"【炎上回避】 DockerにRedmineをインストールしてプロジェクト管理ツールを導入してみよう"},{"content":"個人事業主の宿命 節税したいが・・・ 個人事業主やフリーランスの方は、日々どのようにして出費を経費に回して、節税を行うか？という事を考えていると思います。\n仕事関係との方とのランチミーティング代や打ち合わせ先へのタクシー代金等。。。\nいろいろありますが、結局は出費に対して割合で節税を行える、という形なのでそこまでお得感はありませんね。orz\nそんな時にオススメなのが、小規模企業共済です。\n小規模企業共済 小規模企業共済とは？ 小規模企業共済とは、「経営者の退職金制度」とも呼ばれています。\n月々の掛金は1,000～70,000円まで500円単位で自由に決めることが可能で、加入後も増額・減額が出来ます。\n誰が入れるの？ 小規模企業共済への加入条件は以下のいずれかです。\nPoint\r個人事業主\n→税務署に開業届を提出している人\r共同経営者\n→専従者で個人事業主と一緒に経営している人\r会社役員\n→役員登記している人\rまた、従業員が少人数である事が大前提です。\n※ただ、業種によって人数の線引きが異なるので調べてみてください。\nちなみに、加入時に小規模であれば良いので、加入後に人数が大きくなる分には問題が無いとの事です。\n高い節税効果 また、小規模企業共済の掛け金は、確定申告の際に全額課税対象所得から控除出来るので、節税をしたい方には非常にオススメです。\n例として、毎月最大額の7万円を収めておけば毎年84万円の節税になります。\n個人で自宅作業での開発等を行っている場合、開業当初は諸々の経費が発生しますが、落ち着いてくると意外と経費が発生しないので、節税をするにも出来ない状態になると思います。\nそれを考えると、毎月7万円をまるまる控除できるのは非常にでかいですよね。\n元本割れしないの？ ここで疑問が出てきます。\n20年以上継続して払っていないと、解約時に元本割れする、という記事をチラホラ見ます。\n元本割れするなら損じゃん・・・。と、思ったあなた。\n安心してください。積み立てた共済金を全額受け取る方法があります。\n小規模企業共済への加入期間が6ヶ月以上経っている場合は、廃業にすることで、これまでの積立金を全額受け取れる事が出来るのです。\nただし、廃業以外の自己都合の解約の場合は他の記事で言っているように元本割れしてしまいますので気をつけましょう。\n支払い方法は？ 支払い方法は大きく分けて4つあります。\n方法\r内容\r月払い\r毎月18日に1ヶ月分の掛け金引き落とし\r半年払い\r半年ごとに半年分の掛け金引き落とし\r年払い\r1年ごとに1年分の掛け金引き落とし\r前納\r任意月数分の掛け金前払い\r申し込み方法 申込みについても、他の制度とは違いとてもシンプルに手続きをする事が出来ます。\nまずは、コチラから、資料を請求しましょう。\n1週間ほどで到着するので、必要事項を入力の上、各種必要書類を持参してコチラに記載されている加入窓口にて手続きを行ってください。\n商工会議所だけではなく各銀行でも受付が出来るのはとても便利です。\nちなみに、筆者は三菱東京UFJ銀行の窓口で加入手続きをしましたが、とても親切に対応をしてくれました。\n申し込んでから支払い開始までどれくらいかかる？ まだ、加入をしていない方は、「申し込んでから実際に掛け金が引き落とされるまではどれくらいかかるんだろう？」と、いう疑問が生まれると思います。\n筆者の例を参考にすると以下のようになりました。\n結論をいうと、申し込み月から掛け金が発生し、加入完了後の初月にまとめて口座引き落としがされました。\nなので、実際の引き落としは2~3ヶ月ほど経ってからですね。\n月\r概要\r掛け金\r2018/1\r三菱東京UFJ銀行で加入手続き(2018年1月20日)\r掛け金発生\r2018/2\r審査待ち(特に何もしなくて良い)\r掛け金発生\r2018/3\r加入完了のお知らせ送付及び指定口座から1,2,3,4月分の掛け金がまとめて引き落とし(18日)\r掛け金発生\rこのように加入申請をした月から掛け金が発生するので、少しでも悩んでいる方はとりあえず申請をしたほうが良いでしょう。\n早めに加入したほうが節税額も高額になるので♪\n終わりに 以上のように、小規模企業共済は個人事業主やフリーランスにはとてもオススメの節税制度だと言えます。\n個人的には、デメリットを感じる事無く、掛け金も減らずに全額返ってくるので、貯金と考えれば何も苦に感じること無く支払えると思うので、皆さんも是非加入してみてはいかがでしょうか\n","date":"2018-04-03T23:10:24+09:00","image":"/wp-content/uploads/2018/04/taxCostDownEye.png","permalink":"/2018/04/03/3105/","title":"【必ずやるべき】個人事業主やフリーランスにオススメの最強節税対策「小規模企業共済」"},{"content":"概要 前提 Point\rAnsibleインストール済み\r対象サーバーへの公開鍵設定済み\rApacheのポートは80\r参考 関連記事 【脱魔境インフラ】AWSのEC2にAnsibleをインストールしてみよう 2018/02/26 2612文字 約6分で読めます 関連記事 【失われしベストプラクティスを求めて】Ansibleでの特殊な動きをするディレクトリについて 2018/03/13 1640文字 約4分で読めます ディレクトリ構造 ディレクトリ構造 . ├── httpd-install.yml ├── handlers │ └── httpd │ └── start.yml ├── inventories │ └── local │ ├── group_vars │ │ └── all.yml │ ├── host_vars │ │ └── 127.0.0.1.yml │ └── hosts └── roles └── httpd └── install └── tasks └── main.yml ファイル群 hosts inventories/local/hosts [all-servers:children] local-servers [local-servers:children] local [local] 127.0.0.1 group_vars inventories/local/group_vars/all.yml --- #------------------------------------------ # 環境 #------------------------------------------ ENV: \u0026#34;local\u0026#34; host_vars inventories/local/host_vars/127.0.0.1.yml --- #------------------------------------------ # Apache2.4 #------------------------------------------ HTTPD: DOCUMENT_ROOT_DIRECTORY: /var/www/html CONF: DIRECTORY: /etc/httpd/conf SERVICE: NAME: httpd YUM: NAME: httpd24 handers handlers/http/start.yml - name: \u0026#34;httpd start\u0026#34; action: service name={{ HTTPD.SERVICE.NAME }} state=started roles roles/httpd/install/tasks/main.yml - name: instal yum: name: \u0026#34;{{ HTTPD.YUM.NAME }}\u0026#34; state: latest notify: \u0026#34;{{ HTTPD.SERVICE.NAME }} start\u0026#34; playbook httpd-install.yml --- - hosts: local-servers remote_user: {実行ユーザー名} become: yes roles: - httpd/install handlers: - import_tasks: handlers/httpd/start.yml 実行 playbook実行コマンド ansible-playbook \\ --private-key={秘密鍵へのパス} \\ -u {実行ユーザー} \\ -i inventories/local httpd-install.yml \\ -K ※実行ユーザーのパスワードの入力が求められます\n実行ログ SUDO password: PLAY [local-servers] *************************************************************************************************************************************** TASK [Gathering Facts] ************************************************************************************************************************************* ok: [127.0.0.1] TASK [httpd/install : install httpd] *********************************************************************************************************************** changed: [127.0.0.1] RUNNING HANDLER [httpd start] ****************************************************************************************************************************** changed: [127.0.0.1] PLAY RECAP ************************************************************************************************************************************************* 127.0.0.1 : ok=3 changed=2 unreachable=0 failed=0 確認 ブラウザで、http://localhost/にアクセスして、以下のような画面が表示されればインストール完了です♪\n","date":"2018-04-02T21:53:25+09:00","image":"/wp-content/uploads/2018/04/ansibleApache2.4Eye.png","permalink":"/2018/04/02/3246/","title":"【Ansible備忘録】Apacheをインストールするplaybook"},{"content":"Djangoでは静的コンテンツの管理も楽 静的コンテンツとはCSSやJavaScript、Imageファイル等のファイル群の事を指します。\nまた、Djangoではそれらをstaticファイルと呼びます。\nDjangoでは、staticファイルをtemplateファイルから簡単に読み込むための仕組みがありますが、仕組みを理解していないと少しつまづいてしまうかもしれません。\n今回は、staticファイルを読み込んで画面で確認するまでの手順を整理してみましたので、ご紹介致します。\n手順 staticディレクトリの作成 まずは、対象のアプリディレクトリ配下に以下のコマンドで各staticフォルダを作成してください。\ncommand mkdir static/css mkdir static/js mkdir static/image Djangoはアプリディレクトリ配下のstaticフォルダに対して静的コンテンツを探しに行きます。\n似たような動きとして、templateのHTMLファイルについてもアプリディレクトリ配下のtemplateフォルダに探しに行きますね。\n確認 では、今回は以下のディレクトリ構成にしてCSS/JavaScript/Imageの表示確認をしてみましょう。\nディレクトリ構成 . 省略 ├── static │ ├── css │ │ └── style.css │ ├── image │ │ └── icon.png │ └── js │ └── index.js ├── templates │ └── sample │ └── index.html 省略 static/css/style.css h1{ color: #F00; } static/js/index.js (function(){ alert(\u0026#34;Hello, JavaScript!!\u0026#34;); })(); templates/sample/index.html \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; {% load static %} \u0026lt;title\u0026gt;Sample\u0026lt;/title\u0026gt; \u0026lt;link rel=\u0026#34;stylesheet\u0026#34; type=\u0026#34;text/css\u0026#34; href=\u0026#34;{% static \u0026#39;css/style.css\u0026#39; %}\u0026#34; /\u0026gt; \u0026lt;script src=\u0026#34;{% static \u0026#39;js/index.js\u0026#39; %}\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; # 静的コンテンツサンプル \u0026lt;div\u0026gt; \u0026lt;p\u0026gt; \u0026lt;img src=\u0026#34;{% static \u0026#39;image/icon.png\u0026#39; %}\u0026#34; / /\u0026gt; \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; すると、以下のように表示されると思います。\nstaticファイルをtemplateファイルから読み込む際に、押さえるべきポイントは以下です。\nポイント\r説明\r{% load static %}\rtemplateファイル内でこの記述をすること。\nそうすることでアプリ内のstaticフォルダを認識するようになります。\r{% static '{相対パス}' %}\rsrcやhrefで指定するパスの部分をstaticディレクトリを基準とした相対パスで指定すること。\r終わりに 以上のように、Djangoでは簡単に静的コンテンツの管理及び読み込みを実現することが可能になっています。\nレイアウトを調整する上で、staticファイルは必要不可欠なファイルになるので、皆さんも是非お試しください。\n","date":"2018-04-01T18:34:09+09:00","image":"/wp-content/uploads/2018/03/djangoStaticEye.png","permalink":"/2018/04/01/3211/","title":"【仕組みを理解】Djangoのtemplateファイルから静的コンテンツを読み込んでみよう"},{"content":"サーバー負荷テストとは？ 基本はリクエスト数でチェック システムやWebサイトをリリースする際に、サーバーの負荷テストを行う必要があります。\n負荷テストとはサーバーに対して特定のリクエストを大量に投げ、サーバーが落ちずにリクエストの処理を捌けるか？という観点で行います。\n手動でやるのはアホらしいよね しかし、このテストの際のリクエスト数の指標は秒間数百〜数千リクエストを投げる必要があり、人力でやるのはとても無理があります。\nそんな時に便利なのがJMeterです。\nJMeterとは？ JMeterとは、負荷テストやパフォーマンス測定をするためのApache製のオープンソースのJavaアプリケーションです。\nMacであれば、Homebrewによってコマンド一つでインストール可能なので、今回はインストールから簡単な使い方について紹介致します。\n手順 前提 Javaインストール済み\rHomebrewインストール済み\rJMeterの言語環境は英語\rJMeterのインストール まずは、HomebrewでJMeterをインストールしましょう。\ncommand brew install jmeter 以下のログが出れば、インストール完了です。\ncommand brew install jmeter ==\u0026gt; Downloading https://homebrew.bintray.com/bottles/jmeter-4.0.el_capitan.bottle.tar.gz ######################################################################## 100.0% ==\u0026gt; Pouring jmeter-4.0.el_capitan.bottle.tar.gz 🍺 /usr/local/Cellar/jmeter/4.0: 2,339 files, 83.2MB インストールはたったこれだけです。\nJMeterの起動 では、実際にJMeterを起動してみましょう。\n以下のコマンドを実行してください。\ncommand jmeter 以下のログが出力された上で、アプリケーションが起動されると思います。\ncommand jmeter ================================================================================ Don\u0026#39;t use GUI mode for load testing !, only for Test creation and Test debugging. For load testing, use NON GUI Mode: jmeter -n -t [jmx file] -l [results file] -e -o [Path to web report folder] \u0026amp; increase Java Heap to meet your test requirements: Modify current env variable HEAP=\u0026#34;-Xms1g -Xmx1g -XX:MaxMetaspaceSize=256m\u0026#34; in the jmeter batch file Check : https://jmeter.apache.org/usermanual/best-practices.html ================================================================================ 使い方 スレッドグループの作成 JMeterを使ったテスト計画を作成するには、まずスレッドグループと呼ばれるものを作る必要があります。\nスレッドグループとは、あるページやURLへのリクエストを投げる、というテストの集合体の事で、負荷テストの実行の１つの単位になります。\n左部メニューのTest Planで右クリックをし、Add\u003eThreads(Users)\u003eThread Groupを選択します。\nすると、Test Planの子階層にThread Groupが追加されると思います。\nスレッドグループの設定 次に追加したスレッドグループの設定を行いましょう。\n左部メニューのThread Groupを選択し、以下の項目を設定いてください。。\nNumber of Threads(users)\rリクエストを投げる際のスレッド数です。\nスレッド数=ユーザー数=リクエスト数と置き換えて考えて良いでしょう。\rRamp-Up Period(in seconds)\rすべてのスレッドを投げ終える時間を指定します。\rLoop Cound\r上記の設定のテストを何回繰り返すか？という設定になります。\r今回は試しに、秒間5リクエストを2回行う設定にしてみました。\nHTTP Requestの追加 次に実際に投げるリクエストの設定を行いましょう。\nThread Groupで右クリックをして、Add\u003eSampler\u003eHTTP Requestを選択します。\nすると、HTTP Requestの設定を行う画面が表示されるので、サーバー名とリクエストを投げたいPathを入力してください。\n[adsense]\r実行 これで負荷テストを行う準備は出来ました。\n上部メニューの再生ボタンをクリックします。\nすると以下のようなダイアログが出ると思いますが、要はテスト計画を保存してね！という内容なので、Yesボタンをクリックしてください。\n保存先とファイル名を入力してSaveボタンをクリックします。\nすると、自動でテスト計画が実行されます。\nリスナーを追加 しかし、実行結果が表示されるわけでもなく終わってしまいました。\nテスト計画の結果を確認するには、リスナーを登録する必要があります。\nリスナーとは、テスト計画の実行結果をグラフやツリーなどの様々な形式で表示するためで設定になります。\n左部メニューのThread Groupで右クリックをして、Add\u003eListener\u003eView Result Treeを選択します。\nすると、左部メニューにView Result Treeが追加されました。\n特に設定は不要なのでもう一度実行してみましょう。\n再実行 もう一度実行した上で、先ほど追加したView Result Tree画面を見ていると、実行結果が追加されていると思います。\n終わりに 以上のように、Homebrewを使えばインストールはコマンド一発ですし、テスト計画も直感的かつ簡単に設定及び実行をする事が出来ます。\n適切なサーバースペックを用意する事が無駄の無い良いWebシステムの構築に繋がるので、必ずJMeterで負荷テストを行うように心がけましょう♪\n","date":"2018-03-31T23:05:36+09:00","image":"/wp-content/uploads/2018/03/installJmeterEye.png","permalink":"/2018/03/31/2851/","title":"【サーバーの耐久度チェック】JMeterでレッツ負荷テスト☆"},{"content":"自動広告？ 新しい広告形態が登場 先日、GoogleAdsenseに自動広告と呼ばれる機能が追加されました。\n自動広告について\n自動広告とは、コンテンツを収益化するためのシンブルで革新的な方法を提供する広告フォーマットです。自動広告では、各ページに同じ広告コードを 1 つずつ設置します。コードを追加すると、高い成果が見込める最適なタイミングで自動的に広告が表示され、快適なユーザー エクスペリエンスが提供されるようになります。\nメリット\n自動広告には次のようなメリットがあります。\r高品質なコンテンツの作成に専念できる。自動広告では広告の掲載と最適化が自動的に行われるため、手作業にかかる時間を節約できます。 増収が見込める。レイアウト、コンテンツ、既存の Google 広告に基づいてページを分析し、新たな掲載場所を特定できます。 使いやすい。掲載したい各ページに同じコードを 1 つずつ設置するだけで、自動広告を表示できます。残りの処理は自動的に行われます。 自動広告の仕組み 自動広告では、Google の機械学習技術を使用して次のことが行われます。\nページ構成を把握する。\nページに掲載されている既存の Google 広告を検出する（他の広告ネットワークからの広告は検出できません）。\rページのレイアウト、ページ上のコンテンツの量、既存の Google 広告といったさまざまな要素に基づいて、自動的に新しい広告を掲載する。\rサイトに変更を加えた場合は、その変更が自動的に検出され、ページの再分析が行われます。\nつまり、設定用のコードをheadタグに仕込めば、あとはGoogle側が自動でAdsense広告をページ内の各所に自動挿入してくれる、との事です。\nここでも機械学習が出てきましたね。\n今回は実際に試してみましたので、手順をご紹介します。\n手順 前提 Point\rGoogleAdsense登録済み\rサイトにコードを設定済み\r参考 関連記事 【2017年9月最新版！】クリックされるだけでお小遣いが溜まっていく！Google Adsenseの申請から設定まで！ 2017/09/06 3990文字 約8分で読めます 自動広告の有効化 GoogleAdsenseのダッシュボード画面から、左部メニューの広告の設定\u003e自動広告を選択し、開始するボタンをクリックします。\nすると、全般設定の変更画面が表示されます。\nここでは自動で差し込まれる広告の種別を設定する事が可能ですので、お好みの設定にした上で保存ボタンをクリックします。\nこれで自動広告の設定は完了です。\n自動広告の設定 次に、実際にサイトへの自動広告を設定していきましょう。\n自動広告を設定リンクをクリックします。\nすると、コードダイアログが表示されるのでコード スニペットをコピーボタンをクリックします。\n次に、コピーしたコードをHTMLの\u0026lt;head\u0026gt;タグ内に追記する必要がありますので、コピペしちゃいましょう。\nhtml 〜〜〜〜〜 \u0026lt;!-- ここから --\u0026gt; \u0026lt;script async src=\u0026#34;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;script\u0026gt; (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: \u0026#34;ca-pub-xxxxxxxxxxxxxxx\u0026#34;, enable_page_level_ads: true }); \u0026lt;/script\u0026gt; \u0026lt;!-- ここまで --\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body \u0026gt; 〜〜〜〜〜 これで準備は完了です。\n広告が適用されるまでは数時間ほどかかるので気長に待ちましょう♪\n自動挿入箇所 今回の実証では、以下の三箇所にAdsense広告が自動挿入されているのを確認できました。\nheaderタグ内 footerタグ内 サイドバー内 終わりに 以上のように、headerタグやfooterタグ等のもともと挿入していなかった部分に自動で挿入されるようになったのはとても便利ですね。\nただ、自動で挿入される事が原因でレイアウトが崩れる可能性もありますので、少しずつ調整しながら利用をしてみてください。\n","date":"2018-03-30T00:01:11+09:00","image":"/wp-content/uploads/2018/03/autoGoogleAdsenseEye.png","permalink":"/2018/03/30/3191/","title":"【AIしゅごい】GoogleAdsenseの自動広告を試してみた"},{"content":"新SearchConsole! ある日お知らせが 先日、いつも通り記事を投稿したのでGoogleSearchConsoleからサイトマップを送信しようとログインしたら以下のようなメッセージが表示されていました。\n機能やUIが一新 Googleは2018年に新SearchConsoleのβ版を全ユーザーに公開しました。\n新SearchConsoleについては公式で以下のように広報されています。\nこの度、Search Console のすべてのユーザーのみなさまにこのベータ版をご利用いただけるようになりましたことをお知らせします。どなたでも Google 検索上のウェブサイトの掲載状況を最適化する、よりシンプルになったこのプロセスを試すことができるようになります。新しい機能には、検索パフォーマンス、インデックス カバレッジ、AMP ステータス、および Job Posting のレポートが含まれます。新しい Search Console をご利用いただく準備ができましたら、メッセージをお送りし、お知らせします。\nUIも今風に改善され、とても見やすくなっています。\nまた、現在利用可能な機能として、インデックス カバレッジと検索パフォーマンスという後述の２機能が追加になっています。\nまだまだ機能は追加されていく 現在はまだβ版ということなので、利用できる機能は限られていますが、今後様々な機能が追加されていくようですので、間違いなく今まで以上に使いやすくなる事は確実でしょう。\n旧SearchConsoleにお知らせが届いている方であれば、特に設定を変える事無く以下の手順で利用を開始する事が可能です。\n手順 前提 Point\r旧SearchConsole導入済み\r新SearchConsoleの有効化 旧SearchConsoleにログインしたら、新しいSearchConsoleを試すリンクをクリックします。\nするとGoogleSearchConsoleのベータ版画面が開きます。\n似た目はGoogleAnalyticsにかなり近づきましたね。いい感じです♪\n新機能 インデックス カバレッジ インデックス カバレッジ機能とは、サイトページのインデックス状況を確認することが出来る機能です。\n旧SearchConsoleでは、インデックスに送信した件数と実際に登録された件数しか確認出来ませんでした。\n一方で、新SearchConsoleではエラーや有効、除外などの細かい区分がされてカウントされます。\nまた、除外の中でもより細かく分離分けされており、\nさらに、理由ごとに該当するURLまで確認することが可能になっています!!\n個人的にこれは神改善だと思っています。。。笑\n旧SeachConsoleでは、サイトマップを送信しても、登録件数が一致せず、どのページがおかしいか？という点がわかりずらかったですからねorz\n検索パフォーマンス もう一つの新機能は検索パフォーマンス機能です。\nこちらはGoogle検索でのパフォーマンスを分析する機能となっています。\n検索結果のフィルタリングや比較をする事で、ユーザーの検索パターンを調査することが可能になっています。\nこちらは旧SearchConsoleの検索アナリティクスに近い機能となっていますが、UIが断然見やすくなっているのと、条件指定のカスタマイズ性がかなり上がっています！！\n旧SearchConsole\n新SearchConsole\n終わりに 新SearchConsoleはこれからの拡張による使いやすさの向上がとても期待出来ると思っています。\n目新しい機能が追加になったら、本ブログでも紹介していこうと思っていますので皆さんも一緒に楽しみにしましょう♪\n","date":"2018-03-29T00:26:33+09:00","image":"/wp-content/uploads/2018/03/newGoogleConsoleEye.png","permalink":"/2018/03/29/3018/","title":"【2018年3月版】新SearchConsolesは使い勝手が尋常じゃないほど進化していた"},{"content":"マカレルとは？ 新世代のSaas Mackerel(マカレル)とは、株式会社はてなが開発した新世代のサーバー管理・監視サービスです。\nたった一つのエージェントをサーバーに仕込むことで、AWS等の仮想サーバーやクラウドサービスの各種情報をサーバーに入ることなくWebブラウザ上でGUIベースで統合管理・監視を可能にしてくれます。\nセキュリティ向上 初期設定以外はサーバーに入る必要が無くなるので、SSH通信の数が減り、かつサーバー監視要因のユーザー情報を新たに作成する必要も無くなるのでSSHキーの管理の負担も軽減されます。\n直感的な操作性 また、CPUやメモリ、ファイルストレージ等のパフォーマンスの数値化やグラフ描写よるGUIベースでの監視が可能になることで、知識が薄い方でも直感的にサーバーのステータスを把握することが出来るようになります。\nAWSも公認！ なんと、マカレルはAWSのパートナー制度「AWS パートナーコンピテンシープログラム」にて、「AWS DevOpsコンピテンシー」認定を取得しているらしいです。\n日本国内企業のサービスで初めて取得されたとのことなので、これは結構凄いことですね！\n今回はそんなマカレルの登録〜インストール〜アラート時のSlackへの通知までをまとめてみました。\n手順 登録 まずはコチラにアクセスし、画面右上の無料で試してみるボタンをクリックします。\n次に登録メールドレスの入力を求められるので、入力し利用規約に同意するにチェックを入れ、サインアップボタンをクリックしてください。\nすると、組織情報を入力する画面が表示されるので、オーガニゼーション名を入力し、まずは個人でお試しにチェックを入れ、作成ボタンをクリックしてください。\n次にプランの選択画面が表示されます。\n2週間のトライアルプランを紹介されるので、そのままTrialプランをはじめるボタンをクリックします。\nこれで登録は完了です。\n正常に登録が出来ていれば以下のようなダッシュボード画面が表示されると思います。\nメールアドレスの確認 登録は完了しましたが、現在はまだ登録メールアドレスの疎通確認が取れていない状態となっています。\n登録したメールアドレスに以下のようなメールが届いていると思います。\n疎通確認するにはメール本文のリンクURLをクリックしましょう。\nパスワードの設定画面が表示されるので、任意のパスワードを入力の上、パスワードを設定するボタンをクリックしましょう。\nこれでメールアドレス確認及びパスワードの設定が完了しました♪\nAPIキーの確認 まずは、APIキーの確認をしましょう。\nここで確認するキー情報は、サーバーにインストールするエージェントの設定として利用することになります。\nマカレルのトップページのAPIキータブを選択するとdefaultという名称のAPIキーが表示されると思います。\nこちらは最初から用意されているRead/Writeの権限がついているものになります。\n権限制限をしたい場合には、用途に合わせて新しいAPIキーを追加ボタンから作成出来ますが、今回は確認したいだけなのでdefaultのものをそのまま利用します。\nクリップアイコンを選択し、APIキー情報を控えておきましょう。\nエージェントのインストール では、実際にマカレルで監視したいサーバーに対して、エージェントをインストールしてみましょう。\n以下のコマンドでマカレルのエージェントをインストールする事が出来ます。先ほど控えたAPIキー情報を置き換えた上で実行してください。\ncommand curl -fsSL https://mackerel.io/file/script/amznlinux/setup-all-yum.sh | MACKEREL_APIKEY=\u0026#39;{APIキー}\u0026#39; sh 正常にインストールが完了すると、以下の様なログが出力されます。\nlog ============================================================================================================================================================ Package アーキテクチャー バージョン リポジトリー 容量 ============================================================================================================================================================ インストール中: mackerel-agent x86_64 0.54.0-1 mackerel 2.0 M トランザクションの要約 ============================================================================================================================================================ インストール 1 パッケージ 総ダウンロード容量: 2.0 M インストール容量: 5.3 M Downloading packages: mackerel-agent-0.54.0-1.x86_64.rpm | 2.0 MB 00:00:02 Running transaction check Running transaction test Transaction test succeeded Running transaction 警告: RPMDB は yum 以外で変更されました。 インストール中 : mackerel-agent-0.54.0-1.x86_64 1/1 検証中 : mackerel-agent-0.54.0-1.x86_64 1/1 インストール: mackerel-agent.x86_64 0:0.54.0-1 完了しました! + mackerel-agent init -apikey={APIキー} + /etc/init.d/mackerel-agent start Starting mackerel-agent:[ OK ] ************************************* Done! Welcome to Mackerel! ************************************* ダッシュボードでの追加確認 これでマカレルの監視対象サーバーに追加することは出来たので、ブラウザから確認してみましょう。\n左部メニューのOverviewを選択すると、新規ホストの中に先ほどのサーバーが追加されていると思います。\n設定ファイル 基本的にマカレル上では以下のカスタマイズを行う事が出来ます。\nPoint\rサービス、ロールを設定する\rカスタムメトリックを投稿する\rチェック監視項目を追加する\r上記カスタマイズは設定ファイルに追記することで反映されます。\n設定ファイルは以下のディレクトリに作成されているので、用途に合わせて記述をしてみてください。\n場所 /etc/mackerel-agent/mackerel-agent.conf Slackへの通知 では、次にアラートが発生した際のSlackへの通知設定をしてみましょう。\nマカレルではデフォルトで登録アドレスにアラート情報を通知してくれますが、せっかくならSlackに通知してもらいたいですよね。\nマカレルではなんとSlackへの通知もサポートしているので簡単な設定のみで実現することが可能になります。\nSlack側 マカレルではSlackのWebhookを利用して通知を行うので、設定をする必要があります。\nSlackのWebhookの設定は以下の記事で紹介しているので参考にしながら進めてみてください。\n関連記事 【サービス連携に必須】SlackのWebhookURLの取得方法 2018/03/27 698文字 約2分で読めます 上記手順で発行したWebhook URLを控えておきましょう。\nMackerel側 次にマカレル側の設定を行います。\n左部メニューのMonitorsを選択し監視ルール設定画面でチャンネル設定ボタンをクリックします。\nすると、チャンネル設定画面が表示されるので、通知グループ／通知チャンネルを追加ボタンをクリックします。\n次の画面では、通知対象のサービスを選択します。\n今回はSlackを選択しますが様々なサービスとの連携が可能な事が分かると思います。\n通知先チャンネルとWebhook URLの入力を求められるので入力し、他の項目を任意の設定にした上で作成ボタンをクリックします。\nすると、チャンネル設定画面の通知チャンネルにSlackが追加されました。\n確認 では、実際にアラートを発生させて、Slackに通知がされるか確認してみましょう。\n試しにサーバーを止めてみます。\n正常に通知が来ましたね！\n終わりに マカレルのインストール自体はとても簡単に行えます。\nSlackへの通知も標準サポートされているので、簡単な設定のみで実現が可能となっています。\nしかし、マカレルの真の凄さは設定ファイルによる監視項目のカスタマイズ性なので、次回はその辺をご紹介しようと思います。\n","date":"2018-03-28T00:08:41+09:00","image":"/wp-content/uploads/2018/03/mackerelSginUpEye.png","permalink":"/2018/03/28/2216/","title":"【最\u0026高】サーバー監視から通知まで自動でやってくれるクラウド型監視サービス「マカレル」を導入してみよう"},{"content":"外部サービスとの連携 Slackには、外部APIや外部サービスとの連携するための機能が標準で用意されています。\nIncoming Webhooksはその中の1つの機能で、主に外部サービスからSlackにメッセージを送信するするために利用されます。\nWebhookに対応しているサービスは数多くあります。\nJenkinsやGithub、mackerelなどはとてもメジャーですね。\nWebhookの登録自体は簡単に出来ます。\n手順 前提 Point\rワークスペース作成済み\r通知用チャンネル作成済み\rWebhookURLの取得 Incoming Webhookでは、チャンネル単位で通知用のWebhookURLを作成することになります。\nまずはブラウザで対象のWorkspaceにログインした状態でコチラにアクセスしてください。\n次にWebhookを利用して通知を行いたいチャンネルを選択し、Add IncomingWebHooks integrationボタンをクリックします。\nするとWebhook URLが表示されるのでこちらを控えておきましょう。\n確認 本来は、WebhookURLを各サービスの連携機能で設定をするのですが、今回は確認さえ出来ればいいので、以下の様なshellスクリプトを作成して通知確認をしてみましょう。\nslack.sh #!/bin/bash PAYLOAD=`cat \u0026lt;\u0026lt; EOS payload={ \u0026#34;channel\u0026#34;: \u0026#34;#{通知先チャンネル}\u0026#34;, \u0026#34;username\u0026#34;: \u0026#34;From Webhook.\u0026#34;, \u0026#34;text\u0026#34;: \u0026#34;Hello, channel!\u0026#34;, \u0026#34;icon_emoji\u0026#34;: \u0026#34;:poop:\u0026#34; } EOS` curl -X POST --data-urlencode \u0026#34;$PAYLOAD\u0026#34; {WebhookURL} 以下のコマンドで実行してください。\ncommand sh ./slack.sh 正常に通知が飛んできましたね。\n終わりに 以上の様に、WebhookURLを使って、Slackチャンネルへの通知を行う事が出来ました。\nあとは、このURLを様々なサービスに設定することで、サービスからの通知メッセージを受け取ることが可能になります。\nWeb業界ではSlackが業務チャットツールのデファクトスタンダードになっているので、Webhook連携を使いこなせる様になれば、作業効率が上がるので是非試してみてはいかがでしょうか♪\n","date":"2018-03-27T00:30:32+09:00","image":"/wp-content/uploads/2018/03/slackWebhookEye.png","permalink":"/2018/03/27/3159/","title":"【サービス連携に必須】SlackのWebhookURLの取得方法"},{"content":"EC2インスタンスを使いやすくセットアップ 以前、AWSの公式EC2インスタンスのDockerイメージを利用して、ローカルマシンにコンテナを起動する手順を紹介しました。\n関連記事 【これは便利】EC2のDockerイメージを利用してローカルのDockerにEC2を構築しよう 2018/03/22 1043文字 約3分で読めます しかし、初期の構成だと最低限の情報しか含まれていないので、sudoコマンドやcurlコマンド、lessコマンドなどのよく使うコマンドがインストールされていない状態です。\ncommand bash-4.2# less /etc/passwd bash: less: command not found よりEC2インスタンスの環境に近づけるには、ある程度自分でモジュールを整えないと行けなそうですね。\nなので、今回はDockerfileを作成し、最低限必要なモジュールをインストールし、かつSSH接続出来るようにするまでの手順を紹介致します。\n手順 [adsense]\r前提 Point\r公式EC2インスタンスのDockerイメージpull済み\r参考 関連記事 Dockerfileに設定を記述して実行する方法 2018/01/22 1429文字 約3分で読めます ・Docker 初心者 | ssh で接続できるサーバーを立てる\n・Amazon LinuxのDockerコンテナを動かす\nディレクトリ構成 最終的には以下のようなディレクトリ構成になります。\ntree . ├── Dockerfile ├── authorized_keys └── keys ├── id_rsa └── id_rsa.pub SSH認証鍵の準備 まずは、SSH接続で利用する鍵を作成し、所定のディレクトリに配置します。\n以下のコマンドを実行してください。\ncommand mkdir keys ssh-keygen cp keys/id_rsa.pub authorized_keys Dockerfileの作成 前回はコマンドでAmazonLinuxを起動して確認したので、今回はDockerfileを作成して起動しましょう。\nDockerfileの要点としては、以下を定義します。\nPoint\r公式EC2インスタンスのDockerイメージを指定\ryumのパフォーマンス改善(4~5行目)\ryumのインストール(8~11行目)\rユーザーの作成(14~16行目)\rsudo権限の付与(19行目)\rSSHの設定(22~25行目)\rsshdの設定設定(28~30行目)\rsshdの起動(32行目)\rポートの解放(34行目)\rコンテナの起動(35行目)\rDockerfile FROM 137112412989.dkr.ecr.us-west-2.amazonaws.com/amazonlinux # set yum repository mirror for jp RUN yum -y install yum-plugin-fastestmirror RUN sed -ri \u0026#39;s/#include_only=.nl,.de,.uk,.ie/include_only=.jp/g\u0026#39; /etc/yum/pluginconf.d/fastestmirror.conf # install packages RUN yum -y update RUN yum -y install vim RUN yum -y install passwd openssh openssh-server openssh-clients sudo iproute RUN yum -y install wget curl # create users ENV USER {ユーザー名} RUN useradd $USER RUN passwd -f -u $USER # setup sudoers RUN echo \u0026#34;$USER ALL=(ALL) ALL\u0026#34; \u0026gt;\u0026gt; /etc/sudoers.d/$USER # setup SSH RUN mkdir -p /home/$USER/.ssh; chown $USER /home/$USER/.ssh; chmod 700 /home/$USER/.ssh ADD authorized_keys /home/$USER/.ssh/authorized_keys RUN chown $USER /home/$USER/.ssh/authorized_keys RUN chmod 600 /home/$USER/.ssh/authorized_keys # setup sshd config RUN sed -ri \u0026#39;s/#PermitRootLogin yes/PermitRootLogin yes/g\u0026#39; /etc/ssh/sshd_config RUN sed -ri \u0026#39;s/UsePAM yes/#UsePAM yes/g\u0026#39; /etc/ssh/sshd_config RUN sed -ri \u0026#39;s/#UsePAM no/UsePAM no/g\u0026#39; /etc/ssh/sshd_config RUN /etc/init.d/sshd start EXPOSE 22 CMD [\u0026#34;/sbin/init\u0026#34;] イメージのビルド では、上記Dockerfileを使ってビルドをしましょう。\n以下のコマンドを実行してください。\ncommand docker build -t docker/amzlinux . 最終的に以下のログが表示されればビルド成功です。\nlog Successfully built 45e02ef350ef Successfully tagged docker/amzlinux:latest コンテナの起動 では、ビルドしたイメージを使ってコンテナを起動してみましょう。\n以下のコマンドを実行してください。今回はローカルマシンの10000番ポートをコンテナの22番ポートに繋げています。\ncommand docker run -d --name {コンテナ名} -p 10000:22 docker/amzlinux SSH接続 コンテナの起動が完了したら、sshコマンドで接続してみましょう。\n以下のコマンドで作成した秘密鍵を使って接続をしてみてください。\ncommand ssh -i keys/id_rsa {ユーザー名}@127.0.0.1 -p 10000 正常に接続されましたね。\n各種コマンドの確認 では、最後にDockerfileでインストールしたモジュール(コマンド)を確認してみましょう。今回はとりあえず初期状態では使えなかったsudoコマンドを確認してみます。\n以下のコマンドを実行してください。\ncommand sudo su 以下のようなログが出れば正常にコマンドが実行出来ています。\nlog [{ユーザー名}@xxxxxxxxx ~]$ sudo su We trust you have received the usual lecture from the local System Administrator. It usually boils down to these three things: #1) Respect the privacy of others. #2) Think before you type. #3) With great power comes great responsibility. bash-4.2# 終わりに これで本来のEC2インスタンスに近い状態の環境に設定することが出来ました。\nSSH接続や各種コマンドが使えることによって、よりリアルな検証操作を行うことが可能になりますので、是非皆さんも試していてください。\n","date":"2018-03-26T10:32:23+09:00","image":"/wp-content/uploads/2018/03/sshDockerInEC2Eye.png","permalink":"/2018/03/26/3068/","title":"【ローカル環境】Docker内のAWS EC2インスタンスコンテナにSSH接続する方法【設定手順まとめ】"},{"content":"Djangoとは？ Djangoとは、PythonでWebシステムを開発する際に使うフレームワークです。\nPythonはデータ解析や人工知能の分野で注目を浴びている言語ですが、もちろんWebシステムの開発にも使えます。\nPythonの特徴として、少ないコード量かつ軽量なので、シンプルなWebシステムを作る際に向いていると言えるでしょう。\nまた、Djangoフレームワークの特徴として、管理画面やセキュリティ周りが標準装備されていて、なおかつカスタマイズしやすいところが挙げられます。\n今回は、Djangoをインストールして、Webシステムを起動して管理画面にログインするところまでの手順を紹介致します。\n手順 前提 Point\rPythonインストール済み(3.5.12)\rpipインストール済み\rDjangoのインストール まずはpipコマンドでdjango本体をインストールします。\n以下のコマンドを実行してください。\ncommand pip install django 以下のような出力がされればインストールは完了です。\nlog Collecting django Downloading Django-2.0.3-py3-none-any.whl (7.1MB) 100% |████████████████████████████████| 7.1MB 81kB/s Collecting pytz (from django) Downloading pytz-2018.3-py2.py3-none-any.whl (509kB) 100% |████████████████████████████████| 512kB 492kB/s Installing collected packages: pytz, django Successfully installed django-2.0.3 pytz-2018.3 プロジェクトの作成 次にプロジェクトを作成します。\nDjangoでは一つのプロジェクト内に複数のアプリケーションを持つことが出来ます。\n以下のコマンドを実行してください。\ncommand django-admin startproject {プロジェクト名} すると、以下のようなディレクトリが自動で生成されると思います。\ntree . └── {プロジェクト名} ├── manage.py └── {プロジェクト名} ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py DBのマイグレート 次にDBのマイグレートを行います。\nDjangoプロジェクトは標準でsqlite3を搭載しているので、そこで各種情報を管理する形になります。\nまずは初期設定周りを以下のコマンドで実行してみましょう。\ncommand cd {プロジェクト名} python manage.py migrate 以下の情報が表示されればマイグレート成功です。\nlog Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions Running migrations: Applying contenttypes.0001_initial... OK Applying auth.0001_initial... OK Applying admin.0001_initial... OK Applying admin.0002_logentry_remove_auto_add... OK Applying contenttypes.0002_remove_content_type_name... OK Applying auth.0002_alter_permission_name_max_length... OK Applying auth.0003_alter_user_email_max_length... OK Applying auth.0004_alter_user_username_opts... OK Applying auth.0005_alter_user_last_login_null... OK Applying auth.0006_require_contenttypes_0002... OK Applying auth.0007_alter_validators_add_error_messages... OK Applying auth.0008_alter_user_username_max_length... OK Applying auth.0009_alter_user_last_name_max_length... OK Applying sessions.0001_initial... OK 管理ユーザーの作成 次に管理ユーザーを作成しましょう。\nこちらも以下のコマンドを実行することで作成可能です。\ncommand python manage.py createsuperuser すると、以下のように対話式での情報入力を求められるので、任意の情報を入力しましょう。\ncommand Username (leave blank to use \u0026#39;{ログインユーザー名}\u0026#39;): xxx Email address: Password: Password (again): Superuser created successfully. メッセージ\r内容\rUsername (leave blank to use '{ログインユーザー名}'):\r管理ユーザー名を指定します。\n未入力だとログインユーザー名がそのまま使われます。\rEmail address:\rメールアドレスを入力します。\n不要の場合はそのままでエンターを押してください。\rPassword:\rパスワードを指定します。\n8文字以上の長さにする必要があります。\rPassword (again):\rパスワードを再入力します。\rアプリ起動 これでアプリケーションを実行する準備は出来たので、以下のコマンドで起動してみましょう。\ncommand python manage.py runserver すると、以下のようなアプリケーション起動ログが表示されます。\nlog python3.5 manage.py runserver Performing system checks... System check identified no issues (0 silenced). March 21, 2018 - 12:56:36 Django version 2.0.3, using settings \u0026#39;{プロジェクト名}.settings\u0026#39; Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C. ブラウザでhttp://127.0.0.1:8000/にアクセスすると、Djangoアプリの画面が表示されると思います。\nhttp://127.0.0.1:8000/adminにアクセスすると、ログイン画面が表示されるので、先ほど作成した管理ユーザーのID/PASSWORDを入力し、Log inボタンをクリックしてみましょう。\n正常にログイン出来ましたね♪\nアプリを停止するには、ログにも出ているようにControll + Cで停止することが出来ます。\n終わりに 以上のように、インストールからアプリ実行まで、コマンドベースなので短時間かつ簡単に準備することが出来ました。\nPythonは今人工知能でとても注目されている言語ですが、もちろんWebシステムの構築も可能なので、この機会に是非勉強してみてはいかがでしょうか？\n","date":"2018-03-25T16:34:27+09:00","image":"/wp-content/uploads/2018/03/installDjangoEye.png","permalink":"/2018/03/25/3046/","title":"【PythonでWebアプリケーション】Djangoのインストールから起動まで"},{"content":"OGPとは ブログ記事をTwitterやライン等でシェアする事はよくあると思います。\nしかし、その際にWordpressの記事側で正しくとある設定をしていないと正しく記事が表示されず、見た目がダサくなってしまいます。\n例えば、Twitterだと以下のようになってしまいます。\n綺麗にレイアウトを整えるための設定が何も入っていないので、ただのリンク文字列になってしまいます。\nそんな時はOGPの設定をしっかりと設定すれば以下のような形でリンクが差し込まれるようになります。\nOGPとは、「Open Graph protocol」の略称の事で、FacebookやLine、Twitter、Google+、mixiなどの様々なSNSで記事をシェアした際に、その記事ページのタイトル、URL、概要、アイキャッチ画像（サムネイル）を綺麗に整えて表示させる事を可能にする仕組みです。\nこちらはheader.phpに記述を指定するだけで、簡単にOGPの設定が完了するので今回はTwitter向けのOGP設定の仕方についてご紹介します。\n手順 header.phpに追記 まずはダッシュボードから外観\u003eテーマの編集\u003eテーマヘッダー(header.php)を選択してください。\n次に以下のコードを追記してください。\n\u0026lt;!-- OGP --\u0026gt; \u0026lt;?php if (is_single()){ if(have_posts()): while(have_posts()): the_post(); echo \u0026#39;\u0026lt;meta property=\u0026#34;og:type\u0026#34; content=\u0026#34;article\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; echo \u0026#39;\u0026lt;meta property=\u0026#34;og:description\u0026#34; content=\u0026#34;\u0026#39;.mb_substr(get_the_excerpt(), 0, 100).\u0026#39;...\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; echo \u0026#39;\u0026lt;meta property=\u0026#34;article:section\u0026#34; content=\u0026#34;\u0026#39;; $category = get_the_category(); echo $category[0]-\u0026gt;cat_name; echo \u0026#39;\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; if (has_tag()==true) { $posttags = get_the_tags(); if ( $posttags ) { foreach ( $posttags as $tag ) { echo \u0026#39;\u0026lt;meta property=\u0026#34;article:tag\u0026#34; content=\u0026#34;\u0026#39;.$tag-\u0026gt;name . \u0026#39;\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; }} } endwhile; endif; echo \u0026#39;\u0026lt;meta property=\u0026#34;og:title\u0026#34; content=\u0026#34;\u0026#39;; the_title(); echo \u0026#39;\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; echo \u0026#39;\u0026lt;meta property=\u0026#34;og:url\u0026#34; content=\u0026#34;\u0026#39;; the_permalink(); echo \u0026#39;\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; } else { echo \u0026#39;\u0026lt;meta property=\u0026#34;og:type\u0026#34; content=\u0026#34;blog\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; echo \u0026#39;\u0026lt;meta property=\u0026#34;og:description\u0026#34; content=\u0026#34;\u0026#39;; bloginfo(\u0026#39;description\u0026#39;); echo \u0026#39;\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; echo \u0026#39;\u0026lt;meta property=\u0026#34;og:title\u0026#34; content=\u0026#34;\u0026#39;; bloginfo(\u0026#39;name\u0026#39;); echo \u0026#39;\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; echo \u0026#39;\u0026lt;meta property=\u0026#34;og:url\u0026#34; content=\u0026#34;\u0026#39;; bloginfo(\u0026#39;url\u0026#39;); echo \u0026#39;\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; } $str = $post-\u0026gt;post_content; $searchPattern = \u0026#39;/\u0026lt;img.*?src=([\u0026#34;\\\u0026#39;])(.+?)\\1.*?\u0026gt;/i\u0026#39;; if (is_single()){ if (has_post_thumbnail()){ $image_id = get_post_thumbnail_id(); $image = wp_get_attachment_image_src( $image_id, \u0026#39;full\u0026#39;); echo \u0026#39;\u0026lt;meta property=\u0026#34;og:image\u0026#34; content=\u0026#34;\u0026#39;.$image[0].\u0026#39;\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; } else if ( preg_match( $searchPattern, $str, $imgurl ) \u0026amp;\u0026amp; !is_archive()) { echo \u0026#39;\u0026lt;meta property=\u0026#34;og:image\u0026#34; content=\u0026#34;\u0026#39;.$imgurl[2].\u0026#39;\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; } else { $ogp_image = \u0026#39;★記事以外の場合に表示したい画像パス\u0026#39;; echo \u0026#39;\u0026lt;meta property=\u0026#34;og:image\u0026#34; content=\u0026#34;\u0026#39;.$ogp_image.\u0026#39;\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; } } else { if (get_header_image()){ echo \u0026#39;\u0026lt;meta property=\u0026#34;og:image\u0026#34; content=\u0026#34;★記事以外の場合に表示したい画像パス\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; } else { echo \u0026#39;\u0026lt;meta property=\u0026#34;og:image\u0026#34; content=\u0026#34;★記事以外の場合に表示したい画像パス\u0026#34; /\u0026gt;\u0026#39;;echo \u0026#34;\\n\u0026#34;; } } ?\u0026gt; \u0026lt;!-- Twitter Card --\u0026gt; \u0026lt;meta name=\u0026#34;twitter:card\u0026#34; content=\u0026#34;summary\u0026#34; /\u0026gt; ※35、40、42行目にはWordpressにアップロードした任意の画像URLを設定してください\n追記が完了したらファイルを更新ボタンをクリックします。\n確認 では、TwitterのタイムラインをリロードしてOGPの設定が反映されたか確認してみましょう。\n※OGPは都度情報を取得するのでブログ側の設定を変えれば、過去の投稿でも最新のOGPが適用されるようです\nもちろん、記事ページについてもOGPが適用されるようになっています。\nアイキャッチ画像が見切れてしまう 横長サイズのアイキャッチを設定している場合、上記の設定では見切れて表示されてしまいます。\nその場合は以下のように設定を変えることでレイアウトを変えることが可能になります。\n終わりに 今は各種SNSシェアからの流入はとても大きなPVアップに有効なのでOGPの設定はアフェリエイトをやっているブログとしては必須だと思います。\nOGPの設定はTwitterやFacebookなどSNS毎に細かい設定が可能なので是非いろいろ試してみてください♪\n","date":"2018-03-24T06:18:41+09:00","image":"/wp-content/uploads/2018/02/ogpSettingEye.png","permalink":"/2018/03/24/3135/","title":"【Twitter向けOGP】Twitterでブログリンク内容を綺麗に表示させる方法"},{"content":"Facebookページとは？ ページは複数ある Facebookには個人ページとFacebookページの2種類があります。\nFacebookページは以前はファンページと呼ばれていました。\nまた、Facebookグループと呼ばれるものもありますが、こちらは特定の人達とグループを作成し、グループ内での情報の共有やディスカッションなどに使われます。\n個人ページ Point\r個人名でのみ登録可能\r友達申請が出来るが、上限がある(MAX５０００人)\r友達になった友人の個人ページに「いいね！」や書き込みが出来る\rFacebookにログインしている人しか見られない\rSEO効果が無いので、投稿内容が検索エンジンなどに引っかかりにくい\rFacebookページ Point\r企業名やサービス名などで登録が出来る\rFacebookページに「いいね！」を押してくれた人は、「ファン」として扱われ、ファンの人数に上限は無い\rFacebookにログインしていない人でも閲覧できる\r複数のユーザーでページ管理が出来る\rFacebookページとしてメッセージを受け取れるので、お問い合わせフォーム代わりに使うことが可能\rFacebook上での広告を打つ事が出来る\rインサイト（投稿や広告に対しての反応を調べる機能）が使える\rSEO効果があるので、投稿内容が検索エンジンの検索対象になりやすい\r仕事や企業で使うならかなり効果的 以上のように、Facebookページは広告効果として高い効果を期待出来ます。\nFacebookページはとても簡単に作ることが出来るので、作成手順を紹介致します。\n手順 [adsense]\r前提 Point\rFacebook個人アカウント作成済み\r個人アカウントでページ作成 まずは個人アカウントでFacebookにログインします。\nログイン後に、右部メニューの下三角アイコンをクリックし、ページ作成を選択します。\n次に、作成するFacebookページのカテゴリを選択します。\n基本的にはブランドまたは製品を選択しましょう。\nすると、作成するページのカテゴリとタイトルを入力し、Facebookページ規約を確認の上、問題が無ければスタートボタンをクリックします。\n画像のアップロード すると、プロフィール画像のアップロード画面になるので、Upload a Profile Pictureボタンをクリックし、任意の画像をアップロードしましょう。\n次はカバー写真のアップロード画面に自動で移動するので、同じようにカバー写真をアップロードボタンをクリックし、任意の画像をアップロードをしましょう。\n※PCとスマートフォンでは表示されるエリアが異なりますが、640×312に収めればどちらの端末でも正常に表示されるとのことです\nこれで、Facebookページの作成は完了しました。\n初期設定 投稿者の設定 次にFacebookの初期設定をしていきましょう。\nまずは、投稿者の設定が個人アカウントではなく、Facebookページになっているかの確認をしておきましょう。\nFacebookページから設定メニューをクリックします。\n次に投稿者の名前をクリックし、{Facebookページ名}として投稿にチェックが入っていることを確認してください。\nもし、下の{個人アカウント名}として投稿にチェックが付いていた場合、匿名では無くなってしまうので気をつけましょう。\nページURLの調整 次にFacebookページのURLを調整しましょう。\nデフォルトだと、自動で割り振られたURL文字列になってしまっています。\nこれはFacebookページの＠ユーザープロフィールという情報を変更することでカスタマイズが可能になっています。\nFacebookページの@ユーザーネームを作成リンクをクリックします。\nすると@ユーザーネームの設定ダイアログが表示されるので、任意の名称を入力しユーザーネームを作成ボタンをクリックします。\n正常に作成されると、以下のようなダイアログが表示されるのでOKボタンをクリックします。\nこれで正常にURLが設定されたと思います。\nブログURLの設定 次に、ブログへのリンクURLを設定しましょう。\n詳細メニューを開き、ページ情報を編集をクリックします。\nすると、編集ダイアログが表示されるので、ウェブサイトの項目にサイトURLを入力し変更を保存ボタンをクリックします。\nこれで設定は完了です。\n終わりに Facebookページを作るために、新たにアカウントを作成する必要が無いのがとても便利ですね。\nFacebook広告などの便利な機能がまだまだ他にあるので、是非いろいろ試してみてください♪\n","date":"2018-03-23T01:32:41+09:00","image":"/wp-content/uploads/2018/03/createFacebookPageEye.png","permalink":"/2018/03/23/2970/","title":"【メディア広告の必要性】Facebookページを作ってブランド力を築きあげよう"},{"content":"ローカルにEC2環境が作れる Amazon Linuxの公式Dockerコンテナイメージ\u0026nbsp;が公開されていました。\nコンテナイメージはEC2 Container Registry(ECR)にて配布されており、コマンドで取得することが可能になっています。\nこちらを使えば、ローカルマシンのDocker内にEC2インスタンスを立ち上げ、より検証/本番に近い環境での開発を行うことが可能になります。\n今回は、その手順をまとめましたので紹介致します。\n手順 前提 Point\rAWSアカウント作成済み\rDockerインストール済み(Docker version 17.12.0-ce, build c97c6d6)\rAWC-cliセットアップ済み\rECRへのログイン まずは、以下のコマンドでAWS-cliを利用してECRへログインするための情報を取得しましょう。\ncommand aws ecr get-login --region us-west-2 --registry-ids 137112412989 --no-include-email 以下のようなログが表示されれば成功です。\nlog docker login -u AWS -p {パスワードトークン文字列}== https://137112412989.dkr.ecr.us-west-2.amazonaws.com エラーが出た場合 以下のようなエラーが出た場合は、利用しているIAMユーザーに対して、ECRのGetAuthorizationToken操作の権限が無いのが原因です。\nerror An error occurred (AccessDeniedException) when calling the GetAuthorizationToken operation: User: arn:aws:iam::xxxxxxxxxxx:user/{ユーザー名} is not authorized to perform: ecr:GetAuthorizationToken on resource: * なので、AWSマネジメントコンソールにて対象のIAMユーザーにECRへの読み取りPolicyを追加しましょう。\n※筆者はFullAccessを付与していますが、しっかりと検討して付与してください\nもう一度同じコマンドを実行すると、正常に実行が出来ると思います。 Dockerハブへのログイン 次に、表示されたコマンドをそのままコピペして実行しましょう。\n以下のようなログが出ればECRへのログインが成功です。\nlog Login Succeeded コンテナイメージの取得 次にコンテナイメージを取得します。以下のコマンドを実行してください。\ncommand docker pull 137112412989.dkr.ecr.us-west-2.amazonaws.com/amazonlinux:latest すると、ダウンロードが始まるので、少し待つと以下のようにログが出てダウンロードが完了します。\nlog latest: Pulling from amazonlinux a98bda1414b5: Pull complete Digest: sha256:3cce96b8e3e80f0fa3cf04db895231048800a0cb04944488f2aaf3ce6659b66f Status: Downloaded newer image for 137112412989.dkr.ecr.us-west-2.amazonaws.com/amazonlinux:latest 確認 では、実際にコンテナを起動してみましょう。\n以下のコマンドを実行してください。\ncommand docker run -it 137112412989.dkr.ecr.us-west-2.amazonaws.com/amazonlinux:latest /bin/bash お、正常に入れましたね。\nでは以下のコマンドでシステム情報を確認してみましょう。 command cat /etc/system-release こちらも正常に表示されましたね。\nlog Amazon Linux AMI release 2016.09 終わりに AWSのアカウントさえあれば、簡単にローカルマシンのDocker環境にEC2を構築することが出来ました。\nこれでEC2を起動せずに、デプロイや構成管理のテストを手軽に行うことが可能になるので、是非利用してみてください。\n","date":"2018-03-22T00:07:44+09:00","image":"/wp-content/uploads/2018/03/awsEc2ContainerImageEye.png","permalink":"/2018/03/22/3048/","title":"【これは便利】EC2のDockerイメージを利用してローカルのDockerにEC2を構築しよう"},{"content":"Macのスクリーンショットは便利 標準搭載 WebページやPC画面のキャプチャを撮りたい場合、Macでは標準でスクリーンキャプチャ機能が搭載されています。\nショートカットキーは、 Command + Shift + ４ キーを同時に押す事で、カーソルが十字に変わります。\nそのままドラッグすると、以下のように撮影範囲を選択出来るので、任意のエリアを選択してみましょう。\n保存される名前を変えたい しかし、この際保存されるスクリーンショットのファイル名称はデフォルトでは以下のようになっています。\nファイル名 スクリーンショット YYYY-mm-dd HH.mm.ss.png 気にしない人はそのままで良いでしょうか、筆者のように日本語名が含まれることに違和感を覚える人もいると思います。\nスクリーンショット撮影時のファイル名称は自由に変える事が出来ますので、今回はそのやり方を紹介致します。\n関連 ファイルの保存先の変更方法も記事しましたので、興味のある方はご覧ください。\n関連記事 【フォルダ整理におすすめ】Macのスクリーンショット保存先変更 2018/05/26 911文字 約2分で読めます 手順 設定変更 やり方はターミナルから以下のコマンドを実行するだけです。\ncommand defaults write com.apple.screencapture name \u0026#34;{任意のファイル名}\u0026#34; 今回はdefaults write com.apple.screencapture name \"screen-capture-\"としてみました。\n確認 では、実際にスクリーンキャプチャを撮影してみましょう。\nすると、撮影したキャプチャファイルの名前が以下のように変更されている事が確認出来ます。\n終わりに このように、簡単にスクリーンキャプチャ時のファイル名のフォーマットを変える事が可能になります。\n日本語が含まれることに違和感を感じている方がいたら、ぜひ参考にしてみてください♪\n","date":"2018-03-21T00:23:40+09:00","image":"/wp-content/uploads/2018/03/caputureMacNameEye.png","permalink":"/2018/03/21/2718/","title":"【標準お便利機能】Macのスクリーンショットの名称を変える"},{"content":"サイトをSSL化！ 下調べ不足・・・ ブログやWebサイトを最初はhttpで運用していて、途中でSSL化を行いhttpsにした際、GoogleAnalyticsについては、設定を変えるだけで再設定出来ましたが、GoogleSearchConsoleも同じように既存の設定を修正するだけで簡単にhttpsに移行できると思っていましたが、実際にはそうは行きませんでした。\n同じサイトでもhttpとhttpsは別のサイトとして扱われるので、新たなWebサイトとして登録し直す必要がありました。orz\nしかし、一度は行っている作業なので、再登録と言っても手こずることなくすごく簡単に出来ましたので、GoogleSearchConsoleへの再登録方法とGoogleAnalyticsの再設定方法をご紹介致します。\n手順 前提 Point\rhttpサイトのGoogleAnalytics登録済み\rhttpサイトのGoogleSearchConsole登録済み\rGoogleAnalyticsとGoogleSearchConsole連携済み\rSSL化済み\rGoogleSearchConsole側 SSL化サイトの登録 では、SSL化したサイトを登録し直しましょう。\nまず、GoogleSearchConsoleにログインしたら、プロパティ追加ボタンをクリックします。\nすると、プロパティを追加ダイアログが表示されるので、https化したサイトのURLを入力し、追加ボタンをクリックします。\nすると、サイトの所有権の確認方法を求められます。\n今回は事前にサイトにGoogleAnalyticsの設定を行っていますので、おすすめの方法の確認ボタンをクリックします。\n正常に設定がされていれば、以下のようなダイアログが表示されるので続行リンクをクリックします。\nサイトマップの登録 無事にSSL化したサイトは登録されましたが、サイトマップを登録し直さないといけないので、改めて登録しましょう。\nGoogleAnalytics側 プロパティの変更 では、次にGoogleAnalytics側の設定を変えましょう。\nこちらは再登録の必要は無いため非常に簡単です。\nGoogleAnalyticsにログインしたら、左部メニューの歯車アイコンをクリックし、プロパティ設定メニューを選択します。\nそして、表示されたメニューのデフォルトのURLをhttpからhttpsに変更します。\nその他の項目はそのままで保存ボタンをクリックします。\nビューの設定 次にビューの設定もhttpからhttpsへ変更しておきましょう。\n左部メニューの歯車アイコンをクリックし、ビュー設定メニューを選択します。\nこちらも同じようにウェブサイトのURLをhttpからhttpsに変更し、他はそのままで保存ボタンをクリックします。\n終わりに これでSSL化したサイトのGoogleAnalytics及びGoogleSearchConsoleへの再設定作業は完了です。\n多少の作業が必要になりますが、そこまで大変な手順では無いのと、必ずやった方がメリットがあるので、もしサイトのSSL化を躊躇っている方がいましたら、恐れずにSSL化をしてみてはいかがでしょうか？\n","date":"2018-03-20T00:17:46+09:00","image":"/wp-content/uploads/2018/03/googleSearchConsoleHttpsEye.png","permalink":"/2018/03/20/3024/","title":"【SSL化】httpsにした際のGoogleSearchConsoleとGoogleAnalyticsの設定方法"},{"content":"S3コンテンツの閲覧制限 S3にもIP制限をかけれる？ 以前、S3バケットに静的コンテンツをアップロードしてWebサイトとして公開する方法を紹介しました。\n関連記事 【お便利AWS】S3バケットで静的サイトホスティングをしてみよう 2018/03/18 1695文字 約4分で読めます 基本的にはS3でWebサイトホスティングをするには全公開であることが多いと思いますが、場合によっては閲覧制限をつけてコンテンツを公開したい、というケースも出てくると思います。\nEC2にはセキュリティグループという概念があるので、簡単にIP制限をかけることが可能ですが、S3バケットにはセキュリティグループをかけることが出来ません。\nポリシー定義で可能 そんな時は、S3バケットのポリシーを修正するだけでIP制限をかけることが可能になります。\n今回は特定のIPのみにS3バケットを公開するようなポリシーの設定の仕方について紹介致します。\n手順 前提 Point\rS3バケットにて全公開のWebサイトホスティングを作成済み\rポリシー定義の修正 AWSにログインしたら、サービスメニューをクリックし、ストレージカテゴリのS3を選択します。\n次に、IP制限をかけたいバケットを選択し、アクセス制限メニューをクリックします。\nアクセス権限タブを選択し、バケットポリシーメニューをクリックします。\nすると、現在のポリシー定義のJsonが表示されるので、以下のように要点を修正した上で保存ボタンをクリックします。\npolicy { \u0026#34;Version\u0026#34;: \u0026#34;2012-10-17\u0026#34;, \u0026#34;Statement\u0026#34;: [ { \u0026#34;Sid\u0026#34;: \u0026#34;PublicReadGetObject\u0026#34;, \u0026#34;Effect\u0026#34;: \u0026#34;Deny\u0026#34;, \u0026#34;Principal\u0026#34;: \u0026#34;*\u0026#34;, \u0026#34;Action\u0026#34;: \u0026#34;s3:*\u0026#34;, \u0026#34;Resource\u0026#34;: [ \u0026#34;arn:aws:s3:::{対象のS3バケット名}/*\u0026#34; ], \u0026#34;Condition\u0026#34;: { \u0026#34;NotIpAddress\u0026#34;: { \u0026#34;aws:SourceIp\u0026#34;: \u0026#34;{接続を許可したいIP}\u0026#34; } } } ] } ポイントとしては、S3でのWebサイトホスティングをすると、基本的には全公開になっているので、Denyを指定することで制限をするような方法を取っています。\n仮に、EffectをAllowにしてConditionをIpAddressにしても、それ以外のIPを制限するという動きにはならないので気をつけましょう。\nオブジェクトの公開 このままではホワイトリストのIPからアクセスをしても、Access Deniedが出てしまうと思います。\nこれは、アップロードしたコンテンツを公開していないのが原因なので、公開設定をしないといけません。\nバケットメニューに入ったら、すべてのオブジェクトを選択して、さらにメニューから公開を選択します。\n公開するオブジェクトの情報が表示されるので、問題が無ければ公開するボタンをクリックします。\n確認 では、実際に試してみましょう。\nまずはホワイトリストに登録したIPでアクセスしてみます。\n正常に表示されています。\n次に、ホワイトリストに含まれていないIPからアクセスしてみます。\nしっかり閲覧制限がかかっていますね。\n終わりに バケットポリシーを調整することで、EC2のセキュリティグループのような事を実現する事が可能です。\nこれで、一部の範囲でしか公開したくないドキュメントやWebサイトをS3で管理することが可能になるので、皆さんも是非お試しください♩\n","date":"2018-03-19T00:03:18+09:00","image":"/wp-content/uploads/2018/03/awsS3IpPolicyEye.png","permalink":"/2018/03/19/2951/","title":"【以外と簡単】S3バケットにIP制限をかける方法"},{"content":"静的サイトを公開したい サーバー借りるのは負担 Wordpressではなく、単純なHTML/JS/CSSのみで静的なサイト(LP等)を作って公開したいけど、そのためだけにサーバーを借りるのは勿体ない！と思ってらっしゃる方は少なくないと思います。\nサーバーを借りると地味に月額費用がかさんでいくんですよね。。。orz\nGithubでソース管理している場合はGithubPagesを利用すれば良いのですが、その場合publicリポジトリであることが前提になってしまうので、privateリポジトリで運用している場合は選択肢に入れることが不可能になってしまいます。\nまた、サーバーを借りるとなると、インフラの初期設定やネットワーク整備等を行う必要があるので、インフラの知識が無いコーダーさんだとちょっと敷居が高くなってしまいます。\nそんな時はAWSのS3 そんな時にぴったりなサービスがAWSのS3です。\nS3とはAWSのストレージサービスの一つで、正式名称はAmazon Simple Storage Serviceと言います。\n様々なファイルをオンラインストレージ上で管理することができ、静的コンテンツをおくことでWebページとして利用することが可能です。\n今回はS3を使ったシンプルなWebページの公開方法についてご紹介します。\n手順 前提 Point\r\u0026lt;li\u0026gt;AWSアカウント取得済み\u0026lt;/li\u0026gt;\rバケットの作成 AWSにログインしたら、サービスメニューをクリックし、ストレージカテゴリのS3を選択します。\n次の画面では、バケットを作成ボタンをクリックします。\nすると、ダイアログが表示されるので、任意のバケット名を入力し作成ボタンをクリックしてください。\nこれでS3バケットの作成は完了です。\n静的コンテンツを配置 では、実際にファイルをS3バケット内に配置してみましょう。\n今回は表示確認さえ出来れば良いので、コチラのテンプレートをダウンロードし、そのまま配置してみます。\n対象のバケットを選択し、ファイルをドラッグ\u0026ドロップします。\nするとアップロードするファイルの確認ダイアログが表示されるので、アップロードボタンをクリックします。\nこれでアップロード作業は完了です。\n確認 では、実際にindex.htmlの表示を確認してみましょう。\nまずはindex.htmlを選択します。\nすると、index.htmlファイルの詳細ページが表示されるので、下部にあるリンクURLをクリックしてみましょう。\nあれ、表示されない。。。\nWebサイトホスティング関連の設定 上記エラーの原因は、アップロードしたファイルがデフォルトでは非公開で設定されるため、Webサイト用として公開するための設定をバケットに対して行う必要があります。\nまずは、バケットメニューのプロパティタブをクリックし、Static website hostingを選択します。\nすると、設定ダイアログが表示されるので、\nPoint\rこのバケットを利用してウェブサイトをホストするにチェック\rインデックスドキュメントにindex.htmlを入力\rを設定の上、保存ボタンをクリックします。\n※このエンドポイントがブラウザからアクセスするURLになるので控えておきましょう\nこれでWebサイトホスティングの設定は完了です。\nバケットポリシーの設定 次にバケットポリシーの設定を行います。\nこちらではバケットにアップロードしたファイルの閲覧権限を設定します。\nバケットメニューのアクセス権限タブを選択し、バケットポリシーボタンをクリックします。\nするとバケットポリシーを入力するエリアが表示されるので、以下のコードを参考に、対象のバケット名を編集した内容を入力し、保存ボタンをクリックします。\npolicy { \u0026#34;Version\u0026#34;: \u0026#34;2012-10-17\u0026#34;, \u0026#34;Statement\u0026#34;: [ { \u0026#34;Sid\u0026#34;: \u0026#34;PublicReadGetObject\u0026#34;, \u0026#34;Effect\u0026#34;: \u0026#34;Allow\u0026#34;, \u0026#34;Principal\u0026#34;: \u0026#34;*\u0026#34;, \u0026#34;Action\u0026#34;: \u0026#34;s3:GetObject\u0026#34;, \u0026#34;Resource\u0026#34;: \u0026#34;arn:aws:s3:::{対象のバケット名}/*\u0026#34; } ] } これで準備は完了です。\n確認 では、先ほど控えたエンドポイントにブラウザからアクセスしてみてください。\n正常にHTML/CSS/JavaScriptが読み込まれて表示されていますね♩\n終わりに いかがだったでしょうか？\nAWSのアカウント情報さえ持っていれば、簡単にWebページを公開することが出来ました。\nしかし、今のままだとドメインがAWSのものになってしまっているので、CloudFrontを利用するか、Nginx等のプロキシサーバーを挟んで表示するなどして、調整してみてください♩\n","date":"2018-03-18T15:26:25+09:00","image":"/wp-content/uploads/2018/03/awsS3CreateBucketEye.png","permalink":"/2018/03/18/2836/","title":"【お便利AWS】S3バケットで静的サイトホスティングをしてみよう"},{"content":"言語を変えたい CCでAdobe製品をインストールすると、基本的に日本語メニューの状態でインストールがされると思います。\nしかし、英語環境のメニューに慣れている方や、利用しているテンプレートのエクスプレッションが英語環境前提で記述されていると、日本語環境のAfterEffectsだとエラーになってしまう事があります。\nこんな時はエクスプレッションを日本語向けに修正してもいいですが、膨大な量の場合、全てを日本語向けのエクスプレッションに直すのは果てしない作業ですし、間違えたらプロジェクトが動かなくなってしまうので、AfterEffectsの言語を日本語から英語に変えることで対応可能です。\nAfterEffectsの言語設定を日本語から英語に変える事自体は簡単に出来てしまうので紹介致します。\n手順 ae_force_english.txtの作成 手順はたった一つです。\nae_force_english.txtというファイルを書類フォルダに作成するだけです。\n内容は何も無い空のファイルで良いです。\nこれで準備は完了です！\n確認 では、確認してみましょう。\nAfterEffectsを起動してみてください。\nメニューが英語表記になっていて、エクスプレッションのエラーも無事に消えていますね♪\n終わりに いかがでしょうか？\n再インストールすること無く、言語を変えることが出来ました。\nまた日本語に戻したい場合は、ae_force_english.txtを削除して再起動すれば日本語メニューに戻すことが出来ます。\nもし、好みやテンプレートに合わせて言語を変えたい場合はお試しください。\n","date":"2018-03-17T10:52:52+09:00","image":"/wp-content/uploads/2018/03/afterEffectsForceLangEye.png","permalink":"/2018/03/17/2678/","title":"【秒殺】After Effectsの言語を日本語から英語に変える方法"},{"content":"Jenkinsで自動化 毎回同じ作業をするのがつらたん。。。 システム開発等をしていると、Githubにソースをpushまたはmergeしたタイミングで共通の処理を行いたい、というケースが出てくると思います。\nソースをビルドしたり特定のディレクトリに移動したり、Slackに通知を飛ばしたり...etc\nそんな時にJenkinsを用いれば共通作業を自動化することが可能です。\nJenkins？ JenkinsとはCIツールの一つです。\nCIツールとは、Continuous Integration Tool(継続的インテグレーションツール）という意味の略で、オープンソースのソフトウェアです。\n継続的インテグレーションツール？ また小難しい単語が出てきましたね。orz\n継続的インテグレーションとは、システム開発において、ソースのビルドやユニットテストを都度繰り返し行なうことによって、システムの問題を早期発見し、開発の効率化・品質向上に繋げるための手法の事を指します。\n今回はこの作業をJenkinsというソフトウェアを利用することで自動化を図ることが可能になります。\n今回は、Githubのpush操作をJenkins側で認識し、特定のジョブを実行する、という部分までの手順をご紹介致します。\n手順 前提 Point\rGit関連のJenkinsプラグインインストール済み(Git, Github)\rJenkinsユーザーのSSHキーは設定して接続確認済み\r[embed]/it/2018/03/12/2586/[/embed]\nJenkins側の設定 まずはJenkins側の設定を行いましょう。\nGithubからのWebhookで実行したいJobを選択します。\n次にソースコード管理セクションにて、以下の作業を行い、認証情報を新たに設定するので追加\u003eJenkinsを選択します。\nPoint\rGitにチェックを入れる\r対象のリポジトリを入力\rビルドするブランチを指定\rビルドするブランチを指定\rリポジトリをチェックアウトするディレクトリを指定\r認証情報の追加ダイアログが表示されたら、以下の項目の入力を行った上で追加ボタンをクリックします。\nPoint\r種類をSSHユーザー名と秘密鍵\rスコープをシステム\rユーザーをSSHキーを作成したユーザー名\r秘密鍵をJenkinsマスター上のファイルからにチェックを入れ、サーバー上の秘密鍵までのパスを入力\rそうすると、上記で登録したユーザー名の認証情報が選択された状態になります。\n次にさらに下部のGitHub hook trigger for GITScm pollingにチェックを入れ、サンプルとしてシェルスクリプトの欄に以下のコマンドを入力して保存ボタンをクリックしましょう。\necho \u0026#39;Update Success.\u0026#39;\nGithub側の設定 次にGithub側でJenkinsへのWebhook通信の設定を行いましょう。\nWebhookを行いたいリポジトリのページを開き、Settings\u003eWebhooks\u003eAdd webhookボタンをクリックします。\n※リポジトリに対して管理者権限が無いとSettingsメニューが出ません\nPayload URLは以下を追記してください。\nhttp://{Jenkinsサーバー}/github-webhook/\nContent typeはapplication/jsonを指定して他はデフォルトのままでAdd webhookボタンをクリックします。\nサーバー側の設定 最後にAWSのEC2等を利用していて、セキュリティグループでIP制限をかけている場合は、Githubからのアクセスを許可する必要があります。\nコチラにアクセスし、hooksとなっている部分のIPを全て許可しましょう。\n{ \u0026#34;verifiable_password_authentication\u0026#34;: true, \u0026#34;github_services_sha\u0026#34;: \u0026#34;46d8ca660a3023125e6581aa8c6b912c61fdcb34\u0026#34;, \u0026#34;hooks\u0026#34;: [ \u0026#34;192.30.252.0/22\u0026#34;, //追加 \u0026#34;185.199.108.0/22\u0026#34; //追加 ], \u0026#34;git\u0026#34;: [ \u0026#34;192.30.252.0/22\u0026#34;, \u0026#34;185.199.108.0/22\u0026#34;, \u0026#34;13.229.188.59/32\u0026#34;, \u0026#34;13.250.177.223/32\u0026#34;, \u0026#34;18.194.104.89/32\u0026#34;, \u0026#34;18.195.85.27/32\u0026#34;, \u0026#34;35.159.8.160/32\u0026#34;, \u0026#34;52.74.223.119/32\u0026#34; ], \u0026#34;pages\u0026#34;: [ \u0026#34;192.30.252.153/32\u0026#34;, \u0026#34;192.30.252.154/32\u0026#34; ], \u0026#34;importer\u0026#34;: [ \u0026#34;54.87.5.173\u0026#34;, \u0026#34;54.166.52.62\u0026#34;, \u0026#34;23.20.92.3\u0026#34; ] }\n[adsense]\n確認 では、実際にpushを行ってJobが実行されるか確認してみましょう。\nまずはGithubにpushをしてみます。\ngit push origin master Counting objects: 1, done. Writing objects: 100% (1/1), 198 bytes | 0 bytes/s, done. Total 1 (delta 0), reused 0 (delta 0) To https://github.com/xxxxxx/yyyyyy.git xxxxxxx..xxxxxxx master -\u0026gt; master\nお、、、\nおぉ〜！！！正常にpush操作を検知してJenkinsのJobが実行されましたね♪\nGithub側のWebhookの履歴にも成功が追加されています。\n終わりに やや設定が複雑ですが、最初に設定さえしてしまえば後々とても幸せになります。\nJenkinsはCIツールとしてとても普及していて、他にも様々なサービス連携を設定する事が出来てとても便利なので、ぜひ使いこなせるようになりましょう。\n","date":"2018-03-15T19:39:28+09:00","image":"/wp-content/uploads/2018/03/jenkinsGithubSshEye.png","permalink":"/2018/03/15/2604/","title":"【全自動雑用おいたん】Githubへのpushを受け取ってJenkinsのJobを実行してみよう"},{"content":"印刷したいけどプリンターが無い・・・ 大学生や社会人の方はレポートや書類をパソコンで作成し、印刷して持ち込んだり提出したりする場合が多々あると思います。\nしかし、プリンターが自宅に無かったり、壊れていたり、今すぐ印刷しないといけないのに出来ない！どうしよう！！という場合も少なからずあると思います。\nその際に、友達に頼むのも悪いし、頼んだとしてもタイミングが合わず印刷が出来ない事もありえます。\nお手軽セブンプリント そんな困った時は、セブンイレブンのサービスのネットプリントサービスを利用してみましょう。\nセブンプリントは誰でも会員登録不要でセブンイレブンで書類の印刷を可能にしてくれる非常に便利なサービスです。\n以下のような場合にすごく助かります。\nプリンターが無い\rプリンターが壊れてる\rインクが切れている\r印刷用紙が切れている\r旅先や出先で書類の印刷が必要になった\rなどなど、用途は様々です。\n今回は実際に利用してみたので、印刷までの一連の流れをご紹介します。\n手順 プリント設定 まずはコチラにアクセスし、個人のお客様ボタンをクリックします。\n次に、今回は匿名ユーザーで利用するのでユーザー登録なしでプリントするボタンをクリックします。\nユーザー登録なしでプリントする際の詳細情報が表示されるので、問題が無ければ今すぐファイル登録ボタンをクリックします。\nすると、利用規約が表示されるので、内容を確認の上、利用規約および個人情報の取扱いに同意するにチェックを入れ、利用を開始するボタンをクリックします。\n次にプリント用紙の種類を選択します。\n今回はPDFを印刷するので普通紙にプリントボタンを選択します。\n次は画像選択とプリントの設定を求められるので、まずは任意のファイルをアップロードしましょう。\n次に、以下の情報を入力の上、登録するボタンをクリックしてください。\n※念のため暗証番号は設定しておきましょう\nそしたら確認ダイアログが表示されるので内容を確認の上、OKボタンを押しましょう。\nすると、ファイル登録履歴に項目が追加されているので、処理が完了するまで少し待ちましょう。\nセブンのネットプリントでは一度に最大10件まで設定出来るので複数あるのであれば繰り返し登録をしましょう。\nメールにプリント情報を転送 先ほどのダイアログにもありましたが、会員ログインをしていない状態なので、画面をリロードしたり閉じたりしてしまうと再度設定をし直す必要が出てしまうので、忘れずにプリント情報をメールアドレスに転送するようにしましょう。\nまずはファイル登録履歴のメール通知ボタンをクリックします。\nすると、以下のようなダイアログが表示されるので転送先のメールアドレスを入力し、送信するボタンを押します。\nすると、以下のようなメールが届くと思います。\nこのメールに記載されているプリント予約番号と先ほど設定した4桁の暗証番号をセブンイレブンでプリントする際に入力するので控えときましょう。\nセブンイレブンで印刷 あとは実際に、セブンイレブンのマルチコピー機にて、プリント予約番号と暗証番号を入力することで店頭での印刷が可能です♪\n終わりに 今までは自宅で印刷出来ないときは自分一人ではどうしようも出来ませんでしたが、セブンイレブンのネットプリントサービスが開始されたことにより、セブンイレブンが近くにあれば簡単にプリントアウトが出来るようになりました。\nセブンイレブンの店舗数もかなり多いので、都内に住んでいる方ならこれでプリントには困らなくなると思いますので、是非ご利用してみてください♪\n","date":"2018-03-14T21:35:19+09:00","image":"/wp-content/uploads/2018/03/sevenPrintEye.png","permalink":"/2018/03/14/2728/","title":"【大学生におすすめ】セブンプリントを使ってコンビニで書類を印刷してみよう【いい気分】"},{"content":"Ansibleのディレクトリ構造 ちょっと複雑 Ansibleには、様々なディレクトリや設定ファイルが登場します。\nとても便利なのですが、数が多いのでそれぞれの意味を理解するのが少し大変です。\nなので今回はAnsibleで出てくる各種ディレクトリの用途についてまとめてみました。\n※roles内部にも似たようなディレクトリ構造を持つことが可能ですが、そちらはまた別の記事にてご紹介しようと思います\r説明 前提 筆者の作業環境のAnsibleのバージョンは2.4.2.0となります。\n全体像 まずは、以下のような構造で用意してみました。\nディレクトリ構造 . ├── echo.yml ├── files │ └── local │ └── sample │ └── file.json ├── files.yml ├── handlers │ └── apache │ └── main.yml ├── inventories │ └── local │ ├── group_vars │ │ ├── all.yml │ │ └── localservers.yml │ └── hosts ├── roles │ ├── echo │ │ └── hello │ │ └── tasks │ │ └── main.yml │ ├── files │ │ └── copy │ │ └── tasks │ │ └── main.yml │ ├── synchronize │ │ └── copy │ │ └── tasks │ │ └── main.yml │ └── templates │ └── copy │ └── tasks │ └── main.yml ├── synchronize.yml ├── templates │ └── local │ └── sample │ └── file.j2 ├── templates.yml └── temporaries └── local ├── files │ └── sample │ └── file.json ├── synchronize │ └── sample │ └── file.json └── templates └── sample └── file.json インベントリーは以下のように指定しています。\ninventories/local/hosts [allservers:children] localservers [localservers:children] localserver [localserver] 127.0.0.1 次にそれぞれのディレクトリの役割を紹介していきます。\n[adsense]\rgroup_vars inventories/{環境}ディレクトリの中にあるgroup_varsディレクトリは、読み込んだhostsファイルにて記述したセクション単位で適用する変数を設定することが可能です。またファイル名をall.ymlにするとグループ関係無く全てのグループに変数定義が適用されます。\nまずは、今回はlocal環境のみに接続をするので、以下のように指定してみます。\ninventories/local/group_vars/all.yml --- #------------------------------------------ # 環境 #------------------------------------------ ENV: \u0026#34;local\u0026#34; roles rolesディレクトリは、実際にplaybookコマンドで実行する処理単位で記述したファイル群を管理するディレクトリです。\nこのタスクの中でshellスクリプトを実行したり、各種ansibleの標準モジュールを使ってサーバー操作をしていく事になります。\n今回はサンプルとして、shellを実行するplaybook及びタスクを以下のように記述してみます。\necho.yml --- - hosts: allservers roles: - echo/hello roles/echo/hello/tasks/main.yml - name: Echo shell: echo \u0026#39;Hello,World!!\u0026#39; register: result - debug: var=result.stdout when: result | success tags: - always files filesディレクトリは主に、CopyモジュールやSynchronizeモジュールを使って設定ファイル等をリモート先に配置する際のファイル群を管理するディレクトリです。Copyモジュールのsrc属性は自動的にこのfilesディレクトリの内部をデフォルトで参照します。\nplaybook及びタスクは以下のようになります。\nfiles.yml --- - hosts: allservers roles: - files/copy - synchronize/copy roles/files/copy/tasks/main.yml - name: Copy copy: src={{ ENV }}/sample/file.json dest=temporaries/{{ ENV }}/files/sample/file.json roles/synchronize/copy/tasks/main.yml - name: Synchronize synchronize: src: \u0026#34;{{ ENV }}/sample\u0026#34; dest: \u0026#34;temporaries/{{ ENV }}/synchronize\u0026#34; 実際に実行してみましょう。\ncommand ansible-playbook -i inventories/local/hosts files.yml --connection=local 結果 └── temporaries └── local ├── files │ └── sample │ └── file.json └── synchronize └── sample └── file.json 上記のように、正常にコピーされていると思います。。\ntemplates templatesディレクトリは主に、Templateモジュールを使って、ファイルの内容を動的に変えた上でリモート先に配置する際のテンプレートファイル群を管理するディレクトリです。Templateモジュールのsrc属性は自動的にこのtemplatesディレクトリの内部をデフォルトで参照します。\nまた、このテンプレートファイルはJinja2という形式になり、拡張子はj2となります。\nplaybook及びタスクは以下のようになります。\ntemplates.yml --- - hosts: allservers roles: - templates/copy roles/templates/copy/tasks/main.yml - name: Template template: src: \u0026#34;{{ ENV }}/sample/file.j2\u0026#34; dest: \u0026#34;temporaries/{{ ENV }}/templates/sample/file.json\u0026#34; templates/local/sample/file.j2 { \u0026#34;name\u0026#34;: \u0026#34;{{ USER.NAME }}\u0026#34;, \u0026#34;from\u0026#34;: \u0026#34;templates\u0026#34; } このタスク用にlocalserverグループ用group_vars変数も追加します。\ninventories/local/group_vars/localservers.yml --- #------------------------------------------ # ユーザー #------------------------------------------ USER: NAME: Ansible では、実際に実行してみましょう。\ncommand ansible-playbook -i inventories/local/hosts templates.yml --connection=local 結果 └── temporaries └── local └── templates └── sample └── file.json temporaries/local/templates/sample/file.json { \u0026#34;name\u0026#34;: \u0026#34;Ansible\u0026#34;, \u0026#34;from\u0026#34;: \u0026#34;templates\u0026#34; } 正常に変数が置換された上でコピーされていますね。\n終わりに 今回はgroup_vars/roles/files/templatesディレクトリの動きについてご紹介しました。\nこちらのディレクトリ構造をうまく使えばより効率的なAnsible構成を実現することが可能になりますので、是非参考にしてみてください。\n","date":"2018-03-13T19:13:16+09:00","image":"/wp-content/uploads/2018/03/ansibleDirectoryEye.png","permalink":"/2018/03/13/2783/","title":"【失われしベストプラクティスを求めて】Ansibleでの特殊な動きをするディレクトリについて"},{"content":"HTTPSとSSH どっちを使うべき？ Githubを使っていると、リポジトリをcloneしたりpushする際に、HTTPSとSSHのどちらを使えば良いか？と言う点で悩むことがあると思います。\n推奨はHTTPS Githubとしては推奨はHTTPSとしています。\nHTTPS通信で認証を行う場合は、認証はGitHubのユーザー名/パスワードによる認証となります。\nまた、SSH方式より高速です。\nセキュリティ的にはSSH しかし、JenkinsやAnsible、その他のミドルウェアからGithubにアクセスする際は、基本的にはSSH方式で接続を行っていると思います。\n多少、通信速度は落ちますが公開鍵方式を用いるのでセキュリティがしっかりしています。\n今回はMacでのSSHキーの作成からGithubへのSSH方式での接続確認までの手順を紹介致します。\n手順 SSHキーの作成 まずはSSHキーを作成しましょう。\nターミナルから、以下のコマンドを実行してください。\ncommand ssh-keygen -t rsa するとターミナルに以下の入力を求められます。\nメッセージ\r内容\rEnter file in which to save the key (/var/lib/jenkins/.ssh/id_rsa):\r生成するファイルの名称を求められます。デフォルトのid_rsaで良ければ何も入力せずにエンターキーを押しましょう。\rEnter passphrase (empty for no passphrase):\rパスフレーズの入力を求められます。特に設定不要なら何も入力せずにエンターキーを押しましょう。\rEnter same passphrase again:\rパスフレーズの再入力を求められます。指定していなければ何も入力せずにエンターキーを押しましょう。\r正常にSSHキーが生成されると以下のようなログが表示されます。\nbash-4.2$ ssh-keygen -t rsa Generating public/private rsa key pair. Enter file in which to save the key (/var/lib/jenkins/.ssh/id_rsa): xxx_rsa_id Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in xxx_rsa_id. Your public key has been saved in xxx_rsa_id.pub. The key fingerprint is: xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx {ユーザー名}@{サーバー} The key\u0026#39;s randomart image is: +--[ RSA 2048]----+ | .=x=x.x. | | x.+x .x. | | x.xx x | | .=.x. x x. | | .x+ x | | x x | | | | | | | +-----------------+\nそうすると、~/.ssh/ディレクトリの中に以下の2つのファイルが作成されていると思います。\nファイル名\r説明\rxxx_rsa_id\r秘密鍵。基本的にこのファイルはそのままノータッチ。\rxxx_rsa_id.pub\r公開鍵。こちらの情報を各種サーバーや外部サービスに登録することでSSH通信を可能にします。\r公開鍵の内容をGithubに登録するので、catコマンドやvimコマンドでクリップボード等にコピーしておいてください。\nGithubに公開鍵の登録 次にGithub側に上記で作成した公開鍵の情報を登録します。\nまず、Githubにログインしたら、アカウントメニュー\u003eSettingをクリックします。\n左部のPersonal settingメニューからSSH and GPG keysをクリックします。\nTitleに任意の名前をつけて、Keyに先ほどコピーした公開鍵の情報を入力したらAdd SSH keyボタンをクリックします。\nこれでGithubに公開鍵が登録されました。\nconfigファイルの作成 次にconfigファイルを作成します。\nconfigファイルとは、ssh経由でのリモートサーバーの接続する際に利用される設定ファイルです。\nこのファイルを用意すると、以下のコマンドを毎回打つ必要が無くなり、とてもすっきりします。\ncommand ssh {ユーザー名}@{ホスト名} -i ~/.ssh/{秘密鍵} 今回は以下のソースを追加してください。\n~/.ssh/config Host github github.com HostName github.com IdentityFile ~/.ssh/{使用する秘密鍵} User git 接続確認 では、ここでローカルマシンからGithubへの接続確認をしてみましょう。\n以下のコマンドを実行してみてください。\ncommand ssh -T github 以下のログがターミナルに表示されればSSH通信の設定が完了です♪\ncommand $ ssh -T git@github.com The authenticity of host \u0026#39;github.com (xxx.xxx.xxx.xxx)\u0026#39; can\u0026#39;t be established. RSA key fingerprint is xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx. Are you sure you want to continue connecting (yes/no)? Hi {リポジトリ名}! You\u0026#39;ve successfully authenticated, but GitHub does not provide shell access. ※前半のメッセージは初回接続時のみ表示されます\n終わりに 以上のように、思っていた以上に簡単にSSHでの通信準備が整いました。\nGithubへの通信はHTTPS通信でも可能ですが、認証キーを用いた接続方法を覚えておくことで他のサービスやシステムを使う際に役に立つので、ぜひSSH通信の設定方法を覚えてみてください。\n","date":"2018-03-12T21:41:46+09:00","image":"/wp-content/uploads/2018/03/MacGithubSshEye.png","permalink":"/2018/03/12/2586/","title":"【セキュリティ向上】SSHキーを作成してMacからGithubにHttps通信ではなくSSH接続してみよう【ターミナル操作】"},{"content":"Go言語 以前、コチラの記事にてVisual Studio Codeのインストール方法をご紹介しました。\n単なるテキストエディタとしても非常に便利ですが、開発環境として利用することももちろん可能なくらい高機能です。\n以前Go言語の導入手順を紹介しているので、今回はVisual Studio CodeでGo言語を扱えるようにするまでの手順を紹介します。\n手順 拡張機能の追加 Visual Code Studioには様々な拡張機能があり、追加していくことで多種多様な言語の開発を行えるようになります。この辺はAtomと似ていますね。\nVisual Code Studioを開いたら左メニューの拡張機能アイコンをクリックします。\n検索エリアに「Go」と入力して、一番上に出てきた拡張機能をインストールしましょう。\nsettings.jsonの追記 次に、settings.jsonに以下を追記します。\n{ ・・・ \u0026#34;go.gopath\u0026#34;: \u0026#34;{プロジェクトパス}\u0026#34;,//環境変数GOPATHと同義 }\nこれで、環境変数$GOPATHを指定するのと同じ設定になります。\n必要な関連ツールのインストール 以下のショートカットで検索バーを表示し、「GO: Install/Update tools」を入力してヒットしたメニューをクリックします。\nそうするとインストールが始まるので、All tools successfully installed. You're ready to Go :).が表示されるまで待ちましょう。\n表示されればインストール完了です。\nデバッガーのインストール 次にデバッガーをインストールします。\nプロジェクト内で以下のコマンドを実行しインストールします。\ngo get -u -v github.com/derekparker/delve/cmd/dlv\nVSCodeからGoの実行 これで実行する準備は出来ましたので確認して見ましょう。\n試しにサンプルとして、以下のファイルを作成してください。\npackage main import \u0026#34;fmt\u0026#34; func main() { fmt.Println(\u0026#34;Hello Golang\u0026#34;) }\n作成したらF5を教えてください。そうすると、以下のようなダイアログが表示されるのでパスワードを入れて続けるボタンをクリックします。\nこれで実行されると思います。\n終わりに ディレクトリ構成が複雑なGo言語でもVisual Studio Codeでの実行が可能になりました。\nコード保管なども効いてとても便利なので、ぜひお試しください♪\n","date":"2018-03-11T21:02:37+09:00","image":"/wp-content/uploads/2018/03/setupGoInVSCodeEye.png","permalink":"/2018/03/11/2201/","title":"【レッツカスタマイズ】Visual Code StudioにGo言語の開発環境を整えてみよう！"},{"content":"CSSを変更したのに変更が適用されない あれ？変わらない・・・ Wordpress等でブログを作成している場合、レイアウトを調整するためにCSSファイルの内容を変更しても、すぐに反映されない事があると思います。\nなぜ反映されないのか？ これはキャッシュ(正式にはブラウザキャッシュ)という機能が働いている事が原因です。\nブラウザキャッシュとは？ Google ChromeやMozilla Firefox、Internet ExplorerなどのWebブラウザは、インターネット上にある様々な情報をHTTP通信で取得し、表示することで閲覧を可能にしてくれるアプリケーションです。\nしかし、毎回同じURLにアクセスしデータを取得するとなると、通信量が非常に多くなってしまい、見る側も見られる側も負担が多くなってしまいます\nそこで、Webブラウザは一度取得した情報(画像ファイルやCSSファイル、JavaScriptファイル)をブラウザキャッシュとして一時保存し、取得し直すことなく再表示を可能にしてくれます。\n同じファイル名だと再取得しない しかし、この機能が原因でCSSファイル等を変更してもファイル名が同じだと、修正前の古い情報をそのまま適用するので反映されない！という問題が発生してしまうのです。\nじゃあどうすればいいか？ もちろん、変更したことを知っている人であればブラウザキャッシュを削除すれば良いが、サイト訪問者全てがブラウザキャッシュを削除してくれるわけでは無いので必ず何かしらの対策を入れる必要があります。\n方法としてはHTMLでCSSファイル等を読み込む際に、変更日時等をクエリに付与して読み込むことで強制的に読み込ませる、という方法がメジャーです。\n例えば、以下のような読み込みの仕方をしていると、ブラウザキャッシュが効いてしまうのでCSSファイルの内容を変更しても反映がされないです。\nindex.html \u0026lt;link rel=\u0026#39;stylesheet\u0026#39; id=\u0026#39;style-css\u0026#39; href=\u0026#34;./style.css\u0026#34; type=\u0026#39;text/css\u0026#39; /\u0026gt; しかし、以下のような自動でファイルの編集日時を付与するような読み込みの仕方をしていれば、ファイル名が同じでもクエリ文字列に差があるので、再読み込みをしてくれるようになります。\nindex.html \u0026lt;link rel=\u0026#39;stylesheet\u0026#39; id=\u0026#39;style-css\u0026#39; href=\u0026#34;./style.css?date=201802272330\u0026#34; type=\u0026#39;text/css\u0026#39; /\u0026gt; Wordpressを使っているのであれば、クエリ文字列にファイルの更新日時を自動で付与することが可能なので、今回はその設定方法をご紹介致します。\n※JavaScriptファイルや画像ファイルについても同様にクエリ文字列をつけるようにすることでキャッシュ対策が可能です\n手順 header.phpで読み込んでいる場合 まずは、header.phpで直接CSSファイルを読み込んでいる場合の修正方法です。\nダッシュボードから外観\u003eテーマの編集\u003eテーマヘッダー(header.php)を選択します。\nCSSファイルを読み込んでいる行を見つけたら、以下のように修正しましょう。\nheader.php \u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;\u0026lt;?php bloginfo(\u0026#39;stylesheet_url\u0026#39;); echo \u0026#39;?\u0026#39; . filemtime( get_stylesheet_directory() . \u0026#39;/style.css\u0026#39;); ?\u0026gt;\u0026#34; type=\u0026#34;text/css\u0026#34; /\u0026gt; これだけでCSSファイルの末尾に自動でファイル更新日時のクエリ文字列が付与されるので、ファイルの内容を修正すれば自動的にキャッシュがクリアされるようになります。\nfunction.phpでCSSを読み込んでいる場合 使用しているテーマによっては、header.phpではCSSの読み込みをしておらず、wp_enqueue_styleという関数を使用して、CSSを読み込ませているものもあります。\nその場合はまず、ダッシュボードから外観\u003eテーマの編集\u003eテーマヘッダー(header.php)を選択します。\n次に、「wp_enqueue_style」という文字列で検索をかけます。\n該当する項目があったら、以下のように★マークの部分を修正してファイルを更新ボタンをクリックします。\n$mtime = filemtime(get_stylesheet_directory() . \u0026#39;/style.css\u0026#39;);//★追加 wp_register_style( \u0026#39;style\u0026#39;, get_stylesheet_uri(), array(\u0026#39;normalize\u0026#39;, \u0026#39;font-awesome\u0026#39;), $mtime,//★変更 \u0026#39;all\u0026#39; );\nこれだけでOKです。\n確認 では実際にブラウザの開発者ツールを使ってソースの読み込み部分を確認してみましょう。\n正常にクエリ文字列が反映されていますね。\n終わりに Webサイト制作をする上では、静的コンテンツのキャッシュ対策はマストとなります。\nこの対策が出来ていないと、Webサイトのレイアウトリニューアル時に一気にデザイン崩れ等が発生してしまい、利用者を失うことに繋がってしまうので、必ず対策を入れるように心がけましょう。\n","date":"2018-03-10T19:49:22+09:00","image":"/wp-content/uploads/2018/03/cssCacheClearEye.png","permalink":"/2018/03/10/2515/","title":"【キャッシュ対策】WordpressのCSSにクエリパラムを付与しての変更を即時反映させる方法【更新日時をつける】"},{"content":"Visual Studio Code Visual Studio Code\u0026nbsp;とは、Microsoftが開発したオープンソースのテキストエディタです。\n2015年に公開され、まだ新しい部類のテキストエディターですが、多機能で使いやすいため多くのエンジニアやデザイナーが利用されています。\n同じようなテキストエディタとして使われているのはAtomやVimが有名です。\nちなみに、Visual Studioという名称のMicrosoft製IDEがありますが、別物と考えてもらって良いでしょう。\n今回はこちらの環境構築についてご紹介していきます。\n手順 前提 mac環境\rhomebrew導入済み\rインストール 以下のコマンドでhomebrew caskから、Visual Studio Codeをインストールしましょう。\nコマンド brew cask install visual-studio-code 起動確認 Visual Studio Codeを起動してみましょう。\n正常に起動出来ましたね。\n次に各種設定していきましょう。\nターミナルから起動出来るようにする まずはShift+Cmd+Pで検索ボックスを起動し、\u003eShell Command: Installと入力し、ヒットしたメニューをクリックします。\nクリックすると以下のようなダイアログが表示されます。\nこれで、ターミナルから以下のコマンドで指定したディレクトリをVisual Studio Codeで起動することが可能になりました。\nコマンド code {ディレクトリパス} ユーザー設定 次にエディター自体の設定をしていきます。\nVisual Studio Codeは設定をsettings.jsonというファイルに記述して管理していきます。\nショートカットのCtrl + ,を実行してください。\nそうするとユーザー設定のタブが表示されます。\n設定自体はここにJsonの形式でどんどん追記していき、ファイルを保存すれば即時反映されます。\n設定可能な項目はコチラを参照ください。\n今回は以下のように最低限の設定してみました。\n{ \u0026#34;editor.cursorBlinking\u0026#34;: \u0026#34;smooth\u0026#34;,//カーソルアニメーションをスムーズ \u0026#34;editor.renderWhitespace\u0026#34;: \u0026#34;boundary\u0026#34;,//半角スペースを「・」表示 \u0026#34;editor.renderIndentGuides\u0026#34;: true,//インデントの高さの表示補助 \u0026#34;editor.renderLineHighlight\u0026#34;: \u0026#34;all\u0026#34;,//選択行を行番号含めて強調表示 \u0026#34;window.title\u0026#34;: \u0026#34;${dirty}${activeEditorMedium}${separator}${rootName}\u0026#34;//ファイル名をフルパス表示 }\nあとがき インストールやユーザー設定も非常に簡単に指定することが出来ます。\n個人的にはAtomより軽いイメージなので、サクッとプログラミングをするにはとてもオススメなので、是非インストールして見てください♪\n","date":"2018-03-08T19:14:22+09:00","image":"/wp-content/uploads/2018/03/installVSCodeEye.png","permalink":"/2018/03/08/2185/","title":"【Mac/Windowsおすすめエディター】AtomよりサクサクのVisual Studio Codeのインストール方法【使い方】"},{"content":"正確な数値を知りたい！ GoogleAnalyticsを使っている方は各ページの訪問者数や滞在時間等を見ながらブログの改善を測ったりしていると思います。\nしかし、GoogleAnalyticsで蓄積されるPV数は、人間だけではなく、各検索エンジンのクローラーやbotの訪問数も含んでしまっています。\nより正確な分析を行うためにクローラーやbotの訪問をカウントしないようにする必要があります。\nこの設定はすごく簡単に秒殺で変更することが可能なので今回はその手順を紹介致します。\n手順 ビューの設定変更 GoogleAnalyticsにログインをしたら、左部メニューの歯車\u003eビュー設定をクリックします。\n画面遷移したら、ページ下部のボットのフィルタリングエリアの既知のボットやスパイダーからのヒットをすべて除外しますにチェックを入れて保存ボタンをクリックします。\n設定はたったこれだけです。\nこれで今後はクローラーやbotの訪問についてはPV数のカウントがされないようになりました。\nただ、設定変更後はおそらくPV数が下がると思いますがくじけずに我慢しましょう。笑\n終わりに 上記のように、数回のクリック操作だけでクローラー等のPV数を除外することが出来ました。\n正確なPV数はブログやホームページをより良いサイトにするための非常に大切な指標になるので、忘れずにこの設定を入れておきましょう。\n","date":"2018-03-07T22:17:19+09:00","image":"/wp-content/uploads/2018/03/analyticsBotIgnoreEye.png","permalink":"/2018/03/07/2720/","title":"【秒殺】GoogleAnalyticsの分析からクローラーの訪問をサクッと除外する方法"},{"content":"アカウント名を変えたい・・・ GithubのリポジトリURLは以下のように、\nhttps://github.com/{アカウント名}/{リポジトリ名}\nの形で構成されています。\nこのアカウント名は、Githubに登録する際に決めた情報です。\nとりあえずアカウント作ってみっか！、という気持ちで適当に入力し、後々、いろいろな人にリポジトリやアカウントを共有することになって、恥ずかしい！と言うケースは少なからずあります。(筆者も直面しましたorz)\n影響範囲の懸念 Githubにはそういう方向けの機能として、アカウント名の変更機能は標準で備わっています。\nしかし、既にリポジトリを作っていたり、ある程度開発を進めてしまっている状態では、この作業を行うのを躊躇してしまうと思います。\n懸念点\rすでにクローンしているリポジトリはどうなってしまうのか・・・？\rSSHが繋がらなくなるんじゃないか・・・？\rなどなど。\n今回はその辺の懸念も含めて検証を行って手順をまとめましたのでご紹介致します。\n手順 アカウントメニューからリポジトリ名を変更 Githubにログインしたら、アカウントアイコン\u003eSettingsをクリックします。\n次に左部のPersonal settingメニューから、Accountを選択し、中段のChange usernameボタンをクリックします。\nそうすると、以下のようなダイアログが表示されます。\n内容としては、\n過去のプロフィールのURL(https://github.com/${アカウント名})にアクセスしてもリダイレクトされないのでセットアップし直してね\r過去のGithubPagesのURL(https://pages.github.com/${アカウント名}/{リポジトリ名})にアクセスしてもリダイレクトされないのでセットアップし直してね\rリポジトリまで指定をするなら、新しい方にリダイレクトするよ\rアカウント名の変更まで少〜しだけ、時間がかかるよ\rと、いう感じです。問題が無ければそのままI understand. let's change my usernameボタンをクリックします。\n変更後のアカウント名を入力し、Change my usernameボタンをクリックします。\n以下のような画面が表示され、\n少し待つと、以下のような画面が表示されるので、View {新しいアカウント名} settingボタンをクリックすると、変更後のアカウント設定画面に遷移します。\n確認 では、一つずつ変更が正しく設定されているか確認していきましょう。\nプロフィールページ まずはプロフィールページです。\n新URL 正しくページが表示されています。\n旧URL 404エラーが表示されます。\nリポジトリページ 次はリポジトリページです。\n新URL 正常に表示されます。\n旧URL 新しいリポジトリページにリダイレクトされて表示されます。\nローカルリポジトリ 次にローカルリポジトリを確認してみましょう。\nまずは、リポジトリをクローンしたディレクトリに移動して、以下のコマンドを実行してみてください。\ncommand git remote -v このコマンドは、ローカルリポジトリが向いている先のリモートリポジトリのURLを表示します。\nアカウント名変更前のURLが表示されると思います。\n試しに、今の状態のまま修正をコミットしOriginにpushしようとすると以下のようなエラーが出てしまいます。\nこれは、変更前のすでに存在しないユーザー名に紐付くリポジトリにpushしようとしてしまっていることが原因です。\n一応以下のように指定することでもpushは可能ですがやめましょう！笑\ncommand git push git@github.com:{アカウント名}/{リポジトリ名}.git master 正しい方法としては、以下のコマンドでOriginのむき先を変更しましょう。\nSSH通信の場合 git remote set-url origin git@github.com:{アカウント名}/{リポジトリ名}.git HTTPS通信の場合 git remote set-url origin https://github.com/{アカウント名}/{リポジトリ名}.git これで正常にpushが出来たと思います。\n終わりに Githubはアカウント名変更作業に対するサポートがとても手厚くされていました。\nリポジトリ名を変えたい！と、思うことはあり得るので上記の手順のように簡単に変更出来るのはとても助かりますね。\n皆さんもどんどんGithubを活用していきましょう。\n","date":"2018-03-06T21:25:57+09:00","image":"/wp-content/uploads/2018/03/renameGithubAccountEye.png","permalink":"/2018/03/06/2548/","title":"【意外と簡単】Githubのアカウント名を変更する手順まとめ【やり方】"},{"content":"バウンディボックスは便利 バウンディボックスとは？ AfterEffectsで動画編集をしている際に、タイムライン上に配置した素材を選択しドラッグ\u0010\u0026ドロップで配置を決めたりサイズを変更したりすることがあると思います。\nその際に、選択したフッテージの周りにバウンディボックスと呼ばれる枠が表示されます。　あれ？表示されない・・・ しかし、使用しているPCの環境設定や、間違えて無意識のうちにバウンディボックス非表示のショートカットを押してしまうと、フッテージを選択してもバウンディボックスが表示されなくなってしまうことがあります。\nこれはタイムライン上に複数のフッテージを並べている時には結構な死活問題です。笑\n再度、バウンディボックスを表示するにはショートカットを入力することで簡単に再表示することが可能です。\nショートカット Macの場合 Macの場合は、Shift ＋ Command＋H でバウンディボックスの表示を切り替えることが可能です。\nWindowsの場合 Windowsの場合は、 Shift + Ctrl + H でバウンディボックスの表示を切り替えることが可能です。\n終わりに 筆者は最初、原因が分からずさらに枠の事をバウンディボックスと呼ぶことさえも知らない状態だったので、原因解決まで結構時間がかかってしまいました。。。orz笑\nAfterEffectsで動画編集をしているのであれば、この現象については知っておくべきだと思うので、是非覚えておいてみてください\n","date":"2018-03-05T21:52:08+09:00","image":"/wp-content/uploads/2018/03/aeBoundingBoxEye.png","permalink":"/2018/03/05/2688/","title":"【便利ショートカット】After Effectで急にフッテージのバウンディボックスが出ない時の対象方法"},{"content":"遂にきましたこの季節 年が明けてすでに2月も終盤に差し掛かりましたね。\n世間は年度末でバタバタし始めていますが、個人事業主やフリーランスの方もバタバタし始めているかと思います。\nそうです。確定申告がやってきました。\n始めての確定申告 筆者は昨年の3月に退職し、4月から個人事業主となりました。\nですので、始めての確定申告ということもありとても不安です。。。\nしかも、調子に乗って最初から青色申告というハードモードを選びました。笑\n我らの味方「MFクラウド」 そんな迷える子羊(筆者)のために、今は様々な会計ソフトが世の中で出回っています。\n今回は筆者が使っているMFクラウドというクラウド型の会計ソフトを使った確定申告に必要な書類の作り方についてまとめてみたのでご紹介しようと思います。\n手順 前提 前提として、MFクラウドへの2017年1月1日〜12月31日までの仕分け登録は済んでいる事とします。\n※登録自体は単純作業なので割愛します\n家賃や光熱費、固定資産の登録と減価償却額についても事前に作業が終わっている事とします。\nまた、今回は現金管理はしていないので普通預金管理で行います。\n現預金出納帳の確認 まずは現預金出納帳を確認してみましょう。\n現預金出納帳とは？ 現預金出納帳とは、帳簿の分類の中では「補助簿」という区分に該当します。\nまた、補助簿とは仕訳帳や総勘定元帳等の「主要簿」の内容を補助するための帳簿の事を指します。\nそして、補助簿はさらに補助記入帳と補助元帳に分類され、現預金出納帳は仕訳帳を補助する補助記入帳に含まれます。\n基本的には、預金や現金等のお金の動き部分のみを記した帳簿になるので、通帳のお金の動きと基本的には一致する事が前提です。\nMFクラウドでの確認の仕方 MFクラウドにログインしたら、ダッシュボードメニューから会計帳簿\u003e現預金出納帳をクリックします。\n勘定科目を普通預金に変更し、その他は特にいじらずに検索ボタンをクリックします。\nそうすると仕分けを行った内容を元に、一覧に現金の入出金情報が表示されると思います。\nあとは事業用通帳と一行ずつ照らし合わせ、差がないかを目視確認しましょう。\nもしここで金額のズレがあった場合は、仕分けが間違っているので修正をして、通帳と現預金出納帳の差額を0にしましょう。\n仕分けをした内容が現預金出納帳に出ない場合 仕分けをちゃんとしているのに、\n現預金出納帳に表示されず、通帳と一致しない！という場合があるかと思われます。\n原因は外部APIでの自動連携を行った際に、補助科目が自動で設定されてしまった事で検索結果にヒットしていません。\n補助科目は便利ですが、無くても問題は無いので今回は内容を削除してしまいます。\n削除してからもう一度現預金出納帳画面を開き、検索を実行すると正常に一覧に表示されるようになりました。\n確定申告書類の作成 次に確定申告書類を作成していきます。\nダッシュボードメニューから、決算・申告\u003e確定申告書を選択します。\n確定申告書B 確定申告書Bとは？ 確定申告書には2種類あります。\n種別\r説明\r確定申告書Ａ様式\r一般的にサラリーマンや年金受給者が使用する申告書です。\n所得が給与所得や公的年金などの雑所得、総合課税の配当所得、一時所得のみの場合に利用できます。\r確定申告書B様式\r所得の種類に関わらず、誰でも利用できる申告書です。個人事業主など、事業や農業、不動産で収入を得ている場合はB様式です。\n変動所得や臨時所得として、平均課税を選択する場合もB様式となります。\rなので、今回はB様式を用意する必要があります。\n入力 まずは第一表 基本情報を入力していきます。\nページ上部の基本事項タブを選択します。\n以下の必要項目を入力し、設定を保存ボタンをクリックします。\nそうすると、以下のようにリンクが活性化されるので確定申告書Bをクリックしてみましょう。\n入力した内容が書類に反映されていると思います。\nこれは便利ですね！\n今回は最初だったので設定を保存ボタンをクリックしましたが、画面のすべての情報が入力したタイミングでボタンを押せばOKです。\n税理士さんに申告を依頼している場合はこちらに記載をします。\n今回は税理士に依頼はしておらず全て個人でやっているので割愛します。\n次に所得税の還付がある場合の受け取り場所を記入します。\n銀行か郵便局のどちらかの情報を入力してください。\n次に第二表 住民税・事業税に関する情報を入力します。\n個人事業主であれば、天引きをされていないと思うので、自分で納付を選択します。\nここまで入力が完了したら、再度設定を保存ボタンをクリックします。\n次に、第一表 収入金額等：(ア)～(サ)を入力していきます。\nこちらは、確定申告の対象期間に得た総収入額の事です。\nまずはページ上部の収入・所得タブを選択します。\n事業所得と不動産取得は自動で金額が入力されます。\nその他の収入がある場合は入力してください。今回は事業所得のみなので以下のように自動で金額が入力されていればOKです。\n次に第一表 所得金額等の編集：(1)～(8)を入力していきます。\nこちらは、総収入金額から、各種経費経費を差し引いて所得金額を算出します。\nこちらも以下のように自動で入力されていると思います。\n次に、第二表 所得の内訳(所得税及び復興特別所得税の源泉徴収税額)を入力します。\n所得の際に、源泉徴収額が惹かれていた場合、ここに入力する必要があります。\n今回は2件で源泉徴収されていた部分があるので、以下のようになります。\n次に、第二表 特例適用条文を入力します。\n住宅借入金特別控除や家内労働者の特例など、特例条文を入力する必要がある場合は、こちらで入力する必要があります。\n今回は特に必要がないので割愛します。\n次に、 第二表 雑所得（公的年金等以外）､総合課税の配当所得 譲渡所得､一時所得に関する事項を入力します。\n事業収入以外の雑所得等があった場合はここで入力します。\n今回は必要がないので割愛します。\nここまで入力が出来たら、設定を保存ボタンをクリックしましょう。\n次に所得から差し引かれる金額（控除）を入力します。\nページ上部の所得から差し引かれる金額タブを選択します。\nこの画面では生命保険や各種控除系(国民健康保険や国民年金)の金額を入力する必要があります。\nただし、年明けに前年度分を払った場合は、今回の確定申告では含めてはいけないので注意しましょう。\nまた、社会保険料は個人事業の支出ではなく、事業主本人の個人的な支出なので、仕分けをする必要はありません。\nまた、国民健康保険の場合は支払い合計金額を入力してしまえば、証明書等の添付は不要なので手元で管理しておきましょう。\n国民年金保険と生命保険にはそれぞれ事前に送付されているはずの「控除証明書」の添付が必要になります。\n今回は生命保険・国民健康保険・国民年金保険を支払っているので、そちらを入力します。\n入力したら計算ボタンをクリックして表示された金額を入力し、設定を保存ボタンをクリックします。\n次に税金の計算が必要な場合の各種情報を入力します。\nページ上部の所得から税金の計算タブを選択します。\n以下の条件に該当する場合は入力が必要です。\n住宅借入金等特別控除などの税額控除の入力\r予定納税がある場合の予定納税した所得税額の入力\r平均課税を行った場合の金額の入力\r延納届け出を行う場合の入力\r今回は該当しないので割愛します。\n決算書の作成 申告書Bの書類は上記の手順で完了なので、次は決算書を作成します。\nページ上部の所得から決算書入力(一般用)タブを選択します。\nただ、基本的に個人事業主であれば基本事項のみ入力されば良いと思いますので、確定申告書B 第一表 基本情報の入力内容を反映するボタンをクリックして、差異がある部分のみ入力すればOKです。\n入力したら忘れずに設定を保存ボタンをクリックしましょう。\n書類のダウンロード 上記の作業で必要書類は準備出来ました。\n書類のダウンロードについては、申告書印刷(PDF)・e-Tax出力プルダウンをクリックすることで、それぞれダウンロードすることが可能です。\nあとはこちらの書類で確定申告を行えば良さそうです。\n途中で退職している場合は？ 1月1日から12月31日まで個人事業主として働いていたなら、上記の手順で良いですが、年の途中まで会社員だった場合は、退職時にもらった源泉徴収票に「年末調整未」と記載されていた場合は、今回の確定申告で会社員時代の源泉徴収の内容も入力する必要があります。\nその場合は会社員時代の以下の各情報を追加入力することになります。\n支払い金額 源泉徴収表の支払い金額を入力します。\n給与所得控除後の金額 次に源泉徴収表の給与所得控除後の金額を入力します。\n源泉徴収の入力 次に源泉徴収表の源泉徴収税額を入力します。\n社会保険料等の金額 次に源泉徴収表の社会保険料等の金額を入力します。\n生命保険や地震保険等も払っているなら同じように入力する必要がありますが、今回は割愛します。\n終わりに やはり確定申告のための作業はちょっと大変ですね。。。\nしかし、やはり会計ソフトを使うことで作業内容は半分以下に抑えることが出来そうですね。\nソフトを使わずにこれらを自分でやるのはちょっと心が折れそうです。orz\nまた、年度末にあわててやると大変なので、日々\bコツコツと仕分けと内容の確認をしていくことが大切ですね。\n皆さんも年末に地獄を見ないように、日頃から確定申告に向けた作業をするように心がけましょう！\n","date":"2018-03-01T21:46:52+09:00","image":"/wp-content/uploads/2018/03/taxReturnMfCloudEye.png","permalink":"/2018/03/01/2404/","title":"【2018年版まとめ】MFクラウドで確定申告の書類を作成する手順"},{"content":"アップロードした画像の境界線が分かりにくい。。。 筆者はIT技術系のHowTo記事を多く挙げているため、よく作業時のキャプチャ画像等を記事に添付しています。\nしかし、使用しているWordpressテーマによってはテキスト部分と画像の境界線が分かりにくく、結果として記事が読みにくく感じてしまう場合があります。\n今回はCSSファイルを調整して、テキスト部分と画像部分の境界線が分かりやすくなるようなレイアウト調整を入れてみようと思います。\n手順 CSSファイルの修正 ブログ全般の共通レイアウトの修正を行いたいので、CSSファイルに記述を追加する必要があります。\nダッシュボードから外観\u003eテーマ編集\u003eスタイルシート(style.css)を選択しましょう。\n今回は記事エリア内のimg要素全てにCSSを適用したいので以下のコードを追加してください。\n/* 記事内画像の枠 */ .post img{ border: solid 1px #808080; box-shadow: 0px 0px 5px #808080; } /* 記事内画像の枠ここまで */\n記事エリアを囲んでいるdiv要素に「post」クラスが自動で振られるので、その中のimg要素を対象に指定します。\n上記のCSSルールは、img要素の周囲に枠線と影を追加する記述です。\n追記したら、ファイルを更新ボタンをクリックします。\n確認 では、実際に記事ページを開いて確認してみましょう。\n画像の周囲に枠線と影が出ていますね。\nあとは好きなようにもっとCSSファイルを設定すれば自分好みのデザインにすることが出来ます。\n終わりに CSSファイルにちょっと記述を追加するだけでブログデザインを変更することが出来ます。\nCSSの指定には、他にももっといろいろな指定をすることでブログデザインの調整が可能なので、ぜひ独学で勉強してみてください♪\n","date":"2018-02-28T22:15:50+09:00","image":"/wp-content/uploads/2018/02/renameGithubAccountEye.png","permalink":"/2018/02/28/2387/","title":"【訪問者様は神】CSSで投稿記事内の画像を見やすくしよう"},{"content":"タグクラウドとSEOの関係性 たくさん付けがち Wordpressで記事を投稿していると、カテゴリとは別にタグを記事に紐づけることが出来ます。\nカテゴリよりもさらに細かい紐付けが可能なのでついついタグを付けすぎてしまう事があります。\nその結果、タグが膨大な量になり、かつそれぞれのタグに紐づく記事が少ない結果に。。。\nSEO的にはあまり宜しくない タグを付けすぎると、数記事しか関連していないタグが沢山出来てしまいます。\nそしてそれらがタグクラウドに表示されることで、ユーザーの利便性の低下やキーワードスタッフィング(キーワードの詰め込み)とみなされ、ペナルティを喰らうことになってしまうケースもあります。(よほどタグクラウドが多い場合ですが。。。)\nタグクラウドを使いたいけどSEO対策もしたい しかし、タグクラウドが便利なのも事実です。\nなので、SEO対策とタグクラウドを両立するためにはタグページをnoindexとして明示的に設定することで対応が可能です。\nnoindex? noindexとは、検索エンジンに対してこちらから「このページに価値はないから検索エンジンに含めなくて良いよ！」と認識させるための設定です。この設定をあらかじめ入れておくことでSEO順位を下げずにタグクラウドを使用することが可能になります。\nでは、実際にタグページにnoindexを設定する方法を紹介致します。\n※手順を間違えるとすべてのページがnoindexとなり、検索エンジンにインデックスされなくなってしまうので、気をつけてください\n手順 header.phpに分岐処理を追加 やり方はとても簡単です。\nまずは、ダッシュボードから外観\u003eテーマの編集\u003eテーマヘッダー(header.php)を選択します。\n以下の3行を\u0026lt;head\u0026gt;タグの内部に追加して、編集するボタンをクリックします。\n\u0026lt;?php if(is_tag()): ?\u0026gt; \u0026lt;meta name=\u0026#34;robots\u0026#34; content=\u0026#34;noindex,follow\u0026#34; /\u0026gt; \u0026lt;?php endif; ?\u0026gt; これでタグページは検索エンジンからインデックス対象外となりました。\n他にもnoindexを指定してみよう。 Wordpressには他にも以下のような便利なメソッドがあるため、必要に応じてnoindexにするページを決めることが可能です。\nメソッド名\r説明\ris_home()\rブログ投稿インデックスページが表示されているかどうかをチェックします。\ris_paged()\r表示中の記事が複数ページにわたっていて、かつ現在のページ番号が 1 より大きいかどうかをチェックします。\ris_search()\r検索ページが表示されているかどうかを判定します。\ris_404()\r404エラーが表示されているかどうかを判定します。\ris_category()\rカテゴリーアーカイブが表示されているかチェックします。\ris_tag()\rタグのアーカイブ（どのタグでもよい）が表示されているかチェックします。\ris_archive()\rアーカイブページが表示されているかどうかを判定します。\n「アーカイブ」とは、カテゴリー、タグ、投稿者または日時のいずれかに基づいて投稿を集めたページを指します。\rなので、以下のように追加すれば、それなりのnoindex設定が網羅可能です。\n\u0026lt;?php if ( is_home() \u0026amp;\u0026amp; !is_paged() ): ?\u0026gt;//トップページ \u0026lt;meta name=\u0026#34;robots\u0026#34; content=\u0026#34;index,follow\u0026#34; /\u0026gt; \u0026lt;?php elseif ( is_paged() ): ?\u0026gt;//同一記事の2ページ目以降 \u0026lt;meta name=\u0026#34;robots\u0026#34; content=\u0026#34;noindex,follow\u0026#34; /\u0026gt; \u0026lt;?php elseif ( is_search() or is_404() ): ?\u0026gt;//検索または404画面 \u0026lt;meta name=\u0026#34;robots\u0026#34; content=\u0026#34;noindex,follow\u0026#34; /\u0026gt; \u0026lt;?php elseif ( !is_category() \u0026amp;\u0026amp; is_archive() ): ?\u0026gt;//カテゴリー以外のアーカイブページ(tag/月) \u0026lt;meta name=\u0026#34;robots\u0026#34; content=\u0026#34;noindex,follow\u0026#34; /\u0026gt; \u0026lt;?php endif; ?\u0026gt; 終わりに いかがだったでしょうか？\nWordpressにはSEO対策を簡単に行うための便利なメソッドが標準で用意されています。\nSEO対策はアフェリエイト収入を稼ぐためには必要不可欠な知識なので、少しずつ勉強して検索上位にヒットするようなサイトを作るように心がけましょう。\n","date":"2018-02-27T23:27:06+09:00","image":"/wp-content/uploads/2018/02/tagCloudNoIndexEye.png","permalink":"/2018/02/27/2513/","title":"【SEO】タグクラウドページをnoindexにする"},{"content":"インフラ環境は魔境になりやすい サーバーシステムを開発していると、漏れなくAWS等でインフラ構築をする必要が出てきます。\nしかし、このインフラ構築作業なのですが、何もツール等を使わずに作業者が独自でサーバー内部でコマンドを直接叩いてインフラ構築をしてしまうと、\n実際にどのようなコマンドを叩いているのか？\rどのようなミドルウェアがインストールされているのか？\r設定ファイル等はどのように作成したのか？\r等が隠蔽されてしまうため、結果として\n魔境インフラ\nが完成する事が多々あると思います。笑\n多くのインフラエンジニアは共感してくれるでしょう。笑\nAnsibleで解決 Ansibleとは？ そんな魔境インフラにならないためのインフラ構築のお助けツールとして、Ansibleというツールがあります。\nAnsibleとは、レッドハットが開発したインフラ構成管理ツールです。\nインフラ構築をする際、あらかじめ用意した設定ファイル等に従い、各種ソフトウェアのインストールや初期設定等を自動で行ってくれます。\nまた、冗長構成をしていて複数のサーバーに同一の操作をする際にも、Ansibleを使えば設定ファイルに対象のホストマシンの情報を追加するだけで勝手に実行してくれます。\nまた、実行内容や設定をファイル管理する事で、インフラ情報の可視化や人為ミスの軽減を図る事が出来るため、非常に便利です。\nメリット １つのサーバーにAnsibleをインストールするだけで他ホストの操作が可能\rインフラ構築状態をファイルによって可視化する事が可能\r複数ホストへの一括同一操作が可能\r検証環境や本番環境ごとのEnv管理も簡単\r作業者はAnsibleがインストールされたサーバー以外へは基本的に入る必要が無くなる\r標準モジュールが豊富で、簡単にやりたい事を実現可能\ryaml形式による簡素な設定\rデメリット ファイル数が肥大化してしまう\ryamlファイルの記述方法の学習コスト\r導入するデメリットはほぼ無し 以上のように、導入するデメリットはほとんど無いです。\n今回はAWSのEC2インスタンスへAnsibleをインストールし、簡単なリモートホストへの接続確認までの手順をご紹介致します。\r手順 前提 Ansibleをインストールするホストマシンと接続先のリモートマシンの2インスタンスを準備している事\r公開鍵を用いたsshコマンドで接続確認済み\rEC2インスタンスにログイン まずはAnsibleをインストールしたいEC2インスタンスにssh通信で接続してみましょう。\n以下のコマンドでログインしてください。\nssh -i {公開鍵へのパス} {ログインユーザー名}@{対象接続先ホスト}\n正常に接続出来れば以下のように表示されると思います。\nAnsibleのインストール 次にAnsibleの本体をインストールしてみましょう。\nまずは以下のコマンドでrootユーザーになりましょう。\n※rootユーザーは全てのサーバー操作が可能なので一歩間違えるとサーバーを壊してしまう恐れがありますので自己責任でお願いします\nsudo su パスワードを求められた場合はユーザーパスワードを入力してください。\n次に以下のコマンドでAnsibleのパッケージを配布しているリポジトリを追加しましょう。\nAnsibleのパッケージはRHELやyum公式リポジトリには含まれていないようです。\nyum install epel-release\n次に以下のコマンドでAnsibleパッケージをインストールしてみましょう。\nyum install ansible\nおや、何故かインストールが出来ませんでした。\n原因としては、epel-releaseをインストールしたにも関わらず、epelリポジトリの設定が有効になっていないようです。なので、以下のコマンドで再度インストールを試してみましょう。\nyum install ansible --enablerepo=epel 確認 正常にインストールが完了したら、以下のコマンドでansibleの動作確認をしてみましょう。\nansible --version\n正常にインストールされていそうですね！\n簡単なplaybookを使ってping接続 では、実際にホストマシンからリモートマシンへの接続が正常に出来るかの確認をしてみましょう。\nまずは以下のようなディレクトリ構造を作成してください。\n. ├── ping.yml ├── inventories │ └── dev │ └── hosts └── roles └── ping └── tasks └── main.yml\n次にそれぞれのファイルの中身を記述していきましょう。\n最初にhostsファイルを作成します。\nこのファイルは接続先のホスト情報を管理するファイルとなります。\nサンプルとして以下のように記述をしてください。\n[all-servers:children] sample-servers [sample-servers:children] sample1 [sample1] {接続先リモートホストIP}\nhostsファイルはINI形式で記述をしていきます。\n次はping.ymlファイルを作成します。\nこのファイルはplaybookと呼ばれ、実際にどのようなタスクを実行するか？という記述をyaml形式で追加していきます。\n今回は簡単なpingによる接続確認なので以下のように非常にシンプルです。\n--- - hosts: all-servers remote_user: ec2-user roles: - ping\nhosts\rplaybookを適用する対象を、hostsで追加したセクション名で指定します。\rremote_user\rリモートマシンで使用する存在するユーザーを指定します。\n今回はデフォルトのユーザーを指定します。\rroles\r実際に処理を行うロールを複数指定します。\nrolesディレクトリ配下が対象です。\r最後にmain.ymlファイルを作成します。\nこのファイルでは具体的な処理の内容をyaml形式で記述していきます。\n以下の記述をしてみてください。\n--- - name: Test Ping ping: register: result - debug: var=result when: result | success\nname\r任意のタスク名を指定します。\rping\rAnsibleのpingモジュールを利用します。\nAnsibleには標準で様々なタスクを簡単に行うためのモジュールが用意されています。詳しくはコチラをご確認ください\rregister\r処理結果の標準出力を変数に登録します。\n今回はresultという変数に代入します。\rdebug\rデバッグモジュールの利用を宣言します。\rwhen\r条件指定による実行制御を行います。\n今回はタスクの実行結果がsuccessだった場合のみdebugモジュールが実行されます。\rplaybookの実行 では、以下のコマンドでplaybookを実行してみましょう。\nnsible-playbook --private-key={公開鍵へのパス} -i inventories/dev/hosts ping.yml\n正常にpongが返ってきましたね。\n終わりに これでAnsibleを使う準備が出来ました。\n様々なサーバー操作をファイルに記述する事で可視化を図ることが出来るため、インフラ状態を把握しやすくなり、新しい作業者が増えてもファイル群を見るだけでインフラ設計をある程度理解する事が可能になるので、ぜひAnsibleを導入してみてください。\n","date":"2018-02-26T23:12:36+09:00","image":"/wp-content/uploads/2018/02/installAnsibleAwsEye.png","permalink":"/2018/02/26/2457/","title":"【脱魔境インフラ】AWSのEC2にAnsibleをインストールしてみよう"},{"content":"そもそも確定申告とは？ 個人事業主やフリーランスの方に、独立して大変だった事は？と聞くと、大体の方が確定申告と答えます。\n多くの人が苦手な確定申告とはそもそも何なのか？\n今回はそちらの疑問を解消するためにまとめてみようと思います。\n会計結果を「確定」し、国へ「申告」する作業 見出しの通り、対象年の1月1日～12月31日の間の売り上げや経費、支出等を整理の上確定し、翌年の2月16日～3月15日の間に国へ申告する作業の事を指します。\nこの時に申請した内容によって事業税や翌年度の住民税や保険料が決まるため、しっかりと会計を行う必要があります。\nまた、預金残高と会計内容に差がある場合は何が違うのか？という原因を1年分のレシートや領収書等を見直して洗い直す必要があるため、間違いがあった時に地獄を見ます。。。orz\nまた、副業としてブログ等でアフェリエイト収入を行っている場合にも確定申告をする必要がある場合もあります。\n次は申告の種類についてまとめてみます。\n青色申告と白色申告 青色申告 青色申告とは、日々の取引や経費計上したものを各種帳簿に記録し、税務署に申告する制度です。\n複式簿記もしくは単式簿記での帳簿記録の提出がが義務付けられているだけではなく、事前に税務署への届出も必要です。\nただし、手間がかかる分、節税面等で特典があります。\nメリット ・節税対策がしやすい\n・複式帳簿を選ぶだけで最大65万円の控除\n・家事按分を利用できる\n・家族従業員の給与を経費にできる\n・減価償却を1年で300万円まで一括計上できる\nデメリット ・事前届け出が必要\n・確定申告内容がやや複雑\n白色申告 青色申告を選択しなかった事業者、もしくは届出を提出しなかった場合は自動的に白色申告制度に該当します。\n青色申告とは違い、節税面でのメリットが無い代わりに帳簿付けに手間がかからない、という点がメリットでしたが、2014年（平成26年）からは、白色申告者にも「単式簿記」での記帳と「帳簿等の保存（期間5〜7年）」が義務付けられ、実質何かしらの帳簿を作成する必要が出てしまったので、白色申告にするメリットはほとんどなくなってしまいました。\nメリット ・事前届け出が不要\n・確定申告がやや簡単\nデメリット ・節税対策が出来ない\n・基本控除が無い\n白色申告を選ぶメリットはほぼ無い 以上のように、法改定によって白色申告のメリットがほぼ潰れてしまったので基本的には青色申告を選ぶのが無難かと思われます。\n[adsense]\rなぜ、個人事業主が嫌がる？ では、なぜ個人事業主やフリーランスの人が嫌がるのでしょう？\n会社員の場合は全て会社がやってくれる 会社に属していたことがある人は、確定申告を自分でやった記憶が無いと思います。\nなぜなら経理部の人が勝手にやってくれているからです。\n給与から様々な税金が毎月天引きされていると思いますが、それはあらかじめ4,5,6月の給与を元に税金額を仮計算した上で月々から差し引いているものです。\nこれは標準報酬月額と呼ばれています。\nただ、あくまでこの額は仮なので、年末に正式な税金額を計算した上で過剰に払った税金を払い戻す、という作業が年末調整になります。\n年末調整については皆さんやったことある方も多いと思います。\nまた、年末調整は過剰に払ってしまったものを返してもらう、という申請作業なので、この作業は特に必須ではありません。(行わなかった場合は政府の税金が潤うだけなので・・・笑)\nこのように、会社員の場合は特に意識しなくても、毎年税金の手続きは行ってもらえているのです。\n個人事業主は自分が経理 一方で個人事業主にはもちろん、経理部なんてものがあるわけでもないので、誰も毎月の天引き計算をしてくれません。\nなので、年度末にまとめて税金計算を自分で確定する必要があるのです。\nその際に、膨大な量のレシートや領収書を自分で会計ソフト等に打ち込んで確認する作業が必要になってしまうのです。\nただ、もちろん日々コツコツと会計ソフトに入力していれば、年度末に1年分をまとめて会計する必要も無くなるので、必ず毎日会計ソフトに入力するクセをつけましょう。\nまた、レシートや領収書、請求書は保管期間が定められており、7年間保持管理している義務があります。(法改定前は中小企業は5年でした)\nなので、年ごとのファイルやバインダーを用意してしっかりと管理しておく必要があります。\nメリット もちろん、大変な作業の分メリットもあります。\n例えば、自宅で作業をしているのであれば家賃や光熱費、通信費等を経費として計上することが可能になります。\nまた、仕事に関係のある人とのランチやディナー、飲み会等も接待費として経費にすることも可能です。\n経費計上するメリットとしては、課税対象外になるので翌年の各種税金額が下がります。\nなので、個人事業主の方は如何に経費計上するか？という部分を常々考えていると思います。笑\nただし、あまりにも接待費等が多くなりすぎると税務署から目をつけられてしまう可能性もあるので、常識的な範囲に留めておきましょう。笑\n終わりに そもそもの確定申告とはなんなのか？という部分の理解が出来ると、やるべきことが見えてきて恐怖心も減ると思います。\nまた、今は個人事業主向けの会計ソフトも多くなっているので簡単に確定申告書類を作ってくれるようなサービスも増えてきています。\n次回はMFクラウドという会計ソフトを利用した確定申告書類の作り方についてまとめてみようと思いますので、興味があれば是非参考にしてみてください。\n","date":"2018-02-25T16:48:20+09:00","image":"/wp-content/uploads/2018/02/taxReturnEye.png","permalink":"/2018/02/25/2410/","title":"【個人事業主の壁】フリーランスが年度末に恐怖に陥る確定申告とは？"},{"content":"同じようなHTMLを記述するのが苦痛 Wordpressで記事を投稿する際に、皆さんはビジュアルモードとテキストモード、どちらで作業をしていますか？\n筆者はWebシステム開発をしている仕事柄、テキストモードでHTMLをガリガリコーディングしています。\nもちろん、HTMLに慣れていない方はビジュアルモードで直感的にレイアウトを組んでいっても何も問題はありません。\nしかし、テキストモードで投稿をしていると似たような構造のHTMLを書くことが頻繁に発生して毎回同じコーディングをするのは非常に手間ですし、間違える可能性もあります。\nそんなあなたにQuickTag機能 そんなあなた(筆者)の痒いところに手が届く機能が、Wordpressの標準機能で用意されています！\nクイックタグ機能とは、あらかじめ登録しておいた文字列やHTMLコードをテキストエディターに追加したクイックタグボタンをクリックするだけで簡単に記事に挿入することが出来ます。\nこの機能を使えば良く使うHTMLコードを毎回記述する必要が無くなるので、記事の内容だけを意識して投稿をする事が可能になります。\nこの機能は特にプラグイン等をインストール事無く使えますので、手順をご紹介致します。\n手順 functions.phpに追記 クイックタグを追加するには、使用しているテーマのfunctinos.phpにコードを追加する必要があります。\nダッシュボードから外観\u003eテーマの編集\u003eテーマのための関数(functions.php)を選択します。\nサンプルとして、以下のクイックタグを追加してみましょう。\n//自作クイックタグ function sample_quick_tag() { if (wp_script_is(\u0026#39;quicktags\u0026#39;)){ ?\u0026gt; \u0026lt;script type=\u0026#34;text/javascript\u0026#34;\u0026gt; QTags.addButton(\u0026#39;sampleTag\u0026#39;, \u0026#39;ラベル\u0026#39;, \u0026#39;ここから→\u0026#39;, \u0026#39;←ここまで\u0026#39;); \u0026lt;/script\u0026gt; \u0026lt;?php } } add_action( \u0026#39;admin_print_footer_scripts\u0026#39;, \u0026#39;sample_quick_tag\u0026#39; ); functions.phpの一番下に追加したらファイルを更新ボタンをクリックします。\nエディターを開くと、「ラベルと」いうボタンがクイックタグ群の中に追加されていると思います。\n一度クリックすると、カーソル位置に「ここから→」が挿入され、\nもう一度押すと「←ここまで」が挿入されます。\nHTMLの挿入 では、本来の目的のHTMLコードをクイックタグに登録してみましょう。\n今回は簡単なテーブルを挿入するボタンを作ってみましょう。\n先ほど追加したコードを一旦削除して、以下のコードを追加してください。\n//自作クイックタグ function sample_quick_tag() { if (wp_script_is(\u0026#39;quicktags\u0026#39;)){ ?\u0026gt; \u0026lt;script type=\u0026#34;text/javascript\u0026#34;\u0026gt; QTags.addButton(\u0026#39;ed_table\u0026#39;, \u0026#39;テーブル\u0026#39;, \u0026#39;\u0026lt;table\u0026gt;\u0026lt;tr\u0026gt;\u0026lt;th\u0026gt;見出し1\u0026lt;/th\u0026gt;\u0026lt;td\u0026gt;内容1\u0026lt;/td\u0026gt;\u0026lt;/tr\u0026gt;\u0026lt;tr\u0026gt;\u0026lt;th\u0026gt;見出し2\u0026lt;/th\u0026gt;\u0026lt;td\u0026gt;内容2\u0026lt;/td\u0026gt;\u0026lt;/tr\u0026gt;\u0026lt;/table\u0026gt;\u0026#39;, \u0026#39;\u0026#39;); \u0026lt;/script\u0026gt; \u0026lt;?php } } add_action( \u0026#39;admin_print_footer_scripts\u0026#39;, \u0026#39;sample_quick_tag\u0026#39; ); では、テキストエディターで確認してみましょう。\n挿入はされましたが、一行にまとまっちゃっているのでちょっと見にくいですよね。。。\n改行の仕方 埋め込みタグで挿入されるHTMLコードを改行したい場合、以下のようにそのまま改行をしてしまうと、ファイルの更新は正常に完了しますが、うまくクイックタグとして解釈されなくなるのでボタン自体が表示されなくなってしまいます。\nQTags.addButton(\u0026#39;ed_table\u0026#39;, \u0026#39;テーブル\u0026#39;, \u0026#39;\u0026lt;table\u0026gt; \u0026lt;tr\u0026gt;\u0026lt;th\u0026gt;見出し1\u0026lt;/th\u0026gt;\u0026lt;td\u0026gt;内容1\u0026lt;/td\u0026gt;\u0026lt;/tr\u0026gt;\u0026lt;tr\u0026gt;\u0026lt;th\u0026gt;見出し2\u0026lt;/th\u0026gt;\u0026lt;td\u0026gt;内容2\u0026lt;/td\u0026gt;\u0026lt;/tr\u0026gt;\u0026lt;/table\u0026gt;\u0026#39;, \u0026#39;\u0026#39;);\nクイックタグに改行コードを埋め込みたい場合は以下のように「\\n」を入れることで実現が可能になります。\nQTags.addButton(\u0026#39;ed_table\u0026#39;, \u0026#39;テーブル\u0026#39;, \u0026#39;\u0026lt;table\u0026gt;\\n \u0026lt;tr\u0026gt;\\n \u0026lt;th\u0026gt;見出し1\u0026lt;/th\u0026gt;\\n \u0026lt;td\u0026gt;内容1\u0026lt;/td\u0026gt;\\n \u0026lt;/tr\u0026gt;\\n \u0026lt;tr\u0026gt;\\n \u0026lt;th\u0026gt;見出し2\u0026lt;/th\u0026gt;\\n \u0026lt;td\u0026gt;内容2\u0026lt;/td\u0026gt;\\n \u0026lt;/tr\u0026gt;\\n\u0026lt;/table\u0026gt;\u0026#39;, \u0026#39;\u0026#39;);\n正しく改行されて表示されるようになりましたね♪\n終わりに このように、よく使うテンプレートをテキストエディターにボタン一つで簡単に追加出来るようになりました。\nもちろんボタンは複数登録することが可能なので、必要なテンプレートボタンをどんどん作って記事作成の効率を上げてみてはいかがでしょうか♪\n","date":"2018-02-23T20:56:44+09:00","image":"/wp-content/uploads/2018/02/quickTagEye.png","permalink":"/2018/02/23/2348/","title":"【QuickTagsで効率化】Wordpressのクイックタグをカスタマイズして記事投稿をスピードアップ！"},{"content":"FontAwesomeとは？ FontAwesome(フォントオーサム)とは、様々なデザインのアイコンをWebページ上で自由に使うことが出来る無料のツールキットです。\nこのツールキットを使えば、色やサイズを自由に変えてアイコンをブログ記事に追加することが可能になるので、ブログの見た目をいい感じにすることが可能です。\n導入自体はとても簡単に出来るのでご紹介致します。\n手順 前提 FontAwesomeはCDNで導入する方法とファイルを公式サイトからダウンロードしてWordpressに直接配置する方法があります。\n今回は前者のCDNを使って導入してみましょう。\nCDNとは？ CDNとはコンテンツ・デリバリー・ネットワーク（Contents Delivery Network）の略で、様々なコンテンツを高速かつ安定して配信するためのネットワークの事です。\nFontAwesomeをCDNで利用する事でCSSファイルやFontファイルを高速でインターネット経由読み込む事が可能になります。\nHTMLに一行追記するだけで使えるというメリットがありますが、インターネット経由で利用するのでネット環境が無い状態だと利用出来ないというデメリットがありますので、環境に合わせて導入方法を変えましょう。\nheader.phpにCDN読み込みの追加 まずは前述した通り、WordpressでFontAwesomeを使えるようにするためにCDNを読み込む設定を追記しましょう。\nダッシュボードから外観\u003eテーマの編集\u003eテーマヘッダー(header.php)を選択します。\nheader.phpファイル内の「」を探して、その一行上に以下を追記して下さい。\n\u0026lt;link href=\u0026#34;https://use.fontawesome.com/releases/v5.0.6/css/all.css\u0026#34; rel=\u0026#34;stylesheet\u0026#34;\u0026gt;\nこれでFontAwesomeをWordpressで使用する準備は出来ました。\n[adsense]\r使い方 アイコン一覧 FontAwesomeで使えるアイコン一覧はコチラから確認出来るので、使いたいアイコンを見つけてみてください。\nHTMLでの使い方 まずはHTMLタグを使って直接記事に追加する方法です。\n使いたいアイコンを見つけたらアイコンをクリックします。\n移動した先のページ下部から埋め込みタグをコピーします。\nコピーしたタグをHTMLファイルに貼り付けてみましょう\n正しく表示されましたね！！\nCSSでの使い方 一つ一つアイコンを入れたい場合は上記の方法で可能ですが、ブログ全体で同じアイコンを入れたい場合、すべての記事にアイコンを埋め込むのは非常に手間がかかるので、作業効率が良くありません。\nそこでCSSでFontAwesomeの指定を追加する事で、CSSが読み込まれている記事全体に同じ設定をかける事が可能です。\n今回は見出しタグ(h2~h6)に対してを追加するようなCSS記述をしてみましょう。\nダッシュボードから外観\u003eテーマの編集\u003eスタイルシート(\u0010style.css)を選択します。\n次にCSSファイルの一番下に以下を追記してください。\nh2:before,h3:before,h4:before,h5:before,h6:before{ content: \u0026#34;\\f0c1\\00a0\u0026#34;; font-family: \u0026#39;FontAwesome\u0026#39;; color: #b22222; }\nそうすると、以下のように見出しタグの先頭にアイコンが追加されるようになります。\n終わりに いかがだったでしょうか？\n簡単にアイコン画像をブログ記事に追加出来るようになりましたね。\n文字だけのブログは読みづらいので、要所要所にアイコンをちりばめておしゃれで読みやすいブログを作っていきましょう♪\n","date":"2018-02-22T22:53:21+09:00","image":"/wp-content/uploads/2018/02/fontAwesomeInstallWordpressEye.png","permalink":"/2018/02/22/2326/","title":"【見た目を整えよう】WordpressにFontAwesomeを導入して使ってみよう"},{"content":"PV数を初期化したい Wordpressでは、標準機能として記事ページ毎にPV数をデータベースにカウントしています。\nプラグインやカスタマイズ等で人気記事ランキングの表示エリアを実現するために、このデータベースのPV数を元にランキング表示するのですが、botのクローリングや間違えて自分自身でページ表示をたくさんしてしまった場合、異様なPV数がカウントされてしまい、正しい人気記事の表示がされなくなってしまいます。\nこのPV数はWordpressの管理画面からは初期化することが出来ないため、直接データベースの値を操作する必要があります。\n今回はデータベースの値をいじってPV数を修正する方法をご紹介致します。\n手順 はじめに！ 今回の作業はデータベースのデータを直接いじるので、バックアップ等をとってから作業を行ってください！\n作業は自己責任でお願いします。\nまた、やろうと思えばPV数の偽装も出来ますがやらないようにしましょう！\n前提 今回はphpMyAdminを使ってデータベースの値を操作します。\nデータベースの指定 まずはWordpressで利用しているデータベースを選択します。\n自分のphpMyAdminのログイン画面にアクセスし、ログインします。\nPV数を管理しているテーブルを選択 一つのデータベースには複数のテーブルが存在しています。\n記事情報を管理しているテーブルや、アップロードした画像情報を管理しているテーブル、ブログ情報を管理しているテーブルなど様々です。\n今回はpostmetaというテーブルでPV情報を管理しているので、そちらのテーブルを選択しましょう。\n記事毎のPV数を表示 次に記事毎のPV数を確認して、リセット(調整)したい記事を把握しましょう。\n上部の検索タブを選択し、meta_keyの入力エリアにpost_views_countと入力し、実行ボタンをクリックしましょう。\n※meta_keyに入力する値はWordpressのバージョン毎に異なるので、お使いのWordpressのバージョンにあった値を入れてください\nそうすると以下のように表示されると思います。\nこの一覧のpost_idが記事ID、meta_valueがPV数となります。\nPV数の修正 では、実際にPV数を修正してみましょう。\n今回はpost_idが「331」の記事のPV数を修正します。\nこれはWordpressの設定をいろいろいじる際にリロードしまくった影響でなぜか人気記事になってしまっています。笑\n修正したい対象のデータ行の編集リンクをクリックします。\nおそらく10分の1の80PVもされていない記事だと思うのでとりあえず50PVに修正してみます。\nmeta_valueの入力エリアに「50」と入力し、実行ボタンをクリックします。\n以下のようなメッセージが表示されればPV数の修正が完了です。\n確認 では、もう一度人気記事ランキングの部分を見てみましょう。\n正常に人気記事ランキングが入れ替わっていますね♪\n終わりに データベースの値を直接操作する形にはなりますが、異常だったPV数の修正を行うことが出来ました。\nただ、PV数操作を頻繁に行うのは良くないことなので、ほどほどにしましょうね！\n","date":"2018-02-20T22:01:34+09:00","image":"/wp-content/uploads/2018/02/wordpressPvResetEye.png","permalink":"/2018/02/20/2301/","title":"【PV数リセット】Wordpressの記事PV数を修正する方法"},{"content":"デフォルトだと分かりにくい・・・ ブログ等をやっている方で、GoogleAnalyticsを使ってアクセス解析をしている人は多いと思います。\nGoogleAnalyticsはGoogleアカウントを持っている人であれば無料で使えますし、PV数の調査も簡単に行え非常に便利です。\nしかし、ページ毎のPV数を把握したい際にデフォルトの設定だとURLは表示されますが、そのURLがどの記事なのか？というのが分からなく、毎回URLにアクセスをして確認するしか方法はありません。\nしかし、GoogleAnalyticsのセカンダリディメンションという機能を利用することで、同一のレポート画面内でURLと記事タイトルをまとめて確認することが可能になり、とても使いやすくなりますので、今回はそちらの方法をご紹介致します♪\nセカンダリディメンションとは？ セカンダリディメンションとは、GoogleAnalyticsのデフォルトレポートである「キーワード」や「ページタイトル」などのレポート対象（プライマリディメンション）に、さらに別にディメンションを追加してレポート表示を可能にする機能の事です。\n今回で言えば、プライマリディメンションが「ページ」のレポートのセカンダリディメンションに、「ページタイトル」を追加する感じですね。\n手順 すべてのページ画面を開く まずはGoogleAnalyticsにログインし、行動\u003eサイトコンテンツ\u003eすべてのページをクリックします。\nセカンドディメンションを追加 次にセカンダリディメンションボタンをクリックし、検索窓にタイトルと入力してヒットしたページタイトルをクリックします。\nそうすると、先ほどの画面のページ列の右側にページタイトル列が追加されたと思います。とても分かりやすくなりましたね♪\nカスタムレポートの保存 しかし、この設定は別の機能に飛ぶとリセットされてしまいます。\n毎回指定するのもあまり効率が良くないので、この設定をカスタムレポートとして保存しましょう。\nページタイトルがセカンダリディメンションに設定された状態で、画面右上の保存ボタンをクリックします。\nすると、レポートの保存ダイアログが表示されるので、レポートの名称を入力して保存ボタンをクリックします。\n確認 これで、カスタム\u003e保存済みレポートに先ほどのレポートが登録されました。\nクリックすると、\n問題なくページタイトルがセカンダリディメンションに設定された状態のレポートが表示されるようになりました♪\n終わりに 如何だったでしょうか？\nとても簡単な操作でページタイトルが表示されるようになり、アクセス解析がしやすくなりましたね。\nPVが多いページをいち早く把握して、ブログを改善しお小遣いをたくさん稼げるサイトにしてきましょう！\n","date":"2018-02-19T22:24:12+09:00","image":"/wp-content/uploads/2018/02/googleAnalyticsAddTitleEye.png","permalink":"/2018/02/19/2282/","title":"【5分で出来る】GoogleAnalyticsのURL一覧にページタイトル名を表示する方法"},{"content":"簡単サーバー構築 前回の記事にて、Dockerfileを使ったコンテナの起動方法を紹介しました。\n今回は同じようにDockerfileを使ってnginxを起動し、簡単なサーバーを立ち上げるところまでをご紹介しようと思います。\n手順 前提 Dockerfileの作成 まずは以下のDockerfileを作成してください。\nFROM centos:7 RUN yum update -y \u0026amp;\u0026amp; yum clean all RUN yum install -y http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm RUN yum install -y --enablerepo=nginx nginx RUN yum swap -y fakesystemd systemd \u0026amp;\u0026amp; yum clean all ADD index.html /var/www/html/ ADD nginx.conf /etc/nginx/conf.d/ RUN mv /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.bk RUN systemctl enable nginx EXPOSE 80 ENTRYPOINT [\u0026#34;/usr/sbin/nginx\u0026#34;, \u0026#34;-g\u0026#34;, \u0026#34;daemon off;\u0026#34;, \u0026#34;-c\u0026#34;, \u0026#34;/etc/nginx/nginx.conf\u0026#34;]\nindex.html 次にnginxに配置するindex.htmlを作成しましょう。\n今回は単純にDocker内部のnginxに配置して表示確認するレベルのものでいいので以下の内容で良いです。\n\u0026lt;html\u0026gt; \u0026lt;body\u0026gt; # Hello, World! From Docker!! \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt;\nnginx.confの作成 次にnginxの設定ファイルも用意しましょう。\nこちらも同じく表示確認レベルのもので良いです。\nserver { listen 80 default_server; root /var/www/html; index index.html index.htm; server_name nginx; location / { try_files $uri $uri/ =404; } }\nイメージファイルの作成 次に以下のコマンドでDockerイメージを作成しましょう。\ndocker build -t centos7/nginx_from_dockerfile --no-cache=true .\nコマンド実行後、以下の実行ログが表示されればimageファイルの作成は完了です。\n以下のコマンドでimgaeファイルを確認してみましょう。\ndocker images\n無事にイメージファイルが作成されてますね。\nコンテナ起動 では、実際にimageファイルからコンテナを作成して起動してみましょう。\n以下のコマンドを実行してみてください。\ndocker run -d --name docker_nginx_server -p 8080:80 centos7/nginx_from_dockerfile\ndocker runコマンドはコンテナをimageファイルから起動します。各オプションの意味としては、\n-d\rコンテナをデタッチドモード(バックグラウンド)で起動する\r--name\rコンテナ名を定義する\r-p\rホスト側のポート番号とコンテナ側のポート番号を紐付けて公開する\r特にエラーが出なければ、以下のコマンドでコンテナが実行されているか確認してみましょう。\ndocker ps\nコンテナが起動していて一覧に表示されていますね。\nブラウザアクセス では、実際にブラウザからアクセス出来るか確認してみましょう。\nhttp://localhost:8080\n無事にアクセス出来ました！！\n念のため、以下のコマンドでコンテナを停止してもう一度アクセスしてみましょう。\ndocker stop docker_nginx_server\nサーバーが停止しているのでアクセスが出来なくなりました。\nコンテナの再起動 もう一度nginxコンテナを起動しようとして、先ほどのコマンドを実行すると、エラーが発生してしまいます。\nこれは、同じ名称のコンテナが存在していることを表すエラーです。\nすでに作成済みのコンテナ再起動なので以下のコマンドで起動可能です。\ndocker start docker_nginx_server\nコンテナの削除 最後にお片づけをしましょう。\nまずはコンテナの削除です。\n以下のコマンドを実行してください。\ndocker rm docker_nginx_server\nイメージの削除 次にDockerイメージファイルの削除です。\n以下のコマンドを実行してください。\ndocker rmi centos7/nginx_from_dockerfile\nこれでコンテナとイメージを削除して元の状態に簡単に戻せます。\n終わりに 如何だったでしょうか？\nDockerを使えばホストマシンにミドルウェアを入れる必要が無いので、環境構築もしやすくマシン内部を汚すことが無くなるので非常にスッキリします。\n皆さんもDockerを使いこなして、環境構築のコストを抑えてみてください♪\n","date":"2018-02-18T20:40:49+09:00","image":"/wp-content/uploads/2018/02/dockerNginxEye.png","permalink":"/2018/02/18/2238/","title":"【簡単サーバー構築】Dockerfileでnginxを立ち上げてみよう！"},{"content":"デフォルト機能では作れない？ 仕事をしていると、重要な書類やパスワードをかけて閲覧を制限したい情報等をEメールにて送らないといけない場合が少なからずあります。\nその場合に、Windowsでは標準の機能(右クリックから)で簡単にパスワード認証付きZipファイルを作ることが出来ますが、macでは標準機能では通常のパスワード認証無しZipファイルしか作ることが出来ません。\nもちろん、パスワードはかけれないため、そのままで開けてしまいます。\nただ、Macユーザーの皆さん、ご安心ください。笑\nMacでもパスワード認証付きZipファイルをターミナルからコマンドで作成することが可能で、作業自体はとても簡単なのでご紹介致します。\n手順 ターミナルでコマンドを実行 今回は試しにsample.txtをパスワード認証付きZipファイルにしてみましょう。\nターミナルを開いたら以下のコマンドを実行します。\nzip -e secret sample.txt\nコマンドのそれぞれの意味は、\nzip -e {zipファイルの名称} {zip化したい対象ファイル名}\nとなっています。-eオプションは暗号化をする際のオプションです。(encryptionのeですね。)\nなので、-eオプションをつけ忘れると、普通のZipファイルになってしまいますので、気をつけましょう。\nすると、以下のように、認証パスワードの設定と確認の２回の入力を求められるので、間違えないようにタイピングしてください。\n※入力したパスワードは表示されないので忘れないようにしましょう！\n正しくパスワードを入力出来ると、同じディレクトリ階層にsecret.zipというファイルが生成されていると思います。\n確認 無事にパスワードがかかっているか確認してみましょう。\nまずは適当なパスワードを入力してみます。\n開くことが出来ませんね。ちゃんとパスワードがかかっているようです。\nでは、作成時に登録したパスワードを入力してみましょう。\n無事にZipファイルを解凍する事が出来て、ファイルの中身もちゃんと確認することが出来ましたね♪\n終わりに 如何だったでしょうか？\nターミナルからzipコマンドを使うことで、とても簡単にMacでもパスワード認証付きZipファイルを作成することが出来ました。\nサクッとお手軽に行えるので、Macでの鍵付きZipの作り方で困っている方は是非試してみてください♪\n","date":"2018-02-17T16:39:05+09:00","image":"/wp-content/uploads/2018/02/macSecretZipEye.png","permalink":"/2018/02/17/2242/","title":"【サクッと鍵付きZip作成】Macでパスワード認証付きzipファイルを作る方法【ターミナル操作】"},{"content":"Rubyのバージョン管理をしたい Macには標準でRubyがインストールされていて、すぐに使うことが可能となっています。\nしかし、案件によってRubyのバージョンを切り替える必要が出てきたり、迂闊にRubyのバージョンアップが出来ないケースもありえます。\nrbenv そんな時にはrbenvをインストールしましょう。\n以前、紹介したgoenvと同じような役割で、簡単にRuby本体のバージョン管理が可能になります。\n関連記事 【mac】Go言語の複数バージョンを管理する「goenv」のインストール方法【Homebrew】 2018/01/18 1232文字 約3分で読めます では、早速Homebrewでの導入方法をご紹介したいと思います。\n手順 インストール まずは以下のコマンドを実行してください。\nコマンド brew install rbenv ruby-build ここではrbenv本体と、rbenvのプラグインのruby-buildをインストールしました。\n確認 以下のコマンドを実行して確認してみましょう。。\nコマンド rbenv --version ruby-build --version どちらも正常にインストールされています。\nバージョン切り替え では、実際にバージョンを切り替えてみましょう。\n今回は2.4.3に変更してみます\nまずは、以下のコマンドで、2.4.3がインストール可能かチェックしてみましょう。\nコマンド rbenv install --list | grep 2.4.3 インストール出来そうですね。\n※インストール出来ないバージョンの場合は何も表示されません\nでは、以下のコマンドで対象バージョンのRubyをインストールします。\nコマンド rbenv install 2.4.3 インストールは出来たので、次に以下のコマンドで実際にバージョンを切り替えてみます。\nコマンド rbenv global 2.4.3 あれ？変わらない・・・ これで変わったと思い、以下のコマンドで確認すると、\nコマンド ruby -v 残念ながら変わっていません。orz\n原因は環境変数 以下のコマンドでどこのrubyが使用されているか確認してみます。\nコマンド which ruby これだとMacのデフォルトのrubyを見てしまっているので、ここの向き先が~/.rbenv/shims/rubyになるように変える必要があります。\nシェルのprofileに以下の記述を追加します。今回はzshを使っているので~/.zprofileに追記します。\n※お使いのシェルによって編集するファイルは異なるので置き換えて作業を進めてください\n~/.zprofile export PATH=\u0026#34;${HOME}/.rbenv/shims:/usr/local/bin:$PATH\u0026#34; eval \u0026#34;$(rbenv init -)\u0026#34; 編集をしたら以下のコマンドで反映して再度確認してみましょう。\nコマンド source ~/.zprofile ruby -v 正常に反映されましたね。\nあとがき Rubyに限らず、GoやNode.js、PHPなどは言語のバージョンによって差異が出るので、このようなバージョン管理の概念は必ず必要となります。\n環境構築の際は、忘れずに考慮するように注意しましょう。\n","date":"2018-01-23T21:10:18+09:00","image":"/wp-content/uploads/2018/01/rbenvInstallEye.png","permalink":"/2018/01/23/2047/","title":"【バージョン管理】Macにrbenvを入れて複数バージョンを使いわけよう【Ruby】"},{"content":"Dockerfileとは？ 以前、コチラの記事にて、Docker For Macをインストールし、コマンド実行でHello worldを表示して見ました。\nただ、シンプルな実行内容のためコマンド引数で実行できたものの、もっと複雑な処理を実行した場合はコマンド引数では限界があります。\nそんな時は、Dockrfileを作成してみましょう。\nメリット ・Dockerfileは複雑なDockerの実行命令をファイル管理可能\n→　設定ファイルとして管理することにより、可読性が上がりファイルを渡すことで他のPC環境でも同じ処理が簡単に実行出来ます。\n・image管理\n→　コマンド実行だと毎回同じようなコマンドを叩く必要があるが、Dockerfileを作ってビルドすることでimageと呼ばれるデータを作ることが出来ます。\nまた、一度このimageファイルを作れば毎回ビルドする必要はなく、imageファイルを実行することで同じ動きを行うことが可能です。\n手順 Dockerfileの作成 まずはDockerfileを作成してみましょう。\n以下のDockerfileファイルを作成してください。\nFROM ubuntu RUN echo \u0026#34;now building...\u0026#34; CMD echo \u0026#39;Hello world\u0026#39;\nimageファイルの作成 Dockerfileからイメージファイルを作成するには以下のコマンドを実行します。\ndocker build ./ -t hello_world\n-tオプションは作成するimageファイルにタグ(名前)をつけたい場合に指定します。今回は分かりやすくするためにhello_worldという名前をつけました。\nちなみに、\n・RUN -\u0026gt; ビルド時に実行されるコマンド\n・CMD　→　イメージ実行時に起動されるコマンド\nです。\n実行後に以下のコマンドでimages一覧を表示してみましょう。\ndocker images\n正常にhello_worldというimageが作成されていますね。\nimageファイルの実行 以下のコマンドで作成したimageファイルを作成してみましょう。\ndocker run hello_world\n正常に実行されました。\ndockerコンテナ imageファイルを実行するとコンテナというものが作成されます。\n以下のコマンドで確認出来ます。\ndocker ps -a\n-aオプションは停止しているコンテナも含め表示します。\n※先ほど作成したhello_worldイメージは実行後にすぐに停止します\ndockerはイメージとコンテナの関係性の理解が大切です。\nコンテナの削除 一度コンテナが作成されると基本的には残り続けます。\n不要なコンテナを削除して見ましょう。\n先ほどのコマンドでCONTAINER IDが表示されていましたが、削除する場合はこのCONTAINER IDを指定することで削除が可能です。\ndocker rm {削除したいCONTAINER ID}\nこれでコンテナの削除が完了です。\nイメージの削除 次にイメージを削除してみましょう。\n気をつけないといけないのは、イメージを削除する場合は、先にイメージから作成したコンテナを削除しないと、\nError response from daemon: conflict: unable to delete {削除したいIMAGE ID} (must be forced) - image is being used by stopped container {利用しているCONTAINER ID}\nが発生して、削除出来ないので気をつけましょう。\n以下のコマンドでイメージを削除することが可能です。\ndocker rmi {削除したいIMAGE ID}\nこれでイメージの削除も完了です。\nあとがき 今回はDockerfileの中身がとても少ないサンプルで紹介しましたが、システム開発でDockerfileを使う場合はものすごく複雑な記述になるので、Dockerfileの恩恵を受けることになります。\nDockerfileを使うデメリットはほとんどないので皆さんもDockerfileを作成するように心がけてみましょう。\n","date":"2018-01-22T18:53:08+09:00","image":"/wp-content/uploads/2018/01/dockerFileEye.png","permalink":"/2018/01/22/2170/","title":"Dockerfileに設定を記述して実行する方法"},{"content":"Docker環境の用意のしにくさ Docker環境を作る際に、初めての方は少なからず苦戦してしまうと思います。\nDockerを使うにはVirtualBox等でVMを起動しなければならず、その辺の設定も一癖あるからです。\nDocker for Macの登場 そんなお困りのマッカーに救世主が現れました。\nその名も\nDocker for Mac\nです。\n明らかなmac専用のソフトウェアです。笑\nこちらを使うことで簡単にDockerの環境を整えることが出来ますので、HomebrewCaskを使ってインストールしてみましょう。\nインストール まずは以下のコマンドでインストールを行います。\nbrew cask install docker\nDockerアプリケーションの起動 このままだとまだdockerコマンドが利用出来ません。\nなのでDocker.appを起動する必要があります。\n以下のコマンドで起動してください。\n※インストール先は環境によって異なるので各自変更の上実行してください。\nopen /Applications/Docker.app\nそうすると、以下のようなダイアログが表示されるので、Nextボタンをクリックします。\nDocker for macを使うには管理者特権が必要なので問題が無ければOKボタンをクリックします。\nパスワードを入力し、OKボタンをクリックします。\nすると以下のような画面が表示されるので、セットアップが終わるまで少し待ちましょう。\n確認 以下のコマンドをそれぞれ実行し、インストールされたかを確認してみましょう。\ndocker --version docker-machine --version docker-compose --version\n正常にインストールされています。\nHello worldを出してみる プログラミングおきまりのHello worldを出力してみましょう♪笑\n以下のコマンドを実行してみてください。\ndocker run ubuntu:14.04 /bin/echo \u0026#39;Hello world\u0026#39;\nなにやらいろいろ出ましたね！笑\nこれはdockerをubuntu:14.04というイメージを利用して起動し、/bin/echo 'Hello world'コマンドを実行します、という命令に読み解くことが出来ます。\nまた、ubuntu:14.04を初めて利用するのでいろいろとダウンロードしている感じですね。\nなので、もう一度同じコマンドを実行するとダウンロードをする必要がないのですぐにHello worldが実行されます。\nあとがき 一つ一つをインストールすると非常に手間だった作業がまとめてインストール及びセットアップ出来るので、非常に便利です！\nDockerを使ったシステム開発も今は非常に盛り上がっているので、是非活用してみてください♪\n","date":"2018-01-21T11:40:05+09:00","image":"/wp-content/uploads/2018/01/dockerForMac7.png","permalink":"/2018/01/21/1972/","title":"【楽チン素敵】Homebrew Caskを使ってDocker for macのインストールしてみる"},{"content":"Go言語のパッケージ管理の課題 Go言語は基本的に「go get ~」でインストールしたパッケージはすべて環境変数$GOPATH配下にインストールされます。\nまた、Go1.8からは環境変数$GOPATHを設定していない場合は、$HOME/goを利用するようになっています。\nそして、Goをビルドするときには、常に環境変数$GOPATHまたはこのディレクトリを見るので、同じモジュールでもビルドするプログラムによってバージョンを変える、といった事は標準の機能では実現出来ません。\nこれは結構深刻な問題で同一言語で複数システムを開発しているとバージョンが異なるモジュールを使うことはほぼ確実にありえます。\nGo言語のパッケージ管理システム その問題を解決してくれるのが「glide」と呼ばれるパッケージ管理ツールです。\nglideはvendoringという管理方式を持っています。\nこれは自分が依存している外部モジュールも自分自身が管理する、という方式の事を指します。\nNodejsのnpmやPHPのComposerを例に挙げると、あちらは自分自身が依存している外部モジュールについては参照情報のみを管理し、実態は外部から取得を行います。なので、結局は外部に依存しているという状態になります。\nここの境目がvendoringか否かになってきます。\nglideについてもHomebrewでインストール可能ですので早速使えるようにしてみましょう。\n手順 インストール 以下のコマンドを実行します。\nbrew install glide\nインストールはこれだけで完了です。\n確認 以下のコマンドを実行してみましょう。\nglide --version\n正常にインストールが完了しています。\nバージョン定義ファイルの作成 Go言語で開発する上で意識する必要のあるディレクトリ構成が２つあります。\nPoint\rワークスペース　→　GOPATHに指定するGo言語共通のディレクトリ\rプロジェクト　→　Go言語で実際に開発するディレクトリ\r今回は以下のディレクトリ構成で説明をします。\nPoint\rワークスペース　→　/Users/{ユーザー名}/tmp/work/go\rプロジェクト　→　/Users/{ユーザー名}/tmp/work/go/src/sample\rまずはプロジェクト内で以下のコマンドを実行し、バージョン定義ファイルを作成してみましょう。\nglide init\nそうすると、glide.ymlというファイルが作成されます。\n中身は最低限の記述しかされていません。\n依存パッケージの追加 次に依存するパッケージを追加してみましょう\n今回はコチラ\u0026nbsp;のモジュールを利用してみましょう。\nプロジェクト内で以下のコマンドを実行してください。\nglide get github.com/sirupsen/logrus\nエラー:Could not find any of /Users/{ユーザー名}/go/src. 実行時に、以下のようなエラーが出る人がいるかもしれません。\nこれは環境変数$GOPATHの指定がないのでデフォルトの/Users/{ユーザー}/go/srcにインストールしようとするのですが、そんなディレクトリは存在しないよ！というエラーです。\nそのディレクトリを作れば解決なのですが、利用するモジュールはプロジェクト単位で管理したいので、以下の記事で導入したdirenvを使って環境変数$GOPATHを指定しましょう。\n関連記事 【ローカル開発に便利】ディレクトリ毎に環境変数を設定することが出来る「direnv」のインストール方法と使い方【.envrc】 2018/01/19 856文字 約2分で読めます プロジェクト内で以下のコマンドを実行し、\ndirenv edit .\n以下の記述を追記します。\n基本的にはワークスペースを指定してください。\nexport GOPATH=\u0026#34;/Users/{ユーザー名}/tmp/work/go/\u0026#34;\nここで以下のエラーが出た場合はエラーメッセージの通りに以下のコマンドを実行します。\ndirenv allow\nそうすると.envrcが正常に読み込まれると思います。\nWithout src, cannot continue. こちらのエラーが出る場合はディレクトリ階層に問題があります。\n先ほどdirenvにて環境変数$GOPATHに指定したワークスペースの階層に「src」ディレクトリが存在していないのが原因です。\nなので、srcディレクトリを作成する必要があります。\n確認 もう一度実行してみましょう。\n正常にインストールされるとglide.ymlに記述が加わり、glide.lockというファイルが作成されます。\nまた、vendorディレクトリが自動で生成されその中にモジュールがインストールされている事がわかります。\nソースからの利用 あとはコーディング時にimportして利用するだけです。\n今回はsample.goという簡単なファイルを作成しドキュメント通り以下のコードを記述します。\npackage main import ( log \u0026#34;github.com/sirupsen/logrus\u0026#34; ) func main() { log.WithFields(log.Fields{ \u0026#34;animal\u0026#34;: \u0026#34;walrus\u0026#34;, }).Info(\u0026#34;A walrus appears\u0026#34;) }\nそして、以下のコマンドで実行します。\ngo run sample.go\n正常にimportされていそうですね。出力されました。\n最終的なディレクトリ ワークスペース配下のディレクトリ構成はこんな感じです。\nあとがき 少しディレクトリ構成に癖がありますが、ルールさえ分かってしまえば他の言語と大差なく作業を進める事が可能になります。\nぜひ、glideを使いこなしてGo言語を実装してみてください。\n","date":"2018-01-20T15:29:20+09:00","image":"/wp-content/uploads/2018/01/glideInstallEye-1.png","permalink":"/2018/01/20/1986/","title":"【Hombrew】Go言語のパッケージ管理ツール「Glide」のインストール方法【使い方】"},{"content":"環境変数とは？ 環境変数とはEnviroment Variableと呼ばれ、OSシステム全体で利用可能な変数の事を指します。\n一般的には様々なbinファイルの場所や設定情報を代入して、プログラム内で取得したりすることが可能になります。\nしかし、この環境変数はOS内で一意である必要があるため、値を変更したい場合は都度設定を変更して再読み込みをする必要があり、地味に厄介です。\ndirenvとは？ そんなときに便利なのが「direnv」です。\nこれは環境(ディレクトリ)単位で環境変数を管理することが出来ます。\nHomebrewで簡単に導入出来るのでインストールしてみましょう。\n手順 インストール まずはHomebrewでインストールします\n以下のコマンドを実行してください。\nbrew install direnv\n確認 以下のコマンドを実行してください。\ndirenv version\n正常にインストールされてますね。\n設定ファイルの編集 次にシェルの設定ファイルを変更します。今回はzshを使っているので~/.zshrcファイルを以下のように追記します。\n※利用しているシェル毎に修正すべきファイルは異なるのでお使いの環境に置き換えてください。\neval \u0026#34;$(direnv hook bash)\u0026#34;\n使い方 今回は環境変数「HOGE」に「hoge」という文字を代入しておき、特定のディレクトリの中ではdirenvを使って「fuga」という文字に変えてみましょう。\nまずは、以下のコマンドで通常のHOGE変数の中身を確認してみましょう。\necho $HOGE\n次に、環境変数を変えたいディレクトリに移動して、以下のコマンドでエディターを起動し、\ndirenv edit .\n以下の記述を追記してください。\nexport HOGE=fuga\nそうすると.envrcというファイルが生成され、入力した環境変数が即時反映されると思います。\n.envrcというファイルがないディレクトリに移動すると読み込んだ.envrcの設定が破棄され通常の環境変数に戻ります。\n.envrcがあるフォルダに移動すると再度読み込まれます。\nあとがき 以上のようにフォルダ単位で環境変数を簡単に変更することが出来ました。\n環境変数の使い分けが簡単に出来るだけで、開発作業がスムーズになることがあるのでお困りの際は是非direnvを導入して見てください♪\n","date":"2018-01-19T01:10:13+09:00","image":"/wp-content/uploads/2018/01/direnvInstall7.png","permalink":"/2018/01/19/1995/","title":"【ローカル開発に便利】ディレクトリ毎に環境変数を設定することが出来る「direnv」のインストール方法と使い方【.envrc】"},{"content":"複数バージョンの共存の必要性 前回の記事にて、go言語の環境構築についてご紹介しました。\n関連記事 【mac】Go言語の開発環境構築をHomebrewで行う方法 2018/01/17 547文字 約2分で読めます もちろん、そちらの手順にて問題はありませんが、場合によっては複数のGo言語のバージョンを使いたい！というケースもありえます。\n例えば、xxx案件の開発は1.9.0を使いたいが、yyy案件の開発は1.8.5を使たい、\nなどなど。\nそうなると、前回の記事だと毎回HomebrewでインストールしたGoをアンインストールをしてからバージョン指定をしてインストールし直す必要が出てきます。\ngoenv そんな時に便利なのが、goenvです。\nこちらはGo言語の複数バージョンを管理し、簡単に切り替えることが出来ます。\n一度インストールすれば良いので、今回は先日構築したGo言語を一度削除し、再びHomebrewを使ってgoenvを使えるように構築し直してみましょう。\n手順 前回の環境を削除 まずは以下のコマンドで前回の記事でインストールしたGo言語をアンインストールします。\nbrew uninstall go go version\n正常にアンインストール出来ました。\ngoenvのインストール 次に以下のコマンドでgoenvをインストールします。\nbrew install goenv\nGo言語のインストール この状態ではまだGo言語自体はインストール出来ていないのでインストールします。\nまずは以下のコマンドでインストール可能なバージョン一覧を見てみましょう。\ngoenv install -l すると、インストール可能なバージョンがずらーっと表示されます。笑\n今回は1.8.5をインストールしてみるので、以下のコマンドを実行してください。\ngoenv install 1.8.5\n念のため以下のコマンドでインストールが出来たか確認してみます。\ngoenv versions\n正常にインストール出来ていますね。\n利用するバージョンの指定 次に実際に使用するバージョンを指定します。\n以下のコマンドを実行してください。\ngoenv global 1.8.5\n正しく設定されたかの確認は以下のコマンドで行えます。\ngoenv global\n正常に設定されています。\n環境変数パスの追加 この状態だとまだgo言語は使えません。\nなので、お使いのシェルのprofileを編集する必要があります。\n今回はzshを使用しているので、~/.zprofileに以下を追記します\nexport GOENV_ROOT=\u0026#34;${HOME}/.goenv\u0026#34; export PATH=\u0026#34;${GOENV_ROOT}/bin:$PATH\u0026#34; eval \u0026#34;$(goenv init -)\u0026#34;\n編集が終わったら、以下のコマンドで反映します。\nsource ~/.zprofile\n確認 正常にGo言語が使える状態になったか確認してみましょう。\n以下のコマンドを実行してください。\ngo version\n正常にインストール出来ました。\nバージョンを切り替えてみる 試しにバージョンを1.8.5から1.9.0に切り替えてみましょう。\n以下のコマンドを順番に実行してください。\ngoenv install 1.9.0 goenv global 1.9.0 go version\n正常に切り替わっていますね。\n特定のバージョンをアンインストールしたい場合 以下のコマンドで可能です。\ngo uninstall {version}\nあとがき 今回もHomebrewを利用してgoenvをインストールし、複数のGo言語の共存を可能にしてみました。\n今後のことも考え、あらかじめ複数バージョンを使えるような環境にしておくことであとあと困らないので、是非goenvを利用しましょう♪\n","date":"2018-01-18T01:07:25+09:00","image":"/wp-content/uploads/2018/01/goEnvInstallEye.png","permalink":"/2018/01/18/1942/","title":"【mac】Go言語の複数バージョンを管理する「goenv」のインストール方法【Homebrew】"},{"content":"Go言語を学ぼう 仕事でGo言語を学ぶ必要が出てきたので、Homebrewを使って構築してみました。\nやはり、Homebrewは便利ですね♪\nそもそもGo言語とは？ Googleが2009年に開発した割と最近出来たコンパイル型のプログラミング言語です。\n思想としては、「Goは、オープンソースのプログラミング言語であり、シンプルで信頼性の高い効率的なソフトウェアを簡単に構築できます。」を掲げています。\nマスコットキャラクターは「Gopher（ホリネズミ）くん」と言うらしく、非常に可愛いです。笑\n手順 インストール まずは、以下のコマンドを実行します。\nbrew install go\n確認 インストールはこれだけです。以下のコマンドで確認してみましょう。\ngo version\n正常にインストールされていますね。\nHello.World! 正しくプログラムが動くかの確認もしてみましょう。\nhello.goというファイルを作成し、以下のソースを記述してください。\npackage main import \u0026#34;fmt\u0026#34; func main() { fmt.Printf(\u0026#34;Hello World\\n\u0026#34;) }\n以下のコマンドで実行してみましょう。\ngo run hello.go\n正常に動きましたね♪\nちなみにバイナリに変換してからの実行も出来るとのこと。\ngo build hello.go ./hello\nおぉ、便利ですね！！\nあとがき macであれば、Homebrewを用いて数分でGo言語の開発環境を整えることが出来ます。\nGo言語は現在人気が上昇している言語なので、皆さんも是非勉強してみては如何でしょうか♪\n","date":"2018-01-17T13:46:00+09:00","image":"/wp-content/uploads/2018/01/goInstallEye.png","permalink":"/2018/01/17/1926/","title":"【mac】Go言語の開発環境構築をHomebrewで行う方法"},{"content":"Gmailのエイリアス機能 What\u0026rsquo;s? 皆さんはGmailを使っていますか？\nAndroidが復旧していたり、様々なWebサービスでのソーシャルアカウントログインが主流となってきているので、大体の方がGoogleアカウントを持っていると思います。\nGoogleアカウントを持っていれば、Gmailを無料で使うことが出来ます。\nまた、基本的には1Googleアカウント1アドレスですが、エイリアスという機能を利用することで、1Googleアカウント複数アドレスを擬似的に実現することが出来るので、今回はそちらのやり方をご紹介致します。\n手順 前知識 メールアドレスは基本的に\n{アカウント名}@{ドメイン名}\nという組み合わせで成り立っています。\n共通事項 エイリアス機能を利用する方法は幾つかありますが、今回ご紹介するものは基本的にGmail側の設定のみですぐ利用出来ます。\n設定方法 アカウント部分に「+」でキーワードを指定する アカウント名の部分に「+」を用いてキーワードを指定することでエイリアス指定が可能です。\n例えば、メールアドレスが\nblogenist@gmail.com\nだった場合、\nblogenist+{任意のキーワード}@gmail.com\nと、送信先アドレスを入力します。\nこの場合、+以降は無視され、\nblogenist@gmail.com\nに全てメールが送信されますが、一部Webサービス上は別のメールアドレスと認識されるので複数のアカウントを使い分ける際に便利です。\n例\rblogenist+dummy@gmail.com\rblogenist+admin.first@gmail.com\r正常に届いています。\nドメイン部分を「googlemail.com」にする ドメイン部分を「gmail.com」から「googlemail.com」に変えるだけでもエイリアスとして有効になります。\n例\rblogenist@googlemail.com\r正常に届いています。\nアカウント部分に「.」を含める アカウント部分に「.」を含めるだけでもエイリアスとして有効になります。\nGmailではアカウント部分の「.」を取り除いた上で判別を行うようです。\n例\r.blogenist@gmail.com\rblogenist.@gmail.com\rblog.enist.@gmail.com\r正常に届いています。\nただし、「blogenist...@gmail.com」のような形だと送信エラーになってしまいました。\nあとがき このように、複数のメールアドレスを利用したい場合に同一のGoogleアカウントでもエイリアス機能を使うことで実現が出来ます。\nTwitterなどで複数アカウントを作成したいが、一つのGoogleアカウントで管理したい！という場合に非常に便利ですので、是非お試しください♪\n","date":"2018-01-14T22:31:57+09:00","image":"/wp-content/uploads/2018/01/gmailAliasEye.png","permalink":"/2018/01/14/1882/","title":"【便利】Gmailでエイリアス機能を使って1つのアカウントで複数のメールアドレスを使う方法"},{"content":"取得したドメインをメールアドレスとして使いたい 以前の記事で、お名前.comでのドメイン取得方法及びさくらのレンタルサーバーへの設定方法をご紹介しました。\n関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！！独自ドメイン取得編 2017/09/04 1740文字 約4分で読めます 今回は別ケースとして、お名前.comで取得したドメインを使ってGmailでのメール送受信を行う方法をご紹介します。\nこの設定を行うとGmailでメールの送受信が可能になるのでとても便利です\n手順 準備 今回の作業では以下のものが必要になるので、あらかじめ用意しておいてください。\nPoint\rお名前.comで取得したドメイン\r送受信で利用するGoogleアカウント\rお名前.com側の設定 まずはドメインNaviにログインします。\nログイン後、オプション設定タブを選択し、　転送プラスメニュー内のメール転送設定をクリックします。\n次に、メール転送設定を行いたいドメインをクリックします。\n取得したいメールアドレスと、そのアドレスにメールが届いた場合に転送するアドレスを入力します。\nそしてドメインのネームサーバーを変更にチェックを入れ、確認画面に進むボタンをクリックします。\n確認画面で特に内容に問題がなければ設定するボタンをクリックします。\n手続きが正常に完了します。\n確認 念のため10分ほど待って、実際に転送されるか確認してみましょう。\n送信先アドレスにお名前.comで指定した独自ドメインのアドレスを入力し、送信します。\n転送設定したGoogleアカウントにログインし、受信ボックスを見てみましょう。\n無事転送されていましたね。\nでは、そのメールに返信してみましょう。\nおや、転送設定をしたGmailアドレスからの返信になってしまいました。\n上記の設定はあくまで受信時の転送設定なので、送信時の転送設定もGmail側でする必要があります。\nGmail側の設定 [adsense]\r二段階認証の有効化 まずはGoogleアカウントの二段階認証を有効にする必要があります。\nアカウントアイコンをクリックし、アカウントボタンをクリックします。\n次に、ログインとセキュリティメニューをクリックします。\n初期だと二段階認証プロセスがオフになっているのでオンにしましょう。\n二段階認証プロセスメニューをクリックして設定画面に進みましょう。\n内容を確認し、問題が無ければ開始ボタンをクリックします。\nまずはGoogleアカウントの再認証が求められますので、パスワードを入力し次へボタンをクリックします。\n次に、電話番号の入力を求められるので、お手元の携帯電話の番号を入力し、今回はコードの取得情報をテキストメッセージを選択して次へボタンをクリックします。\nすると入力した番号に認証コードが届くので、入力し次へボタンをクリックします。\n正しく認証が通ると、有効化の最終確認画面が表示されるので問題が無ければオンにするボタンをクリックします。\nこれで二段階認証がオンになりました。\nもう一度ログインとセキュリティメニューに戻ると有効にされていることがわかります。\nアプリパスワードの発行 次にアプリパスワードの設定を行います。\nまずはアプリパスワードメニューをクリックします。\n再度、アカウント認証を求められるのでパスワードを入力し次へボタンをクリックします。\nすると、先ほど登録した電話番号に認証コードが送信されるので認証コードを入力し次へボタンをクリックします。\n次にアプリパスワードの生成を行います。\n今回はメール/Macを選択して生成ボタンをクリックします。\n※お使いのOSに合わせて変更してください。\nダイアログが表示され、アプリパスワードが表示されるので、忘れないように控えておいてください。\nアプリパスワードの設定 次にアプリパスワードをGmailに設定します。\nGmailの画面に戻り、歯車メニューをクリックし設定メニューをクリックします。\nアカウントとインポートメニュータブを選択し、他のメールアドレスを追加リンクをクリックします。\nすると、別ウィンドウが表示されるので、名前/メールアドレスを入力しエイリアスとして扱いますにチェックを入れたまま次のステップへボタンをクリックします。\n次にSMTPサーバーの設定を入力します。\nSMTPサーバー\rsmtp.gmail.com\rポート\r４６５\rユーザー名\r今回利用するGmailアカウント(@gmail.comも含める)\rパスワード\r先ほど発行したアプリパスワード\r入力後、SSLを利用したセキュリティで保護された接続(推奨)を選択して、アカウントを追加ボタンをクリックします。\nすると入力したGmailにメールが届くので、メールに記載されているURLをクリックします。\n確認内容に不備が無ければ確認ボタンをクリッックします。\nこれでアプリパスワードの設定が完了しました。\n以下のブラウザは不要なので閉じてしまって構いません。\n確認 もう一度確認してみましょう。\n送信すると、\n正常に届きます。返信すると、\nあれ、Gmailで届いてしまいますね。\nデフォルトだとGmailで返信してしまうようです。\nなので、こちらをメールを受信したアドレスから返信するに変更します。\n再々確認 もう一度確認してみましょう。\n正常にGmailを経由して独自ドメインから届きましたね。\nあとがき 少し手順は多めですが、これで無事にGmailでの独自ドメインの利用が出来ました。\n今は様々なサービスでGoogleアカウントを利用出来るので、この手順で紐付けを行っておくといろいろと便利かもしれません。\nぜひお試しください。♪\n","date":"2018-01-13T18:36:01+09:00","image":"/wp-content/uploads/2018/01/onamaeGmailEye.png","permalink":"/2018/01/13/1817/","title":"お名前.comで取得したドメインをgmailで利用する方法"},{"content":"フォロバをしてくれないアカウントが多い 今や、Twitterは広告塔としては非常に強力です。\nまた、無料で複数アカウントも作成することが可能なのでメディア広告には非常に向いています。\nしかし、同じような目的の方が多いのか、ひたすらフォローしてもフォローバックをしてくれないアカウントが多くあります。\nフォロー数 \u003e フォローバック数\nだと、印象的にbotかな？とかフォロワー数を稼ぎたいだけのアカウントなのかな？と敬遠されてしまい、さらにフォローバック率が下がってしまうという、負の連鎖に陥ってしまう可能性があります。\nフォロワーの整理が大切 フォロワーを増やすためにどんどんフォローするのは良いのですが、定期的に一方的にフォローしてしまっているアカウントを外していく必要があります。\n定期的にこの作業を行うことで、\nフォロー数 \u003c フォローバック数\nの実現に近づきます！\nただ、この作業は通常のブラウザやアプリで行うには非常に骨が折れます・・・orz\nそんな時にManageFlitter\u0026nbsp;という無料サービスを利用することで簡単にアカウント整理をすることが出来ますので、今回は使い方をご紹介致します♪\n使い方 アクセス まずは、コチラ\u0026nbsp;にアクセスします。\nそうすると、ManageFlitterのページが表示されるので、Try it for FREEボタンをクリックします。\n次に、Twitterへの接続を求められるので、Connect to Twitter \u003e\u003eボタンをクリックします。\nサービスを利用したいTwitterアカウントのID/パスワードを入力し、ログインボタンをクリックします。\n正常に認証が通ると、メールアドレスの入力を求められるのでアカウントの登録メールアドレスを入力しContinueボタンをクリックします。\n正しいメールアドレスを入力していれば、フォローバックされていないフォロワー一覧が表示されます。\nJavaScriptを追加ったフォロワーの解除 一覧には100人ごとに表示されます。これを一人一人ボタンクリックするのは非常に大変ですし、手首が痛くなってしまいます。笑\nそこでChrome開発車ツールを利用したJavaScriptを実行し、一括でフォロワーを解除してみましょう♪\nまずはメニューバー\u003e表示\u003e開発 / 管理\u003eJavaScriptコンソールをクリックします。\nそうするとJavaScriptコードを入力出来るエリアが表示されるので、そこに以下のコードを入力しエンターキーを押してください。\n$(\u0026#34;.Unfollow\u0026#34;).each(function(index, element) { if( index \u0026gt; 20 )//2018/1/7時点では無料版では1日20フォロー解除の制限がある { return false; } var ev = jQuery.Event(\u0026#34;click\u0026#34;); ev.srcElement = element; $(this).delay(index*1000).trigger(ev); });\nこれで一括でフォロー解除が出来ました。\nあとがき 以上のように簡単にまとめてフォロー解除をすることが出来ます。/p\u003e\r1日の上限解除数がありますが、一気に解除しても凍結されてしまう恐れがあるので、毎日小まめに行うことが大事なので20件ごとでも問題無いでしょう♪\n","date":"2018-01-08T14:34:11+09:00","image":"/wp-content/uploads/2018/01/ManageFlitterEye.png","permalink":"/2018/01/08/1800/","title":"【Twitter】ManageFlitterを使ってフォロワーを整理する方法【自動管理ツール】"},{"content":"pipとは？ Pythonのパッケージ（ライブラリ/モジュール）をインストール・管理するためのパッケージ管理システムのことです。\nPythonは人工知能や機械学習で最近注目されている言語です。\n今回はさくらのレンタルサーバーにてpipコマンドを使えるようにするまでの方法をご紹介します。\n手順 前提 作業を進める前に、以下のコマンドでさくらサーバーにインストールされているPythonのバージョンを確認しましょう。\npython --version\npython --version Python 2.7.6\n今回は2.7.6が標準でインストールされていたのでこのまま作業を進めます。\npython用のディレクトリの作成 まずは、以下のコマンドでディレクトリを作成します。\nmkdir -p ~/.local/lib/python2.7/site-packages\npipのインストール 次に、以下のコマンドでpipをインストールします。\n","date":"2018-01-07T16:22:04+09:00","image":"/wp-content/uploads/2018/01/sakuraInScrapingEye.png","permalink":"/2018/01/07/1756/","title":"【python】さくらのレンタルサーバーでpipを使えるようにする方法"},{"content":"Quick Lookとは？ Quick Look(クイックルック)とは、OS Xに搭載されている標準機能で、対応しているファイル形式であればFinder上でカーソルを当てた上でスペースキーを押すだけでファイルの中身をプレビュー表示する事が出来ます。\nこんな感じ。\n対応ファイルはかなり多く、テキストや画像ファイルに加え、エクセルやパワーポイントなどもプレビュー表示する事が可能で非常に便利です！\n使い方 操作方法については、基本的にはFinder上で行える以下の３つのみです。\nPoint\rファイルにフォーカスを合わせて「スペースキー」でプレビューが開く\rもう一度「スペースキー」でプレビューを閉じる\rプレビューを開いた状態で、「矢印キー」の上下ボタンで前後のファイルに進む\rすごく簡単です！\nプレビューのまま前後のファイルに移動出来るのはとても使い勝手が良いです♪\nプラグイン 標準の機能のみでも非常に便利ですが、プラグインを追加することでさらにQuickLookが便利になります！\n今回は筆者が導入しているプラグインをいくつか紹介致します♪\nインストールはHomebrew Caskを利用することで簡単にインストール出来ます♪\nQLColorCode ソースファイルのプレビュー時にシンタックスハイライトが効くようになります。\nコマンド brew cask install qlcolorcode QuickLookJSON Jsonファイルのプレビュー時に折りたたみやハイライト表示がされるようになります。\nコマンド brew cask install quicklook-json QuickLookCSV CSVファイルのプレビュー時にカラム数や行数、ハイライト表示してくれるようになります。\nコマンド brew cask install quicklook-csv 終わりに macを使っている方でも以外と知らない方が多いのではないでしょうか？\n今回紹介しきれなかったプラグインについては、コチラ\u0026nbsp;にまとまっているので、興味があるものがあったら導入してみてください♪\n今まではエクセル等も毎回オフィスを開く必要があり、無駄な時間を使っていましたが今後はQuickLookを使って有意義に作業時間を使いましょう♪\n","date":"2018-01-07T13:50:22+09:00","image":"/wp-content/uploads/2018/01/quicklookEye.png","permalink":"/2018/01/07/1742/","title":"【mac豆知識】Finderの超便利機能「クイックルック(QuickLook)」を使ってファイルのプレビューを確認しよう【プラグイン】"},{"content":"IAMとは？ IAMとは、AWSのサービス群の権限を安全に制御するための仕組みです。\n具体的には\nPoint\rグループ\rユーザー\rロール\rを組み合わせることでセキュリティの向上を図ることが出来ます。\n詳しくはコチラを見てただければイメージが湧くと思います。\n今回はIAMの設定手順をご紹介致します。\n手順 IAMの新規作成 マネジメントコンソールにログインし、サービス\u003eセキュリティ、アイデンティティ、コンプライアンス\u003eIAMをクリックします。\n左メニューのユーザーを選択し、ユーザーを追加ボタンをクリックします。\n任意のユーザー名を入力し、その他はデフォルトのままで次のステップ：アクセス権限ボタンをクリックします。\nまだグループを作成していない場合はここでグループの作成を求められるので、グループの作成ボタンをクリックします。\nグループの新規作成 任意のグループ名を入力し、グループに対するポリシーを選択します。\n今回は管理者グループを作成するのでAdministerAccessにチェックを入れ、グループの作成ボタンをクリックします。\n正常にグループが作成されると、先ほどの画面に作成したグループが表示されるので、チェックを入れて次のステップ：確認ボタンをクリックします。\n設定した情報の確認画面が表示されるので、確認の上問題が無ければユーザーの作成ボタンをクリックします。\nそうすると、作成完了画面が表示されます。\nその中にログイン用URLとログイン用パスワードが確認出来るので控えておきましょう。\nログイン用URLにアクセスすると、アカウントの欄には値が入力されているので、そこはそのまま変更せずに、ユーザー名とパスワードを入力しサインインボタンをクリックします。\n正常にログイン出来ると、パスワードの変更を求めれられるので、現在のパスワードと変更後のパスワードを入力してパスワードの変更の確認ボタンをクリックします。\n変更後のパスワードは忘れないようにメモをしておいてください。\nこれで正常にIAMユーザーの作成が出来ました。\nアクセスキーの発行 マネジメントコンソール自体は、上記の手順で作成したアカウントを使えば問題なく操作できますが、システム等からAPIを使って\u0010AWSサービスを操作するには認証キーの発行をする必要があります。\n※初期は発行されていません。\n先ほど作成したユーザーの概要画面を開き、認証情報タブを選択しアクセスキーの作成ボタンをクリックします。\nそうするとアクセスキーの作成が出来るのでCSVをダウンロードし厳密に管理してください。\n※シークレットキーはこの画面以外では確認することは出来ないので管理に注意してください。\nこれでシステムからもAWSサービスの操作が可能になりました。\n※グループに付与したポリシー次第では操作出来ない機能もあるので、その辺は用途に合わせて調整してみてください。\n終わりに AWS契約時に作成したアカウントはrootユーザーとなってしまい、全ての権限を持ってしまっているのでそのまま使用するのは推奨されていません。\nなので、まずは専用のIAMユーザーを作るのが基本となっていますので、まだrootユーザーを使っている方がいましたら是非IAMユーザーを作ってそちらを使用するようにしてみてください。\n","date":"2018-01-04T14:52:16+09:00","image":"/wp-content/uploads/2018/01/awsIAMEye.png","permalink":"/2018/01/04/1721/","title":"【AWS】IAMユーザーとアクセスキーの作り方"},{"content":"EC2はデフォルトではUTC AWSのEC2を利用すると、システム日付がデフォルトではUTCになってしまっています。\nUTCとJSTでは時差が発生するので、時間が+9時間されてします。\nUTC\r2018年01月01日(火) 00:24\rJST\r2018年01月01日(火) 09:24\rただ、AWSのインスタンスの場合は簡単にUTCからJSTに変更することが出来るのでやり方をご紹介します♪\n手順 /etc/localtimeの変更 以下のコマンドを実行して、localtimeファイルをJapanに変更します。\ncp -p /usr/share/zoneinfo/Japan /etc/localtime\n権限エラーで怒られた場合は、以下のようにsudo権限を付与してコマンドを実行してください。\nsudo cp -p /usr/share/zoneinfo/Japan /etc/localtime\n確認 以下のコマンドを叩いて確認してみましょう。\ndate\n末尾がUTCからJSTに変わっていれば正常に変更が完了しています。\n※サーバーの再起動等は不要で即時反映されるようです\n終わりに 上記の手順で簡単に変更することが出来ます。\nWordpressやシステム開発をする場合は基本的にはJSTにするデメリットはないので一番最初にやっておいたほうが良いでしょう♪\n","date":"2018-01-01T23:18:25+09:00","image":"/wp-content/uploads/2018/01/ec2UTCtoJSTEye.png","permalink":"/2018/01/01/1714/","title":"【AWS】EC2インスタンスのシステム日付をUTC(協定世界時)からJST(日本時間)に変更する方法"},{"content":"Gif画像は簡単に作れる！ 皆さんはGif(Graphics Interchange Format)画像を知っていますか？\nTwitterやlineなどでも利用でき、最近はよくネット上でも見ることが多いと思います。\nこんなやつ。\n可愛いぃぃ！！！\n無音ということもあり、独特のシュールさがありますね。笑\nこのようなGif画像を身近な動画を使って作りたいと前々から思っていましたが、AdobeのAfterEffectsとPhotoShopを使うことで簡単に作ることが出来ましたので、今回は紹介致します。\n手順 AfterEffectsからmovファイルの書き出し 今回はこちらの動画をGif画像にしてみます。\nまずはAfterEffectsからGif画像にしたい動画をmovとして書き出しましょう。\n書き出したいコンポジションを用意したら、コンポジション\u003eレンダーキューに追加を選択します。\nレンダーキューに追加されたらロスレス圧縮リンクをクリックします。\n出力モジュール設定ダイアログが表示されたら、\n・形式 -\u003e QuickTime\n・チャンネル -\u003e RGB + アルファ\n・カラー -\u003e ストレート(マットなし)\nをそれぞれ指定して、OKボタンをクリックします。\n問題がなければレンダリングボタンをクリックします。\n確認 正常にレンダリングが出来ていれば、movファイルが作成されているはずです。\nPhotoShopでのGif書き出し 次はAfterEffectsで書き出したmovファイルをPhotoShopで読み込みます。(PhotoShopってmovファイルも読み込めるんですね・・・！)\n読み込んだら、ファイル\u003e書き出し\u003eWeb用に保存(従来)を選択します。\nここで何も設定を書き換えずにGif動画として書き出すと、ものすごく容量がでかいGif画像になってしまいます。\nなので、カラー/ディザ/劣化/メタデータ/パーセントを調整してください。\nそして、下部のループオプションを無限に設定した上で保存ボタンをクリックしましょう。\n完成 いい感じのGif画像になっていますね♪\n終わりに いかがだったでしょうか？\n動画ファイルとAfterEffects、PhotoShopがあれば簡単にGif画像を作ることが出来ます。\nもちろんLineやTwitterに載せることも出来るのでぜひ試してみてください♪\n","date":"2017-12-12T23:17:02+09:00","image":"/wp-content/uploads/2017/12/694779076.gif","permalink":"/2017/12/12/1391/","title":"【AdobeCC対応】AfterEffectsとPhotoShopを利用したGif画像の作り方【mac/windows】"},{"content":"SSH接続出来たはいいが・・・ 前回の記事で、SSH通信によるさくらサーバーへの接続方法を紹介しました。\n関連記事 【ワンランク上のブロガーへ】MacでさくらサーバーにSSH接続する方法 2017/12/08 1940文字 約4分で読めます いざ、サーバーをいじくろう！と思ったのですが、なんと\nデフォルトではcshとviしか使えないのですorz\nそこで今回は、サーバー操作をする上で必要不可欠と言っても過言ではないbashとvimを使えるようにするまでの手順を紹介致します。\n手順 bashの有効化 有効化する前に、現在のshellを確認してみましょう。\n以下のコマンドを実行してみてください。\nコマンド echo $SHELL そうすると以下のようなメッセージが表示されると思います。\nやはり、cshがデフォルトで設定されていましたね。。。\nでは、以下のコマンドでbashに設定し直しましょう。\nコマンド chsh -s /usr/local/bin/bash パスワードの入力を求められるので、サーバーパスワードを入力してください。\n認証が成功すると以下のようなメッセージが表示されます。\n.bash_profileの作成 次に.bash_profileファイルを作成します。\nまずは以下のコマンドを実行して.bash_fileと.bashrcを作成してください。\nコマンド touch ~/.bash_profile touch ~/.bashrc 次に、以下のコマンドで.bash_profileの編集画面を開きます。\nコマンド vi ~/.bash_profile そして以下のコードをペーストして保存してください。\n~/.bash_profile if [ -f $HOME/.bashrc ]; then source $HOME/.bashrc fi 確認 一旦、SSH通信を終了して、再度接続し直してください。\nそして、もう一度以下のコマンドを実行してみてください。\nコマンド echo $SHELL そうすると、bashに変わっていることが確認出来ますね。(bashに変えた影響で見た目も多少変わっています。)\nVimのインストール 次はVimをインストールしましょう。\nまずは以下のコマンドでディレクトリを作成して移動します。\nコマンド mkdir -p ~/local/src cd ~/local/src 次に、以下のコマンドでVimのソースファイルをダウンロードします。\nコマンド wget ftp://ftp.vim.org/pub/vim/unix/vim-7.4.tar.bz2 コマンド入力後少し待ち、以下のメッセージが表示したら、ダウンロードは完了です。\n次に、以下のコマンドでダウンロードしたファイルを展開します。\nコマンド tar jxf vim-7.4.tar.bz2 次に以下のコマンドでディレクトリ移動をし、パッチファイル用のディレクトリを作成し、さらにそのディレクトリの中に入ります。\nコマンド cd vim74 mkdir patches cd patches パッチファイルを以下のコマンドでダウンロードします。\n2017/12/9時点では2367が最新のものです。\n※かなり時間がかかりますので、放置しておきましょう\nコマンド curl -O \u0026#39;ftp://ftp.vim.org/pub/vim/patches/7.4/7.4.[001-2367]\u0026#39; ダウンロードが完了したら以下のコマンドでパッチを適用します。\nコマンド cd .. cat patches/7.4.* | patch -p0 次に以下のコマンドでコンフィグを設定します。\nコマンド ./configure --enable-multibyte --enable-xim --enable-fontset \\ \u0026gt;--with-features=big --prefix=$HOME/local 次に以下のコマンドを実行します。\nコマンド make 次に以下のコマンドを実行します。\nコマンド make install 次に以下のコマンドで.bashrcファイルの編集を行います。\nコマンド vi ~/.bashrc 次に以下の２行を追加し、上書き保存してください。\nコマンド alias vim=\u0026#39;~/local/bin/vim\u0026#39; alias vi=\u0026#39;~/local/bin/vim\u0026#39; 次に以下のコマンドで.bashrcファイルの編集内容を反映します。\nコマンド source ~/.bashrc 確認 以下のコマンドを実行し、vimが表示されればインストール完了です。\nコマンド vim 終わりに いかがだったでしょうか？\n今回は今までと違って、結構がっつりコマンド操作がメインになっています。\n今回使用したコマンドについては詳細は説明しませんでしたが、分からなかったら一つ一つ調べながら手順を進めることで何をやっているのかが理解出来ると思いますので焦らずに試してみてください♪\n","date":"2017-12-09T20:58:38+09:00","image":"/wp-content/uploads/2017/12/sakuraBashVimEye.png","permalink":"/2017/12/09/1625/","title":"【さくらのレンタルサーバー】デフォルトのcshとvi以外にVimとBashを使えるようにする方法【カスタマイズ】"},{"content":"SSH接続の必要性 優秀なサーバコントロールパネル ブログやホームページを運営している方で、さくらのレンタルサーバを使っている人は多いと思います。\n本ブログでも、アフェリエイトブログ構築のための設定手順も紹介しています\n関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！さくらレンタルサーバーのレンタル編 2017/08/28 3469文字 約7分で読めます さくらのレンタルサーバーの良いところは会員向けのサーバコントロールパネル画面でしょう。\nWordpressのインストールやドメインの設定もこの画面で出来てしまうので、基本的にはサーバーに直接入らなくても運用は可能です。\nしかし、物足りない・・・ 筆者は職業柄、実際にサーバーに入って操作したい派なのです・・・。\n幸い、SSH通信でターミナルからさくらのレンタルサーバー内に入ることは出来るようのなので、今回はそちらの手順をご紹介致します。\n注意！！ サーバーに直接入って、間違ったコマンドでファイルを消したり上書いたりすると、ブログやホームページが見れなくなったり壊れたり可能性があるので、知識のない方はやらない等、自己責任で宜しくお願い致します。\n手順 接続情報の確認 サーバー契約した際に受信したメールに、FTPサーバ名/FTPアカウント/サーバパスワードが記載されているので、そちらを控えます。\nターミナルからSSH接続 ターミナルを起動し、「ssh {FTPアカウント}@{FTPサーバ名}」の形式でコマンドを入力します。\n例：\nssh blogenist@www1234.sakura.ne.jp\nすると、初めての接続の場合は以下のようなメッセージが表示されるので、yesと入力してエンターキーを押します。\n次にパスワード入力を求められるのでサーバパスワードを入力します。\n※タイピングしても表示されないので間違えないようにしましょう\n確認 パスワードを入力後、以下のようなメッセージが表示されれば接続完了です。\n[adsense]\n鍵認証の設定 パスワード接続は出来ましたが、毎回パスワードを入力するのは大変ですよね。\nなので、今回は鍵認証の設定も行いましょう。\n鍵認証とは、一度設定すればパスワードの入力が不要でサーバーにSSH接続が出来るようになります。\nもちろん、セキュリティもしっかりしています。\n.sshディレクトリの作成 まずはSSH通信と一旦終了し、鍵ファイルを置く.sshというフォルダをローカル(自分のPC)に作成します。\n以下のコマンドを実行して下さい。\n※エラーが出た場合はすでに.sshが存在しているので無視してOKです。\nmkdir ~/.ssh\n鍵ファイルの作成 次に鍵ファイルの作成をします。\nまずは以下のコマンドで先ほど作成した.sshディレクトリに移動します。\ncd ~/.ssh\n移動したら、以下のコマンドを実行して鍵ファイルを作成します。\nssh-keygen -t rsa\nそうすると、なにやらメッセージが表示されますが、とりあえずそのままで良いのでエンターを3回押します。\n確認 正常に鍵ファイルが作成出来ているかを以下のコマンドで確認しましょう。\nls -la\nid_rsaとid_rsa.pubというファイルが作成されていれば鍵ファイルの生成は完了です。\n鍵ファイルの転送 次は作成された鍵ファイルの片方(id_rsa.pub)をさくらサーバーに転送します。\n「scp ~/.ssh/id_rsa.pub {FTPアカウント}@{FTPサーバ名}:/home/{FTPアカウント}/.ssh/authorized_keys」の形式でコマンドを入力します。\n例：\nscp ~/.ssh/id_rsa.pub blogenist@www1234.sakura.ne.jp:/home/blogenist/.ssh/authorized_keys\nそうするとパスワードを求められるので、先ほどと同じようにサーバパスワードを入力します。\n正しく認証が通れば以下のようなメッセージが表示され転送が完了します。\n確認 では、もう一度先ほどと同じSSHコマンドでさくらサーバー接続してみましょう。\n今度はパスワードの入力を求められずにサーバーへの接続が出来ると思います。\nこれで公開鍵でのSSH通信設定も完了です♪\nファイル権限の変更 最後にさくらサーバーに転送した鍵ファイルの権限設定だけセキュリティのために変更しておきましょう。\nまずはリモート(さくらサーバー)にて、以下のコマンドを実行してください。\nls -la ~/.ssh/\nそうすると以下のようなメッセージが表示されると思います。\nauthorized_keysの行の左側の「-rw-r--r--」というのは、このファイルが他の人にも読み取りが出来てしまう状態なので、これを読み取りが出来ないように設定を変更します。\n以下のコマンドを実行してください。\nchmod 600 ~/.ssh/authorized_keys\n確認 もう一度以下のコマンドを実行してください。\nls -la ~/.ssh/\nそうすると先ほどauthorized_keysの行の左側の「-rw-r--r--」となっていた部分が「-rw-------」に変わりました。\nこれで他の人からはこの鍵ファイルが読み取り出来ないようになりました。\n終わりに いかがだったでしょうか？\n普段ターミナルでサーバー操作をしない方には少し分かりにくかったかもしれませんが、覚えておいて損はありませんし、今後他の作業でも役に立つと思うので、気が向いたら試してみてください♪\n","date":"2017-12-08T21:01:26+09:00","image":"/wp-content/uploads/2017/12/sakuraToSshEye.png","permalink":"/2017/12/08/1584/","title":"【ワンランク上のブロガーへ】MacでさくらサーバーにSSH接続する方法"},{"content":"Macのユーザーアイコンを変えたい！ Macでは初期設定だと、ユーザーアカウントのアイコン画像に何かしらの初期アイコンが設定されている状態だと思います。\nこういうやつ\nもちろん、このアイコン画像はカスタマイズが可能ですので、今回はアイコン画像の変更方法を紹介致します。\n手順 設定変更 やり方はとても簡単です。\nまずは、Appleメニュー\u003eシステム環境設定をクリックします。\nシステム環境設定ダイアログが表示されたら、ユーザとグループをクリックします。\nユーザとグループダイアログが表示されたら、アイコン画像のエリアに設定したい画像をドラッグ\u0026ドロップします。\n正しくドラッグ\u0026ドロップが出来ると、以下のようなポップアップが表示されるのでアイコン画像の微調整をして完了ボタンをクリックします。\n確認 上記でアイコン画像の変更手順は完了なので、正常に変更がされているか確認をしてみましょう。\n正常に変更されていますね♪\n終わりに アイコン画像を変えるだけでも、気分が変わりますね。\nまた複数アカウントが混在する場合は、アイコンでのアカウント判断もしやすくなるので、気になった方は是非アイコン画像を変更してみてください♪\n","date":"2017-12-06T20:48:51+09:00","image":"/wp-content/uploads/2017/12/macUserIconChangeEye.png","permalink":"/2017/12/06/1542/","title":"【Macカスタマイズ】ユーザーアカウントのアイコン画像を変更する方法"},{"content":"セキュリティの必要性 筆者はIT関係の仕事をしている事もあり、セキュリティ面はかなり気にしています。(クラウドストレージもあまり使いたくありません。。。)\nまた、会社やカフェ等で少し席を離れる際にMacをスリープモードにするのですが、デフォルトでは短時間だとパスワード入力をせずにPC操作をすることが出来てしまいます。\n一見すごく便利そうですが、これはその間にPCを盗まれてしまうと中身が見られてしまう恐れがあり非常に危険です。\n筆者はスリープモードから復帰する際は短時間に関わらずパスワードの入力を必須にしているので、今回はその設定方法を紹介致します♪\n手順 設定変更 やり方はとても簡単です。\nまずは、Appleメニュー\u003eシステム環境設定をクリックします。\nセキュリティとプライバシーをクリックします。\nダイアログが開いたら、一般タブを選択し、スリープとスクリーンセーバの解除にパスワードを要求　開始後：プルダウンをすぐにに変更します。\n確認 これで設定は完了です。試しにスリープモードにしてすぐに解除してみましょう。\nそうすると今までは長時間放置していた場合のみパスワードの入力を求められていましたが、一瞬でもパスワードの入力を求められるようになりました。\n終わりに 以上のように、簡単にPCのセキュリティ対策が可能になります♪\n盗難等はほとんどないとは思いますが、PCの盗み見対策にもなるので、皆さんも是非この設定は変えておきましょう♪\n","date":"2017-12-05T23:45:53+09:00","image":"/wp-content/uploads/2017/12/sleepSecurityEye.png","permalink":"/2017/12/05/1545/","title":"【セキュリティ】Macでスリープ状態から復帰する際に必ずパスワードを求めさせる方法"},{"content":"変換ボックスが出なくなった！ Macで日本語入力をしていると、基本的にはリアルタイムで日本語変換ボックスが表示されると思います。\nこんな感じ\nしかし、たまに変換ボックスが出てこなくなってしまうことがあります。\nこんな感じ\n原因はアイツ 原因は、以前コチラの記事でも紹介した日本語入力プログラムです。\nAppleはもともとアメリカの企業なので、日本語入力に対応しておらず、そこを解消するために日本生産のMacには日本語入力プログラムというものが入っているのですが、コイツがいろいろ問題を起こしているのですね・・・。orz\nとはいえ、日本語入力プログラムは便利なので使っている人も多いでしょう。\n今回は変換ボックスが表示されなくなった場合の対処方法をご紹介します。\n手順 プログラムの再起動 結論を言うと、今回の現象についてもプログラムの再起動をするだけで対応することが可能です。\nFinderを起動し、アプリケーション\u003eユーティリティを選択します。\nアクティビティモニターを起動します。\nメモリタブを選択し、右の検索ボックスに「日本語」と入力すると、日本語入力プログラムというものがヒットするのでそれを選択し、右上の×ボタンをクリックします。\n確認ダイアログが表示されるので、終了ボタンをクリックします。\nそうすると、プログラムが終了し、またすぐに自動で再起動します。\n確認 Before\nAfter\n無事に変換ダイアログが表示されるようになりました♪\n終わりに 日本語入力プログラムを利用していると、様々な不具合が発生しますが、基本的にはプログラムの終了をすることで解決されるそうです。\n他にも日本語入力プログラムが原因の不具合があったら、記事にまとめて紹介致します。\n","date":"2017-12-04T23:08:49+09:00","image":"/wp-content/uploads/2017/12/liveTypingEye.png","permalink":"/2017/12/04/1530/","title":"【またお前か】Macの日本語入力中に変換ボックスが表示されなくなった場合の対処法"},{"content":"CCではレンダリング時にH.264(mp4)形式が不可能に H.264(mp4)形式とは？ H.264(mp4)形式とは、高画質かつ低サイズの動画ファイルを作成する際に使用されるコーデックです。\n画質を落とさずに容量を抑えることが出来るので、動画ファイルをそのままUSBメモリーやEメール等で受け渡しする際に向いてます。\nただ、高圧縮ファイルのためレンダリング時/再生時ともにそれなりの負荷がかかるのでスペックが低いPCやスマートフォンではうまく再生出来ない可能性があります。\n※YoutubeやVimeoへのアップロードは可能です。\nCSとCCでの書き出し方法の変更 筆者は動画作成依頼を受けることが多く、その際にはAdobe AfterEffects CS6を使っていました。\nまた、DVDではなく直接動画ファイルとして納品することもあり、その際にはレンダリング時の設定でH.264(mp4)形式に書き出していました。\n[adsense-responsive]\rそしてつい先日、CS6を卒業してCCを購入し、CS6と同じ感覚で制作物をH.264形式に書き出そうとしたのですがプルダウンにはH.264(mp4)での書き出し項目が存在していませんでした・・・。orz\nAmazon Adobe Creative Cloud コンプリート|12か月版|オンラインコード版 なんと、AfterEffects CC以降になってから H.264(mp4)形式でのレンダリングがAfterEffects単体では出来なくなっていたのです！！\nじゃあどうすれば？ Adobe Media Encoder CC以降でH.264形式で書き出したい場合は、Adobe Media Encoderというアプリケーションを使用します。\nこれはAfter EffectsやPremiere Pro等で作成したプロジェクトを様々な形式の動画ファイルに書き出してくれます。\n前述の通り、CC以降ではデフォルトでは特定の形式にしか書き出すことが出来ないので、とても重宝します！\nAdobe Media Encoder は、Adobe Premiere Pro、Adobe After Effects、Adobe Audition、Adobe Character Animator および Adobe Prelude のエンコーディングエンジンとして機能します。Adobe Media Encoder をスタンドアロンのエンコーダーとして使用することもできます。\n手順 Adobe Media Encoderのインストール まずはAdobe Media Encoderをインストールします。\nAdobe Creative Cloudデスクトップを開き、Appsタブを選択し、Media Encoder CCのインストールボタンをクリックします。\nそうするとインストールが始まるので、完了するまで待ちましょう。\nインストールが完了した事を確認出来たらOKです。\n※まだMedia Encoderは起動しなくて良いです。\n[adsense]\nAfter EffectsからMedia Encoderへの連携 次にAfter EffectsからMedia Encoderへの書き出し連携を行います。\nメニュー\u003eコンポジション\u003eAdobe Media Encoder キューに追加をクリックします。\n以下のようなエラーダイアログが出る場合、After EffectsのバージョンとAdobe Media Encoderのバージョンが一致していない可能性があるので、確認の上アンインストール\u0026再インストールをしてみてください。\nAdobe Media Encoderでの出力 正常にキュー追加が出来ると、自動でAdobe Media Encoderが起動します。\n形式もデフォルトでH.264に設定されているので、問題がなければ実行ボタン(緑右三角)をクリックします。\nそうすると、エンコーディングが始まるので完了するまでしばらく待ちましょう♪\n確認 [adsense-responsive]\rエンコーディングが正常終了していると、mp4形式の動画ファイルが生成されています。\nちなみに、今回はprofileHD.mov(35.03GB)とcoupleHD.mov(19.21GB)をまとめたH264.mp4(698.2MB)という動画を作ったのですが、圧縮率が凄まじいことが分かりますね。。。\nもちろん、画質の劣化や質が落ちているわけでもありません。素晴らしい！！\n終わりに いかがだったでしょうか？\nファイルの書き出し形式を変えるだけで、ファイルサイズにかなりの差が出ることが分かりました。\nQuickTime形式が容量でかすぎるという点もありますが、そのまま保存しているとハードディスクの容量を無駄に取ってしまうので、皆さんもどんどんAdobe Media Encoderを使ってH.264形式で書き出すようにしていきましょう♪\n","date":"2017-11-29T18:00:11+09:00","image":"/wp-content/uploads/2017/11/mediaEncoderEye.png","permalink":"/2017/11/29/1393/","title":"【CC2017版】AfterEffectsの動画をH.264(mp4)形式で書き出す方法"},{"content":"DVDの必要性 結婚式の余興の動画などを作っていると、作成した動画をDVDに焼く必要が出てきます。\nもちろん、新しい式場ではPCを直接繋げて流したり、USBメモリーに動画データを入れて渡すだけでも良いところもありますが、まだ少数派でしょう。\n結婚式場で流すには一般的なDVDプレイヤーで流せる状態でDVDディスクを作成する必要があります。\nAdobe製品を使ったDVDの作成方法 前提 今回はAdobe CC 2017のソフト群を使用して、動画ファイルの作成からDVDへの書き込みまでの手順を紹介致します。\n使うもの 使うもの\rAdobe After Effects(CC 2017)\rAdobe Encore(CS6)\r手順 動画ファイルの作成 まずは、AfterEffectsを利用してDVDに焼き込む動画ファイルを作成します。\nコンポジションの設定は以下のようにして下さい。\n大事なことはプリセットをNTSC DVにしておく事です。\nコンポジションの設定が完了したらレンダーキューに追加します。\n追加後にロスレス圧縮をクリックし、形式がQuickTimeになっている事を確認して下さい。QuickTime以外に設定されてたら、QuickTimeに変更をして下さい。\nその他は特に設定を変えずに、レンダリングボタンをクリックします。\nレンダリングが終わるまでかなり時間がかかると思うので気長に待ちましょう。笑\nレンダリングが終わると以下のようなQuickTime形式の動画ファイルが表示されます。\n[adsense]\nAdobe Encore CS6のインストール CS6までは、Encoreを使ってDVDディスクを作成していたと思います。\nじゃあCCでもEncoreを使えばええんやろ！と思いましたが、\nCCのラインナップにはEncoreが含まれていません。(絶望)\nオワタ＼(^o^)／と、思いましたが、CCではCSバージョンのアプリケーションのインストールが可能です！\n日ごろより弊社製品をご愛顧いただき、誠にありがとうございます。\rPremiere Pro CCには、Encore CS6の後継のバージョンは付属されておりません。\nEncore CS6がこの製品の最後のリリースとなります。\n今、ビデオ・放送業界では、テープやディスク等の物理メディア離れが進み、クラウドとストリーミングの時代を迎えつつあります。 そうした時代の趨勢の中で、弊社はストリーミングサービス向けの製品 に重点を置いた製品開発、機能強化を追求する方針を決定しました。例えば、Adobe Media EncoderとAdobe Premiere Pro CCには、QuickTimeチャプターマーカーを使用してiPad対応のビデオを作成できる機能があります。また、Androidタブレットにも対応するプリセットも数多く用意しておりま す。\nしかしながら、DVD、Blu-Rayへの書き出しの需要も根強いことも事実です。Premiere Pro CCで作成された作品のDVD/Blu-Rayのディスクオーサリング作業には、Encore CS6を継続してお使いいただくことを提案しております。\n【Creative CloudからCS6をインストールする方法】　※２０１４年6月以降、Ｃｒｅａｔｉｖｅ Ｃｌｏｕｄデスクトップアプリケーションからのダウンロードを行ってください。\nCCの場合はPremiere ProCS6をインストールする事で自動的にEncore CS6もインストールされるので、今まで通りDVDディスクを作成する事が可能になっています♪\nAdobe Creative Cloudデスクトップを開き、Appsタブを選択し、Premiere Pro CCインストールボタンの下三角を選択し、他のバージョンをクリックします。\n過去バージョン選択ダイアログが表示されるので、CS6のインストールをクリックします。\nインストールが開始されるので待ちましょう。\n[adsense]\nEncoreプロジェクトの作成 Encore CS6のインストールが完了したら、起動します。\n起動したら新規プロジェクトを作成します。\n新規プロジェクトダイアログが表示されたら、プロジェクト設定でオーサリングモードはDVD、テレビ方式はNTSCに設定してOKボタンをクリックします。\n動画ファイルの追加 実際にDVDディスクを作成するための設定を行っていきましょう。\nプロジェクトタブを選択し、DVDディスクに焼き込みたいQuickTimeファイルをドラッグ\u0026ドロップします。\nそうするとファイルが読み込まれます。\n次にタイムライン\u003e新規タイムラインを選択します。\nそうすると下部にタイムラインエリアが表示されるので、その中に対象の動画ファイルをドラッグ\u0026ドロップします。\nそうすると、タイムラインに動画情報が表示されます。\nエンドアクションの設定 次にエンドアクションの設定をします。\nここではDVDプレイヤーで再生をするための最低限の設定にしますが、お好みに合わせて変更してください。\nタイムラインパネルを選択した状態でプロパティタブを選択し、エンドアクションのプルダウンの中から停止を選択します。\nタイトルボタンの設定 次にタイトルボタンの設定をします。\nこちらもDVDプレイヤーで再生をするための最低限の設定にしますが、お好みに合わせて変更してください。\nプロジェクトパネルを選択した状態でプロパティタブを選択し、タイトルボタンのプルダウンの中から停止を選択します。\nプロジェクトのチェック 設定が完了したので、DVDディスクに焼ける状態になっているかの確認を行います。\nビルドタブを選択し、プロジェクトをチェックボタンをクリックします。\nチェックボタンはそのままで開始ボタンをクリックします。\n問題が無ければ下部に「該当項目はありませんでした。」と表示されます。\nDVDディスクの作成 では、実際にDVDディスクを作成します。\nビルドタブを選択し、形式はDVD、出力はDVDディスクを選択し、ビルドボタンをクリックします。\nそうすると、DVDへの焼き込みが始まるので完了するまで待ちましょう。\nこれで、家庭用DVDプレイヤーでの再生が可能なDVDディスクの作成が出来ました。\n結婚式場にあるDVDプレイヤーも基本的には家庭用DVDプレイヤーと同じ規格のはずなので再生が可能だと思います。(もちろん、事前の再生確認は必須です！！)\n終わりに 以上で、家庭でも結婚式場でも上映可能なDVDディスクの作成が出来ました。\nPC標準のソフトや無料ソフトでは、DVDディスクの作成方法が分かりづらかったり、うまく流れなかったりするので、周りに困っている人がいたらこちらの記事を参考にお助けしてあげてみてください♪\n","date":"2017-11-21T22:22:45+09:00","image":"/wp-content/uploads/2017/11/afterEffectsDVDEye.png","permalink":"/2017/11/21/1377/","title":"【CC2017版】AfterEffectsで書き出したファイルをEncoreを使ってDVDに焼く方法"},{"content":"OS X El Capitan以降の新機能「ライブ変換」 ライブ変換とは？ Macにはライブ変換という機能があります。\nこれはOS X El Capitanから追加された新機能で、日本語を入力していると自動で漢字に変換される、という機能です。\nこちらの機能を利用することで、入力してから変換する際の「スペース」を押す作業が不要になるので、馴れると入力とエンターのみで基本的な文章は作り上げることが可能になり、とても便利ですし、タイピングスピードが格段に上がります。\n使っている中での不満点 ただ、こちらの機能をずっと使っていると、入力をしてから変換がされるまでのタイムラグが日に日に長くなり、最終的にはストレスを感じてしまうくらいもっさりしてしまうことがあります。。。\nこんな感じ\n今回の記事で紹介する作業を行うとこんな感じ\n見比べると文字の入力からライブ変換までのスピードが明らかに違うのがわかります。\nこの現象はライブ変換を行っているプログラムを再起動する事で解消する事が出来るので紹介します♪\n手順 プログラムの再起動 Finderを起動し、アプリケーション\u003eユーティリティを選択します。\nアクティビティモニターを起動します。\nメモリタブを選択し、右の検索ボックスに「日本語」と入力すると、日本語入力プログラムというものがヒットするのでそれを選択し、右上の×ボタンをクリックします。\n確認ダイアログが表示されるので、終了ボタンをクリックします。\nそうすると、プログラムが終了し、またすぐに自動で再起動します。\nその際にメモリが2.8MBまで小さくなっています。先ほどは600MBもありました。これがもっさりする原因だったのです。\n確認 Before\nAfter\n一目瞭然ですね♪\n終わりに 機能自体は非常に便利なのですが、長く使っていると逆にストレスが溜まってしまう事になってしまう事もあるので、ちょっとでも「最近ライブ変換がもっさりしてきたな〜」と、感じたら今回の手順を実行するなどして、定期的にマシンのメンテナンスをするように心がけましょう♪\n","date":"2017-11-15T23:50:34+09:00","image":"/wp-content/uploads/2017/11/liveTypingSpeedEye.png","permalink":"/2017/11/15/1380/","title":"【Macで変換がもっさりする人必見】文字変換スピードを元に戻す方法"},{"content":"Youtubeの動画を保存したい！ ネットサーフィンの行き着く先 暇なときにすることと言えば、ネットサーフィンですよね♪\n今はYoutubeなどでお笑いやスポーツをいつでも見ることが出来るので暇つぶしには困らなくなりました。\nそんな中、お気に入りの動画を見つけたときにYoutubeの動画を保存したい！と思う機会は誰でもあると思います。\nどうやって保存すればいい？ Youtubeの動画を保存したいというニーズはあるが、そのための無料ソフトも出ては消え、出ては消え・・・の繰り返しで正直、何を使えば良いのか分からずにいました。\nyoutube-dlとの出会い そんな時にふと出会ったのがyoutube-dl\u0026nbsp;という動画ダウンロードツールです。\nyoutube-dl 紹介 youtube-dlはPythonという言語で作成されたツールです。\nYouTubeの動画はもちろん、TwitterやDailymotion、FC2など多くの動画サイトをサポートしています。\nこちらのツールはコマンドラインでの実行になります。ターミナル操作が苦手な人はせっかくの機会なので覚えてみましょう♪\nインストール 今回はMac環境にて、Homebrewを使ってインストールをしてみます。\nターミナルを開いて以下のコマンドを実行してください。\nbrew install youtube-dl\n確認 以下のコマンドを入力し、日付が表示されればインストール完了です。\nyoutube-dl --version\n対応サイト 以下のコマンドを入れると、ダウンロードに対応しているサイト一覧が表示されます。\nyoutube-dl --extractor-description\nなんと600サイト以上に対応しているとのこと。。。しゅごい・・・。\n使い方 基本的には以下のコマンドをベースにして使うことになると思います。\nyoutube-dl -f mp4 {URL} -o {保存ファイル名}\n正常に終了すると、カレントディレクトリに動画ファイルが出来ています。もちろん音声込みで再生が可能です♪\n終わりに いかがだったでしょうか？\nターミナルに抵抗のある方も多いかと思いますが、非常に簡単に動画のダウンロードが出来てしまいます。\nこのyoutube-dlだけに限らず、Macを使っている方はターミナル操作を覚えることで出来る事が何倍にも広がるので是非使いこなしてみてください。\nただし、くれぐれも常識の範囲内での利用をお願いします。\n違法ダウンロード、ダメ！！絶対！！！\n","date":"2017-11-14T00:32:46+09:00","image":"/wp-content/uploads/2017/11/youtube-dlEye.png","permalink":"/2017/11/14/1414/","title":"【Mac/Windows最新版】youtube-dlを使ってターミナルのコマンドラインからYoutubeやTwitterの動画ファイルを保存しよう【Homebrew】"},{"content":"AfterEffcetsのキャッシュについて キャッシュとは？ AfterEffectsやPremierePro、Encoreは処理負荷が高く、毎回レンダリング等をするのはパフォーマンス的に非常に効率が悪いです。\nなので、定期的に作業ファイルを内部に保存しておく事で無駄な処理を抑え、作業効率を上げています。\nこの内部に保存された作業ファイルをキャッシュと呼びます。\nキャッシュの自動保存機能によって、作業の一時ファイルが保存されるために発生します。Premiere Pro や Encore では、処理を高速化するために作業中に使用頻度の高いデータ（キャッシュ）を自動的に保存しています。\rメリット ・作業スピードが上がる\n・マシンへの負荷が下がる\n・低スペックマシンでもそれなりに動く\nデメリット ・キャッシュによって意図しない挙動をする事がある\n・ハードディスクの空き領域が減る\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;※これについては公式からも発表されています\nAfterEffectsでのキャッシュによる不具合 どんな不具合か？ 前述した、「キャッシュによって意図しない挙動をする事がある」という不具合？が発生しました。\n内容としては、以下のようにタイムライン上にフッテージが何もないのにレンダリングされてしまう、という現象です。\nコンポジション内をクリックしても、反応がないので選択して削除という事も出来ません。\n対処方法 メニューから編集\u003eキャッシュの削除\u003eすべてのメモリ\u0026ディスクキャッシュを削除するをクリックします。\nそうすると、以下のようなダイアログが表示されるのでOKボタンをクリックします。\n26GBもキャッシュされてるんですね・・・orz。\nこれでキャッシュがクリアされたので、タイムライン上にフッテージがなければレンダリングもされなくなりました。\n終わりに AfterEffectsでのキャッシュの働きがわからなければ、原因が特定しにくい現象なので、筆者も解決方法に辿り着くまでだいぶ苦しみました。笑\nまた、今回のような現象が発生しなくてもキャッシュファイルのサイズが結構大きくなるので、定期的にクリアしておいたほうが良いかもしれませんね♪\n","date":"2017-11-12T22:57:31+09:00","image":"/wp-content/uploads/2017/11/afterEffectsCacheEye.png","permalink":"/2017/11/12/1367/","title":"【Adobe CC 2017版】タイムラインにないフッテージが表示され続ける場合のAfterEffectsのキャッシュ削除方法"},{"content":"画面操作の録画は以外と簡単 GithubやQiitaを見ていると、良く画面操作を紹介する画像(Gif)が貼られているページを良く見ます。\n↓こんなの\n自分もやってみかったのですが、専用のソフトを買う必要があるのかな？とか、設定がめんどくさいんだろうな、と敬遠していましたが、いざやってみると非常に簡単だったので、ご紹介致します♪\n手順 前提 Macでの操作を前提で説明します。\n用意するもの ・QuickTime Player\n操作を撮影するためのソフトです。(Macの場合は標準装備)\n・Gifted\nQuickTime Playerで録画した動画をさくっとGif化出来る無料のソフトです。\n動画の撮影方法 まずは、QuickTimePlayerを起動し、ファイル\u003e新規画面収録を選択します。\nそうすると、以下のようなダイアログが表示されるので、赤丸(録画開始)ボタンをクリックします。\nそうすると以下のようなメッセージが表示されます。今回は画面の一部を録画したいので、ドラッグしてみます。\nドラッグすることで点線が現れ、そのエリア内が録画対象になります。問題が無ければ収録を開始ボタンをクリックします。\n録画を終了すると動画ファイルの保存ダイアログが表示されるので、任意の名称と保存先を選んで保存ボタンをクリックします。\n※Commandキー+Controlキー+escキーを押すことで録画終了が可能です\nこれでQT形式で画面操作の撮影が完了しました。\n次はGiftedというアプリケーションを利用して、この動画ファイルをGif化します。\nGiftedのインストール コチラにアクセスし、Mac App Storeで見るボタンをクリックします。\n※ダイアログが表示されたらApp Storeを開くボタンをクリックします\nApple App Storeが開いたら入手ボタンをクリックします。\nそうするとAppをインストールボタンに変わるので、再度クリックします。\nAppleIDの入力を求められるので、入力してサインインボタンをクリックします。\nそうするとインストールが始まるので、しばらく待ちましょう♪\nインストールが完了すると開くボタンに変わるのでクリックします。\nそうすると、Giftedが起動しますのでこれでインストールは完了です。\n動画をGif画像に変換 先ほど撮影した動画ファイルをGiftedにドラッグ\u0026ドロップします。\nそうすると以下のように画面が変わるのでStartボタンをクリックします。\n処理が開始するので少し待つと、ユーザー\u003eピクチャ\u003eGiftedフォルダ内にGif画像が生成されています。\n確認 さぁ、しっかりGif化されているでしょうか・・・？\n無事に出来てましたね♪\n終わりに 以上の手順で簡単に画面操作のGif画像を作成することが出来ました。\n言葉で説明しにくい場合や、容量を抑えたい場合は、是非こちらのやり方でGif画像にしてみてください♪\n","date":"2017-11-03T14:02:32+09:00","image":"/wp-content/uploads/2017/11/QuickTimePlayerToGifEye.png","permalink":"/2017/11/03/1324/","title":"【画面操作を簡単録画】QuickTimePlayerとGiftedを使って画面操作を録画してgif画像化する方法【簡単瞬殺】"},{"content":"ソースコードの埋め込み ソースコードを記事に埋め込みたい場合、プラグイン等を入れていないとすごく質素な感じになってしまいます。\nまた、様々な言語によってシンタックスハイライトが異なるので、それを自前で表現するのはとても大変です。\nそんな方のためのプラグイン、もちろんWordpressに用意されていますよ！！笑\n今回は、「Crayon Syntax Highlighter」というWordpressプラグインをご紹介致します♪\nCrayon Syntax Highlighter 概要 Crayon Syntax Highlighterプラグインは、記事の中でソースコードを綺麗に表示してくれます。\nまた、様々な言語に対応しており、40種類以上の言語に合わせてシンタックスハイライトをサポートしてくれます！\n導入方法 インストール プラグイン\u003e新規追加を選択し、キーワードに「Crayon」と入力すると、「Crayon Syntax Highlighter」プラグインがヒットすると思うので、今すぐインストールボタンをクリックします。\nインストールが完了すると、有効化ボタンに変わるのでクリックします。\n確認 設定の中に、Crayonメニューが追加されていれば有効化が完了です。\n使い方 設定\u003eCrayonの中でエディターの細かい設定は可能ですが、デフォルトのままで使えるので今回はデフォルトのままで進めていきます。\n記事編集エディタのボタン群の中に、crayonボタン」が追加されていると思うのでクリックします。\n専用の入力ダイアログが表示されるので、ソースコードと、対応する言語を入力し、右上のaddボタンをクリックします。\n※HTMLの場合はDefaultのままで良いです。\nそうすると以下のようになります。\n\u0026lt;html\u0026gt; \u0026lt;head\u0026gt; \u0026lt;title\u0026gt;タイトル\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;div\u0026gt; \u0026lt;p\u0026gt;本文\u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt;\nJavaScriptはこんな感じ\nfunction closewin() { var name = \u0026#34;hoge\u0026#34;; window.close(name); }\nCSSはこんな感じ\np { text-align: center; color: red; }\n良い感じですね♪\n終わりに 今回はデフォルトの設定で紹介してみましたが、細かい設定で見た目もカスタマイズ出来ますので、自分好みのコードエディターに設定してみてください♪\n","date":"2017-10-31T00:32:01+09:00","image":"/wp-content/uploads/2017/10/CrayonPluginEye.png","permalink":"/2017/10/31/1268/","title":"【ソースコードの埋め込み】Wordpressでコードを綺麗に表示してくれる「Crayon Syntax Highlighter」プラグイン"},{"content":"WindowsからMacへ 「かつて」は生粋のWindows使いだった 筆者は２０年以上WindowsPCにて、ホームページ制作やシステム開発を行っていました。\nなので、Windowsマシンでの開発については、\nそれはもうすごいです。(自称)\nまた、学習意欲はそれなりにある方だと自分でも自負しており、定期的にWeb関係の勉強会やらセミナーやら交流会に足を運んでいました。\nもちろん自前のPCは持参です。\n拭い去れないアウェイ感 しかし、年月が経つにつれて、少しずつ違和感を感じ始めたのです。。。(一人で勝手にですがw)\nその違和感とは・・・\n周囲のMac率の高さです！！\nいや、本当にすごいんですよね。基本的に割合は7:3くらいでMacが多いです。\nひどい時には自分だけWindowsという時もありました。笑\nそれはなぜか？ 近年のWebのフロントサイドの技術では、ただHTMLやJavaScript,CSSがかければ良いだけでは収まらなくなり、ライブラリの使用やコードのコンパイルなどの作業が多くなってきています。\nその上で、Node.js関連のnpmやwebpack、gulpなどのターミナル(みんな苦手の黒い画面)での操作が増えてきているのが原因だと思っています。\nそうなると、標準ではひ弱なコマンドプロンプトしか用意されていないWindowsマシンよりは、最初からターミナルが入っているMacがデフォルトになってきているのだと思います。\nとまぁ、こんな感じでWindowsからMacに乗り換えました。(マシン寿命が近いってのもあったので)\nMacデビューしたは良いが・・・ とはいえ、長くWindowsキーボードを使っていた筆者からすると、文字入力は良いのですが、コントロールキーやAltキーの配置のズレやショートカットの差異に悩まされました。(OptionキーやCommandキーも出現・・・)\nスペックはMacで満足だがキーボード操作でストレスが溜まる・・・orz\nじゃあWindows風にしちゃえばいいじゃない！(名案)\n[adsense]\rやったこと 前提 Homebrew及びCaskがインストールされている前提です。以降のアプリケーションは基本的にHomebrewでインストールしていきます。\nまた、筆者のキーボードはUSキーボードとなります。日本語キーボードとは以下の違いがありますのでご注意ください。\n上がUSキーボード、下が日本語キーボードです。\nキーボード操作をWindows風に まずはキーボードの操作感をWindowsキーボードに寄せました。\n具体的には、USキーボードの一番左下にFnキーがあることでコピペがしにくくて不便でした。なので、このFnキーをCtrlキーの役割に変えれれば満足です。\nkarabinerというアプリケーションを使うと、Macキーボードの配列を変更することが出来ます。\n以下のコマンドを実行してインストールしてください。または公式サイトからインストーラーを使ってインストールしてください。\nbrew cask install karabiner\n細かい設定の紹介は今回は避けますが、Fn to Command_Lの設定を行うだけで、FnキーがCtrlキー代わりになるのでショートカットでのコピペ操作が可能になり、作業スピードが格段に上がると思います！\nAltキー+Tabキーによるウィンドウ切り替えをWindows風に これも最初はストレスでした・・・。\nWindowsではAltキー+Tabキーで開いているウィンドウの切り替えが可能でしたが、Macでは、Commandキー+Altキーの組み合わせに変わっており、かつアプリ単位でしか切り替えが出来ません。\nそこで、HyperSwitchというアプリケーションを使います。\nこのアプリケーションはまさしく、Altキー+TabキーでWindowsのようなウィンドウ単位の切り替えを可能にしてくれます。\n以下のコマンドを実行してインストールしてください。または公式サイトからインストーラーを使ってインストールしてください。\nbrew cask install hyperswitch\nインストール後にアプリケーションを有効にし、以下の設定にすることでAltキー+Tabキーによるウィンドウ切り替えが可能になったと思います♪\nメニューバー選択のカスタマイズ WindwosではメニューバーへのフォーカスはAltキーのみで実現出来ましたが、MacではControlキー+F2キーとなっています。少し使いづらいので、WindowsのようにAltキーを押すだけで、というのは無理ですがもう少し使いやすく設定を変えてみましょう。\nシステム環境設定\u003eキーボード\u003eショートカットと進みます。\n右側のエリアでキーボードを選択すると、メニューバーを操作対象にするという項目があるので、その右側の^F2という部分をクリックするとキーの設定が可能になります。\nそこで設定したいキー組み合わせを入力することで上書きされます。(今回はCtrlキー+矢印↑)\n今回上書きしたキー組み合わせは他の場所でも使用されているので、警告マークが出てしまいます。\n今回上書きしたCtrlキー+矢印↑の組み合わせは、もともとはMission Controlのキー組み合わせでしたが、こちらはトラックパッドの指３本スワイプでカバー出来るのでショートカットとしては無効にします。\n右側のエリアでMission Controlを選択し、Mission Controlのチェックを外します。そうすると先ほどまで出ていた警告マークが表示されなくなると思います。\nその状態で、右下のすべてのコントロールのラジオボックスにチェックを入れます。\nこれでCtrlキー+矢印↑でメニューバーへのアクセスが可能になりました。\n終わりに これでかなりWindowsに近いマシン操作が可能になりました。\n「いやいや、そこまでするなら最初からWindowsを使えばいいじゃん！！」と、いう方も多いと思いますが、Macを買ってしまったのでそこは多めに見てください。笑\n同じ悩みでストレスを抱えている元Windows使いの方に少しでもお力になれればなと思います♪\n","date":"2017-10-28T20:53:21+09:00","image":"/wp-content/uploads/2017/10/wind2MacKeyboardEye.png","permalink":"/2017/10/28/1298/","title":"【MacをWindows風の操作感に！】ショートカットやキーボード操作をWindowsに近づける方法まとめ！"},{"content":"Table of Contents Plus おさらい 以前、コチラの記事に「Table of Contents Plus」というWordpressに目次機能を自動追加してくれるプラグインを紹介しました。\nプラグインをインストールし、ルールに則って記事を作成するだけで目次機能が追加されるので非常に便利です。\n不満点 しかし、こちらのプラグインで追加される目次エリアはデフォルトだと非常にシンプルかつちょっとダサいです。。。笑\nこのプラグインを知っている人がブログを見ると、「あ、このブログはプラグインを入れただけなんだ〜。」と気づかれてしまうこともあります。(現に筆者はいくつか気づきました。笑)\nこちらの目次エリア、もちろんCSSによってレイアウトを調整することは可能です！\n今回はそちらのやり方を紹介していこうと思います♪\n手順 ファイルの編集をする前に！！ Wordpressのプラグインやテーマのファイルを編集する際は必ず作業前にバックアップファイルを保存しておきましょう！\n一歩間違えるとWordpressが動かなくなってしまう恐れがあります！\nデフォルトCSSの無効化 まずは、デフォルトのCSSを無効化します。\nレイアウトを調整する上で他の設定がある中で調整するのは非常にめんどくさいです。(コーダーさんなら分かると思います。笑)\n設定＞TOC+を選択し、Table of Contents Plusの設定画面を開きます。\n基本設定タブを開き中段にある上級者向けを開きます。\nその中に「プラグインのCSSスタイルを読み込まない場合はチェックを入れてください。選択した場合、上の外観設定も無視されます。」という項目があるので、チェックを入れて設定を更新ボタンをクリックします。\nそうすると、このようになっていた目次エリアが\nこのように変わります。\nCSSの調整 CSSはstyle.cssに記述するようにします。\nstyle.cssの下部に以下を記述してください。\n#toc_container { display: block; width: 100%; background: #fff; border: 1px solid #ccc; box-sizing: border-box; line-height: 1; margin: 36px auto; padding: 1em 2em; } #toc_container .toc_title { text-align: center; margin-top: 0 0 0 35px; padding: 0.4em 0; font-size: 2em; border-bottom: 2px solid #dedede; } #toc_container ul { list-style: none; margin-bottom: 0; } #toc_container ul a { display: inline-block; text-decoration: none; color: #444; border-bottom: 1px dotted #ccc; font-size: 14px; } #toc_container .toc_list \u0026gt; li \u0026gt; a { border-bottom: 1px solid #ccc; font-size: 16px; } #toc_container .toc_list \u0026gt; li \u0026gt; a:before { font-family: FontAwesome; content: \u0026#39;\\f02c\u0026#39;; color: #b22222; font-size: 100%; padding-right: 5px; } #toc_container li li \u0026gt; a:before { font-family: FontAwesome; content: \u0026#39;\\f00c\u0026#39;; color: #0f9e44; font-size: 100%; padding-right: 5px; }\nこちらのサイト様の記事を参考にさせて頂きました！\n記事の目次【Table of Contents Plus】をオシャレにカスタマイズ！\nレイアウトの確認 このCSSを適用すると以下のようになります。\nその他の調整 見た目はよくなりましたが、このままだと一旦閉じてからまた開くと横幅が狭くなってしまいます。\n幅を固定したいので、Table of Contents Plusプラグインを修正します。\nプラグイン\u003eプラグイン編集を選択し、編集するプラグインをTable of Contents Plusに設定します。\n次にプラグインファイルをtable-of-contents-puls/front.min.jsを選びます。\nそうするとソースコードが表示されるので、キャプチャにて選択している部分の「t(this).css({width:\"auto\",display:\"table\"}),」を削除した上で、ファイルを更新ボタンをクリックします。\n動作確認 エラーが発生することなく編集が完了すると、閉じる・開くを選択しても目次エリアの横幅が固定されていると思います♪\n終わりに 導入するだけで完了するプラグインもあれば、Table of Contents Plusのように導入後に手を加えることでさらにクオリティが良くなるプラグインもあります。\nただし、プラグインの編集は一歩間違えるとWordpressが動かなくなってしまうので、皆さん作業する前は必ずバックアップファイルを取ってから編集作業を行うように気をつけましょう！\n","date":"2017-10-27T22:56:05+09:00","image":"/wp-content/uploads/2017/10/TableOfContentsPlusCssEye-1.png","permalink":"/2017/10/27/1254/","title":"【Wordpressの目次をお洒落に】Table of Contents Plusのレイアウトの修正方法"},{"content":"SNSの広告の効果について 今まで広告といえばテレビCMや紙媒体のチラシがメインでした。\nしかし、今はYoutubeやWeb、ブログやSNSなどの様々なWebマーケティング広告が現れ、そちらの影響力の方が大きくなってきているのも事実です。\nTwitterの強み その中でもTwitter広告はかなり強力な広告媒体だと思っています。\nTwitterが広告に向いているとも言える以下のようなメリットがあります。\n・メールアドレスのみでアカウント登録が可能\n・手軽に情報を発信出来る\n・無料\n・有料の広告プランもある\n・拡散による二次宣伝効果も期待出来る\n・匿名性もある\n・リンクURLを貼り付けて流入ルートを確保することが出来る(instagramだとキャプション部分にはリンクURLが貼れない)\n他にも色々あると思いますが、簡単に思いつくのは上記だと思います。\nもちろん、広告効果に依存するGoogleAdSenseとの相性も良いです♪\n今回は「鬼ったー」というツールを使った、フォロワーを増やすことでの広告効果を狙った方法を紹介致します。\n鬼ったーとは？ 鬼ったーとは、完全自動でTwitterのフォロワーを増やしてくれる無料ツールの事です。\n有料でも、同様のツールはありますが無料が良い！！って方はこちらを使ってみるといいでしょう。\n※ご利用は自己責任でお願い致します！凍結や乗っ取りなどが不安であればご利用は控えましょう。\n[adsense]\r使い方 会員登録 まずは鬼ったーの会員登録をする必要があります。\nコチラにアクセスし、ご利用開始するには、コチラから\r会員登録をお願いします»リンクをクリックします。\n名前/メールアドレス/パスワードの入力を求められるので、入力しましょう。入力が完了したら、次へ(登録内容確認画面へ)ボタンをクリックします。\n※ここで登録したメールアドレスとパスワードがログイン時に必要になります\n入力内容の確認画面が表示されるので、問題が無ければ送信ボタンをクリックします。\n以下のような画面が表示されると、登録したメールアドレスにメールが届いていると思うので、メールに記載されているリンクをクリックします。\n↓メール本文\nリンクをクリックすると、以下のような画面が表示され自動でメールアドレスと認証コードが入力されていると思うので、そのまま送信ボタンをクリックします。\nこれで会員登録は完了したので、登録時に設定したメールアドレスとパスワードを入力し、ログインボタンをクリックします。\n正常にログインが出来れば鬼ったーの会員登録が完了です。\n鬼ったー用のツイッターアプリの作成 ログイン後の画面の、Twitterアカウント登録の流れリンクをクリックします。\n次にAPIキー取得画面リンクをクリックします。\nログインしていない場合はSign inリンクをクリックします。\nログイン情報を入力して、ログインボタンをクリックします。\nログインが完了すると以下のようが画面が表示されるので、Creat New Appボタンをクリックします。\n次に入力フォームが表示されるので、Name/Description/Website/Callback URLを入力し、Developer Agreementにチェックを入れ、Create your Twitter applicationボタンをクリックします。\n※NameとDescriptionは任意の値で良いですが、WebsiteはTwitterアカウントのURLを入力する必要があります。Callback URLには鬼ったーのTwitter・API登録変更に表示されているCallback URLの値を入力します。\n正常にTwitterアプリケーションが作成されると、以下の画面が表示されます。次にPermissionタブをクリックします。\nAccessのRead and Writeにチェックがついていることを確認して、Update Settingsボタンをクリックします。\n次にKey and Access Tokensタブをクリックし、Consumer KeyとConsumer Secretをそれぞれコピーします。\nTwitter・API登録変更にて、先ほどコピーした値をそれぞれ貼り付けて、次へ(登録内容確認画面へ)ボタンをクリックします。\n登録内容に問題が無ければ、送信ボタンをクリックします。\n以下の画面が表示されれば登録完了です。\nツイッタアカウントの設定 Twitterアカウント登録設定画面にて、[Secure Setup]ボタンをクリックします。\n以下のような画面が表示されるので、ツイッタのアカウントを登録する[Secure Setup]リンクをクリックします。\nTwitterのアカウント利用を求められるので、問題が無ければ連携アプリを認証ボタンをクリックします。\n少し待って以下の画面が表示されれば設定完了です。\nフォロー設定 お疲れ様です。もう一息です。笑\n実際に自動フォローをするための設定をしていきます。まずはキーワードフォロー設定リンクをクリックします。\n次にキーワード追加リンクをクリックします。\n任意のキーワードを入れて検索ボタンをクリックします。\n特にいじらずそのままこの条件で追加ボタンをクリックします。\n以下の画面が表示されれば登録が完了し、自動でフォローが増えていきます！\n終わりに 少し設定が大変ですが、自動でフォロワーが増えるのは魅力的ですね♪\nただし、機械的なフォローなので凍結などの恐れはありますのでご利用の場合は十分にご注意くださいね!\n","date":"2017-10-26T22:25:03+09:00","image":"/wp-content/uploads/2017/10/onitterEye.png","permalink":"/2017/10/26/1202/","title":"【フォロワーを自動で増やす】自動フォローツール「鬼ったー」の使い方"},{"content":"GoProの強み GoProは小型で防水/防塵/防寒とかなりタフなアクションカメラです。\nなので、夏は海での利用シーンも多いことでしょう。\n水面で浮き輪に浮いている写真を撮ったり、水中に潜って魚と写っている写真を撮ったり。\nそれに加え、あるアクセサリを利用すると、一枚の写真の中に水面と水中の両方が綺麗に収まった面白い写真を取ることが出来ます♪\nFiftyFifty Amazon polarpro GoPro Hero5 水中撮影用ドーム FiftyFifty - Over/Under GoPro Hero5 Dome FTY-FTY 公式サイト\npolarproから出ているこちらの商品は、GoPro Hero Black5に取り付けるアクセサリとなります。\nこれをつけると、先程言ったような面白い写真や動画を取ることが出来るようになります。\n開封の儀 開封動画 [embed]https://youtu.be/kaY1-7v9gYA[/embed]\n筆者自身もよく海に行ってダイビングや素潜りをするので、購入してみました！\n外観 箱はこんな感じです。\n梱包物 主に\n・本体\n・保護カバー\n・手持ち棒\n・取り付け部キャップ\n・説明書\nが含まれています。\n旅行カバン等に入れて持ち歩くことが多くなるので、保護カバーがついてるのは助かりますね♪\n取り付け GoProHero6を取り付けると以下のようになります。\n終わりに 海に行く機会が多い方は、GoProの独特な画角に加えさらに水中と水面の面白い視点での撮影が可能になるので、いろいろと撮影幅が広がり思い出に残るものが取れることでしょう♪\nぜひ、購入してお試しください♪\n","date":"2017-10-25T20:24:31+09:00","image":"/wp-content/uploads/2017/10/fiftyFiftyEye.png","permalink":"/2017/10/25/157/","title":"水中と水面を一枚の写真に！GoPro用アクセサリ「FiftyFifty」"},{"content":"テーマ選定の結果、辿り着いたstinger8 筆者がブログ開設時のテーマ選定として重視した点は\n・無料\n・シンプルで拡張性がある\n・導入するだけである程度完成する\nという部分を気にしていました。\nそうすると、やはり定番の「stinger8」に辿り着きました。\n無料なのに、SEO対策/レイアウト/GoogleAddsense対応が考慮されていて、かつレイアウトもシンプルに揃えられていいるので、導入するだけでブログ運用を始めることが出来るという、探し求めていたテーマでした！！\nStinger8の物足りない点 当初はテーマを導入して、多少の修正を入れるだけで運用をしていましたが、時間が経つにつれてもっといろいろと手を入れたくなってきました。。。orz\n・レイアウトをもっとシンプルかつおしゃれに\n・記事下部のGoogleAddsense広告を横並びに\n・タグクラウドを入れたい\n・アイキャッチを記事ページにも表示したい\netc...\nいやぁ〜、、、\n人間の欲って怖いですね！！！(白目)\n調査開始！！ 調べてみると、同じような思いを持っている方の記事を見かけます。\nその中で気になったのが以下のキーワード。\n・子テーマ\n・8beat Style\n子テーマ? そもそも子テーマとはなんぞや？？？という疑問に当たりました。\nもともとJavaでの業務システム経験しかない状態で、見よう見まねでCMSによるブログを開設したので、テーマ(親テーマ)を選べばそれで終わり、レイアウトやロジックをカスタマイズしたければ、テーマをいじれば良い、という認識でした。\nしかし、Wordpressの親テーマを直接編集すると以下のようなデメリットがありました。\n・テーマの自動アップロードで編集が無かった事される\n・間違えてソースコードを書き換えてしまった際に元に戻すのが大変\n簡単な修正なら良いですが、何日もかけてカスタマイズした内容が一瞬で無になるのはメンタル的にもかなりやられますよね。。。\nそんな時のための子テーマです！\n基本的に子テーマは親テーマの内容を引き継ぎつつ、カスタマイズしたいところを上書きしてくれます。\nまた、親テーマの更新がかかっても子テーマはそのまま残るので、勝手に消える！という事にもなりません。\n子テーマによるカスタマイズは公式からも推奨されているやり方のようですね。\n※子テーマは作り方は簡単に作れるようですが、本記事ではネット上で配布されている子テーマを利用するので、また別の機会にまとめようと思います。\n8beat Style? 前項で子テーマについては理解出来ました。\nでは、8beat Styleとはなんぞや？？？となりました。\n結論から言うと、stinger8専用の無料の子テーマとなります！\nコチラ無料で配布しています。\nあなたが神か。。。笑\n内容的には以下のような子テーマとなっています。\n・カード型デザイン\n・SEO に強い STINGER の HTML 構造はそのまま継承\n・記事ページにアイキャッチを表示\n・アイキャッチ画像のキャプションをクレジットとして表示\n・アバターつき「最近のコメント」ウィジェット\n・アカウント情報などを書き換えるだけで Facebook と Twitter Card の OGP 設定ができるogp.phpを同梱\n・ユーザープロフィールにSNS（Twitter, Facebook, Google+, Instagram）の項目を追加\n・執筆者情報のリッチ表示\n・記事下に2つ連続で表示されるアドセンスをダブルレクタングル化\n・メタキーワードとメタディスクリプションの入力、index/noindex操作（STINGERシリーズ互換）が投稿ページで可能\n・\u0026lt;head\u0026gt;内metaタグにカテゴリやタグも出力\n・サイドバーにプラグイン不要の人気記事リストを表示\n・検索フォームつきスマホ/タブレット用アコーディオンメニュー\n・子テーマのセットアップやカスタマイズの解説ファイルReadme.txtつき\nしゅごい・・・。笑\n自力でやりたかった部分が全てカバーされているではないですか・・・。\nもちろん、タグクラウドも追加可能です！\n即導入決定しました。笑\n[adsense]\n導入方法 子テーマのダウンロード まずはコチラから子テーマのZIPファイルをダウンロードします。\nダウンロードが完了したら、管理画面から外観＞テーマを選び、新規追加ボタンをクリックします。\n次にテーマのアップロードボタンをクリックします。\nファイルを選択して今すぐインストールボタンをクリックします。\n正常にアップロード処理が完了するとテーマ一覧に表示されるので、有効化ボタンをクリックします。\nこれで、ブログに8beat Styleが適用され、ベースはstinger8ですがさらにまとまったレイアウトに変わったと思います♪\n確認 一覧ページ 記事ページ 問題なく子テーマが反映されていますね♪\n終わりに 基本的にボタンをポチポチするだけで子テーマの導入は出来てしまうのでとても楽チンです♪\n子テーマを自分の好きなようにカスタマイズしてオリジナルのブログに仕上げましょう♪\n","date":"2017-10-23T23:21:22+09:00","image":"/wp-content/uploads/2017/10/8beatStyleEye.png","permalink":"/2017/10/23/1147/","title":"【stinger8拡張】子テーマ「8beat Style」の紹介と導入方法"},{"content":"ZIPファイル以外の解凍が出来ない！ ネットでデザイン素材集をダウンロードすると、たまにZIP形式以外に圧縮されている場合があります。\nmacではデフォルトではこのrar形式の圧縮ファイルの解凍が出来ないので、別途解凍用のソフトをインストールする必要があります。\n今回は、mac用のファイル解凍ソフト、「The Unarchiver」を紹介致します♪\nこちらのソフトは、無料で利用出来て、解凍出来ない形式は無いと言ってもいいくらい多くの形式をカバーしています！\nまた、ファイルの文字化け対策も入っているのでWindows \u003c-\u003e mac　間のファイルのやり取りをする場合にもオススメです。\n導入 ダウンロード App Storeから ネットからダウンロードする方はコチラにアクセスし、Mac App Storeボタンをクリックします。\n左側のView Mac App Storeボタンをクリックすると、AppStoreアプリを開くかの確認ダイアログが表示されるので、App Storeを開くボタンをクリックします。\nApp Storeを開いたら、左側の入手ボタンをクリックしてインストールしてください。\nhomebrewから 以下のコマンドでインストールしてください。\ncommand brew cask install the-unarchiver 動作確認 正常にインストールした後に、rarファイルをダブルクリックすると以下のような確認ダイアログが表示されます。\nこれは、初めて起動するアプリケーションの際に出るダイアログなので、気にせずに開くボタンをクリックします。\nこれでrarファイルも正常に解凍が出来るようになっているはずです。\n終わりに 最初にこのアプリケーションを入れておくだけでいろいろな形式の圧縮ファイルを解凍出来るようになるので、皆さんも是非インストールしとくことをお勧めします♪\n","date":"2017-10-22T17:51:50+09:00","image":"/wp-content/uploads/2017/10/TheUnarchiverEye.png","permalink":"/2017/10/22/1133/","title":"【解凍ソフトの決定版】macでのrarファイルを解凍するなら「The Unarchiver 」"},{"content":"一つ一つインストールするめんどくささ デザインの仕事などをやっていると有料のフォントパックを購入する事が多々あります。\n国乳すると、多くのttf/otfファイルをインストールする必要があるのですが、Finderから一つ一つインストールするのは非常に大変です。\nmacではFont Bookというアプリケーションを使う事でまとめてインストールする事が出来るのでそちらの使い方をご紹介致します♪\n手順 Font Bookの起動 Finderからアプリケーションを開き、Font Bookを選択し起動します。\nインストールしたいFontファイルが保存されているディレクトリの選択 ファイル＞フォントを追加を選択します。\n対象のディレクトリを選択し、開くボタンをクリックします。\n対象ディレクトリ配下にある全てのFontファイルをインストールしてくれるのでのんびり待ちましょう♪\n終わりに 購入するパックによっては、１００ファイル以上あるので一つ一つやるとインストールするだけでも、かなりの時間がかかってしまいます。\nmacには元からこのようなアプリケーションがあるので、どんどん活用して無駄な時間をかけないように作業を効率化していきましょう♪\n","date":"2017-10-21T14:26:37+09:00","image":"/wp-content/uploads/2017/10/fontBookEye.png","permalink":"/2017/10/21/1124/","title":"【便利】macでFont Bookを使ってフォントをまとめてインストールする方法"},{"content":"Wordpressでアバター画像を設定するには？ Wordpressインストール後に、特に設定せずに記事を投稿すると、以下のようにアバターが表示されない状態担っていると思います。\nせっかくだから何かしらのアバター画像を設定したいですよね。\nしかし、Wordpressデフォルトのやり方だと「Gravatar」というサイトに登録する必要があり、画像１枚設定するだけなのにめんどくさい！と思ってしまいました。\nそこで、プラグインでなんとかならないか？と調べたところWP User Avatarというプラグインを見つけました！\nWP User Avatarプラグイン WP User AvatarはGravatarに登録する事なくアバター画像の設定を可能にしてくれるプラグインです！\n導入方法 管理画面からプラグイン＞新規追加を選択し、キーワードに「wp-user-avatar」と入れると、検索結果に「WP User Avatar」というプラグインが表示されるので今すぐインストールボタンをクリックします。\nプラグインのインストールが終了すると、有効化ボタンが表示されるのでクリックします。\nプラグイン＞インストール済みプラグインに追加されアクティブになっている事を確認します。\n設定方法 ユーザー＞ユーザー一覧から、アバター画像を設定したいユーザーを選択します。\n編集画面の下部に画像エリアが追加されているので、画像の選択ボタンをクリックします。\n画像を選択し問題が無ければ、プロフィールを更新ボタンをクリックします。\n確認 これで記事ページに行くと、先ほど設定したアバター画像が表示されているはずです！\n終わりに プラグインを追加するだけで他サイトへの会員登録をせずに、アバター画像の登録が可能になりました！全てをWordpressのみで完結したい方にはオススメなので、是非お試しください♪\n","date":"2017-10-20T21:04:46+09:00","image":"/wp-content/uploads/2017/10/WP_User_AvatarEye.png","permalink":"/2017/10/20/1104/","title":"【Wordpressプラグイン】アバター画像を簡単に設定出来る「WP User Avatar」の使い方"},{"content":"複数PC持ちの悩み 仕事柄、自宅作業用のデスクトップPCと外出用のノートPCの2台を普段から使っている方も少なくないと思います。\n今はDropBoxやGoogleDriveなどのクラウドストレージサービスなどがあるので、そこのドライブを介せば問題なく両PC間でファイルのやり取りがスムーズに行えます。\nしかし、中にはクラウド上にファイルをあげたくないという人もいると思います。(筆者もその類です。)\nなので、今回は自宅の無線Wifiで繋がっているPC間のネットワークを利用した、共有フォルダの使い方(Windows川の共有フォルダをマック側で参照)について紹介致します♪\nWindowsの設定 コンピューターのプロパティ設定 まずはスタートメニューを開き、コンピューターを右クリックしプロパティを選択します。\nコンピューターの基本情報が表示されたら、設定の変更リンクをクリックします。\nシステムのプロパティのダイアログが表示されたら、変更ボタンをクリックします。\nコンピューター名とワークグループを任意のものに変更し、OKボタンをクリックします。\nネットワークの設定 エクスプローラーを起動し、ネットワークを選択すると以下のようなポップアップメッセージが表示されると思いますので、ネットワーク検索とファイル共有の有効化リンクをクリックします。\nネットワークの探索とファイル共有に関するダイアログが表示されるので、いいえ、接続しているネットワークをプライベートネットワークにしますをクリックします。\nネットワークの場所をホームネットワークに指定します。\nネットワークの場所の設定が以下のようになっていればネットワークの設定が完了です。\n共有の設定 次は共有に関する設定を行います。まずはネットワークと共有センターを開いて、共有の詳細設定の変更をクリックします。\nホームのパスワード保護共有をパスワード保護の共有を無効にチェックを入れて、変更の保存ボタンをクリックします。\n以上でWindows側の設定は完了です。次はMac側で参照するための設定をしていきましょう。\nMacの設定 Finderからサーバーへの接続 Finderを開き、移動＞サーバーへ接続を選択します。\nサーバーアドレスの欄に「smb://{WindowsPCのコンピューター名}」を入力し、接続ボタンをクリックします。\n今回はパスワードを無効にしているので、ゲストにチェックを入れて接続ボタンをクリックします。\n正常に設定が出来ていれば、これで共有部分にWindowsのマシン情報が表示され、ファイルへのアクセスが可能になりました♪\n終わりに ちょっとしたファイルをPC間でやり取りしたい場合に毎回USBに入れたりメールで受け渡したりするのは手間なので、一度この設定をしておくことでストレスレスにファイルのやり取りが可能になるので、是非お試しください♪\n","date":"2017-10-15T23:09:01+09:00","image":"/wp-content/uploads/2017/10/networkEye.png","permalink":"/2017/10/15/1058/","title":"【複数のパソコンを無線で繋ごう】ネットワークの設定方法-Windows版"},{"content":"pͪoͣnͬpͣoͥnͭpͣa͡inͥとの出会い 筆者が日課のようにまとめサイトアプリを見ていると、理解し難い謎の文字列の記事タイトルを見つけました。\nなんぞコレ！！！\n筆者の好奇心を鷲掴みされた瞬間でした。笑\nponponpainの由来 お腹が痛い時のどうしようもない思いをぶつけるハッシュタグとの事です。\n「ぽんぽん」は幼児言葉で腹部、「Pain」は英語で痛みを意味する単語でその２つを組み合わせています。\nこの２つの単語の組み合わせが非常にシュールかつマッチしていて心にグッときますね。笑\nコチラのページによると、2010(平成22)年6月25日にえぽっくさんという方が、\nお腹が痛いのは、神様がわたしたちのことをあんまり信用してないからです。 #ponponpain\n\u0026mdash; えぽっく (@epoch__) 2010年6月25日\rと、Twitter上で発言した事で爆誕したらしいです。発案者曰く、5秒くらいで考えたものらしいですね。\n驚異的ワードセンスに脱帽。\nダイアクリティカルマークとの融合 [adsense-responsive]\rもちろん、ponponpainだけでもかなりのパワーワードですが、ダイアクリティカルマークというものと組み合わさる事で更にワンランク上のパワーワードへと進化を遂げました。\npͪoͣnͬpͣoͥnͭpͣa͡inͥ\nルビ部分の「haraita-i」がじわじわきますね。笑\nもやは、どこかの会社のロゴにも見えてきます。\n[adsense-responsive]\rダイアクリティカルマークは以下の文字が使用出来ます。\ǹ\ŕ\r̂\r̃\r̄\r̅\r̆\ṙ\r̈\r̉\r̊\r̋\ř\r̍\r̎\ȑ\r̐\ȓ\r̒\r̓\r̔\r̕\r̖\r̗\r̘\r̙\r̚\r̛\r̜\r̝\r̞\r̟\r̠\r̡\r̢\ṛ\r̤\r̥\r̦\ŗ\r̨\r̩\r̪\r̫\r̬\r̭\r̮\r̯\r̰\ṟ\r̲\r̳\r̴\r̵\r̶\r̷\r̸\r̹\r̺\r̻\r̼\r̽\r̾\r̿\r̀\ŕ\r͂\r̓\r̈́\rͅ\r͆\r͇\r͈\r͉\r͊\r͋\r͌\r͍\r͎\r͏\r͐\r͑\r͒\r͓\r͔\r͕\r͖\r͗\r͘\r͙\r͚\r͛\r͜\r͝\r͞\r͟\r͠\r͡\r͢\rͣ\rͤ\rͥ\rͦ\rͧ\rͨ\rͩ\rͪ\rͫ\rͬ\rͭ\rͮ\rͯ\r上記を組み合わせれば、pͪoͣnͬpͣoͥnͭpͣa͡inͥを超える奇跡のワードを作り出す事が可能です！\n終わりに 上記の文字は基本的には問題なく表示されると思いますが、一部のスマートフォンやPCでは表示出来ない場合もあります。\nただ、今の機種ではだいたい表示出来ると思いますので、どんどん利用しましょう！\n","date":"2017-10-11T13:25:00+09:00","image":"/wp-content/uploads/2017/10/ponponpainEye.png","permalink":"/2017/10/11/1040/","title":"【腹痛い】吸引力がものすごいパワーワード「﴾pͪoͣnͬpͣoͥnͭpͣa͡inͥ﴿」の表示方法【ポンポンペイン】"},{"content":"関連 関連記事 【抽選落選にめげずに遂にゲット】ニンテンドースイッチを手に入れるまでの冒険記 2017/09/25 1201文字 約3分で読めます 関連記事 【9月最新版】ニンテンドースイッチの本体初期設定方法【快適なSwitch生活の幕開け】 2017/10/03 1784文字 約4分で読めます 関連記事 【9月最新版】ニンテンドーアカウントの新規登録方法【まとめ】 2017/10/04 851文字 約2分で読めます ソフトについて Switchで遊ぶソフトには大きく分けて２つの種類があります。\nパッケージ版 こちらはゲーム屋さんとかで購入するタイプのソフトです。\nパッケージの中にカートリッジが入っており、説明書等もあります。\nメリット Point\r友達と貸し借り出来る\r遊ばなくなったソフトは中古屋さんなどで売却出来る\r購入後にインストール等の作業が不要なのですぐ遊べる\rデータ容量を気にする必要が無い\rmicroSDカードを購入する必要が無いので、費用を抑えれる\rパッケージ等をコレクションに加える事が出来る\rデメリット Point\r人気ソフトの場合は店頭売り切れで購入出来ない事がある\r遊ぶソフトを変える際に、カートリッジの入れ替えが必要\r常にソフトを持ち歩く必要がある\rhoge\rfuga\rダウンロード版 こちらはSwitchをインターネットに繋げてオンラインダウンロードをするタイプのソフトです。\n事前にダウンロード版のソフトを購入しておく必要があります。\nメリット Point\r事前にダウンロード版を購入しておく事で売り切れを気にする必要が無い\rパッケージ版よりロード時間が若干早い\rソフトを持ち歩く必要が無い\rお店に買いに行く必要が無い\rデメリット Point\r複数のソフトを遊ぶ場合はmicroSDカードを用意する必要がある\r友達との貸し借りが出来ない\r遊ばなくなったソフトを中古販売する事が出来ない\rインターネット環境が無いとダウンロード出来ない\rお好みで ざっくりですが、上記のような違いがあります。\n皆様のプレイスタイルに合わせて選ぶと良いでしょう♪\n今回は、ニンテンドースイッチのドラゴンクエスト１０のダウンロード版ソフトのインストール方法をご紹介します。\n手順 今回はWii → Nintendo Switch アップグレードキャンペーンに応募していたので、メールにてダウンロード番号が届きました。\nソフトのダウンロード ダウンロード版ソフトのダウンロードを行います。今回はドラゴンクエストXをダウンロードしてみます。\nまずはホーム画面からニンテンドーeショップアイコンをクリックします。\n初回アクセスの場合はニンテンドーアカウントのパスワードの入力を求められるので、入力ボタンをクリックします。\nパスワードを入力し、OKボタンをクリックします。\nパスワードの認証が正常終了すると、ニンテンドーeショップの画面が表示されます。今回はダウンロード番号を事前に取得している前提なので、番号の入力メニューをクリックします。\nダウンロード番号を入力し、決定ボタンをクリックします。\nダウンロード番号が正しければ、ソフト情報が表示されるので、問題が無ければ引き換えを確定するボタンをクリックします。\nダウンロードの進行状況はホーム画面で確認出来るので、一旦おわるボタンをクリックしてホーム画面に戻ります。\nホーム画面に先ほどダウンロードしたソフトのダウンロードの進行状況が表示されています。あとはじっくり待つだけです♪\n終わりに ニンテンドーアカウントの設定とWifiの設定が完了していれば、自宅で簡単にソフトのダウンロードが出来ます。\nわざわざ店に買いに行く手間もないので、microSDカードの容量に余裕があるのであればダウンロード版の購入が良いかもしれませんね♪\n","date":"2017-10-06T21:27:22+09:00","image":"/wp-content/uploads/2017/10/switchDownloadEye.png","permalink":"/2017/10/06/1011/","title":"【9月最新版】ダウンロード版ソフトのダウンロード方法【並ぶ必要が無い幸せ】"},{"content":"関連 関連記事 【抽選落選にめげずに遂にゲット】ニンテンドースイッチを手に入れるまでの冒険記 2017/09/25 1201文字 約3分で読めます 関連記事 【9月最新版】ニンテンドースイッチの本体初期設定方法【快適なSwitch生活の幕開け】 2017/10/03 1784文字 約4分で読めます 関連記事 【9月最新版】ダウンロード版ソフトのダウンロード方法【並ぶ必要が無い幸せ】 2017/10/06 1414文字 約3分で読めます 手順 前回でニンテンドーSwtich本体の初期設定まで完了しています。\nニンテンドーeショップに接続するにはニンテンドーアカウントの設定が必要なので今回はそちらの手順を紹介致します♪\nニンテンドーアカウントの作成 ホーム画面からニンテンドーeショップアイコンを選択します。\neショップに接続するユーザーを選択します。\nニンテンドーアカウントとの連携はまだされていないと思うので、今回は新規アカウントを作成した上で連携する手順を紹介します。\nアカウント作成のご案内メールを送るボタンをクリックします。\n送信するメールアドレスを入力し、問題が無ければ送信するボタンをクリックします。\n正常に案内メールが送信されると以下のような画面が表示されます。Switchは一旦この画面のままにしておきます。\n先ほど入力したメールアドレスに以下のような案内メールが届くので、登録用URLをクリックして登録画面を表示します。\nご自身のアカウントボタンをクリックします。\nニンテンドーアカウントの登録情報を入力し、問題が無ければ作成するボタンをクリックします。\n※パスワードはニンテンドーeショップに接続する際に必要になるので、控えておきましょう。\n確認番号が表示されるので、Switch側で入力してOKボタンをクリックします。\n正常に認証が完了すると連携完了のメッセージが表示されるので、OKボタンをクリックします。\nニンテンドーアカウントの新規作成及び連携がこれで完了です♪\n終わりに Switchとパソコンの行ったり来たりがありましたが、問題無く登録出来たのではないでしょうか？(出来なかったらすいませんorz)\n次はいよいよニンテンドーeショップで実際に遊ぶソフトをダウンロードしてみましょう♪\n","date":"2017-10-04T10:05:28+09:00","image":"/wp-content/uploads/2017/10/switchSettingEye.png","permalink":"/2017/10/04/1009/","title":"【9月最新版】ニンテンドーアカウントの新規登録方法【まとめ】"},{"content":"関連 関連記事 【抽選落選にめげずに遂にゲット】ニンテンドースイッチを手に入れるまでの冒険記 2017/09/25 1201文字 約3分で読めます 関連記事 【9月最新版】ニンテンドーアカウントの新規登録方法【まとめ】 2017/10/04 851文字 約2分で読めます 関連記事 【9月最新版】ダウンロード版ソフトのダウンロード方法【並ぶ必要が無い幸せ】 2017/10/06 1414文字 約3分で読めます 最初にやること ニンテンドースイッチの本体を買ったらまずは本体設定をやる必要があります。\nユーザー情報の作成やWifiの接続設定、場合によってはmicroSDXCカードを使うために本体を更新したりetc...\n自分が実際に行った手順をざっくりまとめてみましたので、皆様の参考になればなと思います♪\n手順 内容物 本体パッケージには、以下が含まれています。\n・本体\n・%9\r・Nintendo Switch ドック\n・Joy-Con(L)\n・Joy-Con(R)\n・Joy-Con　ストラップ(L)\n・Joy-Con　ストラップ(R)\n・Joy-Con グリップ\n・HDMIケーブル\n・充電コード(USB-Type C)\n購入しておくべきもの ・microSDカード\n任天堂が推奨しているmicroSDカードは、UHS-I（Ultra High Speed Phase I）対応で、読み込み速度 60~95MB/秒（読み込み速度が速いほど、Nintendo Switchをより快適に遊んでいただけます）との事です。\t今回は公式で発売しているコチラ(Amazon)の64GBのmicroSDカードを購入しました。\n公式のSDカードなので動作の保障は確実に取れているのでこちらを選びました。\n本体初期設定 箱の側面にざっくりとはじめかたが記載されていますので、まずはそれをベースに進めてみましょう。\nまずは本体の裏側にmicroSDカードの差込口があるので、セットします。\nJoy-Conは上から下にスライドさせる事でジョイント出来ます。\nUSBを接続すると自動で画面が表示され、言語設定を求められます。問題がなければ日本語を選択し、Aボタンを押します。\n次に、居住地の設定を求められます。こちらも問題が無ければ日本を選択しましょう。\n次にNintendo Switchの利用規約の同意を求められます。利用規約を読み問題が無ければチェックを入れてつぎへをクリックします。\n次にインターネットの接続設定画面が表示されます。接続したいネットワークを選択しましょう。\n正常に接続が出来れば以下のようなダイアログが表示されるので、OKボタンをクリックします。\n次はタイムゾーンの設定画面が開きます。こちらも例のごとく問題が無ければ日本を設定しましょう。\n次にテレビとの接続設定画面が表示されますが、今回はこちらの設定は飛ばさせてもらいます。\n次にJoy-Conを本体から外すよう指示されます。外し方は裏にある小さいボタンを押しながら上にスライドする事で外す事が可能です。\n外せたら次へ進みます。\n次にユーザー情報を設定します。次へを押してください。\nユーザーアイコンを設定します。自分で作成する事も出来ますが今回はマリオを選択します。\n次にユーザー名の登録を求められるので、入力してOKボタンをクリックします。\nアイコンと名前に問題がなければOKボタンをクリックします。\n[adsense]\n次にニンテンドーアカウントとの連携を求められますが、ここではあとでボタンをクリックします。\n※後ほど設定します。\nユーザーの追加もここで出来ますが、一旦はこのままでOKボタンをクリックします。\n次に、お子様がいる家庭向けのみまもり設定が可能ですが、こちらも今回はスキップボタンをクリックしてください。\n以下の画面が表示されれば本体の初期設定は終了ですので、Joy-Conのホームボタンをクリックしてホーム画面に進みましょう♪\nmicroSDXCメモリーカードを使用する場合 ホーム画面に進むと、以下のような画面が表示されます。\nmicroSDXCメモリーカードを使用するには、インターネットに接続して本体更新が必要との事です。\nなので、本体を更新するボタンをクリックします。\n更新後、自動で再起動しますので問題が無ければOKボタンをクリックします。\nダウンロード自体は数分で終わると思います。完了後の再起動で以下のようなホーム画面が表示されればmicroSDXCカードを利用する準備が整いました♪\n終わりに これで本体の各種設定が完了しました。\n次はニンテンドーアカウントとの連携方法をご紹介しようと思っていますので、気が向いたら見て頂ければなと思います♪\n","date":"2017-10-03T00:30:20+09:00","image":"/wp-content/uploads/2017/10/switchFirstEye.png","permalink":"/2017/10/03/867/","title":"【9月最新版】ニンテンドースイッチの本体初期設定方法【快適なSwitch生活の幕開け】"},{"content":"関連 関連記事 【GoProの良さ比較】GoProと他のアクションカメラを使ってみて分かったコト！ 2017/09/13 1658文字 約4分で読めます GoPro Hero 6 Blackが発売！ 9月29日にGoPro Hero 6 Blackの発売が発表されましたね！\n公式サイト\n今までは発売前に発表されていましたが、今回は発売と同時の発表となり、すでに予約受付中で発送までに2〜3日との事。\nポイント 6つの魅力 Quick Stories 撮影した映像を自動で GoPro アプリに転送して、素晴らしいビデオに変換します。\n2倍のパフォーマンス 完全に新しい GP1 チップを搭載した HERO6 Black は、HERO5 の 2 倍のパフォーマンスと最高の画質を実現します。\nスローモーションも高品質 4k60 fps と 1080p240 fps での撮影が可能なため、ビデオの見どころをスローモーション再生することもできます。\nそのまま水に入れても問題ありません GoPro と一緒に。HERO6 Black は、ハウジングなしで水深 10 m までの防水性能を備えています。\n「GoPro ビデオ撮影を開始」 シンプルな音声コマンドにより、手ぶら操作が可能です。\nスーパースムーズ 最先端の手ぶれ補正機能により、スムーズな映像を撮影できます。\nタッチ ズーム。すぐに撮影。 画面に触れるだけで、アクションにより近づけます。\nナイトシーンにも。 優れた低光量性能とナイト フォト モードで、夜の撮影も簡単に。\n身に付けて、取り付けて、楽しむ。 30 種類以上のアクセサリーを活用して、GoPro でしか撮影できない映像を撮りましょう。\n個人的ポイント ボディはHERO5 Blackと同様なので、HERO5のアクセサリが全て装着可能との事！\nこれはでかいですね！互換性がなくなるとせっかく揃えたアクセサリを買い直したり、捨てる必要が出てくるので一番懸念していましたが、ほぼ買いが確定しました。笑\nしかし、HERO6 -\u003e HERO7ではさすがにサイズ互換がなくなりそうな気がしますね。。。\nあとは、暗所や夜間での撮影時のノイズ等が気になりますね。\n[adsense]\r360度撮影が可能なGoPro Fusionも発表 こちらも同時に情報が発表されました。\n公式サイト\rポイント かつてないほど万能な GoPro。 VR。OverCapture。ジンバル並みの安定化。\nあの瞬間をもう一度。 あなたの世界を撮影して、まったく新しい視点で見てみよう。あらゆる角度から、思いのままに。\nOVERCAPTURE 360 度カメラの映像から従来の素晴らしい動画を作成できます。\n自由自在にコントロール。 仕上げは GoPro アプリで。映像のプレビューや再生、ビデオの編集など、あらゆる操作をスマートフォン上でおこなえます。\nまるごと体験しよう。 その瞬間のすべてを映像に残そう。驚きの 5.2K 画質で全方向を撮影。\n衝撃的に滑らかなビデオ。 GoPro が目指すのはジンバルなしの次世代の安定化。\nシームレスなスティッチ。 邪魔な継ぎ目のない VR コンテンツを堪能しよう。\n臨場感たっぷりの 360 度サウンド。 高性能オーディオが、あらゆる方向の音を逃さずキャッチします。\n濡れても大丈夫。 Fusion は水深 5 m までの防水試験済みです。\nGoPro ビデオ スタート」 Fusion は、シンプルな音声コマンドにより、手ぶら操作が可能です。\nいつでも、最高の撮影を。 The included Fusion Grip with a built-in extension pole and tripod, plus our lineup of accessories, helps you nail the shot every time.\n終わりに GoPro大好き人間の筆者はとても気になっているので、おそらく購入すると思います！\nこちらの記事は随時追記していますので、良ければまた見に来て頂ければなと思います♪\nGoProを広めましょう♪\n","date":"2017-09-29T09:57:00+09:00","image":"/wp-content/uploads/2017/09/GoProHero6SaleEye.png","permalink":"/2017/09/29/939/","title":"【2017年新型】GoPro Hero6 Blackが遂に9/29に発売！！"},{"content":"アナグラムとは？ 文字の言葉遊びの一つで、文字列を入れ替えることによって、全く別の意味にさせる事です。\n文字数が増えるにつれて、生成されるパターンが増えていくので一部の簡易的な暗号化の際の方法に使われています。\n※あくまで簡易的なので重要なセキュリティとしては向いていません。\n例えば、listen(聞く)がsilent(沈黙)になったりする面白いパターンもあります。\nInternet Anagram Server 自分で考えると、吐き気がするほど大変ですが、インターネット上に文字列を入れるだけで自動でアナグラムを生成してくれるサイトがあります。\nInternet Anagram Server\u0026nbsp;\n試しに「blogenist」を入れてみると、、、\n448個ものパターンがヒットしました。すごい。。。\nこれを自分で考えるのは、到底無理ですよね。。。\n頭がパンクしちゃう☆\n面白いアナグラム 個人的におぉ〜っと感じた面白アナグラムをいくつか紹介しようと思います。\nstatue of liberty　⇔　built to stay free 「自由の女神」は、「自由でいるために建てる」となります。\nこれは意図してやっている気がしますね。\ndormitory ⇔ dirty room 「学生寮」は、「汚い部屋」となります。\nあながち間違っていない？笑\nthe country side ⇔ no city dust here 「田舎」は、「ここに都会のホコリはありません」という意味になります。\n確かに！！笑\nslot machine ⇔ cash lost in them 「スロットマシーン」は「この中に入れるとお金が消えます」となります。\nこの世の理を悟ってしまったか。。。\nEvangelist ⇔ Evile\u0026rsquo;s Agent 「エバンジェリスト(宣教師)」のつづりを変えると「エビルズ エージェント(悪魔の手先)」になります。\n天使と悪魔は紙一重みたいな感じですね。。。！\nThe Simpson\u0026rsquo;s ⇔ men\u0026rsquo;s hot piss 「ザ･シンプソンズ」のつづりを変えると「男性たちの熱いおしっこ」になります。\nどういう事！！笑\n※面白いアナグラムがあったらどんどん追記していきます♪\n終わりに アナグラムを作りたいという機会はそんなに無いとは思いますが、こんなに便利なサイトがあるのを覚えておくのはいいかもしれませんね♪\n機械の知恵をどんどんお借りしちゃいましょう！\n","date":"2017-09-26T17:58:45+09:00","image":"/wp-content/uploads/2017/09/anagramEye.png","permalink":"/2017/09/26/870/","title":"【謎の技術】アナグラムを自動生成したい際にオススメの「Internet Anagram Server」【暗号文字列】"},{"content":"スイッチを求めて早3ヶ月 この記事を見ているということは、あなたもスイッチを求める冒険者なのでしょう。\n無事手に入れることは出来ましたか？\n筆者は3ヶ月かかりました。。。\n店頭販売/抽選では勝ち目がないと無駄に悟っていた筆者はネット販売に全力を注いていましたが、\n抽選日チェック　→　抽選応募　→　ドキドキワクワク　→　落選メール(お祈りメール)　→　メンタル崩壊　→　抽選日チェック　→　・・・\n上記のような無限ループにハマり、このまま人生が終わるのでは？という恐怖心にもかられました。orz\nいっその事、金にものを言わせて転売ヤーから破格の値段で買ってしまおうか？！と闇堕ちしそうにもなりましたが、そこは理性で踏みとどまる事が出来ました。笑\nネット販売に賭ける 自分は店頭販売を諦め、ネット抽選に全ての希望を託し、以下のサイトからひたすらネット抽選に応募しまくりました！\nマイニンテンドーストア コチラ\u0026nbsp;\nまずは公式ショップを抑えました。\nこちらはおそらく先着で購入予約が出来るっぽいです。\nただ、予約開始から数分で完売しているので、本当にタイミングが良くないと購入する事は難しいでしょう。。。\nまた、予約出来たとしても発送は11月以降になってしまうので今すぐSwitchをやりたい！！って人にはオススメ出来ません。\nあくまで最終手段として考えておくのが良いでしょう。\nビッグカメラ コチラ\u0026nbsp;\n次に抑えていたのはビッグカメラです。\nこちらは完全に抽選となっているので、期間内であれば急ぐ必要はありません。\nしかし、会員登録が必須なのと、不正抽選疑惑があったので少し信用には欠けてしまいます。(ネット抽選は大丈夫かもしれませんが。。。)\nジョーシン コチラ\u0026nbsp;\n3店舗目はジョーシンです。\nこちらについては、現在はネット受付は行っておらず、店舗受付のみの抽選のようです。\n以前はネット抽選もしていたのですが、当たる事はありませんでした。orz\n遂にゲット・・・！ そんな永遠に続くと思われる戦いにも遂に終止符が打たれました！\nキターーーーーーー！！！\n手に入れましたよ。。。しかも、欲しかったグレーカラー！感激です・・・！\nどこで入手したか？ 皆さんが一番気になっているのはここですよね。お答えしましょう！\n地元のおもちゃ屋さんです！w\n実は、上記のネット販売の他に地元の知人に、「もし、任天堂Switchの本体が売ってたら\r即買いしといて！」と、懇願していたのです。笑\n結局、頑張って応募していたネット抽選では一回も当選する事はありませんでした。。。orz\n終わりに おそらくですが、今もまだスイッチ転売ヤーが沢山いて、その人たちも何回もネット抽選に応募して当たっては転売し当たっては転売し、を繰り返しているためいつまで経ってもネット抽選の母数が減らずに当たりにくい状態が続いているのかな？と思いました。\nやはり、持つべきものは友ですね☆\n皆さんもめげずに抽選に応募するのと、友人に頼むのが一番の近道だと思います！！！笑\n","date":"2017-09-25T09:39:47+09:00","image":"/wp-content/uploads/2017/09/giveMeSwtichEye.png","permalink":"/2017/09/25/847/","title":"【抽選落選にめげずに遂にゲット】ニンテンドースイッチを手に入れるまでの冒険記"},{"content":"今やChromeの時代 皆さんはネットサーフィンをする時にブラウザは何を使用していますか？\nGoogle ChromeやFireFox,IE,Opera,Safariなど、いろいろなブラウザがありますよね。\nどのブラウザもメリット・デメリットはありますが、今一番使われているのはGoogle Chromeだと思います。\n自分もChromeブラウザを愛用しています。\n避けられないメモリ圧迫問題・・・ ネットサーフィンや調べ物をしていると、少なからず複数のタブを開くことがあると思います。\nしかし、Google Chromeのデメリットとして、タブをいっぱい開くとその分PCのメモリを圧迫してしまうという点があります。\nなぜ？ Google Chromeは複数タブを開いてブラウジングすることを前提として開発されており、タブごとにGoogle Chrome Helperというものを起動させ、それぞれ異なるプロセスとして処理をすることで複数ブラウザを同時に開いても、快適なブラウジングを出来るようにしています。\n\u003cしかし、開いたまま表示をしなくなったタブについてもその間はずっとメモリを使ってしまっているので、タブを開きすぎるとPCのパフォーマンスが低下してしまいます。\n良かれと思った機能が足を引っ張ってしまうことになりかねません。\nTabMemFree そんな問題を解決してくれるのが、Chromeの拡張機能のTabMemFreeです！\nこのプラグインは開いてから一定時間触っていないタブのメモリを自動で解放してくれます。\nなので、ネットサーフィンをする際に後から見ようとタブをたくさん開いてしまう人は必須と言ってもいいレベルの拡張機能です♪\n導入方法 拡張機能の有効化 コチラ\u0026nbsp;にアクセスし、CHROMEに追加ボタンをクリックします。\nアクセス権限の承認を求めてくるので、問題がなければ拡張機能を追加ボタンをクリックします。\n確認 以下のようなダイアログが表示され、アイコンに矢印マークが3つ囲んで表示されていれば有効化が完了です。\n使い方 デフォルトでは15分間表示されなかったタブのメモリを自動で解放します。\n実際には以下のような画面になり、表示することで自動でリロードがかかる感じですね。\nそうするとGoogle Chrome Helperのメモリが24MB程度になるので、かなりメモリが抑えられていることがわかります。\n設定の変更方法 メモリを解放する時間は15〜1440分の間で調整が出来ます。\nアイコンで右クリックし、オプションメニューを選択します。\nTimelimitsのTab timeoutのスライダーを調整することでメモリ解放のしきい値を変更可能です。\n終わりに Chromeを使っていてパソコンがもっさりしてきて気になる方は是非お試し下さい。\n皆様がこれで快適なネットサーフィン生活をおくれることを願います♪\n","date":"2017-09-22T13:31:32+09:00","image":"/wp-content/uploads/2017/09/tabmemoryEye.png","permalink":"/2017/09/22/826/","title":"【快適ネットサーフィン生活へ】Google Chromeが重い時に入れるべき「TabMemFree」【もっさり対処方法】"},{"content":"アクションカメラの普及 いきなりですが、筆者はGoProが大好きです。\nスノボやシュノーケリングなどのアクティビティが大好きで、昔は普通のデジカメやビデオカメラを使っていましたが、\n・持ち運びの悪さ\n・撮影環境への依存(雨や雪・水中)\n・耐衝撃性能\nに不満がありました。\nそんな中アクションカメラというジャンルのビデオカメラの存在を知り、いろいろと手を出すようになりました。\n今まで様々なメーカーのアクションカメラを利用してきて、今はGoProに落ち着いています。\n今回は使ってみて感じたリアルなメリット/デメリットを交えながら比較していこうと思います。\n比較 比較機種について 今回は筆者の使用経験がある以下の機種について比較をしようと思います。\nGoPro HERO5 Black \u0026lt;p\u0026gt;\u0026lt;a href=\u0026quot;https://jp.shop.gopro.com/APAC/cameras/hero5-black/CHDHX-502-master.html\u0026quot; target=\u0026quot;_brank\u0026quot;\u0026gt;公式サイト\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt; Amazon 【国内正規品】 GoPro ウェアラブルカメラ HERO5 Black CHDHX-502 \u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\rGoPro HERO5 Session \u0026lt;p\u0026gt;\u0026lt;a href=\u0026quot;https://jp.shop.gopro.com/APAC/cameras/hero5-session/CHDHS-501-master.html\u0026quot; target=\u0026quot;_brank\u0026quot;\u0026gt;公式サイト\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt; Amazon 【国内正規品】 GoPro ウェアラブルカメラ HERO5 Session CHDHS-502-AP \u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;div\u0026gt;\rINBYTE ISAW Extreme \u0026lt;p\u0026gt;\u0026lt;a href=\u0026quot;http://inbyte.jp/isaw_ex.php\u0026quot; target=\u0026quot;_brank\u0026quot;\u0026gt;公式サイト\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt; Amazon Isaw Extreme Digital Camera 12?Mpix \u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;div\u0026gt;\rJVCKENWOOD ADIXXION GC-XA2 ブラック \u0026lt;p\u0026gt;\u0026lt;a href=\u0026quot;http://www3.jvckenwood.com/dvmain/gc-xa2/\u0026quot; target=\u0026quot;_brank\u0026quot;\u0026gt;公式サイト\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt; Amazon JVCKENWOOD JVC スポーツカム ADIXXION GC-XA2 ブラック GC-XA2-B \u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r\u0026lt;div\u0026gt;\rCASIO EX-FR100 \u0026lt;p\u0026gt;\u0026lt;a href=\u0026quot;https://casio.jp/dc/products/ex_fr100/\u0026quot; target=\u0026quot;_brank\u0026quot;\u0026gt;公式サイト\u0026lt;/a\u0026gt;\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt; Amazon CASIO デジタルカメラ EXILIM EX-FR100YW カメラ部/モニター部分離 フリースタイルカメラ EXFR100 イエロー \u0026lt;/p\u0026gt;\r\u0026lt;/div\u0026gt;\r上記、５機種について実際に触ってみたので筆者の感想を元に比較を行ってみます。\n仕様比較表 ※項目については、個人的に気になる点をピックアップしていますのでご了承ください。\nアクションカメラ比較表\rGoPro\nHERO5\nBlack\rGoPro\nHERO5\nSession\rINBYTE\nISAW\nExtreme\rADIXXION\nGC-XA2\rCASIO\nEX-FR100\r価格(Amazon)\r￥ 44,668\r￥ 34,800\r￥ 30,127\r￥ 37,800\r￥ 33,210\r発売時期/th\u003e\r2016年10月8日(土)\r2016年10月15日(土)\r2013年10月21日\r2013年 8月上旬\r2015年12月11日\r重さ\r117g\r77g\r110g\r135g\rカメラ：76g\rコントローラー：103g\rサイズ(mm)\r幅：62.0\n縦:44.6\n奥行き:32.7\r幅：38.1\n縦:38.1\n奥行:36.32\r幅：61.0\n縦:32.0\n奥行:43.0\r幅：74.0\n縦:53.0\n奥行:35.0\rカメラ:\n直径：60.9\n奥行:33.3\rコントローラー：\n幅：59.2\n縦:86.7\n奥行:19.4\r画角\rSuperView\nワイド\nミディアム\n魚眼無効\nナロー\rSuperView\nワイド\nミディアム\n魚眼無効\nナロー\rワイド\nミディアム\nナロー\rワイド固定\r広角固定(非魚眼)\r画質\r4K\n2.7K\n1440P\n1080P\n960P\n720P\nWVGA\r4K\n2.7K\n1440P\n1080P\n960P\n720P\r1080P\n960P\n720P\nWVGA\r1080P\n960P\n720P\nWVGA\r1080P\n640P\n512P\rスーパースロー\n※画質差あり\r120fps\n240fps\r120fps\n240fps\r120fps\n240fps\r120fps\r240fps\rポート\rUSB-C\nマイクロHDMI\rUSB-C\nマイクロHDMI\rUSB\nマイクロHDMI\rUSB\nマイクロHDMI\rUSB\r耐久\r防水\n防塵\n防寒\r防水\n防塵\n防寒\r要防水ケース\r防水\n防塵\n防寒\r防水\n防塵\n防寒\r確認用\nディスプレイ\r背面タッチパネル\r無し\r背面ディスプレイ\r側面ディスプレイ\rコントローラー\r[adsense]\r使用感 個人的感想\rメリット\rデメリット\rGoPro　HERO5　Black\r・最新機種\n・ネームバリューがすごい\n・アクセが豊富\n・画質も一番良く、さらにプロチューンモードで細かい調整も可能。\n・ケース無し耐水\n・手振れ補正が優秀\r・お高い\n・タッチパネルがたまに感度が悪い\n・予備バッテリー必須\rGoPro　HERO5　Session\r・最新機種\n・ネームバリューがすごい\n・ものすごく小さいので普段持ち歩くのに良い\n・ケース無し防水\r・ディスプレイが無いので、わかりづらい\n・落ちしやすい\n・バッテリー取り外し不可\rINBYTE\nISAW\nExtreme\r・お手頃価格\n・画質もGoProに劣っていない\n・背面ディスプレイ付き\n・バッテリーの持ち○\r・古い\n・ケースをつけないと防水機能が無い\rADIXXION GC-XA2\r・縦長なので手持ち撮影しやすい\n・ディスプレイ付き\n・ケース無し防水\r・古い\n・画質は他より低め\n・常に魚眼\rCASIO EX-FR100\r・ケース無し防水\n・カメラとコントローラーが別々なので自撮りしやすい\n・様々な撮影モードがある(女性向け)\n・魚眼無し\n・バッテリーの持ち○\r・画質は他より低め\n終わりに いかがでしょうか？\n発売日に多少の差異はありますが、今はそこまで機能に差が出なくなっているので自分が欲しいと思っている機能や撮影モード、そして値段を重視して買うのが一番満足すると思います。\n自分は今回紹介した機種を全て使ってきましたが、なんだかんだでGoPro Hero5 Blackに落ち着きました。\n今後はGoPro Hero5 Black向けの便利なアクセサリも随時紹介していくので、GoPro Hero5 Blackを買った際には他の記事も楽しみに待っていてください♪\n","date":"2017-09-13T01:00:02+09:00","image":"/wp-content/uploads/2017/09/actionCameraDiffEye.png","permalink":"/2017/09/13/582/","title":"【GoProの良さ比較】GoProと他のアクションカメラを使ってみて分かったコト！"},{"content":"Google Analytics Googleアナリティクスはサイトのアクセス解析をするためのGoogleの無料サービスです。\nこのサービスをブログに連携することで、どんな人がどんな端末でどの画面を見てどのボタンをクリックしたか？等の統計情報を取る事が出来ます。\n統計情報というのはとても有益な情報です。また、連携設定自体はGoogleアナリティクス側のボタン操作のみで完了するので、利用しない手はありません！\nまた、この統計情報を元に、サイトの記事の書き方や広告の配置方法などを改善するので確実に収益アップに繋がると思います。\n今回はGoogleアドセンスとGoogleアナリティクスの連携方法を紹介したいと思います。\n連携方法 必要な物 Googleアカウント こちらのアカウントは、連携させたいGoogleアドセンスとGoogleアナリティクスに紐付いているアカウントである必要があります。\n手順 Googleアナリティクス側の設定 まずはコチラからGoogleアナリティクスにログインし、管理ボタンをクリックします。\n紐付けたいアカウント/プロパティを選択した上で、AdSenseのリンク設定ボタンをクリックします。\nコンテンツ向け Adsenseにチェックを入れ、続行ボタンをクリックします。\nプルダウンの中のすべてのウェブサイトのデータにチェックを入れます。\n1個のビューが選択済みになっていることを確認して、リンクを有効化ボタンをクリックします。\n以下のような画面が表示されたら、完了ボタンを押しましょう。\n以下のように追加したAdsenseアカウントが表示されればGoogleアドセンス側の設定は完了です♪\nGoogleアドセンス側で設定の確認 念のため、連携設定が正常にされているかの確認をします。\n※接続設定は数時間かかるので気長に待ちましょう。\nまずはコチラからログインし、設定 \u003e アクセスと認証 \u003e Googleアナリティクスとの統合 の順にクリックし、以下のようにGoogleアナリティクスアカウントが表示され、リンクを解除するという表示になっていればリンクが無事に貼られています。\nこれで今後のアクセス解析の連携が取れました。\n終わりに Googleアカウントさえ用意すれば、数分で簡単に接続設定が終わります。\nアフェリエイトに限らず、アクセス解析の設定は早めにやることに意味があるので、皆さんも忘れずに連携設定を済ませておきましょう♪\n","date":"2017-09-11T00:38:18+09:00","image":"/wp-content/uploads/2017/09/adsenseAnaliticsEye.png","permalink":"/2017/09/11/618/","title":"【2017年9月最新版！】アクセス分析でお小遣いを増やせ！Google AdsenseとGoogle Analiticsの連携方法"},{"content":"バックアップの必要性について 皆さんはWordpressのバックアップを取っていますか？\nブログやアフェリエイトをやっている場合、記事数は日に日に増していると思います。\nおそらくWordpressの管理画面で記事を投稿した後に記事をメモ帳にコピーしてバックアップ、等はしていないと思います\nちゃんとDBに登録しているから大丈夫！！と安心してしまうのは良くないです。\nレンタルサーバーでも何かしらのトラブルが発生してデータが飛んでしまう！というのも万が一ですが有り得ます。\nそうなった場合にまた0から環境を作って、記事を書くのは心が折れてしまいます。。。考えただけでもメンタルがやられますねorz\n万が一そうなった場合に、バックアップデータから復元出来るWordpressプラグインはいくつかあります。\n今回はその中で定期的にGoogleDriveに保存してくれるUpdraftPlusの導入方法を紹介します♪\nUpdraftPlusとは？ 定期的にDBデータ/アップロードファイル/その他設定をそれぞれバックアップしてくれます。\nまた、他のプラグインだと同一サーバー内に保存するのでサーバーが壊れてしまうとどうしようもないのですが、こちらのプラグインは保存先を外部ストレージから選ぶことが出来ます！\nなので、容量が少ないサーバーでもバックアップによってどんどん容量が少なくなるという心配もありません。\n今回はGoogleドライブに保存する方法を紹介致します。\n導入方法 必要なもの Google Account 今回はGoogleDriveにバックアップファイルを保存するので、関連づけるGoogleアカウントを用意する必要があります。\nちなみに、このプラグインでは1Googleアカウントに1Wordpressしか保存出来ないので、複数のWordpressを運営している方は、その分Googleアカウントを用意する必要があります。\n手順 プラグインのインストール プラグイン \u003e 新規追加 から追加画面を開き、右上のキーワードに「UpdraftPlus」を入力してください。自動で検索がされるので、その中の「UpdraftPlus WordPress Backup Plugin」の今すぐインストールボタンをクリックしてください。\n有効化 インストールが完了すると、有効化ボタンが表示されるのでクリックします。\nバックアップ設定 有効化した後は実際のバックアップの設定を行います。プラグイン \u003e インストール済みプラグイン から一覧画面を開き、「UpdraftPlus - Backup/Restore」の設定リンクをクリックします。\n画面を開いたら、設定タブをクリックします。\nバックアップの周期や保存するファイル数をお好みで設定した上で再度画面に戻って、GoogleDriveアイコンをクリックします。\rGoogleアカウントとの連携 アイコンをクリックすると、メニューが表示されますので、あなたは（下の[変更を保存]をクリックして）、設定を保存した後、一度戻ってここに来るとGoogleを使用して認証を完了するには、このリンクをクリックしてください。というリンクテキストをクリックします。\n連携させるアカウントの選択画面になるので、任意のアカウントをクリックします。\n選択すると、UpdraftPlusからのアクセス許可を求めてくますので、許可ボタンをクリックします。\nそうすると以下のような画面が表示されるので、Complete Setupボタンをクリックします。\n確認 少し待ってからリロードすると、バックアップが完了したとメッセージが表示されます！\nGoogleドライブの方を確認しても、ちゃんとUpdraftPlusフォルダが自動で作成され、その中に各バックアップファイルが生成されていることが確認出来ました♪\n終わりに 以上のように簡単な操作でWordpressのバックアップファイルをGoogleドライブに保存出来ました。\nもちろんバックアップファイルからの復元も出来るので、これで万が一の場合に備えることが出来ますね♪\n皆さんも忘れずにバックアップの設定をしましょう！！！\n","date":"2017-09-08T21:43:52+09:00","image":"/wp-content/uploads/2017/09/UpdraftPlusEye.png","permalink":"/2017/09/08/543/","title":"【おすすめ無料プラグイン】Wordpress丸々バックアップで安心！「UpdraftPlus」の導入方法【復元】"},{"content":"\r連載 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！さくらレンタルサーバーのレンタル編 2017/08/28 3469文字 約7分で読めます 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！！独自ドメイン取得編 2017/09/04 1740文字 約4分で読めます 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！「Wordpress」をインストール編 2017/09/04 1367文字 約3分で読めます アフェリエイトの種類 アフェリエイトにはいくつか種類があります。\nA8.net 様々な会社の広告が紹介されており、自分のブログ等で紹介したいプログラムに登録し記事を書き、閲覧者がその記事を見て商品を購入したり契約、またはクリックするだけで成果報酬という名のお小遣いが溜まっていきます。\nプログラムへの参加はもちろん無料です。ものによっては審査がありますが、その分成果報酬が高く設定されています。\nまた、自分自身が登録することで紹介料がもらえるセルフバックという仕組みもあります。\nブログを作ったばっかでPVが少ないサイトでは成果報酬があまり見込めないので、軌道に乗るまではセルフバックをこまめに行う事でお小遣いを稼ぐことも可能です。\nAmazonアソシエイト こちらはAmazonの商品を紹介し、購入してもらうことで売り上げの一部が成果報酬として溜まる成果報酬型広告サービスです。\nこちらはサービスへの登録に審査があります。\n作成したばかりのブログでは落ちてしまうので、しっかりを対策を練ってから申請をしましょう。\n参考までに筆者は以下のような形で２回目の申請にて合格しました♪\n1回目申請不合格時の状況 ブログ開設期間\r約2週間\r記事数\r1記事\r文字数(1記事辺り)\r約200文字\rSSL証明書\r取得済み\rプライバシーポリシー\r記載無し\rお問い合わせフォーム\r無し\r他アフェリエイト\rA8.net\rAmazonアカウント\r購入履歴無し\r2回目申請合格時の状況 ブログ開設期間\r約3週間\r記事数\r12記事\r文字数(1記事辺り)\r約700文字\rSSL証明書\r取得済み\rプライバシーポリシー\r記載無し\rお問い合わせフォーム\r無し\r他アフェリエイト\r無し\rAmazonアカウント\r計5000円ほど購入\rAmazonさんも慈善事業ではないので、有益な記事を書いておかないとダメでしょうね。。。\nまた、Amazonアソシエイトを紐付けるアカウントでいくつか商品を購入してみたら申請を通りました。\n定かではないですが、有効なアカウントという点を判定するのに購入実績を見ているのかもしれませんね。\n本記事で紹介するGoogle Adsenseよりは比較的審査を通りやすいと感じました。\nGoogle Adsense こちらは広告のクリック数によって収益が増えてきます。\nAmazon アソシエイトと同様に、審査に合格することでサイト内に広告を貼れるようになります。\n違いは、広告をクリックされるだけでお小遣いが溜まっていきます！\n購入までしてもらう必要もないので、非常にシンプルかつわかりやすいサービスです。\nただし、Amazonアソシエイト以上に審査が厳しく、合格後も場合によってはアカウント停止になったり、合格後も常にブログレベルを意識して運営していく必要があります。\nこちらには、先日合格しましたので自分の経験を元に簡単にまとめようと思います。\n[adsense]\r申請から合格までの流れ 用意するもの Googleアカウント Googleアカウントにアドセンスサービスも紐づくため、用意する必要があります。こちらは取得は簡単ですので今回は割愛します。\nブログ こちらもある程度完成しているものが必要になります。\n記事数や文字数、必要な条件等の指標はありますが、具体的には公開されていません。\nそのせいで皆さんが試行錯誤している記事がよくヒットしますね。。。\nこの記事でも自分の経験を元にまとめますが、あくまで参考程度にした上で自分なりにブログをブラッシュアップしてみてください♪\n独自ドメイン こちらも必須です。\nお名前.comでのドメイン取得や、さくらのレンタルサーバの契約、Wordpressへの独自ドメインの割り当て等は別記事でまとめていますのでご参考下さい。\n関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！さくらレンタルサーバーのレンタル編 2017/08/28 3469文字 約7分で読めます 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！！独自ドメイン取得編 2017/09/04 1740文字 約4分で読めます 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！「Wordpress」をインストール編 2017/09/04 1367文字 約3分で読めます 一次審査 公式サイトから申し込み 公式サイトにアクセスし、お申し込みはコチラボタンをクリックします。\n利用出来るアカウントが表示されるので任意のアカウントを選択してください。\nGoogle アドセンスに登録したいサイトのURLと地域を選択し、アカウントを作成ボタンをクリックします。\n必要情報の登録 上記作業が完了すると以下のようなメールが届きますので、まずは支払先住所と電話番号の登録をしてください。\n※こちらの作業はそんなに難しくないので割愛します。\n広告コードの埋め込み 同メールにサイトとAsSenseをリンクするという項目がありますので、その中の\u0026lt;script ~\u0026lt;/script\u0026gt;までをコピーします。\n今回はWordpress向けの説明となりますが、外観 \u003e テーマの編集 \u003e テーマヘッダー(header.php)内の\u0026lt;head\u0026gt;タグの最後尾に先ほどコピーした広告コードをペーストしてください\n確認 ここまで進めることで一次審査の作業は完了です。\nあとは数日待つことで自動でブログを審査してくれます。\n二次審査 指標について 二次審査を迎える上でネット上では何点かの指標をよく見ます。\nPoint\r記事数\r1ページ最大表示件数\r文字数\rカテゴリ別記事数\rプライバシーポリシーの記載\r申請中の記事投稿\r他アフェリエイトサービス\rお問い合わせフォーム\rコメント欄\r画像の投稿\rリンク切れURL\rサイトマップ\rSSL証明書\rざっと調べて、上記が審査に影響があるのかな？と目をつけていました。その上で自分の申請/再申請時の状況をまとめます！！\n初回審査時(不合格) 申請時記事数\r7記事\r申請中の記事投稿\r3記事\r1ページ最大表示件数\r10記事\r文字数\r平均700文字\rカテゴリ数\r７カテゴリ\rSSL証明書\r取得済み\rプライバシーポリシー\r記載無し\rお問い合わせフォーム\r無し\r他アフェリエイト\r無し\rコメント機能\r無効化\r画像の投稿\r1記事に最低3枚程度有り\rリンク切れURL\r無し\rサイトマップ\r有り\r不合格時には以下のようなメールが届きました。orz\nふむふむ。不十分なコンテンツとな。なにやら記事数が少ないのが原因ぽいですね！それを踏まえた上で、以下のように修正して再申請することで合格出来ました！\n再審査時(合格) 申請時記事数\r17記事\r1ページ最大表示件数\r5記事\r文字数\r平均700文字\rカテゴリ数\r2カテゴリ\rSSL証明書\r取得済み\rプライバシーポリシー\r記載有り\rお問い合わせフォーム\r無し\r他アフェリエイト\r無し\r申請中の記事投稿\r3記事\rコメント機能\r無効化\r画像の投稿\r1記事に最低3枚程度有り\rリンク切れURL\r無し\rサイトマップ\r有り\r※初回審査時から差分があるところは青文字です\nこんな感じで合格しました。\nリードタイムは不合格から5日程度で再申請を行いました。\nやはり、ブログの第一印象として、記事が少ないと思わせるような構成だと引っかかるかもしれませんね。\n1カテゴリ辺りの記事数を増やす とりあえず、カテゴリ数を減らして1カテゴリ辺りの記事数を増やしました。\n初回申請時には無駄にカテゴリが多く、ただでさえ少ない記事が散らばってしまって、見た目上記事の少ないカテゴリばっかのように見えてしまったのが問題なのかもしれません。\n1ページ辺りの記事表示数を減らす こちらも擬似的な対策になります。\n1ページ辺りの記事表示件数を10件から5件に減らして、総ページ数を増やしました。\n申請時にはページングが発生しておらず、1ページで完結してしまっておりこちらもコンテンツ不足のブログだと思われてしまった可能性があります。\nプライバシーポリシーの設置 あとは、ほぼ必須だと言われているプライバシーポリシーページも作り忘れていたので作りました。\n逆にお問い合わせフォームとコメント欄は用意しないまま合格出来たので、設置の優先度は低いのかもしれません。\n[adsense]\r合格後の流れ 広告の設定 合格するとダッシュボードが以下のような画面になるので、広告を設定するボタンをクリックします。\nページ単位の広告 広告の出し方の設定を行います。この好みに合わせて設定してみてください。\n広告ユニットの追加 まずは表示される広告を設定します。以下の画面から新しい広告ユニットボタンをクリックしてください。\n次に広告の種類を選択します。今回は記事内広告を参考にします。\n広告ユニット名や見た目の調整を行います。今回は推奨設置のままで保存してコードを取得ボタンをクリックします。\n次の画面で一次申請時に貼ったものと同じようなコードが表示されるので、それをコピーし配置したいところに貼り付けるだけです！\nあとは数十分待つ事で広告が差し込まれるようです♪\nサイト認証 広告コードは誰でもソースを見れば把握する事が出来てしまうので、悪質なユーザーが人のコードを勝手にいろんなサイトに貼り、アカウント停止にするという、アカウント狩りというのがあるらしいです。\nせっかく苦労して合格したのにこのような形で停止されるのは必ず避けたいので、この作業は必ずやりましょう！！\n自分のサイトへアクセスし、右側のボタンをクリックします。\nメニューが表示されるので、サイトの認証ボタンをクリックします。\n許可するをクリックしボタンが緑になった事を確認した上で、保存ボタンをクリックします。\n「サイトの認証が有効です」というメッセージが表示されれば、認証したサイト以外では広告コードが向こうになり、アカウント狩りの脅威からも守られます。\n終わりに Googleアドセンスは有名なアフェリエイトサービスだからこそ審査が厳しく、みなさん苦労しているようなので、様々なサイトの事例を参考にした上で是非一発合格出来るように頑張って見て下さい♪\n","date":"2017-09-06T20:45:16+09:00","image":"/wp-content/uploads/2017/09/addsenseEye.png","permalink":"/2017/09/06/484/","title":"【2017年9月最新版！】クリックされるだけでお小遣いが溜まっていく！Google Adsenseの申請から設定まで！"},{"content":"\r連載 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！さくらレンタルサーバーのレンタル編 2017/08/28 3469文字 約7分で読めます 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！「Wordpress」をインストール編 2017/09/04 1367文字 約3分で読めます 関連記事 【2017年9月最新版！】クリックされるだけでお小遣いが溜まっていく！Google Adsenseの申請から設定まで！ 2017/09/06 3990文字 約8分で読めます 前回までおさらい 前回の記事では、サーバーをレンタルしブラウザからアクセスするところまでやりました。\n今回は独自ドメインを取得して、独自ドメインでブラウザアクセス出来るようにしてみます♪\n現在はhttp://XXX.sakura.ne.jp/sample/のようなURLになっていると思います。\n[adsense]\r手順 独自ドメインの取得 取得したいドメインが使えるかどうかを確認 お名前.comにアクセスし、取得したいドメインを入力し、検索ボタンをクリックします。\n取得するドメインを選択する(複数可) xxx.jpやxxx.comなどの取得可能状態が表示されるので、取得したいドメインにチェックを入れて、お申し込みへ進むボタンをクリックします。\n※xxx.jpやxxx.comは人気のため、すでに取得されていたり値段が高く設定されているのでご注意ください！\n会員登録 右側の初めてご利用の方にチェックを入れ、メールアドレスとパスワードを入力して、次へボタンをクリックします。\n※すでに会員の方はログインして進んでください。また、必要に応じてWhois代行やサーバー設定をしてください。(今回は不要)\n会員情報の入力 会員情報を入力し、誤りが無ければ次へ進むボタンをクリックします。\n支払い方法の入力 料金の支払い方法を指定します。誤りが無ければ申し込むボタンをクリックします。\nプログレスサークルが表示され、数分程度で申し込み処理が終了します。\n以下の画面が表示されれば申し込み完了です。\n確認 以下のコマンドを叩いて確認することが出来ます。\nスペルミス等で存在しないドメインを指定すると以下のようなメッセージになります。\nさくらサーバーへの独自ドメイン割り当て サーバーコントロールパネルからドメイン設定画面へ ログイン後、左側メニュー下部のドメイン設定リンクをクリックします。\n取得したドメインの追加 新しいドメインの追加ボタンをクリックします。\n今回はお名前.comで取得した独自ドメインを利用するので、他社で取得したドメインを移管せずに使うのドメインの追加へ進むリンクをクリックします。\n取得したドメインを入力し、送信するボタンをクリックします\n確認画面が表示されるので、誤りが無ければ送信するボタンをクリックします。\n正常に処理が受け付けられると、以下のような画面が表示されます。そのまま詳細設定に進むリンクをクリックしてください。\n詳細設定 基本的にはキャプチャのような設定で良いともいます。2. マルチドメインの対象のフォルダは、Wordpressのインストールする予定のディレクトリを指定してください。\n正常に処理が完了すると以下の画面が表示されます。\nネームサーバーの変更 ネームサーバ変更画面へ遷移 お名前.comにログインし、対象のドメインのネームサーバーの変更するボタンをクリックします。\nさくらサーバーのネームサーバーの入力 以下のような確認ダイアログが表示されたら、登録情報は正しいので手続きを進めるボタンをクリックします。\n他のネームサーバーを利用にチェックを入れ、\n・プライマリネームサーバ→ns1.dns.ne.jp\n・セカンダリネームサーバ→ns2.dns.ne.jp\nを入力して、確認画面へ進むボタンをクリックします。\n入力内容に誤りが無ければ、設定するボタンをクリックします。\n正常に処理が完了すると、以下のような画面が表示されます。\nこの設定反映は数時間〜数日かかるので、気長に待ちましょう。\n確認 http://{独自ドメイン}/でアクセスし、以下のような画面が表示されれば正常に独自ドメインの割り当てが完了しています。お疲れ様でした！\n※今はまだWordpressをインストールしていないので以下のようなエラー画面が表示されますが大丈夫です\n終わりに これで独自ドメインでのアクセス設定が完了しました。\n次回はついにWordpressのインストールです。お小遣い稼ぎのための土台づくりまであと一歩なので頑張りましょう♪\n","date":"2017-09-04T18:17:51+09:00","image":"/wp-content/uploads/2017/09/onamaeEye.png","permalink":"/2017/09/04/329/","title":"【2017年9月最新版！】副業でお小遣いを稼ごう！！独自ドメイン取得編"},{"content":"連載 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！さくらレンタルサーバーのレンタル編 2017/08/28 3469文字 約7分で読めます 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！！独自ドメイン取得編 2017/09/04 1740文字 約4分で読めます 関連記事 【2017年9月最新版！】クリックされるだけでお小遣いが溜まっていく！Google Adsenseの申請から設定まで！ 2017/09/06 3990文字 約8分で読めます 前回までのおさらい 前回まではさくらのレンタルサーバを借りて、お名前.comにて独自ドメインの取得・割り振りまで行いました。\n今回はついにWordpressをインストールしてオリジナルブログを作成するところまで進めます♪\nWordpressとは？ 簡単に言うと、自分好みにカスタマイズ可能なブログを公開するためのソフトです。無料でも様々なブログテーマが配布されていて、さらに自分でHTML/CSS/PHP/JavaScript等を用いて拡張することも出来るので、かなり自由度が高いです。\n手順 データベースの作成 サーバーコントロールパネルからデータベースの設定画面へ ログイン後、サーバー設定＞データベースの設定の順に遷移します。\n新規作成 最初は何もないと思うので、新規作成をクリックして入力画面に進みます。\n設定入力 データベースの名称やパスワード等を入力して作成をします。\n※パスワードは忘れないように控えておいてください！\n確認 正常に作成されるとデータベース情報に表示されます。\nWordpressのインストール サーバーコントロールパネルからクイックインストール画面へ サーバー設定＞クイックインストールに遷移します。\nカテゴリからブログを選択 ブログを選択します。\nWordpressを選択 Wordpressを選択します。\nインストール ライセンスと規約の確認、先ほど作成したデータベースへの接続設定、作成するテーブルの命名規則等を入力し、問題がなければインストールボタンを押します。\n確認 遷移後の画面に以下のようなメッセージが表示されていれば正常終了です。\nWordpress初期設定 サーバーコントロールパネルからクイックインストール画面へ サーバー設定＞クイックインストールに遷移します。\nインストール済み一覧へ インストール済み一覧へ進みます。\nセットアップ画面へ 管理画面URLにアクセスします。\n基本情報の登録 基本情報を入力しインストールボタンを押します。\nインストール確認と管理画面へ 遷移後の画面に以下のようなメッセージが表示されていれば正常終了です。そのままログインボタンをクリックして管理画面に進みましょう。\nログイン ユーザー名とパスワードを入力してログインします。\n確認 正常にログイン出来ると管理用の画面が表示されます。\n実際に表示されるページにもアクセスしてみましょう。\nどちらも正常に表示されていればWordpressのインストールは完了です！長々とお疲れ様でした！！\n終わりに これでWordpressのインストールが無事完了しました。\n課題だった独自ドメインでのアクセスも設定済みです。\nあとはひたすら記事を増やし、ある程度PVが増えたらAmazonアソシエイトや、Googleアドセンス、A8.netなどのアフェリエイトサイトに登録することで、お小遣いを稼ぐことが出来ます。\nとはいえ、有益な記事を書くことが大前提なので、記事の内容も良いものを書けるように日々向上心を持って投稿を続けていきましょう♪\n","date":"2017-09-04T18:06:14+09:00","image":"/wp-content/uploads/2017/09/installWordpressEye.png","permalink":"/2017/09/04/451/","title":"【2017年9月最新版！】副業でお小遣いを稼ごう！「Wordpress」をインストール編"},{"content":"セキュリティソフトの必要性 皆さんはセキュリティソフト入れていますか？\n今はネット社会となっていて、インターネットありきの生活になっています。\nWindows/Macのパソコンはもちろん、タブレット/スマートフォンも必要不可欠になりつつありますよね。\nただし、身近になるにつれてそこに付け込んだ犯罪も増えてきます。\nネット犯罪は仕掛けてくる側はプロです。素人では防ぐことはほぼ不可能です。\n芸能ニュースでよくある不倫騒動についても、不正アクセスによるものがほとんどです。\n一般人の私たちには関係ないと思いがちですが、そうも言えません。\n会社の機密情報や他人への悪口など、外部にバレると問題になることは少なからず皆さんも持っているはずです。\nこういう情報を奪われるとそれを人質に金銭の要求をされる事もありえます。\nこのような素人では防ぎきれないネット犯罪から守ってくれるために、世の中にはセキュリティソフトが販売されています♪\n今回はその中から一番メジャーと言っても過言ではない「ノートン セキュリティ」の導入方法についてまとめます。\nノートン インターネット セキュリティとは？ 世界トップのシェア率を誇るウイルス対策ソフトです。\nPoint\rアンチウイルス\rスパム対策\rファイアウォール\r広告ブロック\rタンダード/デラックス/プレミアムの3グレード\rfuga\rfuga\rfuga\rまた、\nPoint\rWindows\rMac\rタブレット\rタブスマートフォン\rにインストール可能で、1台/3台/5台へのインストール可能なパックで販売されているのでニーズにあったプランを選ぶ事が可能です。\n※プランによって細かい内容は異なるのでご注意ください。\n詳しくは公式サイトをご覧下さい。\n手順 ノートン インターネット セキュリティ自体は購入済みの前提で、今回は「ノートン セキュリティ プレミアム　オンラインコード版」を例に手順を紹介します。\nプロダクトコードの確認 Amazon ノートン セキュリティ プレミアム (最新) | 3年 3台版 | オンラインコード版 | Win/Mac/iOS/Android対応 Amazon ノートン セキュリティ プレミアム (最新) | 1年 3台版 | Win/Mac/iOS/Android対応 今回はAmazonにて購入しましたので、Amazonのページからダウンロードライブラリ画面へ進み、\n一覧の中に購入したソフトが表示されるので、その中のプロダクトコードを控えます。\n公式ページへアクセス コチラにアクセスし、アカウント情報を作成します。\n※すでにお持ちの方はサインインをしてください。\n新規アカウント作成 アカウント情報を入力し、問題がなければアカウントを作成するボタンをクリックします。\nプロダクトキーの登録 正常に作成が完了すると、プロダクトキーの入力を求められます。先ほどAmazonの画面にて控えたキーを入力し、\u003eボタンをクリックします。\n※自動で「-」区切りされます。\nインストール先の設定 このデバイスにインストールするか、他のデバイスにインストールするか聞かれます。今回は作業中のマシンにインストールするので、このデバイスにインストールする側の同意してダウンロードするボタンをクリックします。\nインストーラーの起動 zipファイルのダウンロードが完了したら、展開しアプリケーションを実行します。\n※初回実行時は確認ダイアログが出ますが、開くで大丈夫です。\nインストールの実行 インストーラーを起動すると以下のような画面が表示されるので、同意してインストールするボタンをクリックします。\nダウンロードが始まります。\nマシンパスワードの入力ダウンロードが始まり数分すると、マシンのパスワードの入力を求められるので、入力します。 再起動\nインストールが完了すると、マシンの再起動を求められます。再起動しないとセキュリティソフトが有効にならないので今すぐ再起動をしましょう。\n※他のソフトで編集中のものがある場合は忘れずに保存してから再起動しましょう！\n導入完了！ 再起動が完了し、以下の画面が自動で表示されたらインストール完了です。これでネット犯罪等からこのデバイスを可能な限りノートン様が守ってくれます。\nメニューバーにもアイコンが表示され、監視中であることが分かります。\n終わりに 以上で、ネットの脅威から大事な情報を守る準備が出来ました。\nしかし、日々新しいネット犯罪やウィルスが開発されています。\nセキュリティソフトを入れたからもう安心！ではなく、常日頃から\nPoint\r怪しいメールやファイルは開かない！\r怪しいサイトにはアクセスしない！！\rセキュリティソフトは定期的にアップデート！！！\rを意識することで初めて万全なセキュリティが確立されます。\n皆さんの快適なインターネットライフのお力になれる事を祈っています。\n","date":"2017-09-01T14:09:40+09:00","image":"/wp-content/uploads/2017/09/nortonInstallEye.png","permalink":"/2017/09/01/360/","title":"セキュリティソフトの決定版！！「ノートン セキュリティ」のインストール方法"},{"content":"連載 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！！独自ドメイン取得編 2017/09/04 1740文字 約4分で読めます 関連記事 【2017年9月最新版！】クリックされるだけでお小遣いが溜まっていく！Google Adsenseの申請から設定まで！ 2017/09/06 3990文字 約8分で読めます 関連記事 【2017年9月最新版！】副業でお小遣いを稼ごう！「Wordpress」をインストール編 2017/09/04 1367文字 約3分で読めます ブログサービスについて 皆さんはブログをやっていますか？アメブロやFC2ブログなどのサービスを使えばすぐにブログを解説することが出来ます。\nただ、それらのサービスはある程度形が決まっているため、自分好みのカスタマイズが出来ない場合があります。\nまた、お店ブログやネット販売等をする場合はSEOを考慮する必要がありますが、独自ドメインを割り振れないものが多いので、いまいち集客が出来ないケースも少なくありません。\nそんな時は、自分でサーバーを借りてWordpressをインストールしちゃいましょう！\nWordpressとは？ 簡単に言うと、自分好みにカスタマイズ可能なブログを公開するためのソフトです。無料でも様々なブログテーマが配布されていて、さらに自分でHTML/CSS/PHP/JavaScript等を用いて拡張することも出来るので、かなり自由度が高いです。\nブログ開設のメリット ブログを開設することで、自分の趣味や経験等を世界に発信することが出来るので、同趣味の友達が出来たり情報交換が出来るようになります。\nまたアフェリエイトによる副業にも使えるので、しっかりと作り込めば月数万程度のお小遣いを稼げるブログに仕上げることも可能です♪\nまた、GoogleAdSense(グーグルアドセンス)やAmazonAssociates(アマゾンアソシエイツ)などの大手アフェイリエイトを利用するためには、審査が必要になるのですが、独自ドメイン必須とのことです。\nなので、上記サービスを利用するには出来る限りブログを自作し、独自ドメインを取得し、公開する必要があります。\n今回は、さくらのレンタルサーバをレンタルしてWordpressのインストール確認をするところまでの手順をまとめます♪\n[adsense]\r必要な物 ①サーバー ブログを動かすための土台となります。\n具体的に言うと、Wordpressをインストールする対象です。\n初心者であればサクラサーバーやエックスサーバー、中級者以上であればHerokuやAzure、AWSがオススメです。\n②テキストエディター 基本的にはWordpressインストール後のダッシュボード(管理)画面からの操作で補えますが、インストール時に多少ファイルを書き換えたりするので用意しておきましょう。\nオススメなのは割と新しめのAtomです。\nこちらはWindows/Mac両方で動作しますし、プラグインを入れることで自分好みのエディターにカスタマイズ出来るので作業効率も上がります！！\nこちらについてはインストールは簡単なので、手順については割愛します。\n③独自ドメイン インターネット上の住所のようなものです。\nGoogleだとwww.google.co.jp、Yahoo!Japanだとwww.yahoo.co.jp、YouTubeだとwww.youtube.comのようになっています。ドメインを取ることで検索やURLで特定しやすくなります。\nドメインについては、国内最大手のお名前.comさんが有名です。こちらのサイトから自分好みのドメインを購入することが出来ます。\nまた、aaa.sample.jpやbbb.sample.jpのように、XXX.sample.jpをいくつか撮りたい場合は、それぞれを購入するのではなく、sample.jpというドメインを購入することで、サブドメインという形でXXX.sample.jpを取得することが可能です。なので、ドメインの購入はベースとなるドメインを購入するのが良いでしょう♪\n④データベース Wordpressで作成した記事データを登録するためのものです。\nデータベースが壊れると過去の記事データが全て無くなってしまうので、定期的にバックアップ等得る必要があります。\n今回はさくらインターネットのレンタルサーバを利用することで簡単にデータベースの準備も出来ます。\nレンタルサーバーを利用するメリット 自分でサーバーを立てることも出来なくはないですが、様々なインフラ知識が必要なのと自分で構築するリスクを考えると無難にレンタルサーバーを借りた方が良いと思います。\n今回はさくらのレンタルサーバの有料レンタルサーバを利用してみます。\n無料のサービスもありますが、さくらインターネットの有料プランであれば、以下の機能が標準でついているので便利です。\n1.サーバの構築を自動でやってくれる \u0026lt;p\u0026gt;→サーバを自分で構築するには専門知識が必要になり、また機材等を買わないといけないので\u0026lt;strong\u0026gt;結局高く\u0026lt;/strong\u0026gt;なってしまいます。\u0026lt;br /\u0026gt;スタンダードプランなら月数百円なので、\u0026lt;mark\u0026gt;かなりお得\u0026lt;/mark\u0026gt;だと思います。\u0026lt;/p\u0026gt;\r2.ブラウザからの管理画面が準備されている \u0026lt;p\u0026gt;→管理画面がないサービスの場合は、\u0026lt;strong\u0026gt;ターミナルやプロンプトなどの黒い画面\u0026lt;/strong\u0026gt;を使ってデータベースやWordpressの操作をしなければならないが、これは\u0026lt;strong\u0026gt;初心者にはハードルが高く\u0026lt;/strong\u0026gt;、一回でも間違ったコマンドを実行すると、\u0026lt;mark\u0026gt;サーバー自体を壊してしまい全てのデータが吹っ飛んでしまうリスク\u0026lt;/mark\u0026gt;があります。。。\u0026lt;/p\u0026gt;\r3.Wordpressの簡単インストール機能が用意されている \u0026lt;p\u0026gt;→画面上から\u0026lt;strong\u0026gt;ぽちぽちするだけ\u0026lt;/strong\u0026gt;でブログ設置に必要なデータベースをインストール出来るのは\u0026lt;strong\u0026gt;かなり便利\u0026lt;/strong\u0026gt;です！作業自体も\u0026lt;strong\u0026gt;数分\u0026lt;/strong\u0026gt;で完了してしまいます。\u0026lt;/p\u0026gt;\r4.データベースの簡単インストール機能が用意されている \u0026lt;p\u0026gt;→同上\u0026lt;/p\u0026gt;\r5.大手サービスなので、利用者が多くネット上にノウハウがいっぱい転がっている \u0026lt;p\u0026gt;→地味にこれがでかいです。わからないことややりたいことをネットで調べると同じような考えの人のノウハウ記事が\u0026lt;strong\u0026gt;ヒット\u0026lt;/strong\u0026gt;するので、すぐに解決出来ます。マイナーサービスだと\u0026lt;mark\u0026gt;こういう訳には行きません。。。orz\u0026lt;/mark\u0026gt;\u0026lt;/p\u0026gt;\r6.セキュリティ面がしっかりしている \u0026lt;p\u0026gt;→これもでかいですね。ネットを使っている以上、様々な\u0026lt;strong\u0026gt;脆弱性\u0026lt;/strong\u0026gt;がありますが、ネット初心者がそれらを防ぐのは\u0026lt;strong\u0026gt;無理\u0026lt;/strong\u0026gt;です、と断言出来ます(筆者もIT技術者ですので。笑)なので、その辺も\u0026lt;mark\u0026gt;カバー\u0026lt;/mark\u0026gt;してくれているサービスを利用するのが良いでしょう。\u0026lt;/p\u0026gt;\r\u0026lt;p\u0026gt;逆にこの辺も自分で出来るのであれば\u0026lt;mark\u0026gt;お金を払う必要が無くなる\u0026lt;/mark\u0026gt;ので、もちろん自分でブログを準備するのも有りです！！\u0026lt;/p\u0026gt;\r[adsense]\r手順 レンタルサーバーの申し込み プランの選択 コチラにアクセスし、スタンダードプランを選択します。\nブログURLの確定 ブログのURLを入力して、次に進みます。\n※後から独自ドメインを割振るので、そこまで深く考えなくて大丈夫です。\n新規会員登録 会員登録をしていない方はここで新規会員登録を求められるので、無料会員登録します。\n※すでに会員登録をしている方は飛ばしてください。\n会員情報入力 必要情報を入力して確認画面に進みます。\n会員情報入力確認 入力に誤りがなければ会員登録します。\n支払い方法入力 任意の支払い方法を入力して申し込み内容確認画面へ進みます。\n申し込み内容確認 申し込みの内容に誤りがなければ申し込みを確定します。\nお申込み後の流れ 申込み完了後、１、２時間ほどで最初に決めたURLにアクセスが可能になります。\nhttp://XXX.sakura.ne.jp/\n申込みをしたサーバーの準備状態はログイン後のコチラからも確認出来ます。\n終わりに これでサーバーのレンタルが完了したので、Wordpressをインストールするための土台が出来ました。\n課題 しかし、現在は\nhttp://XXX.sakura.ne.jp/sample/\nのようなURLになっています。このXXX.sakura.ne.jp部分を独自ドメインに変える必要があります。\nドメインは世界で固有の必要があります。なので、ドメインは無料では取得出来ません。\n国内で一番有名なドメイン取得サービスはお名前.comですね。\nこちらは取得したいドメインを入力すれば、取得可能か？をすぐに確認することが出来ます。\nまた、簡単な操作でドメインの取得が可能で、様々な設定やめんどくさい作業を代わりにやってくれる、という点もあり、初心者がドメインを取得するにはまずはこのサービスを利用するのが基本です。\nブログ運営が慣れてきたら他のサービスに移行することも可能です。\nさくらインターネットでもドメインの取得は出来るようですが、次の記事ではお名前.comを使う前提で手順を紹介致します。\nただ、その前に独自ドメインで借りたサーバーに接続出来るように準備をしておく必要があります。\nWordpressをインストールしてからでも可能ですが、設定が少しめんどくさくなってしまうので、Wordpressをインストールする前にやっておきましょう♪\n次回の記事ではその辺をまとめていきたいと思います♪\n","date":"2017-08-28T22:25:32+09:00","image":"/wp-content/uploads/2017/08/sakuraServerEye.png","permalink":"/2017/08/28/76/","title":"【2017年9月最新版！】副業でお小遣いを稼ごう！さくらレンタルサーバーのレンタル編"},{"content":"フリーイラストについて ブログ等をやっているとヘッダー画像や記事で使用する画像を作りたくなることが多々あります。\nしかし、画像なんか自分で作れないよ〜orz。。。なんて方が多いと思います。\nそういう時はネット上でフリーのイラスト素材を使わせてもらうことで良い画像を作ることが出来ます。\n今回は幅広いカテゴリのイラストを提供してくださっているいらすとやをご紹介致します♪\nいらすとやとは？ いらすとやは様々はイラスト画像を無料配布しています。\n個人、法人、商用、非商用問わず無料でご利用可能で、クレジットの表記、メールでの連絡なども不要とのことです。数千点以上のイラストが配布されており日々増えています！\nただ、いくつかの利用規約はありますので、詳しくはコチラをご確認ください。\n全体的に特徴的な可愛いデザインで統一されていて、一目でいらすとやのデザインだな、と分かります♪\nポップで愛嬌のあるイラストから\nちょっとブラックなイラストまで\n探し求めている画像がほぼ見つかります。笑\n最近では、某大手家電量販店のチラシや大学内の広告でも利用されているので街中で目にすることもあるかもしれません。\n会社の資料でも使える 前述の通り、Web画像やチラシでも使えますが、会社のパワーポイントやエクセルの資料にも挿入出来るので、プレゼン資料のクオリティ向上にも使えます♪\nいらすとやでプレゼンしたいことにマッチする画像を探して挿入することで、より具体的に表現・伝達することが可能になるのできっとあなたの評価アップにも繋がるでしょう！(あくまで予想です。笑)\n汎用性の高さがネットで話題に！ 無料かつジャンル問わずのクオリティの高いイラストがネットでも話題になりました。\nツイッターで話題になったのは以下の２つのハッシュタグです♪\n#いらすとやさんの素材で名盤を再現してみる\n#いらすとやさんでゲームパッケージを再現する\nどちらのハッシュタグもいらすとやの素材のみをうまく使って再現されているものが多いです。アイディアもそうですしこのような遊びが出来るのもいらすとやの特徴ですね♪興味のなる方は是非見てみてください♪\n個人的に好きなシュールなイラスト！ 幅広いイラストを取り揃えているゆえ、何に使うんだ？という疑問を感じざるを得ないイラストもあります。笑\n今回はその中から筆者が気になったシュールなイラストをいくつか紹介しようと思います！\n出来レース 出来レースを表すイラストです。かなりピンポイントすぎるテーマとお金が飛び交っている感じがシュールで面白いですね。笑\n宗教の二世 宗教のロゴ？と思われる目のマークが闇の深さを表していますね。笑\n笑顔の両親とは対象的な真顔のお子さんとのギャップも何かを感じます。笑\n中二病 これは良い中二病ですね！眼帯・魔法陣・六芒星・包帯とフル装備です。笑\n終わりに このように、いらすとやはデザインが出来ない私たちに救いの手を差し伸べてくれる女神のような素材サイトです。\n今後も様々なイラストが追加になっていくと思うので、皆さんどんどん活用していきましょう！\n","date":"2017-08-26T17:01:32+09:00","image":"/wp-content/uploads/2017/08/illustrationEye.png","permalink":"/2017/08/26/177/","title":"商用利用OKのフリーイラストの大御所！無料で使い放題の「いらすとや」さん♪"},{"content":"Google Analiyticsとは？ 設定をしたサイトに訪れた人の数や各ページの表示数を自動で統計・可視化してくれるサービスです。\nGoogle Accountを持っていれば、誰でも無料で利用でき、導入も簡単です。\nブログやアフェリエイトなどの副業をやっている方は、PV数や人気のある記事などの傾向が気になると思います。\nブログランキングやSEO向上のためにも是非導入したいサービスですね♪\n自分自身のアクセス数が邪魔 Google Analiyticsを導入した時点で、サイトに訪れたユーザー数の収集が始まります。\nただ、サイトの構築し始め時期や投稿記事の表示確認等で自分自身も何回もサイトを表示することが必ずあると思います。\nデフォルトだとその訪問もカウントされてしまうので、純粋なPV数を出したい際に邪魔になってします。\nまた、Google Analiyticsを導入すると、途中で集計のリセットは出来ず一度消してから作り直すしか方法が無いとのことです\nなので、Google Analiyticsを導入した時点で自分のアクセスをカウントしないように設定する必要があります。\n上記については、フィルタという機能で除外したいIPアドレスを指定することで、集計対象外として指定することが可能です♪\n手順 フィルタ設定画面に遷移 こちらからダッシュボードにログインし、\n①設定 \u003e ②フィルタメニューの順に開きます。\n新規フィルタの作成 ①+フィルタを追加ボタンを押下し、新規作成画面に遷移します。\n設定画面が開いたら、①新しいフィルタを作成をチェックし、②フィルタ名に任意の名称を入力し、③フィルタの種類をカスタムにチェックし、④フィルタフィールドをIPアドレスに設定し、⑤フィルタパターンに除外したいIPアドレスを正規表現で指定します。\n※IPアドレスはこちらにアクセスすることで確認可能です\n内容に問題がなければ保存ボタンを押下してフィルタを作成します。\r再度、サイトにアクセスしてフィルタの動作確認 もう一度サイトにアクセスした上で、Google Analiyticsのリアルタイムを確認してみましょう\nアクセスがカウントされていない事が確認出来ました。これで自分のアクセスが除外されたのでより正確なアクセス解析が可能になりました♪\n終わりに 以上のように数分で簡単に設定が出来るので忘れずに設定しておきましょう♪\nただ、引っ越し等でIPアドレスが変わった場合は都度設定変更をする必要があるので、そこだけは気をつけてください！！\n","date":"2017-08-16T15:12:21+09:00","image":"/wp-content/uploads/2017/08/GoogleAnalyticsIgnoreEye.png","permalink":"/2017/08/16/109/","title":"【設定必須】Google Analyticsで自分のアクセス数をカウントしないようにしよう！"},{"content":"ブログでの目次の必要性 Wordpressで記事を作成する際に、ボリュームが増えてくると縦に長い記事になってしまい、見る側が全体を把握しずらくなってしまいます。\nなので、内容が多い記事については、ページ上部に目次があると便利です。\nWordpressにはこのような目次を簡単に実現する「Table of Contents Plus」というプラグインがありますので、今回はそちらを導入していこうと思います。\n手順 インストール ダッシュボード \u003e プラグイン \u003e 新規追加を選択し、キーワードに「Table of Contents Plus」を入れるとプラグインがヒットするので、今すぐインストールボタンを押下します。\n有効化 インストールが完了するとインストール済みプラグインの中に表示されます。ただ、まだ有効化されていないので、有効化リンクを押下してプラグインを有効にします。\n設定の変更 プラグインを有効にすると、ダッシュボード \u003e 設定 \u003e TOC+というメニューが追加になるので、ここでプラグインの細かい設定を変更することが出来ますので、お好みに合わせて調整してみてください♪\n終わりに これで既存の記事含め、目次リンクが追加されるようになっています。\nブログは情報発信のための手段なので、見る側の使いやすさを考てあげることでより良いブログになり、閲覧者も増えていくと思いますので、日々見やすいブログを求めて試行錯誤することがワンランク上のブロガーになる近道だと思います！！\n","date":"2017-08-15T09:41:19+09:00","image":"/wp-content/uploads/2017/08/TableOfContentsPlusEye.png","permalink":"/2017/08/15/79/","title":"Wordpressの記事ページに目次を追加する「Table of Contents Plus」プラグインの導入方法"},{"content":"PC版Instagramからの画像/動画アップロードはサポートされてない 最近は画像や動画に関するSNSはTwitterよりInstagramが主となってきています。\nただTwitterはPCからも、サイトにログインすれば問題なく画像や動画のアップロードが出来ますが、Instagramは閲覧のみしか出来ず、アップロードするには専用のアプリケーションをPCにインストールする必要があります。\n今回はWindowsとmac両方で利用出来るGramblrというソフトについて紹介します。\rこの記事ではmacへのインストール手順をメインにまとめていきます。\nインストール手順 インストーラーのダウンロード 公式サイトからOSに合わせてダウンロードします。\nインストーラーの実行 dmpファイルをダブルクリックして起動し、カメラアイコンのGramblrをApplicationsフォルダにドラッグ\u0026ドロップします。\nアプリケーションの起動 上記でインストールは完了していますが、起動しようとするとおそらく以下のようなダイアログが表示され実行出来ない状態の人がほとんどかと思われます。\nその場合は、Controllを押しながらメニューの「開く」を選択することでダイアログの内容が以下のように変わります。\nそのあとにマシンのパスワード入力を求められるので、入力することで起動が出来るようになります。\n起動するとブラウザが自動で立ち上がります。\n言語設定設定 まずは言語設定を行いましょう。画面右の「EN」という部分をクリックすると、選択可能な言語が一覧表示されます。お好みで設定してください。(今回はJPを選択します)\nサインアップ 利用するためにGramblrの会員情報を登録します。\n各項目を入力してサインアップボタンを押下することでメニューが表示されます。\n終わりに これでPCから画像や動画のアップロードが可能になりました！\nフィルター等もスマホアプリより多く用意されています♪\nただ、あくまでアップロードをするためのアプリなのでタイムライン等の閲覧は出来ません。シンプルなUIなので使いやすいですが、PCでもタイムライン等を見たいのであれば別のアプリケーションを試すのもありかもしれませんね。\n自分も他のInstagramのアプリケーションを試してみるので、また別記事にてまとめようと思います♪\n","date":"2017-08-14T13:32:53+09:00","image":"/wp-content/uploads/2017/08/GramberEye.png","permalink":"/2017/08/14/55/","title":"【インスタ映え】PCからInstagramへの画像や動画のアップロードを可能にする「Gramblr」のインストール方法と使い方【Mac/Windows対応】"}]