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

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

前回「Hugo入門 その1、概要のメモとMiddlemanからの移行を考える」の続き。今回は、公式のチュートリアル「Creating a New Theme」にそって、テンプレートを作ってみました。その実況中継をメモ的な感じで残します。GoのテンプレートエンジンはHTMLベースで作られていて生HTMLを書くのに近いのだけども、クロージングタグとか打ちたくないのが正直なところ。調べたら、AceとAmberというjadeに近いテンプレエンジンがあるので移行時はそちらを利用する。Hugo 0.14はAmberでエラーが生じているようなので、使うとしたらAceになるけどissueに対しての返信・消化頻度を見てるとこちょっと不安。ちなみにAceは日本の方が開発されてるっぽい。ということで一旦Go HTML/Templateで作ることに。

前提

前段で、ある程度これわかってたほうがいいという前提を書いてあったのでそれを。

  • HTMLに慣れている
  • Markdownをストレスなく書ける
  • Bashコマンドに慣れてる(僕はzsh派)
  • CSSについてはカバーしませーん、とのこと。

「コマンドは“$”から始まって…」とめちゃくちゃ説明の丁寧なHugoのドキュメント、今回もそんな感じで親身に教えてくれます。なお、“:wp”と書かれた部分は「ファイルを保存してね」という意味だと。コマンドラインで使うのは慣れてるけど、ドキュメントでこれ見るのは珍しい気がする。

Skinは、Hugoが一番初めに参照するところ

Skinは、カラーやフォントを制御するCSSのようなもので、アクションやリアクションを制御するJavascriptのようなもの。Skinを作る方法は二つ。

  • Hugoが一番始めに参照するところlayouts/にSkinを格納する
  • themes/に格納する、ただしHugoに常に対応するテーマを教えてやる必要がある

それらの違いはとても微妙。layoutsはテンプレートのアップデートをしない限りカスタマイズが出来ず、themesはそれが簡単にできて他人も人の作ったテーマを使いやすくなる。

hugo server --verboseなどのようにverboseさせて、エラーのハンドリング方法から説明してくれる。なんて丁寧なの。。hugo new site YourDirectoryNAMEで新しいサイトが作成され、その作成されたサイトディレクトリ上でhugo new theme NAMEするとthemeの作成が可能。「作成」と言っても、スケルトンを作成してくれるだけで、作られたディレクトリに各自テンプレートやmarkdownを入れてやる必要がある。このミニマルな感じ、好きだなー。

hugoするとビルドが走ってpublic/に吐き出されるんだけど、css/js/がルートに保存される。普段assets/の中にwebfontsやimagesと一緒に格納している身としては気持ち悪い。が、これも気に入らなければあとで簡単に変更可能。hugo server --watchこれで、編集したら自動でブラウザを更新してくれる。hugo serverしている時に別ターミナルを開いてcat public/index.htmlすれば、HugoによってLiveReloadが足されていることを確認できる。この辺はMiddlemanでも慣れてるのでサラッと飛ばす。

rangeが要

DRY: Partialもできる

Don’t Repeat Yourselfということで、フッターやヘッダーなどのテンプレート共通部分はPartialで一箇所に管理します。最初の切り出しは面倒ですが、初回の手間と今後の修正が一度で済むので、早めにやってしまいます。theme/yourThemeName/layouts/partials/以下に置きます。Middlemanでのテンプレート構造はちょっとややこしくて、メインのからを一つのベースとして作成し、その中にyieldというタグで中身を呼び出すという構造でした。Middlemanをハンバーガーで例えると、バンズがテンプレの基礎枠でパテやレタスなどの野菜がコンテンツにあたります。ビューごとにレイアウトを大きく変える必要がある時は、バンズごと変更したりしてました。一方Hugoはそういうややこしい構造は持ちません。単純に、上から順番に切り刻んでいく感じです。

$ vi themes/zafta/layouts/partials/header.html
<!DOCTYPE html>
<html>
<head>
    <title>{{ .Title }}</title>
</head>
<body>
:wq

$ vi themes/zafta/layouts/partials/footer.html
</body>
</html>
:wq

Aboutページと記事単体ページで出す情報を変えたい時もあります。Hugoは、各ページに対するテンプレートがある場合はそれを、ない場合はthemes/yourThemeName/layouts/_default/single.htmlを参照しページを構築します。この場合、layoutディレクトリに記事単体ページ用のレイアウトをpostディレクトリ内に作ってやれば解決します。themes/yourThemeName/layouts/post/single.htmlという感じ。

Go Template概要

  • 定義されたvariableへのアクセスは{{ foo }}と中かっこで。
  • {{ add 1 2 }}で、定義されたadd functionを呼び出し、1, 2を変数として渡す
  • メソッドとフィールドはドット(.)表記でアクセス。{{ .Params.bar }}
  • 小括弧でアイテムをグルーピングできる。 {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
  • {{ partial "header.html" }}でパーシャル
  • rangeを多用する。{{ end }}でクローズする

コンテキストを使う

{{ range array }}
    {{ . }}
{{ end }}

valueを宣言

{{ range $element := array }}
    {{ $element }}
{{ end }}

keyとvalueを宣言

{{ range $index, $element := array }}
    {{ $index }}
    {{ $element }}
{{ end }}

iforなどの条件分岐ももちろん存在する。すべてendでクローズ。

以下はfalseを返す。 - false - 0 - array, slice, map, stringの数がゼロのとき

if文

{{ if isset .Params "title" }}
    <h4>{{ index .Params "title" }}</h4>
{{ end }}

if … else文

{{ if isset .Params "alt" }}
    {{ index .Params "alt" }}
{{ else }}
    {{ index .Params "caption" }}
{{ end }}

and / or 文

{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr") }}

GoはHTMLのコメントを排除してしまうみたいなので、エスケープする必要がある。

{{ "<!--[if lt IE 9]>" | safeHTML }}
  <script src="html5shiv.js"></script>
{{ "<![endif]-->" | safeHTML }}

なおすべてのダブルクオート文をエスケープしなくとも、backtic(`)を使えば以下のようにエスケープ可能

{{ `<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->` | safeHTML }}

Go templateではContextを表示するのにドット{{ . }}を使う。

  1. コンテクストによって変わる変数を使うとき

    {{ $title := .Site.Title }} {{ range .Params.tags }}

  2. {{ . }} - {{ $title }}
  3. {{ end }}

この場合は、.がtagNameに変わる感じ。

  1. $を使うと、global conextにどこからでもアクセスできる。

    {{ range .Params.tags }}

  2. {{ . }} - {{ $.Site.Title }}
  3. {{ end }}

Hugoのパラメーター

markdownで書く場合、Table of content (TOC)を自動的に作ることができる。frontmatterでそれらをオン・オフする必要がある。

---
title: "Permalinks"
date: "2013-11-18"
aliases:
  - "/doc/permalinks/"
groups: ["extras"]
groups_weight: 30
notoc: true
---

コードの中身はこんな感じ

{{ if not .Params.notoc }}
  <div id="toc" class="well col-md-4 col-sm-6">
  {{ .TableOfContents }}
  </div>
{{ end }}

一通り見てみて

まだ手を動かせていないので、テンプレ作りまで行けてない。。が、全体の構造と思想を理解した気がする。拡張性を持たせるにはGo言語をかじった方が柔軟性が上がりそうなので、Go入門はこれを見た方がいいと各所で話題の「はじめてのGo―シンプルな言語仕様,型システム,並行処理」の一章を見てGoの文化に触れた。もっと深く惚れるんだけども、ただHugoでブログ作りたいだけなので、そこはまた今度戻っていくとする。もっと掘りたい人は「Go言語の初心者が見ると幸せになれる場所」を見ると良さそう。

以下、続編をちょいちょい書いています。

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