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

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

Sassの@importを使うと、バラバラのsassファイルを一つにまとめてコンパイルしてくれます。モジュールごとに区切れば、もうスタイルシートの管理で憔悴することはないこともないかもしれません。そのいい例が、Bootstrapですね、もう@importの嵐です。これに倣って、ガシガシ@importしていくと、ふと問題にぶつかります。そう、SassはCSSをインラインで読み込まないのです。例えばstyle.sass内で他のsassファイル同様に@import "normalize.css"とすると、@import url('normalize.css');で展開されてしまいます。これは、HTTPリクエストが増幅するしうまく渡してやらないとpathが通らないので、全くイケてないというかダサいです。

Sassが吐き出すstyle.cssの中に、normalize.cssの中身がインラインで展開されるのが、今回目指すことになっている理想の世界です。拡張子を.scssに変えてやるだけで解決するのですが、毎回手動で変更などやってられないので違う方法を探りました。結論から言うと、BowerのInstall and Uninstall Hooksを使います。まあ、有名なライブラリは大抵Bowerで見つかるので、90%ぐらいのニーズは解消できるかと。

以下の前提で進めます。

  • Bowerをグローバルにインストール済み
  • bower install hogeで、インストールされた生CSSが対象
  • 実装例ではbower install normalize-cssをインストールする流れで説明

では進めます。

Bowerをグローバルにインストール

何はともあれ、Bowerをインストールします。公式の手順でグローバルにインスコ。

BowerのHookをシェルスクリプトに書く

Bowerのhookを利用して、bower install / update時にシェルスクリプトを発動させます。以下、.bower-postinstall.shとして保存するファイルの中身です。bashを使う宣言を書いてから、以下本題の.css.scssに指定し直します。ちなみに#!で始まる先頭の部分は「シバン」と呼ばれるらしく、スクリプトを実行するためのインタプリタを指定しているとのこと。要は「このシェルスクリプトは bash として解釈して実行するよ、zshじゃないよ」と、宣言するためのもの。一行目に書くのが要。

#!/bin/bash

# Rename .css file to .scss
mv assets/vendor/normalize-css/normalize.css assets/vendor/normalize-css/_normalize.scss

僕はbowerの設定ファイル.bowerrcにて、コンポーネントのインストール先をassets/vendorにしていますが、そこは達成したい目的によって違います。僕は純粋にプロジェクトのルートディレクトリにディレクトリを増やしたくなかったのでassetsディレクトリ内に指定しました。(ここでjavascriptやstylesheetを管理しています。)人によってはmv bower_components/以下略になると思う。そこは適宜こことかここを見て設定してください。

実行権限を付与する

これだけでも動く人は動くのかな?僕の場合は動かなかったので、シェルスクリプトの出番です。ls -l bower-postinstall.shでbower-postinstall.shに付与されている各種権限を見てみます。シェルスクリプトの勉強、と思えばテンションが強制的に上がりますね。ls -lコマンドで、ファイルの実行権などの詳細情報が見れます。ちなみに、lsに付与するオプション-l--format=longの略っぽい。ファイルの詳細も同時に表示する時に使うとな。僕の場合は以下のように表示されました。

$ ~/bentodanshi.co% ls -l .bower-postinstall.sh
-rw-r--r--  1 name  staff  227 11  9 15:00 .bower-postinstall.sh*

-rwとは、閲覧権限まで付与されているという意味です。これで分かるのは、実行権限である-xが付与されていないということ。これが原因です。以下のコマンドで、実行権限を付与します。

$ chmod +x .bower-postinstall.sh

ちなみにchmodとはchange modeの略。ファイルモードを変更するのに使われます。戦隊モノっぽい雰囲気があるなと、勝手に解釈してます。これがうまく通らない場合は、この記事では手に負えないのでここを見て設定を再検討してください。晴れてchmodコマンドが実行された人はもう一度ls -l .bower-postinstall.shをすると以下のように見えているはず。

$ ~/bentodanshi.co% ls -l .bower-postinstall.sh
-rwxr-xr-x  1 name  staff  227 11  9 15:00 .bower-postinstall.sh*

こうなれば付与されています。実行権限に当たるrwxが書かれてますね。(行の一番最後にある*は対象ファイルに実行権があることを示しているようですが、設定ファイルによっては表示されないそう。)これで準備は整いました。

.bowerrcのscriptにてpostinstallからbower-postinstall.shを呼ぶ

前段で.bower-postinstall.shがちゃんと実行権限が付与されていることを確認してから、以下、.bowerrcのscriptから、bower-postinstall.shを呼び出します。.bowerrc内に以下を書き込みます。僕は先ほども説明した通り、プロジェクトルートにファイルを分散させたくないためbower iassets/vendorにインストールされるように指定しています。これでinstall後に.bower-postinstall.shが実行されるようになりました。

{
  "directory": "assets/vendor",
  "json": "bower.json",
  "scripts": {
    "postinstall": "./.bower-postinstall.sh"
  }
}

bower installしてscssになってるか確認する

あとは、単純にbower update.bower-postinstall.shが走って.scssが生成されるはずです。されない場合は上記に戻って、Path等うまく指定できているかを確認しましょう。それでもうまくいかない場合は、rm -rf assets/vendorでbowerでインストールしたコンポーネントを削除してからもう一度bower iします。(僕はこれでうまく動きました。)何度も繰り返しますが、assets/vendor.bowerrcのdirectoryに記載されたパスです。デフォルトではbower_componentsとかになるはず。適宜変更ください。これでひと段落です。最後に、ちゃんとCSSがインラインで展開されているか、sassが@import(url('normalize.css'))で読み込んでないか、確認して完了です!

もうすぐSassの本家が対応するかも?

この問題はSass本家の「issue #556」にあげられてます。丸っと3年解消されてないっぽい感じ。いろんなオプションを検討しているみたいですが、結局issue放置されてるっぽいので各々が独自の解決策見つけています。sassユーザーならこのスレッド必見。sass本家がうまくその辺カバーしてくれればいいのですが、、、本家がダメだったら多分gulp-ruby-sassもダメだとタカをくくり今回は進めました。(ちょっと調べたけどいい解決策見つからず。)node_sass独自対応してるみたいなのでgulp-sassはうまく通るかも?

基本的にワークアラウンド的なのは上のチケットに書かれていますが、以下にも載ってたので貼っておきます。

Using Bower install hooks to prep vanilla CSS components for SASS workflows

これで皆様の「sassでcssをインラインでインポート展開されない問題」が解消されればこれ幸いです。

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