AWSのCertificate Manager・CloudFront・S3・Route53でSSL証明書の設定まとめ

AWSのCertificateManager・CloudFront・S3・Route53を使ってCDNとSSL証明書を同時に設定したので、その時にハマったポイントや調べた内容などを詳しくまとめました。

ウェブの設計は「ページの表示スピード命」みたいなところがある。ページが「読める状態」になるまでの時間が早ければ早いほどユーザー体験は向上するし、SEO的にも有効。UXがどーのこーの言う前に、そこをまずクリアしたいところ。仕事でSSL証明書を取得する必要があったため、ちょうど東京リージョンが公開されてたAWS Certificate Managerを設定した。ついでに、ずっと使ってみたかったAmazonのDNS CloudFrontを使ってインフラ的な部分も整えた。調べて思ったのは、SSLとDNS設定の両方を一緒にやってる記事がなかったので、その参考になればと思います。では、仕入れた知識の新鮮なうちに、どうせすぐ忘れる自分のために、そのハマりどころとかをまとめていきます。

このページに来ている人は、おそらくAWSアカウントは既に登録済みで、S3に静的コンテンツをアップしたことがある人だと思うので、そのへんの説明は省略。まだの人は公式の「AWSアカウント取得の流れ」や「Amazon S3」を参考ください。

CDNとSSL証明書を設定するメリット

場合によってはデメリットがメリットを上回るかもしれないけど、そこは調べればなんとかなるので、比較的安価だし対応しない手はないかと。

メリット

  • CDNを使うことで、ウェブページの表示速度が早くなる
  • 世界展開した時に高速化のメリットが生まれる
  • SSLを使うとGoogle先生の評価が上がる:HTTPS をランキング シグナルに使用します
  • SSLを使うと訪問者の体験が向上する(安心感を与えられる)

デメリット

  • 設定時の技術的なハードルが若干高め
  • お金が多少かかる(S3, CloudFront, Route53は従量課金)

AWS Certificate ManagerとCloudFrontについて

この2つは今回はじめて使ったので、勉強を兼ねて軽くまとめます。

SSL証明書とは

そもそもSSL証明書は「ロケーションバーのURL左についてるなんか色のついたやつ、セキュアらしい」ぐらいの認識でした。何を持ってセキュアと呼ぶのかを知らずに安心感を抱いている自分に身震いするが、調べたところSSLとは「通信データの暗号化」「通信相手の認証」という2つの仕事をしているらしい。ECサイトとか問い合わせフォーム等、個人情報を入力する必要のあるページはこれをつけてないと第三者にのぞき見されるリスクが高まる。サイトの「安全性」を示すのがSSLの役割。証明書にもいろいろ種類があって、安全性が最も高いことを示す証明書が「EV SSL証明書」と呼ばれるもので、この証明書を発行するには「会社の印鑑証明・弁護士の意見書」などの提出が必要らしく、その認証プロセスはかなり厳密っぽい。とはいえ、認証局も会社なので登録してくれる人が多ければ多いほど嬉しいわけで、そのへんのせめぎ合いとかありそう。(元に容易にSSL証明書が発行されすぎて、SSLついてるのにフィッシングに合うという事案が発生して「EV SSL証明書」が生まれたとかいうもあり。)

EV SSL証明書の取得は年間¥219,000も必要らしいが、これから設定していくAmazonのSSLは無料なので安心されたし。あまり深く掘ると本題からそれるのでこれぐらいに。

AWS Certificate Manager(通称ACM)について

Amazonが提供している無料のSSL証明書。説明は下記が詳しいので譲る。自動更新してくれるのがありがたいポイント。CloudFrontとの連携が容易。

[ACM] SSL証明書発行時のドメイン認証メールをSESで受け取ってみた

[ACM]AWSの無料SSL証明書サービスCertificate Manager について調べてみた

[AWS Certificate Manager]東京でも無料でSSL証明書が使用可能になりました!

CloudFront

サイト高速化のためにCDNから配信するというのがベストプラクティス。CloudFrontはコンテンツの圧縮までやってくれるので色々手間が減ります。(gulp taskの出番が・・・。)

CloudFrontについてはこの記事がわりと支持されてる感じ。 ブログの高速化に。AWSのCloudFrontの設定手順まとめ Publish2013/02/28(木)

ウェブパフォーマンスについて真剣に考えるなら対応しておきたいところ。

この名著でも、CDNについて言及されてます。

CloudFront設定・SSL証明書発行の手順登録の手順を。

前段がかなり長くなった。。以下、S3やRoute53も交えて、設定方法・手順を書いていきます。AWSアカウント開設済みと想定してすすめます。

  1. ドメインを取得する(今回はお名前.comにてdomain.comを購入したと想定)
  2. AWSのRoute53で「Create Hosted Zone」を押して取得したドメインを追加
  3. ドメイン登録後にRoute53に表示されたネームサーバーをお名前.comの「ネームサーバー変更」より、購入したドメインのネームサーバーとして記入。(「他のネームサーバーを利用」から設定する)
  4. 15~20分ほど待って、コマンドラインからdig domain.com nsと打ってANSWER SECTIONにRoute53で表示されたネームサーバーのアドレスが表示されていることを確認。
  5. S3に移動し、「バケットを作成」よりdomain.comという名前のバケットをつくる。海外展開とか考えなければリージョンは東京で。作成したバケットで「プロパティ > 静的ウェブサイトホスティング > ウェブサイトのホスティングを有効にする」を選択する。インデックスドキュメントの内容にindex.3ee6e0db.htmlを入れて保存。404時に表示されるページも指定できるが、後で変えられるのでエラードキュメントもindex.3ee6e0db.htmlにしておく。
  6. Route53で「Create Record Set」を押し、TypeをAレコード(A - IPv4 address)にして、AliasをYesにする。(ここで指定するAレコードは確認用で、後ほどCloudFrontで生成されるURLに変更します。)Alias Targetから先ほど登録したS3バケットのエンドポイントを選択し、一番下にある「Create」を押して登録する。(バケット名とドメイン名が同じでないとうまく表示されないので注意。)

一旦ここいらで休憩。今までの設定を確認します。コマンドラインからdig domain.comでipアドレスが帰ってくるか確認。帰ってきたら今までの手順は無事成功しています。これでS3で静的サイトを公開することができました。コーヒーでも飲みましょう。

さて、次にCloudFrontの設定に入っていきます。ここでは、SSL証明書取得のためにadmin@domain.comなどのメールが受信できることを確認しておく必要があります。ハマリポイントその①ですが、ここでは長くなるので別の記事で扱います。それまで下記を参照下さい。

AWS Certificate Manager (ACM)で申請前に事前に確認しておくべき大切なこと

[新機能]Amazon SES でメール受信が出来るようになりました!

CloudFrontの設定についてはこのスライドがスクショも合ってわかりやすい。

  1. Amazon Certificate Manager (ACM) の「ドメイン名の追加」フォームに*.domain.comを指定する。「この証明書に別の名前を追加」を押してdomain.comも合わせて追加しておく。確認とリクエストを送り、Amazon SESなどを通してリクエストメールを承認する。(要注意ポイント)
  2. 設定が終わると、ACMの画面でStatusがIssuedになっているか確認する
  3. CloudFrontの設定は上記のスライドを参考ください。登録が終わると、DomainNameにcloudfrontのURLが表示されるので、それをコピーします。
  4. Route53に移動し、冒頭でつくった確認用Aレコードを削除します。(ここでAレコードを削除すると物理的に一瞬NotFoundになるので、公開済みページだと別途対策が必要)
  5. Route53に先ほどコピーしたCloudFrontのURLをAレコードとして指定します。
  6. 先ほどつくったCloudFrontのDistributionを選択し、「Distribution Settings」を押して、「Generalタブ > Edit」を押して編集画面に入ります
  7. Price ClassがSSL登録時のリージョンにあっているか確認して、Alternate Domain Names (CNAMEs)に購入したドメインdomain.comを入れます。
  8. ラジオボタンのCustom SSL Certificate (example.com)を選択し、先ほどつくったSSL証明書を選択します
  9. Default Root Objectがindex.3ee6e0db.htmlになっているか確認。なければ入力します。

気をつけるポイント

自分がハマったポイントを書いておきます。

  • 東京リージョンで取得したSSL証明書がCloudFrontで表示されず詰んだ。これは米国東部(バージニア北部)を選択すると使えるようになります。詳しくはこちらに書きました。→ Amazon Certificate ManagerのTokyo RegionでSSL取得してもCloudFrontでは表示されない
  • CloudFront -> SSL証明書設定するとき、CloudFront側で何かを変更したら、必ずステータスを確認する。デプロイが完了してからじゃないと、なにも反映されない。タイミングを間違うとAccess Deniedになるので注意。
  • CloudFrontのOrigin Settingsで、Origin Domain Nameに自動的にサジェストされるS3のエンドポイントをつけるとSSLがうまく効かない。冒頭でつくったS3のエンドポイントyourdomain.com.s3-website-ap-northeast-1.amazonaws.comを手動でつけるのがポイント。S3はHTTPでしかアクセス出来ないので、Origin Protocol PolicyはHTTP Onlyを指定
  • CloudFrontのキャッシュの影響で変更が即時反映されない。これはキャッシュヘッダをつけるなど対策する。その辺も上のSlideshareが詳しい。「CloudFront キャッシュコントロール」とかで調べれば色々出る。
  • CloudFrontで生成されたURLだとウェブが表示されるのに、独自ドメインだとURLが表示されないなどの問題が発生した。例:domain.com/aboutにアクセスしたらAccess Deniedになる。原因は、Default Root Objectにindex.3ee6e0db.htmlが入力されていなかったから。原因と方法はここにかいてある「Specifying a Default Root Object (Web Distributions Only)
  • CloudFrontの「Origin Settings > Origin Protocol Policy」の設定をHTTPS Onlyにしていたことも原因だったっぽい。HTTP Onlyにするとなおった。

まとめ

この記事を書いている時に、ちょうど「エンジニアのハマり時間とその技術的難易度の相関関係」というQiitaの記事が流れてきた。

共感しながら頷きまくっていたため、首が痛い。確かに新しいことをするときって、実際やってみると、ドツボにハマるポイントが多様にあって、「気づいたら5時間経ってた」なんてことは余裕で、消耗戦になる割合が高い。でもハマった時の逃げ場のないように感じる閉塞感よりも、新しい技術を体得した時の喜びの方が勝るので、僕はエンジニアではないけど、いろんなことに首を突っ込んじゃうことが多い。

CloudFrontは安いとはいえコストがかかる。もちろんアクセス数にもよるけど、どのぐらい行くか①ヶ月動向を追ってみる。このブログもCDNかませたいけど、コスト的な視点でCDNが無料で使えるCloudFlareで設定しようかと思う。期待される問題は今回と同じで「キャッシュコントロール」「間違った適応手順」かな?CloudFlareについては、また今度。AmazonのSESやSNSの設定もまた次回書きます。TwitterやFacebookでつぶやいていただけると記事アップのスピード(やる気)が上がります。

Top stories

Latest Posts

家族カードは審査なしのリクルートカードがオススメな3つの理由

家族で使えるクレジットカード(家族カード)はリクルートカードがオススメ!高還元率とポイントの管理で効率的に生活する

  • recruit card
  • credit card
  • family card

CleanMasterとは?Zenfone2 Laser購入時に入ってるアプリは安全なのか

ASUS Zenfone2 LaserにプリインストールされているCleanMasterの信ぴょう性について調査したのでまとめました。

  • smartphone
  • MVNO
  • SIM free
  • Freetel
  • ASUS Zenfone

FreetelとZenfone2 Laserで4ヶ月過ごしてみた感想

佐々木希が無駄に可愛いことで有名なFreetelのCMですが、4ヶ月使用してみたのでそのおすすめポイントを書いてみます。

  • smartphone
  • MVNO
  • SIM free
  • Freetel
  • ASUS Zenfone

ASUSのZenfone 2 Laser ZE500KL とiPod Touch 6世代で4ヶ月過ごした結果

ASUSのZenfone 2 Laser(ZE500KL)とiPod Touch 6世代で4ヶ月過ごした結果「Zenfone2 Laser最強」という結果に落ち着きました。その背景をまとめました。

  • smartphone
  • MVNO
  • SIM free
  • Freetel
  • ASUS Zenfone

テラダモケイがすごい!ミニチュア模型のタイムラプス動画

テラダモケイのつくる動画が神がかっていたのでご紹介。タイムラプスの手法を上手く活かした例として、参考になります。

  • timelapse
  • video

業務委託での時間の使い方とコミット量について

「業務委託で開発をお手伝いいただく時に思うこと」という記事を読んで、デザイナーとして業務委託時にどの点に注意して契約をしてるかをまとめました。

  • design
  • money
  • time management

S3+EC2 NginxでBasic認証をかける

AWS S3+Route53+EC2Nginxでベーシック認証をかけたので、そのハマりどころと手順・方法をまとめました

  • ec2
  • aws
  • nginx
  • s3
  • basic auth

SONY α6300でのタイムラプス撮影でRAW + JPEGで間違えて撮影した時のファイル管理方法

SONYのα6300でタイムラプスを撮ったとき、間違えてJPG + RAWで撮影してしまうことがある。その際に僕がやってる、ファイル整理・管理の方法をまとめました。

  • SONY
  • α6300
  • timelapse
  • photo management
  • commandline

S3 CloudFrontで運用するブログの写真管理方法

そろそろSONY α6300で撮影した写真や動画もあげたいので、比較的データ量の重いコンテンツをS3やCloudFrontの費用的な面でどう対策するかを書きました。

  • photo
  • video
  • Flickr
  • AWS
  • CloudFront
  • S3
  • α6300

Amazon Certificate ManagerのTokyo RegionでSSL取得してもCloudFrontでは表示されない

ACMの東京リージョンでSSL証明書を取得してもCloudFrontで表示されない問題を解消したのでそのハマりどころをまとめました。ハマった時は「思い込み」をどれだけなくして問題を解くのが大事だと気づきました。

  • AWS
  • CloudFront
  • Certificate Manager
  • SSL

AWSのCertificate Manager・CloudFront・S3・Route53でSSL証明書の設定まとめ

AWSのCertificateManager・CloudFront・S3・Route53を使ってCDNとSSL証明書を同時に設定したので、その時にハマったポイントや調べた内容などを詳しくまとめました。

  • AWS
  • Route53
  • Certificate Manager
  • CloudFront
  • CDN
  • S3
  • matome

東京でタイムラプスする時におすすめの場所まとめ

東京でタイムラプスを撮る時におすすめの場所をまとめています。行ってみてよかった場所を随時更新しています。

  • timelapse
  • tokyo
  • shoting spot

スプレッドシートでNot Equalを出す方法

Googleのスプレッドシートでnot equalが使えなかったので、その方法をメモ

  • input

現行Photoshop未対応のSONY a6300のraw現像の方法とACR 9.5のアップデート

SONY a6300のRAW現像が自分のPhotoshopに対応していなかったので、その対策とアップデート方法をまとめました。

  • input
  • camera
  • α6300
  • sony
  • raw

自転車のスポークを自分で交換した話

自分でスポークを治す必要が出たため、そのリサーチした内容と買ったものなどをメモしています。次回から自分でタイヤ交換・スポーク交換ができます。

  • input

お名前.com、さくらのレンタルサーバー、GoogleAppsの設定方法とダウンタイム

Google AppsのMXレコードを変更する際に生じるダウンタイムをいかに吸収するか、という話。

  • input

ネットのスピードを測るにはNetflix製「Fast.com」に行けばいい。

ネットのスピードを測るのであれば、fast.comとブラウザに打ちこむだけでいい。

  • input
  • lifehack

山田胡瓜「AIの遺電子」という未来

「AIの遺電子」が面白すぎたので、山田胡瓜さんのインタビューとかウェブに上がってる読み切りマンガを漁ってみました。

  • input

Googleの人工知能AlphaGoがついに囲碁のプロ棋士に勝利

Googleの人工知能AlphaGoがプロの囲碁棋士を破ったとのこと。今年一番の衝撃でした。。

  • google
  • ai

2015

2015年の整理と、2016年の先読み

  • life
  • lifehack
  • input

新しいことを学ぶ必要はないので、これからはスルー力を身につけたほうがいい

「新しいことを学ぶのは、それほど重要じゃない」という記事がMediumに上がっていたので取り上げてみます。情報社会に求められる「スルー力」について。

  • input
  • life

El Capitan対応!MacでSDカードをフォーマットする方法

Mac(OS El Capitan)でのSDカードフォーマット化に手間取ったので、その方法をまとめました。

  • Mac

フォントの使用状況をフォント名から検索することができるサービス「FontReach」

新規LPを作る時とか、新しいサイトを作る時、フォント選びについては迷うもの。自分が使おうと思ってる書体がウェブでどのように使われているのかを見るのはいいことだと思います。そんなサービスのご紹介。

  • typography
  • design
  • input

PDFを圧縮させるならこのサービス!Smallpdfが生活を救ってくれる。

PDFを圧縮させるときにつかえるサービス、決定版です。

  • input
  • lifehack

デザイナーとしてブログを続ける価値とか理由とか

デザイナーとしてブログをちゃんと始めてからほぼ2ヶ月ぐらいたったので、そのメリットを書き出してみる

  • design
  • lifehack

イラストレーターでグリッドを引く方法

イラレを使ってグリッドを作る方法をまとめました。毎回忘れるので、メモしておきます。グリッドを勉強する上で参考になるオススメの本も紹介してます。

  • typography
  • input

HugoのGo Templateでナビゲーションバーを管理する方法

HugoのGo Templateを活用して、config.tomlに書かれたデータからナビゲーションアイテムを生成する方法を書きました。

  • hugo
  • frontend

Sassの@importで生CSSをインラインで読み込む方法

Sassファイル内でcssをインポートしてもインライン展開してくれない問題を解決しました。結論から言うと、Bower install時に拡張子を.scssにスクリプトで自動的に書き換えるだけ。その方法とハマりどころを。

  • Sass
  • Bower
  • shell script
  • frontend

まだWordpress使ってるの?CMSとしてのStatic Site Generatorは、Vox Mediaがかなり進んでる

今はJeckill, Middleman, Hugoなどの静的サイトジェネレーターが熱いみたい。NestやMailChimp、Vox Mediaもすでに移行してるらしい。

  • Hugo
  • Middleman
  • frontend

デザイナーが仕事中に聞いてる音楽:今ジャズ

仕事中やリフレッシュの時によく聴く曲を厳選してみました。2014年から今年にかけては、自分の音楽消費スタイルが変わった年でした。

  • music
  • design
  • input

全部無料!商用利用可能なフリー写真素材サイト「Pixabay」

これ全部無料でいいのかな?と不安になるぐらいクオリティの高い商用利用可能な写真素材がダウンロードできるサイト。すべてクリエイティブ・コモンズ・ゼロ・ライセンスです。

  • design
  • app
  • photo
  • frontend

HugoとBrowserSyncで開発が爆速に

HugoとGulpがうまく共存できたところで、次なる高みを目指すべくBrowser Syncを取り入れました。開発が超快適になったので、その全容をご紹介します。

  • Hugo
  • Gulp
  • Middleman
  • frontend

蜘蛛を殺してはいけない理由

「蜘蛛を殺してはいけません」とよくばあちゃんに言われたものです。でも、なんで殺してはいけないか知ってましたか?「なぜ?」と子供に聞かれても答えられるように調べてみました。

  • input
  • lifehack

HugoとGulpでフロントエンド開発はもう十分じゃないか

ここ数日HugoとGulpを駆使してこのブログのデザインを作り変え、この後の開発はもう HugoとGulpだけでいいんじゃないかと思えてきたので、その辺りの思考をまとめました。

  • Hugo
  • Gulp
  • design
  • frontend

HugoとGulpを共存させて、ブランドデザインを刷新した

静的サイトを作るのに特化したHugoと、タスクランナーの代名詞であるGulpを共存させた話です。欧文書体をSabonに変えたので、最後にちょろっとその話も。

  • Hugo
  • Middleman
  • design
  • typography
  • frontend

Airbnbのゴミ出しには「53cal」が便利。地域のゴミ出しとリサイクルのスケジュールについて

Airbnbのゲストから「ゴミ出し」について聞かれました。地域によって違うゴミ出しですが、ちゃんと意識しておらず即答できませんでした。全体像を把握しておかないといけないと思い、調べたのでまとめます。

  • Airbnb

Hugo入門 その3、ゼロからテンプレート作成後半

MiddlmeanからHUGOへの完全移行が終わり、ある程度テーマの扱い方に慣れてきたので、ハマったことを中心にここいらでまとめてみる。

  • Hugo
  • Middleman
  • frontend

Airbnb、特区政令改正で東京都全域が特区になったそうです

知らないうちに東京都全域が特区として認められていましたので備忘録としてメモしておきます。

  • Airbnb

Hugo入門 その2、ゼロからテンプレート作成前半

前回はMiddlemanからhugoへの移行まで行かずでしたが、今回もそこまでは行かず。今回は、Hugoのテンプレートになれる作業を、公式のチュートリアルに沿ってやってみました。

  • Hugo
  • Middleman
  • frontend

スタビライザー入門その2、flycam c5の朝練

flycam c5の朝練を始めたので、定期的にポストしていきたいと思います。毎回新たな発見があるので面白い。

  • DSLR
  • video
  • stabilizer
  • post processing

Hugo入門 その1、概要のメモとMiddlemanからの移行を考える

去年からやるやる言っててやってなかった静的サイトジェネレーターであるHugoへの移行を完了させるまでをメモしました。Middlemanからの移行です。

  • Hugo
  • Middleman
  • frontend

スタビライザー「Flycam C5」を購入したので早速レビュー

ついに買いました!Youtubeで話題のスタビライザー「flycam C5」のファーストレビューです。慣れるまでもう少し時間がかかりそうだけど、効果は期待通りだったので、買って間違いありませんでした!

  • DSLR
  • video
  • stabilizer
  • post production

スタビライザー入門その1、Davin Grahamからオペレーションを学ぶ

Davin GrahamというYotuberからスタビライザーの使い方を学びます。彼の経歴もちょろっとご紹介。いやー、本当にいい人です。

  • stabilizer
  • video
  • DSLR
  • post processing

都内自転車通勤用に購入したsaito import 3Dパッドレーサーパンツ

チャリ通を初めてから5年以上が経つので、その便利さをまとめてみました。冷静になって交通費を計算したら多分皆さんビックリします。

  • lifehack
  • money
  • bike

一眼レフ動画用おすすめスタビライザーの価格・用途別まとめ

一眼レフ用スタビライザーの購入に際して、各社のおすすめスタビライザーを比較してまとめました。ポイントは、ジンバル、値段、耐荷重、重量と安定感。

  • stabilizer
  • video
  • DSLR
  • post production

Middlemanでタグにリンクを貼る方法

ずっと悩んでいて放置気味だったMiddlemanのタグへのリンクを追加しました。その方法をメモしておきます。

  • web
  • Mac
  • frontend

Zeplinはデザイナーとエンジニアのコミュニケーションロスを劇的に改善してくれる

日夜繰り広げられるエンジニア対デザイナーの修羅場を解消してくれる素敵サービスです。Sketchファイルを読み込ませるだけで、自動的にデザインガイドを作ってくれます。

  • design
  • Mac
  • frontend

予約管理・顧客管理サービスまとめ!2015年版

予約サービスを死ぬほどトライしたので、そろそろまとめようかなと思い文章にしてみました。ニーズによって刺さるポイントはもちろん違いますが、参考になればこれ幸い。

  • app
  • lifehack

Popcorn Timeを巡る冒険、現状をまとめてみた

Popcorn Timeという「海賊版Netflix」が著作権問題含め各所で最近話題になってます。その作者の素顔にも迫りました。

  • app
  • web
  • input

Right Fontがいい感じ、Macでのフォント管理の不満を解消しよう

フォント管理に対する不満は結構ありました。そこに新しい兆しが。Right Fontはデザイナー待望のアプリなのではないでしょうか。

  • design
  • Mac
  • typography
  • frontend

AdobeのAcumin: 読むためのHelvetica

Adobeの最近の動きが面白いです。先日、Adobeが公開したAcuminというトランジショナルサンセリフのご紹介。

  • design
  • typography

コンサルタントの秘密、に乗っている『ラズベリージャムの法則』に出くわす

「コンサルタントの秘密」に乗っている『ラズベリージャムの法則』。これって結構いろんなことに当てはまるよなーと。

  • book
  • lifehack
  • input

Airbnbで良レビューを集める方法とウェルカムガイドの作り方

勝手のわからないところに飛び込むのは、勇気がいるもの。その不安を取り除いてあげるためにウェルカムガイドを作りましょう、という話です。網羅すべき情報のリストも公開。

  • Airbnb
  • UX

First Aidって?ディスクユーティリティーの「ディスクのアクセス権の検証/修復」は変更されました

月に1度やってるMacのメンテナンス方法のうちの一つとしてやってた「ディスクのアクセス権の検証/修復」。それがディスクユーティリティーからなくなっていたので対処法探りました。

  • Mac

東京庭園美術館の贅沢な時間を知らない人はかわいそう

東京庭園美術館のオットークンツリ展に行ってきました。すごくゆっくりした時間が流れていて、ぜんぜん東京っぽくない感じでした。忙しさから逃げたい人にオススメ。

  • design
  • input

波のような日本の文様、青海波のルーツは実は中国に

日本の文様パターンをまとめていこうと思います。今回は日本らしさの象徴、青海波を取り上げます。これ、日本じゃなくて中国の文様だって知ってました?

  • design
  • pattern
  • input

Airbnbを1ヶ月運用して稼ぐまでに整えたこと3つ

Airbnbを運用するために注意した、大切なポイントをまとめました。

  • Airbnb

スマホやオフィスワークが原因でストレートネックに?!原因と対策

知り合いが頚椎症だということで、最近良く調べるのでその内容をまとめておきます。ストレートネックは現代病だそうで、皆さん注意しましょう。

  • lifehack

【デザイン業界は必見】フォローしておきたい世界のデザイナー23人

デザイナーの人は、もうこれだけフォローしておけばいいんじゃない?というリストをwiredが紹介していたので、ピックアップしてみました。Instagramをブログっぽく使ってるのは結構びっくりしましたねー。ということで、要チェックです。

  • design
  • frontend

17万円の節約!自転車通勤のススメ、都内の移動は交通費が高すぎ!

チャリ通を初めてから5年以上が経つので、その便利さをまとめてみました。冷静になって交通費を計算したら多分皆さんビックリします。

  • lifehack
  • money

Airbnbを始めるために合鍵つくったらめちゃ安かった話

あらゆるトラブルを避けるべく、Airbnb用に合鍵を作った。その際の手順と感想をメモ。合鍵ってめちゃ安い!

  • Airbnb

IFTTTで、jekyllやmiddlemanなどのブログ記事をRSS経由でTwitterに自動投稿

静的ページを生成してくれるjekyllやmiddlemanなどでもIFTTTを使ってTwitterへの自動投稿ができたので、その方法をご紹介。

  • design
  • Mac
  • frontend

シリコンバレー社長が教える、30歳までやるべきこと36個 — Sam Altman

僕の好きなSam Altmanの素敵なエッセーです。

  • SamAltman

Airbnbで稼ぐコツ、専門家のアドバイスまとめてみた

もうすぐオリンピックが開催されることもあったりで、外国人観光客が年々増加傾向にある日本。近々Airbnbでのリスティングを検討中なため、効率よく宿泊者を増やすコツを探ってみました。

  • Airbnb
  • lifehack

kickflipで猫背対策&タイピングスピード向上!Macbook Pro 15インチ用の購入レビュー

kickflipというMacbookの裏面につけるガジェットを購入したので、その紹介を。Macbookに角度が付けられるので猫背対策に最適で、個人的におすすめです。

  • Mac

もしグラフィックデザインの学生に、何かアドバイスをするとしたら。 — Frank Chimero

The Shape of Designで有名なFrank Chimeroさんの記事を訳しました。彼のポストの中で、僕がいちばん好きな記事です。

  • FrankChimero

慢性的な後鼻漏?いつも喉に鼻水が絡む原因と対策・治療法

朝起きてから寝るまで。つねに喉に鼻水が絡んでいる感じの人、いないでしょうか。それは痰じゃなくて、後鼻漏かもしれません。原因と対策・治療方法を調べました。

  • lifehack

AppCleanerは必須!アプリを消すときに、不要なファイルもまとめて削除してくれる無料アプリ

ゴミ箱にアプリを放り込むだけじゃ、綺麗には消えません。ハードディスクの容量を増やすためにも、AppCleanerで根こそぎ削除しましょう。

  • Mac
  • app
  • lifehack

Googleの利用規約、怖っ!コンテンツに関する恐ろしい部分をまとめてみた

「ただより怖いものはない」という言葉がある通り、無料で利用できるものの裏には気づかないうちに自分で提供しているものがあります。今回はGoogleの利用規約を見てみました。

  • google
  • photo
  • blog

Googleフォトに無料で写真を無制限に保存してそれをブログで使う方法と、メリット・デメリット

無料・無制限で保存できるGoogle Photosにあげた画像をブログに貼ることができたので、その方法と、メリット・デメリットをご紹介。自分のお金を払って自前サーバーから画像を配信する必要がないなんて最高!と思いがちですがもちろん見逃せないデメリットも。

  • google
  • photo
  • blog

Big Thinker、天才に迫る1時間半のインタビュー

少し昔の天才に出会いたい。そんな時お勧めな動画が、「Big Thinkers」というアメリカのテレビ番組です。YouTubeに上がっているのをまとめました。

  • video
  • movie
  • input

無料高画質画像が1万枚以上使い放題!「Free & Premium stock photos」がすごい

まだクリエイティブ・コモンズとかでライセンスフリーの画像を探してるんですか?そんな人は、1万枚以上の著作権なし無料の高品質画像が使い放題の「Free & Premium stock photos」を使いましょう。

  • Mac
  • design
  • photo
  • tool
  • app
  • frontend

OKI 301dnのプリンターが、Yosemite 10.10.5でプリンターにつながらない場合のドライバーの場所と対処法

OKI 301dnというプリンターを使っている人で、Yosemite 10.10以降を使っている人がハマりやすい「プリンター繋がらない問題」を解決する方法です。

  • Mac

Finderの調子がおかしい、Dropboxで同期されたファイルが表示されない

Finderの調子がおかしい時の最短の対処法を紹介します。今回は、「ターミナル」を使った方法と、「Doc」から直接再起動させる方法をご紹介。ターミナルの存在に慣れていない人も安心して対処できます。

  • Mac

iPhoneとsuicaの電磁波干渉を防止するための読取りエラー防止シート(attach)がめちゃ便利だった

iPhoneとSuicaが干渉して読み取りエラーになって困る。。それ、電磁波干渉防止シートで解消できます!最近買った中で実用性が高く、購入以来快適な通勤生活が送れているため、ご紹介します。

  • iPhone
  • lifehack

「HanyeTech iPhone6 4.7インチ用液晶保護強化ガラスフィルム スマートフォン ガラスフィルム 硬度9H 超薄0.33mm 2.5D ラウンドエッジ加工」をしばらく使った感想。

iPhoneの画面が大破したため、修理に出したら13,000円も支払うことに。。もう同じミスは避けたいので、保険として割れやすいiPhone6に最適と噂のガラスシートを購入しましたので、そのレビューです。

  • iPhone

カルピス L-92をAmazon定期便で安く購入!花粉症対策にも

「弁当男子」の記念すべき初投稿です。ゆるりとやっていきますので、皆様どうぞよろしくお願いいたします。今回は、「弁当男子」の取り上げる生活に密着したテーマのご紹介と、日々愛飲しているカルピス「L-92」のご紹介です。

  • lifehack