ブラウザ上でさくっとコードを書いて実行できるCodePen。
せっかく使うならGistとCacherを一緒に使ってコードスニペットを管理しよう。という話です。
知らない人のためにサービスの紹介
CodePen
CodePen - Front End Developer Playground & Code Editor in the Browser
ブラウザ上でHTML、CSS、JSを書いて、その場で実行、確認できるWebサービス。
人の書いたコードに「いいね」やForkができたり、ブログやQiitaにも貼り付けることができるのでSNS的側面が強いです。
Babelや主要なフロントエンドライブラリ（自作ライブラリも可）、CSSプリプロセッサ、HTMLテンプレートエンジンがオプションで選べるようになっているため開発環境を構築せずにコードを試せます。
使い方はこちらが参考になります。
Gist
GitHubが提供するファイル管理サービス。
GitHubはプロジェクト（ディレクトリ）を管理するものですが、Gistはファイル単体を管理します。
こちらの記事が参考になります。
Cacher
旧サービス名GistBox。コードスニペット管理ツールです。
100以上の言語をサポートし、Gistとの連携、チーム共有などの機能があります。
メーラーのようなUIやラベル、言語別での管理、検索ができます。
Webアプリケーションの他にデスクトップアプリがあります。
ぶっちゃけて言うとCodePenだけでスニペット管理はできるのですが、動作が軽快なのとコードの見やすさや検索のしやすさはCacherの方が優れていると思います。
サービスの連携
準備
まず、こちら からGitHubアカウントでCodePenにサインアップ。
つぎに、こちら からアプリをインストールしGitHubアカウントでサインイン。もしくはこちらのWebアプリからサインインしてください。
使ってみる
CodePen上でCreateからNew Penを選択しエディタ画面を開きコードを書きます。
書き終わったら右下の Export から Save as GitHub Gist を選択します。
別ウィンドウでGistの画面が開きます。
概要が書かれたMarkdown、HTML、CSS、JS、それと読み込んだライブラリのリンクが出力されました。
Cacherアプリを開いてみます。
自動でコードが同期されています。
コードの編集
保存されたコードはCodePen、Gist、Cacherのどこからでも編集することができます。しかし、Gist、Cacher間は同期していますが、CodePen、Gist間はCodePenからの出力のみで一方通行です。なので、3つのサービスでコードを揃えたい場合はCodepenで編集後 Save as GitHub Gist でGistを上書きする必要があります。
以上、CodePenでコードを試す -> Gist に保存する -> Cacherから参照する。の流れでスニペット集を活用すると便利。という話でした。