whiskers
メニュー

auhtor

Ryuichi Nonaka

プロフィール

@nukos_

記事

bower-rails から yarn への移行

  • yarn, nodejs

CSS の状態管理にカスタムデータ属性を使う

  • CSS, SCSS, JavaScript, jQuery

Wercker の step-s3sync で起こった 「Parameter problem: Invalid source/destination」エラーの直し方（小ネタ）

  • Wercker, Amazon S3

Browserify と browserify-shim でグローバルオブジェクトを扱う

  • Browserify, Gulp

Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った

  • Middleman 4, Gulp

gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）

  • Font Awesome, Gulp, Sass

Amazon WorkMail で独自ドメインなメールアドレスを作る

  • Amazon WorkMail

Wercker CLI で pipeline をローカルで実行する

  • Wercker, Docker

Wercker step-s3sync でファイル名に日本語を含んでいる場合に Sync できない問題の解決方法（小ネタ）

  • Wercker, Amazon S3, Middleman 3

Middleman 4 で middleman-syntax を使った Syntax Highlight（小ネタ）

  • Middleman 4

Sass 関数で Material Design のようなシャドウ表現

  • Sass, Design, Material Design

Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル

  • Middleman 4, Gulp, Sass, Browserify

AWS Certificate Manager で 無料の SSL サーバ証明書を取得して Amazon S3 で運用中のブログを HTTPS 化してみた

  • AWS Certificate Manager, Amazon CloudFront, Amazon S3

Middleman 4 の External Pipeline（外部パイプライン）を試す

  • Middleman 4, Gulp, Browserify

Gulp から Watchify と Browserify を使う

  • Gulp, Browserify

Watchify を使った Browserify の 変更監視と自動バンドル

  • Browserify

ServerlessConf Tokyo プレカンファレンスに参加してきた

  • Serverless

Gulp から Browserify を実行する

  • Gulp, Browserify

Browserify を試してみる

  • Browserify

macOS Sierra をインストールしてからやったこと

  • macOS Sierra

Middleman 4 で middleman-blog をインストールしてみる

  • Middleman 4

Middleman 4 をインストールしてみる

  • Middleman 4

ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

  • AngularJS 1, Bootstrap 3, Middleman 3

IE8でもBourbonのNeatを使えるようにする方法

  • Bourbon, Neat

初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

  • Middleman 3

remを使ったVertical Rhythm

  • Sass, Design

Google AdWordsを効果的に運用するための考え方と基礎知識

  • Google Adwords

ウェブデザイナーがはじめるAngularJS：コントローラ間の連携

  • AngularJS 1

魚を楽しく食べるハック！魚ッカソンに行ってきた #gyockathon

  • Invision, Sketch 3, gyockathon

ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

  • AngularJS 1, Middleman 3

AWS Elastic Beanstalk のデプロイ環境と基礎知識

  • AWS, AWS Elastic Beanstalk

週刊 マイ3Dプリンター 17号：Blenderでデフォルメした猫の顔

  • 3D CAD, 123D Design

IFTTTを使ってTumblrにスクラップブックを作る

  • Tumblr, IFTTT

ウェブデザイナーがはじめるAngularJS：$httpProviderのInterceptorsを使ってリクエスト・レスポンスを操作する

  • AngularJS 1

Modular Scaleを使ったフォントサイズの指定

  • Sass, Design

週刊 マイ3Dプリンター 16号：Nゲージのジオラマの家

  • 3D CAD, 123D Design

Tesselで遊ぶ：Tesselからツイートできなかった話

  • IoT, Tessel, Node.js

Tesselで遊ぶ：主なコマンドとスクリプトをフラッシュメモリへ書き込む

  • IoT, Tessel, Node.js

週刊 マイ3Dプリンター 15号：文字入りのブタの貯金箱

  • 3D CAD, 123D Design

Tesselで遊ぶ：Wi-Fiにつないでみる

  • IoT, Tessel, Node.js

週刊 マイ3Dプリンター 14号：かわいいクマのクッキー抜き型

  • 3D CAD, 123D Design

Tesselで遊ぶ：気候モジュールのサンプルコードを動かしてみる

  • IoT, Tessel, Node.js

Tesselで遊ぶ：HELLO, (PHYSICAL) WORLD!

  • IoT, Tessel, Node.js

ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理

  • AngularJS 1

ウェブデザイナーがはじめるAngularJS：イベント系ディレクティブを試す

  • AngularJS 1

初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法

  • Middleman 3

週刊 マイ3Dプリンター 13号：メッシュ模様の小物2点

  • 3D CAD, 123D Design

ウェブデザイナーがはじめるAngularJS：DOM操作系ディレクティブを試す

  • AngularJS 1

ウェブデザイナーがはじめるAngularJS：ngCookiesやngStorageを使ったCookieやlocalStorageへのアクセス

  • Middleman 3, AngularJS 1

ウェブデザイナーがはじめるAngularJS：AngularUI Routerの基礎知識

  • Middleman 3, AngularJS 1

ウェブデザイナーがはじめるAngularJS：ngRouteを使ったシンプルなViewの切り替え

  • Middleman 3, AngularJS 1

InVisionの新機能：プレゼンテーションやレビューに便利なTour Point

  • Invision

はじめてのDocker：Docker上で動かしているMiddlemanにアクセスしてLiveReloadを使う（小ネタ）

  • Docker, Middleman 3

週刊 マイ3Dプリンター 12号：背もたれのついた椅子

  • 3D CAD, 123D Design

ウェブデザイナーがはじめるAngularJS：MiddlemanとBowerで作るAngularJSアプリ開発環境

  • Middleman 3, AngularJS 1

ウェブデザイナーがはじめるAngularJS：SPA（Single Page Application）をはじめる前に

  • AngularJS 1

週刊 マイ3Dプリンター 11号：パーツを組み上げて作る丸テーブル

  • 3D CAD, 123D Design

ウェブデザイナーがはじめるAngularJS：AngularJSをはじめる

  • AngularJS 1

はじめてのDocker：ウェブデザイナーでも覚えておきたいMac向けDocker環境構築と使い方

  • Docker, homebrew, VirtualBox

Sketchファイルを使ってInVisionでモックを作る時に知っておきたいこと（小ネタ）

  • Invision, Sketch 3

初めてのMiddleman：多言語化 - 言語ファイルの作成とヘルパーの埋め込み

  • Middleman 3

初めてのMiddleman：Middleman-Titleでタイトルタグを手軽に設定する

  • Middleman 3, blog

初めてのMiddleman：Middleman-OGPのOGP画像指定を相対パスで設定する

  • Middleman 3, blog

初めてのMiddleman：Middleman-OGPでMiddleman-BLogにOGPを設定する

  • Middleman 3, blog

Sketch 3のページ・レイヤーを自在に操るショートカット

  • Sketch 3

Sketch 3.3 でできるようになったこと

  • Sketch 3

初めてのMiddleman：Gulpを使ってサムネイル画像を生成する

  • Middleman 3, Gulp, blog

初めてのMiddleman：Middleman-Blogで記事毎に画像を管理する方法

  • Middleman 3, blog

Modular ScaleとVertical Rhythmを使ったタイポグラフィとレイアウト

  • Design, Sketch 3

週刊 マイ3Dプリンター 10号：組み立て式の携帯ハンガー

  • 3D CAD, 123D Design

InVisionでソースファイルやアセットファイルを同期するInVisionSync

  • Invision, Sketch 3

iOSデバイスでデザインをチェックできるSketch MirrorやSkala Previewとか

  • Sketch 3

AngularJSをはじめる前に - AngularJSに関するサイトやスライドまとめ

  • AngularJS 1

週刊 マイ3Dプリンター 組み立て編：8号から11号までの組み立て

  • 3D CAD, 123D Design

週刊 マイ3Dプリンター 09号：回転とくり抜きで作るティーポット

  • 3D CAD, 123D Design

初めてのMiddleman：Middleman-Syntaxを使ったシンタックスハイライト

  • Middleman 3, markdown

Webサイト立ち上げ時に忘れずにやっておきたいチェックリスト

  • Google Analytics, WebMaster Tools, pagespeed

週刊 マイ3Dプリンター 08号：円形状パターンで作る鳥かご

  • 3D CAD, 123D Design

Prism CSS naming conventions（オレオレスタイルガイド）

  • CSS, Sass, SCSS

週刊 マイ3Dプリンター 07号：オリジナルメガネを作る

  • 3D CAD, 123D Design

週刊 マイ3Dプリンター 06号：iPhoneケースを作る

  • 3D CAD, 123D Design

Sass/SCSSでSMACSS（モジュール・状態・テーマ）を意識した色の管理方法について模索してみた

  • Design, Sass, SCSS

初めてのMiddleman：RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト

  • Middleman 3, markdown

初めてのMiddleman：Markdown EngineをkramdownからRedcarpetに切り替える

  • Middleman 3, markdown

初めてのMiddleman：Middleman-blogでマルチブログを試してSkeletonを作った

  • Middleman 3

初めてのMiddleman：Middleman-blogのシングルブログを前提としたSkeletonを作った

  • Middleman 3

初めてのMiddleman：Middleman Blogの記事データを使いやすく管理する方法

  • Middleman 3

初めてのMiddleman：スケルトンを自作する方法

  • Middleman 3

週刊 マイ3Dプリンター組み立て編 ：6号・7号の組み立て

  • 3D CAD, idbox

初めてのMiddleman：Bowerを使ってjQueryなどのライブラリをロードする

  • Middleman 3, Bower

初めてのMiddleman：アセットパイプラインを使った外部アセットファイルの読み込みと結合

  • Middleman 3

初めてのMiddleman：Helperを使ってGravatarのアイコンを表示する

  • Middleman 3

週刊 マイ3Dプリンター 05号：携帯できる靴べらを作る

  • 3D CAD, 123D Design

週刊 マイ3Dプリンター ：創刊号から5号までの組み立て

  • 3D CAD, idbox

Font Awesomeの感覚でストロークアイコンが使えるWebアイコンフォント Pe-icon-7-stroke

  • Web Icon Font

週刊 マイ3Dプリンター 04号：マトリョーシカを作る

  • 3D CAD, 123D Design

初めてのMiddleman：Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について

  • Middleman 3

初めてのMiddleman：静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ

  • Middleman 3

Gruntでhologramを使う

  • Jekyll, Grunt

初めてのMiddleman：設定について

  • Middleman 3

初めてのMiddleman：HTML/CSS/JS/画像をビルド時に圧縮する

  • Middleman 3

初めてのMiddleman：Amazon S3にビルドされたファイルを同期する

  • Middleman 3, Amazon S3

初めてのMiddleman：サイトにブログ機能を追加する

  • Middleman 3

初めてのMiddleman：データファイルとデータファイルを使った動的ページ生成

  • Middleman 3

初めてのMiddleman：Sass MixinライブラリのBourbon, Neatを導入してみる

  • Middleman 3, SCSS

初めてのMiddleman：SCSSのコンパイルとテンプレートの基礎

  • Middleman 3, SCSS

初めてのMiddleman：パーシャルを使ったコンテンツのモジュール化

  • Middleman 3

初めてのMiddleman：レイアウト機能でレイアウトとコンテンツを分離する

  • Middleman 3

初めてのMiddleman：rbenv, bundler 環境でMiddlemanを使ったHello World

  • Middleman 3

最近構築したWordpressサイトで使っている便利なプラグイン30選

  • Wordpress, wp-cli

jekyllでプラグインを使った動的ページ生成

  • Jekyll

jekyllでタグ・カテゴリ・マンスリーアーカイブページを作る

  • Jekyll

週刊 マイ3Dプリンター 03号：3D CADでオリジナルペンスタンドを作る

  • 3D CAD, 123D Design

週刊 マイ3Dプリンター 02号：3D CADでおもちゃの飛行機を作る

  • 3D CAD, 123D Design

WordpressでMarkdownとSyntaxHighlighter

  • Wordpress, markdown

デアゴスティーニ：週刊 マイ3Dプリンター創刊号を買ってみた

  • 3D CAD, 123D Design

VCCWでファイルがアップロードできなくてはまった話

  • Wordpress, VCCW

jekyllのタグを投稿数で並び替えて表示する

  • Jekyll

Sketch 3でピクセルスナップ（Round）を制御する

  • Sketch 3

Sketch 3でマテリアルデザインベースのオレオレアイコンデザインテンプレートを作ってみた

  • Sketch 3

InVisionでできることまとめ

  • Invision, Sketch 3

WebMaster Tools からダウンロードできるCSVの変動率に注意

  • Google Analytics, WebMaster Tools

Google Web Master Tools APIを使ったCSVのダウンロード

  • Google Analytics, WebMaster Tools

UnixのcatコマンドでCSVファイルを結合する

  • unix

2014年のブログアクセスを振り返る

  • Google Analytics

SCSSでカラーコードをパレット・トーン・ステートで管理できるMixinを作る

  • SCSS

これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す

  • Gulp, Sketch 3, SketchTool

npm v2.1.14で発生したObject.keys called on non-objectエラーの解消

  • npm

これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る

  • Gulp, Sketch 3, hologram, SCSS, CSS

これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る

  • Gulp, Sketch 3

これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る

  • Gulp, Sketch 3, SketchTool

これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化

  • Gulp, SketchTool, Sketch 3

これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ

  • Gulp, AWS, Amazon S3

これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する

  • Gulp, Jekyll, Node.js

これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し

  • Gulp, Sketch 3, SketchTool

これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる

  • Gulp, SketchTool, Sketch 3

これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し

  • Gulp, SketchTool, Sketch 3

これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る

  • performance, Gulp

これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化

  • performance, Gulp

これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる

  • SCSS, Gulp

これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる

  • Gulp

これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化

  • performance, Gulp

これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync

  • Gulp

これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える

  • Gulp

これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え

  • SCSS, Gulp

これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除

  • Gulp

これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割

  • Gulp

これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知

  • Gulp

これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload

  • Gulp

これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動

  • Gulp

これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する

  • Gulp

WP-CLIでWordpressプラグインをインストールし有効化する

  • Wordpress, VCCW, wp-cli, bash

これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる

  • Wordpress, Gulp

これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる

  • Wordpress, bundler, rbenv, nodebrew, Gulp

これからはじめるGulp（0）：アドベントカレンダースケジュール

  • Gulp

Google AdsenseとGoogle Analyticsの連携とツールを試したメモ

  • Google Analytics, Google Adsense

VCCWでWP-CLI（A command line interface for WordPress）を試す

  • Wordpress, VCCW, wp-cli

VCCWでiemotoを使ったWordpressテーマ作成

  • vagrant, Wordpress, VCCW, iemoto, chef

SCSSでカラーコードを管理する関数を作る

  • SCSS, CSS

Amazon VPC上にシンプルなWordpress環境を構築する：Webサーバー構築編

  • AWS, VPC, Wordpress, Amazon EC2

Amazon VPC上にシンプルなWordpress環境を構築する：準備編

  • AWS, VPC, Wordpress, Amazon EC2

BourbonプロジェクトのBittersをとりあえず試してみる

  • Bourbon, Bitters, Sass, SCSS

複数のHexからカラーパレットを自動生成するSketch 3プラグイン「Swatches」

  • Sketch 3

Ruby on Rails：Guardを使ったテストの自動化

  • Ruby on Rails, bundler, rbenv

Byword 2.2でWordpressへのメディアアップロードが可能に、2.3でYosemiteに対応

  • Jekyll, markdown

Ruby on Rails：埋め込みRubyを使った簡単な動的ページを作る

  • Ruby on Rails, bundler, rbenv

ハイパフォーマンス ブラウザネットワーキング ミートアップに参加してきた

  • performance, event

Sketch 3を使いこなすためリンクやメモ

  • Sketch 3

画像の読み込みにどれぐらい時間がかかっているかヒートマップ表示できるChrome拡張機能「Perfmap」

  • chrome, performance

Hello Sketch

  • Sketch 3

カスタムディメンションを使ってGoogle Analyticsに記事の執筆者やカテゴリーを付加する

  • Google Analytics

Ruby on Rails：RSpecとCapybaraで初めてのインテグレーションテスト

  • Ruby on Rails, Rspec

YosemiteとVMWare Fusion 5.0.5からVirtualBoxへの引越し

  • mac

Ruby on Railsで静的ページを作る

  • Ruby on Rails, bundler, rbenv

jekyllでFontAwesomeアイコンを表示するLiquid Tagを作った

  • Jekyll, Ruby

Google AnalyticsとTableauでアクセスの多い時間や曜日を確認する

  • Google Analytics

$ bundle exec を省略する

  • Ruby on Rails, bundler, rbenv

Amazon VPCを作成しEC2にHTTP接続する

  • AWS, VPC

Amazon MFAを設定してみる

  • AWS

Jekyllの関連記事表示とGSLを使った処理時間の短縮

  • gem, Jekyll

Jekyll × Gruntでブログを作ってみた：まずはJekyllだけ動かしてみる

  • Grunt, Jekyll

nodebrewを入れてパッケージ版node.jsを消したらgemが使えなくなった時のメモ

  • npm, Node.js

Jekyll × Gruntでブログを作ってみた：NodeモジュールとGruntタスク

  • Grunt, Jekyll

nodebrewを使ったnode.jsのバージョン管理（Mac）

  • Node.js, Grunt

wgetでWebページをまるごとローカルに保存する

  • wget, homebrew

Google Analyticsで必要な情報をまとめたレポートを毎日配信する

  • Google Analytics

Ruby on RailsアプリをHerokuにデプロイしてみる

  • Ruby on Rails

Googleが提供するWeb分析ツールで何ができるのか

  • Google Analytics, Google Web Master Tools, Google Tag Manager

RSSの更新をMacの通知センターに表示するMonotonyとkimonoを使ったスクレイピング

  • mac, apps

GruntでWordpressテーマの開発環境を作る

  • Grunt, Wordpress, VCCW

Ruby on Railsの最初の一歩

  • Ruby on Rails

Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」

  • vagrant, Wordpress, VCCW, chef

Vagrantの最初の一歩

  • vagrant, Wordpress, chef

Jekyll × Gruntでブログを作ってみた：環境構築編

  • Grunt, Jekyll

GRとEye-fi mobi

  • camera

動画からGIFアニメが作れる「GIF Brewery」

シンプルで効率的なmarkdownエディタ「Byword 2」

  • Jekyll, markdown

Redcarpetを使ったmarkdown記法サンプル

  • Jekyll, markdown