LoginSignup
11
7

More than 5 years have passed since last update.

ぼっち(´・ω・`)Advent Calendar 2018Day 6
@ozotain日鉄ソリューションズ株式会社

codepenでライブラリ利用サンプルを作ってQiitaに埋め込むまでの手順解説

Last updated at Posted at 2018-12-06

概要

ぼっち(´・ω・`) Advent Calendar 2018の6日目の記事です。
書こうと思っていたElement UIのTipsが既にQiita記事があることが分かり、急遽別ネタを用意しました。
上記Tipsの記事を書こうと準備していた際にcodepenに挑戦したのでそれをまとめます。

codepenとは

  • HTML, JS, CSSの三要素をブラウザ上でコード編集しつつ、結果も表示されて確認もできる、というサービスです

なぜCodepenなのか

  • JsFiddle等似たサービスがありますが、2018/12/06現在は一番人気のサービスのようです

    • google trendの結果

    image.png

  • CDNから読み込みができて、いろんなライブラリが使えます

    • 制約としてライブラリがCDN対応していないと使えません
    • トリーッキーなことをすれば対応させれそうですが、それは後日やってみます

  • Qiitaが埋め込みに対応しています

実際にやってみる

codepenにアカウント用意

  • Qiitaへの埋め込みをする際に必要になります
    • アカウントがないと埋め込み用htmlタグが生成できないみたいです
  • https://codepen.io/accounts/signupからできます
    • 「Free」の「Sign Up」を選びます。

image.png

  • お好きな方法でサインアップしてください

image.png

  • プロフィール入力が出てきますが、無視して右上の「Create」へ移ります

image.png

Penの作成

image.png

  • 「New Pen」を選択します。次の画面が出てきます
    image.png

    • この画面でコードの編集ができ、下半分の白い部分に結果が表示されます

使いたいライブラリの登録

  • image.pngの:gear:を押します。次のポップアップが出ます
    image.png

  • 使うのは
    image.png
    の部分です。
    image.png
    の機能で検索も出来るのですが、出てくるものが古かったりするのでお勧めはしません

  • CDNのURLを張り付けていく

    • 今回はReact, Material-UI, react-visを使ってみます。各マニュアルを読んで、ライブラリのCDNを入力していきます

image.png

  • CSSも同様に入力します

image.png

コード編集

  • 左上image.pngの右の:pen_ballpoint:マークでタイトルをいじれます

  • 各ウィンドウにコードを入れていきます。

image.png

  • コードはここでも見れますし、この記事の一番下にも張り付けてあります
    • react-visでグラフを表示し、material-uiでコンポーネント配置を整えたり、グラフのデータをランダムに変更するボタンを表示しています
    • この記事のメインではないので、細かい解説は割愛します
  • 気を付けるのは、ライブラリの読み込み部分です。ライブラリによって読み込み方が微妙に違うのでマニュアルを読まないといけません
// react-visの読み込み
const {XYPlot,HorizontalGridLines, LineSeries,XAxis,YAxis} = reactVis;
// material-uiの読み込み
const {Button, Grid} =  window['material-ui']

保存とQiitaへの貼り付け

  • 右上のimage.pngを押すと保存でき、さらに右下にいろいろ表示が追加されます
    image.png

    • image.pngを押すと次のポップアップが出ます image.png
    • Copy & Pasete Code　の部分をQiitaにコピペします。Markdownの途中に突然HTMLを張り付けるのは少し違和感ありますが大丈夫です。
    • Qiitaの編集画面ではこんな感じになります。

image.png

  • プレビューにはcodepenの貼り付け結果は表示されないので、限定共有投稿して結果確認します。
  • 貼り付けた結果↓

See the Pen Untiteled by ozota (@ozota) on CodePen.

11
7
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
7