タグ

ブックマーク / www.i-ryo.com (59)

  • 黒い画面だけでWebページを作成-後編:viエディタでコーディング! - クモのようにコツコツと

    「前編」の続きです。前編ではフォルダ作成(mkdir)、ファイル作成(touch)・複製(cp)・移動(mv)・削除(rm)を行いました。後編ではいよいよテキストエディタを使わず、黒い画面だけでコーディングを行います。ターミナルの中に内蔵されているviエディタを使います。 【目次】 作成したファイルの中身はまだない… viコマンドでHTMLファイルを開く iキーで文字を挿入 viエディターを閉じる viエディターで文字を打ち替えみる viエディタでCSSファイルを編集 viエディタでJSファイルを編集 最後に ※参考:前編はこちら 黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成 - クモのようにコツコツと 作成したファイルの中身はまだない… さて、現状では作成したファイルの中身はまだ空です。こちらはテキストエディタでindex.htmlを開いた画面。 これをテキス

    黒い画面だけでWebページを作成-後編:viエディタでコーディング! - クモのようにコツコツと
    idr_zz
    idr_zz 2018/11/27
    ブログ書いた!前回の続きでテキストエディタを使わずに黒い画面だけでWebページが作れるか?作れました!! 黒い画面だけでWebページを作成-後編:viエディタでコーディング! - クモのようにコツコツと
  • 黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成 - クモのようにコツコツと

    「初めての黒い画面」以降、ちょいちょい黒い画面(ターミナル)に触れてきましてだんだんと慣れてきています。ここらで新たな試みをしてみます。そう、私は感じたのです。もしかしてだけど、もしかしてだけど、黒い画面だけで、テキストエディタ使わずにWebページが作れちゃうんじゃないの?と。実際にやってみた。 【目次】 黒い画面(ターミナル)を起動 cdコマンドでデスクトップに移動 mkdirコマンドでディレクトリ作成 touchコマンドでファイルを作成 cpコマンドでファイルの複製 mvコマンドでファイルの移動 rmコマンドでファイルを削除 次回はファイル内を編集!そう、viコマンドならね ※参考:初めてのPython(インストール〜Hello world)と初めての黒い画面 - クモのようにコツコツと 黒い画面(ターミナル)を起動 まずは黒い画面(ターミナル)を起動します。「アプリケーションフォルダ

    黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成 - クモのようにコツコツと
    idr_zz
    idr_zz 2018/11/22
    ブログ書いた!黒い画面だけでWebページを作るっ!!2回に分けて書きます。前編はファイル、フォルダの作成編です。 黒い画面だけでWebページを作成する - 前編:ファイル、フォルダの作成 - クモのようにコツコツと
  • 初めてのRuby:インストール確認、REPL、Hello worldまで - クモのようにコツコツと

    前回、データ分析をしたくなってPythonに挑戦しました。同時にこれまで苦手だった「黒い画面」(ターミナル)にも触れることができました。そしたらなんと、これまでよくわからなかった黒い画面系の記事がなんとなくわかるようになってきました。「サーバサイド四天王」*1の一つ「Ruby」に挑戦してみます!! 【目次】 Macには最初からRubyがインストールされている! 最新版へのバージョンアップに必要なサードパーティツール REPL(自動応答モード)で四則演算 Rubyファイルを作成 rubyフォルダに移動(cd)、パス確認(pwd)、ファイル一覧表示(ls) .rbファイルのRubyプログラム実行 最後に Macには最初からRubyがインストールされている! インストール方法について調べたところ、なんということでしょう。Macには最初からRubyがインストールされているらしいです! ターミナルを

    初めてのRuby:インストール確認、REPL、Hello worldまで - クモのようにコツコツと
    idr_zz
    idr_zz 2018/11/20
    ブログ書いた。Pythonに続きRubyにも挑戦!まずはHello worldまで。 初めてのRuby:インストール確認、REPL、Hello worldまで - クモのようにコツコツと
  • 初めてのPython(インストール〜Hello world)と初めての黒い画面 - クモのようにコツコツと

    このところ、データサイエンティストによるデータ分析記事が様々な切り口で興味深々です。どうやら皆さんPythonでプログラミングをしているようです。私もやってみたくなってきました。そこで、PythonのインストールからHello worldまでやってみました。なお、プログラム実行のため「黒い画面(ターミナル)」のコマンドに触れました。苦手だった黒い画面の理解もすすんで一石二鳥だ!! 【目次】: データ分析にはPythonが向いているらしい スクリプト言語四天王 Pythonのインストール 黒い画面(ターミナル)を起動! UNIXコマンドを叩く REPL(対話実行モード)で四則演算 Pythonファイルを作成 cdコマンドでPythonフォルダに移動 pwdコマンドでフォルダのパスを確認 lsコマンドでファイル一覧表示 .pyファイルのPythonプログラム実行 黒い画面はコマンドの実行、出力

    初めてのPython(インストール〜Hello world)と初めての黒い画面 - クモのようにコツコツと
    idr_zz
    idr_zz 2018/11/19
    ブログ書いた!データ分析に興味ありPython始めたら黒い画面の勉強にもなった! 初めてのPython(インストール〜Hello world)と初めての黒い画面 - クモのようにコツコツと
  • 【Googleアナリティクス】ユーザー分析の基本(ユーザー、セッション、PV) - クモのようにコツコツと

    Webサイトは作って終わりじゃない!作ったあとの分析も大事。アクセス解析=Googleアナリティクス(GA)といっても過言ではない必須ツールですが、最初は膨大な数字の山に戸惑いますよね。 今回はWebサイトの目的、GAの導入、そして大事な3つの数字「ユーザー」「セッション」「PV」を解説。Webデザイナーでも知っておきたいWebマーケの基! Webサイト、なんのために作ってますか? GAの導入手順 トラッキングID、トラッキングコード ホーム画面 ユーザーサマリー ユーザー、セッション、PVの違い ユーザー、セッション、PVで割り出せる指標 その他の項目 最後に Webサイト、なんのために作ってますか? Webサイトで何かしらの「コンテンツ」を発信するからには自分以外の「誰か(ユーザー)」に見てもらいたいわけですよね。 見てもらったあと、どんなアクションをしてもらいたいか。それがWebサ

    【Googleアナリティクス】ユーザー分析の基本(ユーザー、セッション、PV) - クモのようにコツコツと
    idr_zz
    idr_zz 2018/11/15
    ブログ書いた!作って終わりじゃない、Webデザイナーも知っておきたいWebマーケ。GAで身につけよう! 【Googleアナリティクス】ユーザー分析の基本(ユーザー、セッション、PV) - クモのようにコツコツと
  • Chromeデベロッパーツール事始め!HTML、CSS、JSを直感的に修正しよう - クモのようにコツコツと

    Webサイト制作で欠かせないChrome「デベロッパーツール」 。でも、なんだか英語メニューがたくさんで、一体どこをどう触ればいいの? まずはHTMLCSS、JSのリアルタイム修正から入るのがおすすめ。ブラウザ上で直接修正が反映されて、大変直感的ですよ! 【目次】 Chromeデベロッパーツール の開き方 Chromeを開く ソースを表示 検証(デベロッパーツール)のElementsパネル HTMLの修正 要素の選択 行の一部の打ち替え 要素全体の打ち替え CSSの修正 Stylesパネル スタイルの解除 値の打ち替え 新規スタイルの入力 Computedパネル(計算済みスタイル) JSの修正 Event Listnersパネル(clickイベント) Sourcesパネル 値の打ち替え エラー表示 console.log()でデバック 最後に ※参考:HTMLCSS、JSの基はこちら

    Chromeデベロッパーツール事始め!HTML、CSS、JSを直感的に修正しよう - クモのようにコツコツと
    idr_zz
    idr_zz 2018/11/13
    リンク先が見出しの途中になっていたので、貼りなおします。こちらからどうぞー
  • デザインも配色も「メリハリ」が9割!基本を身につける学習方法 - クモのようにコツコツと

    タイトルの「9割」は言い過ぎかもしれないが、「メリハリ」はとても大事な考え方と思っています。ポイントは「主役」と「脇役」をハッキリさせることです。美術系の学校を出ていない文系雑草独学デザイナーの私が試行錯誤しながら身につけた学習方法をご紹介します。 【目次】 デザインや配色を身につける手順 デザインの基4原則 面積比率で理解する配色の基原則 デザインのインプット方法 スクショ&カメラはクラウドへ SNSから刺激を受ける Webデザインギャラリーをチェック デザインの研究(アウトプット) デザイン模写 Codepen 配色研究 まとめ 次回は配色研究! デザインや配色を身につける手順 まず、私のような文系雑草独学デザイナーは「天」からセンスが降って来ません。そこを認識、受容することがスタートラインです。 私は下記のような手順を踏んでデザインと配色を身につけました。 デザイン、配色の基

    デザインも配色も「メリハリ」が9割!基本を身につける学習方法 - クモのようにコツコツと
    idr_zz
    idr_zz 2018/11/09
    ブログ書いた!文系雑草独学デザイナーでもわかる!デザインと配色の基本、です。 デザインも配色も「メリハリ」が9割!基本を身につける学習方法 - クモのようにコツコツと
  • 【メタ言語】HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事) - クモのようにコツコツと

    あるとイイね!なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。ただし、残念ながらそのままではブラウザに表示されません。HTMLCSS、JSに変換(コンパイル)するための開発環境が必要です。そこで「CodePen」の出番ですよキミィ!CodePenなら開発環境なしでこれらの代替言語をお手軽体験できるんです!片っ端から体験した記事を下記にまとめます。それではいってみまSHOW! 【目次】 【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め 【LESS, SCSS, Sass, Stylus, PostCSS】 AltCSS 事始め 【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め まとめ 【Emmet, Haml,

    【メタ言語】HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事) - クモのようにコツコツと
    idr_zz
    idr_zz 2018/11/02
    ブログ書きました。以前、CodePenで片っ端から体験した「あるとイイね」なフロント代替たちを総まとめ! HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事) - クモのようにコツコツと
  • 【Tone.js】十三音鍵盤のシンセ音を変更してみる(その1)_ - クモのようにコツコツと

    「Tone.js」シリーズの続きになります。前回、十三音鍵盤を作ってみましたが、こちらの音色を変えてみたく思います! 十三音鍵盤のコード Tone.jsのチュートリアルから音色情報を調べる AMSynth() DuoSynth() FMSynth() Instrument()は鳴らない! MembraneSynth() MetalSynth() 最後に ※参考:前回の記事 【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直した - クモのようにコツコツと ※注意:投稿のCodePenの鍵盤を叩くと音が鳴ります。 十三音鍵盤のコード まずは前回のおさらい。作ったのはこちら。 「ポーン」といった感じの音ですね。 JSのコードはこちら //DOM var Key = document.querySelectorAll('#piano li'); //シンセ生成 v

    【Tone.js】十三音鍵盤のシンセ音を変更してみる(その1)_ - クモのようにコツコツと
    idr_zz
    idr_zz 2018/11/01
    ブログ書いた!ブラウザでシンセを鳴らす。音色変更その1です! 【Tone.js】十三音鍵盤のシンセ音を変更してみる(その1)_ - クモのようにコツコツと
  • 【CSSドット絵】マリオ立ちポーズとジャンプポーズの切り替え - クモのようにコツコツと

    以前、CSSだけでドット絵がかけるのか、というシリーズをやってて、中断していたのですが、ツイッターで素敵なドット絵マリオ作品に出会ってまたモチベーションが湧いてきました。今回は立ちポーズを作って、ジャプポーズとhoverアクションで切り替えるところまで。あいも変わらずバニラCSSでポチポチ打ってますw ※目次: 今後のためにベースの無色16マスをベースを作成 マリオ立ちポーズを打つ hoverアクションで切り替え 今後の予定 ※参考:前回の記事 CSS変数でドット絵マリオをルイージにしたった! - クモのようにコツコツと 今後のためにベースの無色16マスをベースを作成 ツイッターで出会った作品、こちらです。box-shadowで作られていて、さらにジェネレーターまで提供されています。凄すぎます! ※参考:box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Bl

    【CSSドット絵】マリオ立ちポーズとジャンプポーズの切り替え - クモのようにコツコツと
    idr_zz
    idr_zz 2018/10/30
    ブログ書きました。いや、打ちました。CSSドット絵、再開! 【CSSドット絵】マリオ立ちポーズとジャンプポーズの切り替え - クモのようにコツコツと
  • linear-gradientでストライプじゃなくて斜線を作る方法【CSS de 幾何学模様】 - クモのようにコツコツと

    背景などでいつもお世話になっているCSSグラデーション(linear-gradient)。他にもいろいろな模様を描くことができます。そのなかでも「ストライプ(縞模様)」はよく知られています。これを応用して「斜線」を作れないかなー、と試行錯誤してみました。「CSS de 幾何学模様」シリーズ開幕です。 ※目次: 背景などでお世話になっているCSSグラデーション 2箇所を同色にするとクッキリとした縞模様(ストライプ)に degで45度傾ける パーセントの位置を偏らせてストライプを斜線にする 課題:半端な角度だと綺麗な斜線にならない。。 最後に ※参考:CSSって何? 【HTMLCSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基5+応用1記事) - クモのようにコツコツと 背景などでお世話になっているCSSグラデーション これが生まれる前はグラデーションはビットマップ画像で

    linear-gradientでストライプじゃなくて斜線を作る方法【CSS de 幾何学模様】 - クモのようにコツコツと
    idr_zz
    idr_zz 2018/10/29
    ブログ書いた!CSSグラデでストライプじゃなくて斜線を作る。 いや〜幾何学って、ほんとうにいいものですね。 linear-gradientでストライプじゃなくて斜線を作る方法【CSS de 幾何学模様】 - クモのようにコツコツと
  • AdminerからSQL文で「我輩は猫である」を「犬」にしてみる(WordPressのDB操作:その2) - クモのようにコツコツと

    前回の続きです。ターミナル(黒い画面)を叩かずにDB(データベース)をSQL文でコチョコチョしたい。 一番身近でSQL文に触れられるのは「Local by Flywheel」の「Adminer」でした。 今回のテーマはWordPressに投稿した「我輩はである」を「犬」にする、です! ※目次: Adminerの4つのメニュー SQL command:SQL文入力 Import:ダンプファイルインポート Export:ダンプファイルエクスポート Create table:新規テーブル追加 WordPressのテーブル構成 「wp_posts」は投稿データのテーブル 「我輩はである」を投稿する SQL文で「我輩」を「犬」にする! SQL文(DDL、DML、DCL) DMLの基命令(SELECT文、INSERT文、UPDATE文、DELETE文) 「SELECT文」で「」を検索 「UPD

    AdminerからSQL文で「我輩は猫である」を「犬」にしてみる(WordPressのDB操作:その2) - クモのようにコツコツと
    idr_zz
    idr_zz 2018/10/25
    ブログ書いた!黒い画面を使わないSQL文でのDB操作! AdminerからSQL文で「我輩は猫である」を「犬」にしてみる(WordPressのDB操作:その2) - クモのようにコツコツと
  • このブログについて - クモのようにコツコツと

    このブログについて イイダリョウの技術ブログ「クモのようにコツコツと(略称:クモコツ)」にようこそ! 【目次】 このブログについて イイダリョウって何者? このブログについて オススメ & 記事インデックス ブログのコンセプト なんでクモなのさ? その他 プライバシーポリシー お問い合わせ リンク イイダリョウって何者? イイダリョウ(@idr_zz) フリーランスフロントエンドエンジニア。営業→DTPデザイナー→Webデザイナーを経て今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時! ※著者近影 このブログについて 「クモのようにコツコツと」(略称「クモコツ」) https://www.i-ryo.com フロントエンドエンジニアのイイダリョウの技術ブログ。日々のインプットしたことをコツコツとアウトプットします。フロントエンド技術を中心にバック

    このブログについて - クモのようにコツコツと
    idr_zz
    idr_zz 2018/10/21
    Aboutページ加筆しました。「クモコツ」という略称を言いたくてヘッダーの説明文にも追記w About - クモのようにコツコツと
  • 【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事) - クモのようにコツコツと

    以前、「書ける前に読む!HTMLCSS、JSの書式」*1という連載記事を書きました。コードを書くにはまず読める方が先という考えから、コードの読み方をHTMLCSS→JSにステップアップ方式で解説しました。当ブログでは様々なテーマを連載していますが、そのどこからでもたどり着けるような記事にしたかった。 この記事はその内容を一つにまとめた物です。当ブログのあらゆる記事からいつでもたどり着ける「Webの基」のメルクマールです。 ※目次: HTMLCSS、JSの基(動画版) Webの基礎知識 HTMLの基 CSSの基 JSの基-前編(オブジェクト、関数、変数) JSの基-後編(イベント、制御構造) JS応用編:生JS、ライブラリ、フレームワーク まとめ HTMLCSS、JSの基(動画版) ※2019/09/30追記 記事の概要に当たる内容をプログラミング実況してみました。ぜ

    【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事) - クモのようにコツコツと
    idr_zz
    idr_zz 2018/10/18
    ブログ書いた。等ブログのあらゆる記事の出発点、メルクマールになるまとめ記事です。 Web制作 やりたい時が 始め時!! 【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ! - クモのようにコツコツと
  • 【Textastic】もしかしてだけどスマホで技術ブログかけちゃうんじゃないの? - クモのようにコツコツと

    前回、タブレットだけで技術ブログが書けるのか検証した結果、もしかしてだけどこれならスマホだけでも技術ブログが書けるんじゃないの?という気になってきたので、実際にやってみる。実録です。 目次: スマホでの技術ブログ 以前はスマホは修正専用だった スマホはフリックでええやん マークダウン求めて三千里 アプリ版はてなブログはマークダウンがない? ブラウザ版はてなブログもマークダウンはない! PCはてなブログではマークダウン使えた! アプリ版はてなブログでマークダウン普通に使えた!! 裏メニュー発見! アプリ版のマークダウンを体験! スマホでcodepen 私の愛してやまないcodepenはアプリがない!何故だ!? ブラウザ版codepenはクセが強い! プログラミングはtextasticの力を借りる HTMLtextasticで作成 CSStextasticで作成 JSをtextastic

    【Textastic】もしかしてだけどスマホで技術ブログかけちゃうんじゃないの? - クモのようにコツコツと
    idr_zz
    idr_zz 2018/10/04
    ブログ書いた!スマホだけで技術ブログ書けるか検証。結論、書けた! 【Textastic】もしかしてだけどスマホで技術ブログかけちゃうんじゃないの? - クモのようにコツコツと
  • 【iPad】ソフトウェアキーボード(QWERTY、フリック、グライド)と物理キーボード比較 - クモのようにコツコツと

    お絵描きしたくて購入したiPad。触っているうちに、お、もしかしてこれで「What’s a Computer?」れるんじゃない?という気がしてきて文字入力についていろいろ検証した。当いうとソフトウェアキーボードだけで完結して「What’s a Keyboard?」る野望があったんですが最終的には物理キーボードも導入することになりました。おすすめテキストエディタ「Textastic」も合わせてご紹介! 目次: iPadを購入したのはお絵描きのためだった What's a computer? What's a keyboard? テキストエディタはTextasticがおススメ! ソフトウェアキーボードは縦画面前提 QWERTY入力はブラインドタッチが困難 タブレットでもフリック入力! アップル純正フリックは下で使えない もう一つのフリック入力「片手キーボードPRO」 日以外で主流らしいグラ

    【iPad】ソフトウェアキーボード(QWERTY、フリック、グライド)と物理キーボード比較 - クモのようにコツコツと
    idr_zz
    idr_zz 2018/09/30
    ようやくブログ書いた!ここ2週間に渡ってタブレットと向き合った実録でっす!そしてタブレットだけで書いた記事。 【iPad】ソフトウェアキーボード(QWERTY、フリック、グライド)と物理キーボード比較 - クモのようにコ
  • もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの?(オマケにvmin、vmaxも) - クモのようにコツコツと

    タイトルのようなことをふと思ったのでCSSのvw、vhをいろいろ試してみました。 PCは横長、スマホは縦長とまったく異なる縦横比率なために生じるレスポンシブ対応。それを実現するメディアクエリはとても便利ですが、何種類もCSSスタイルを書き分けるのは少々複雑ではあります。ここを突破する一番シンプルな方法を追求したい。そう、vw、vhでね。それでは参りませう! ※目次: レスポンシブ対応とは メディアクエリとは vh、vwとは 100% のサンプル「そうだ 小田急 乗ろう」 100vw、100vh に変えてみた obcect-fitでトリミング 100vw、80vhが最高にレスポンシブ!? 100vhで揃えてみる 100vwで揃えてみる 100vimで揃えてみる 100vmaxで揃えてみる 使用した写真 最後に ※参考:CSSの基はこちら 【CSSの基】書ける前に読む!HTMLCSS、J

    もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの?(オマケにvmin、vmaxも) - クモのようにコツコツと
    idr_zz
    idr_zz 2018/09/06
    ブログ書いた!昨日予告したCSSのvw、vhを記事にまとめました。 もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの?(オマケにvmin、vmaxも) - クモのようにコツコツと
  • 【Vue.js】イベント(v-on)、分岐(v-show、v-if)、ループ(v-for)をやってみた! - クモのようにコツコツと

    「Hellow Vue.js」の続きです。前回はVue.jsを読み込んで、「こんにちは びゅう!」という文字を表示しました。しかしながら、これだけならjQueryや生JSでもできるわけなので、もう少し進めてみる。 基編として、チュートリアルでまず目についた「イベント」「分岐」「ループ」をやってみた。それでは、どうぞ! ※目次: Vue.jsのディレクティブ イベント(v-on) 属性値が式 メソッドイベントハンドラ インラインメソッドハンドラ 分岐(v-show、v-if) v-show v-if ループ(v-for) 配列数分ループ ループ回数を読み込む 最後に ※参考:前回の記事 三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた! - クモのようにコツコツと Vue.jsのディレクティブ Vue.jsには「ディレクティブ」という独自

    【Vue.js】イベント(v-on)、分岐(v-show、v-if)、ループ(v-for)をやってみた! - クモのようにコツコツと
    idr_zz
    idr_zz 2018/08/22
    ブログ書いた。Vue.jsのイベントや制御構造を体験! 【Vue.js】イベント(v-on)、分岐(v-show、v-if)、ループ(v-for)をやってみた! - クモのようにコツコツと
  • 【JSON】外部JSONファイル化したはっぴいえんどアルバム情報をFetch APIでDOMに読み込む - クモのようにコツコツと

    「JSON未遂事件簿」の続きです。 JSON(ジェイソン)はJSの連想配列(オブジェクト)とよく似たとても馴染深いデータ形式。 前回はっぴいえんどアルバム情報を多次元配列にしてDOMに読み込みました。 今回はこれを外部JSONファイル化してFetch APIで読み込んでみます。 ※目次: JSONとは はっぴいえんどの多次元配列をJSON化する 非同期通信:Ajaxとは JSONを読み込む方法(XMLHttpRequest()、$.getJSON()、$.ajax()、Fetch API) Fetch APIの書式 Fetch APIではっぴいえんどのjsonファイルを読み込む ボタンを押すと値(1stアルバムタイトル)だけ表示 アルバム情報全部を表示する 最後に ※参考:連想配列とは JSONとは JSONとは「JavaScript Object Notation」の略。以前 、オブジェ

    【JSON】外部JSONファイル化したはっぴいえんどアルバム情報をFetch APIでDOMに読み込む - クモのようにコツコツと
    idr_zz
    idr_zz 2018/08/15
    ブログ書いた。前回の未遂事件からリベンジです!ついにJSONファイル読み込み成功したどーーー 【JSON】はっぴいえんどのアルバム情報を外部JSONファイル化してFetch APIでDOMに読み込む - クモのようにコツコツと
  • SVGの方のチャートライブラリ「C3.js」をGettingしてStartedする - クモのようにコツコツと

    以前、JSで図(チャート)を作るライブラリとしてCanvasベースの「Chart.js」をGettingしてStartedしました。そのときにもう一つSVGベースのライブラリ「D3.js」も候補で考えていたのですがChart.jsと比べて少し敷居が高く感じてました。 その後、D3.jsベースでチャート機能に特化して作られた「C3.js」の存在を知りました。SVGがどんなものなのかも気になっていたので、さっそくGettingしてStartedしたいと思います! ※目次: SVGとCanvasの違い C3.jsの公式サイト CSSとJSファイルの読み込む コードを貼ってみる JSを読み解く CSSを変えてみる。 SVG要素が書き出されていた 最後に ※参考:JSライブラリとは? 【卒jQueryへの道】生JSとライブラリとフレームワークの理解 - クモのようにコツコツと ※参考:Canvasベ

    SVGの方のチャートライブラリ「C3.js」をGettingしてStartedする - クモのようにコツコツと
    idr_zz
    idr_zz 2018/08/10
    ブログ書きた!SVGデビュー飾る。まったく、カン・タン・だ♪ SVGの方のチャートライブラリ「C3.js」をGettingしてStartedする - クモのようにコツコツと