Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

2016-01-01から1年間の記事一覧

GoogleAPIその0002 JavaScriptでSearchConsoleAPIからデータを取得する

参考にさせて頂いたページ Google Search Consoleについて サーチコンソール(Google Search Console)の使い方と登録方法教えます APIにリクエストする為のコードについて Sites: list | Search Console API (Webmaster Tools API) | Google Developers 認…

GoogleAPIその0001 JavaScriptでデータを取得するための認証とか基礎

参考にさせて頂いたページ 公式のGoogle People APIサンプル(認証して、Google People APIを使用するサンプル) google-api-javascript-client/authSample.html at master · google/google-api-javascript-client · GitHub はじめてのアナリティクス API: ウ…

React.jsその0006 FluxとReduxも合わせて考えていくので記事を集めて読んでみる

参考にさせて頂いたページ reactjs/redux の GitHub GitHub - reactjs/redux: Predictable state container for JavaScript apps reactjs/react-redux GitHub - reactjs/react-redux: Official React bindings for Redux FluxとReduxについてざっくり概要 結…

JSでテストコードを書く その0001 まずは記事を色々読んでみる

参考にさせて頂いたページ Mocha公式 Mocha - the fun, simple, flexible JavaScript test framework Chai公式 Chai 概要が書かれている日本語のページ 以下の三つと、そこからリンクされているページを読んだら全く知識の無い状態からなんとなくわかってき…

HTMLコーディング規約についてメモ

はじめに どこにあったか忘れたら嫌なのでメモしておきます。 参考リンク HTML Best Practices github.com

npmでeslint-config-airbnbを導入してみる

参考にさせて頂いたページ ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う | mae's blog これまでのこと 以前「gulp-eslintの.eslintrcを作成…

inline-blockの左右にできる隙間を解消する

参考にさせて頂いたページ display:inline-block;でできた隙間をなくす4つの方法 | webledge inline-blockを並べた場合に発生する「隙間」を消去するCSS » INSPIRE TECH 適切な方法は? 最近はletter-spacingの値に-0.40emを設定して埋めるのが検索上位に出…

Bootstrap3のbreakpointとcontainer幅とgrid内余白を変更する

はじめに breakpointとcontainer幅について復習します。 以下のURLの日本語リファレンスの表を参考にさせて頂きました。 グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス windowサイズが以下それぞれの数値のときに、container幅もそれに対応した…

WindowsでAtomを使ってみる

参考にさせて頂いたページ 縦線を消す wrap-guide Atomでエディター内の縦線を消す方法 | IDEA*IDEA 設定とかプラグイン、ショートカットキーのこと WindowsでAtomをインストールして使ってみる - Qiita 環境 Windows10 Atom v1.8.0 (2016-07-29現在) ウィン…

webpackを使ってES2015、Vue.jsのビルド環境を構築する

参考にさせて頂いたページ webpackのすごく基本 webpack で始めるイマドキのフロントエンド開発 - Qiita 以前書いたReact.jsの記事 webpackを使ってES2015、React.jsのビルド環境を構築する - Motomichi Works Blog Vue.jsでの記述例について vue.js + webpa…

webpackを使ってES2015、React.jsのビルド環境を構築する

参考にさせて頂いたページ webpackのすごく基本 webpack で始めるイマドキのフロントエンド開発 - Qiita 主に参考にさせて頂いたページ Webpackでイチから作るReact.js開発環境 - Qiita babelとwebpackを使ってES6でreactを動かすまでのチュートリアル - Qii…

さくらのVPSを使う その0015 HeidiSQLでMySQLホストに接続する

vagrantのMySQLホストに接続したときの過去記事 vagrantその0026 HeidiSQLでvagrant内のMySQLホストに接続する - MOTOMICHI WORKS BLOG 記事の為に、仮のユーザー名, パスワード, ポート, IP 例えば「さくらのVPSを使う その0001 申し込みからsshログインに…

vagrantその0026 HeidiSQLでvagrant内のMySQLホストに接続する

参考にさせて頂いたページ 今回のおおよそのこと VirtualBox Vagrant上のMySQLにHeidiSQLで接続する方法 | Lancork Vagrant vccw のMySQLデータベースにHeidiSQLで接続する – セルティスラボ Macでやってたときの記事 vagrantその11 SequelProで仮想環境内の…

gulp-eslintの.eslintrcを作成する

参考にさせて頂いたページ .eslintrcを公開してくださっているページ .eslintrc晒す - Qiita eslint eslint gulp-eslint gulp-eslint babelとか関係なくeslintについて包括的な基礎のこと [GitHub 奮闘記] gulp で eslint 設定とコード チェック環境の共有 -…

gulp+browserify+watchify+babelifyを導入してReact.jsのプロジェクトを作る

参考にさせて頂いたページ 以前作ったgulpのプロジェクト gulp+browserify+watchify+babelifyを導入してプロジェクトを作りなおしてみる - MOTOMICHI WORKS BLOG gulpを使う場合 React.js + Babel + Browserify + gulp の環境を作ってみた - Qiita WebPackを…

Chocolateyその0001 Windows10にChocolateyをインストールして少し使ってみる

参考にさせて頂いたページ Chocolatey - Installation windowsの開発環境は一瞬で整うwith chocolatey - Qiita Chocolateyを使った環境構築の時のメモ - Qiita Windowsソフトを管理!パッケージ管理システムChocolateyでインストール、アップデートを簡単に…

vagrantその0025 Windows10でvagrantを使う

参考にさせて頂いたページ Windows10にVirtualBoxとVagrantでCentOSの仮想環境を作ってみた / ユービックログ VagrantでBox追加時にエラーが出た時の話 - Naba Blog 今回の環境(使用したインストーラー) Windows10 vagrant_1.8.4.msi VirtualBox-5.0.24-1083…

WebデザインからCSS設計について考える その0004 BEMについて少し考えてみる

参考にさせて頂いたページ Naming convention / Methodology / BEM [CSS]BEMの方法論とMindBEMdingという記法 - Qiita 命名規則について MindBEMdingについて おそらく下記のような記法がBEMとして広く認知されていると思います。 block-name__element-name-…

WebデザインからCSS設計について考える その0003 SMACSSの必要部分について学ぶ

参考にさせて頂いたページ SMACSS Home - Scalable and Modular Architecture for CSS 前提として知っておく知識 以前の記事で、デザインを作成したり、CSS書いたりする際に参考にさせて頂いたサイトURLをまとめました。 WebデザインからCSS設計について考え…

JavaScript学習日記 その0004 jQueryの$.ajaxでjsonpを取得する

参考にさせて頂いたページ 今回これを参考に動かしてみた jQuery.ajaxでphpから出力したjsonpを扱った時のメモ | ミラボ jsonpって何なのか JSONPで悩むある程度の人々へ はじめに ドメインが違うサーバーから、オブジェクトのデータを取得したい場合はdataT…

JavaScript学習日記 その0003-01 jQuery UIのDatepicker | 曜日ごとに色を変える、任意の座表に絶対配置する、インラインに配置する

参考にさせて頂いたページ 絶対表示の位置変更について position() jQuery UI Datepicker(カレンダー)表示位置の調整 | Eniod's Blog jQuery UI Datepicker(カレンダー)表示位置の変更 サンプル .position() | jQuery UI API Documentation jQuery UI の…

絵を描くことについて考えてみる その0001 解説サイトを集めてみる

背景の描き方 背景が描けるようになる方法を教えちゃうゾ☆(ゝω・)vキャピピ 【 萌えイラストを描きたい!! 】 以下のようなことについて解りやすく解説されています。 見栄えのする構図について 空気遠近法(遠くのもの程、色数が少なく青っぽくなること) 影…

JavaScript学習日記 その0002 ES5入門とES2015入門のこと

参考にさせて頂いたページ ES5について ECMAScript 5 (ES5) 新機能 まとめ - galife ES2015(ES6)な時代だからこそ、ES5を改めて調べたJavaScript初級者のメモ - Qiita ES2015について ES2015 (ES6)についてのまとめ - Qiita 春からはじめるモダンJavaScript …

JavaScript学習日記 その0001 thisとかオブジェクト指向、call、applyのこと

参考にさせて頂いたページ javascriptにおけるpublicとprivateについて // Speaker Deck 最強オブジェクト指向言語 JavaScript 再入門! [A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門 applyとcallの使い方を丁寧に説明してみる - …

MacでPATHを通す .bash_profileの作成と編集

参考にさせて頂いたページ .bash_profileの場所と作成 ターミナルの設定ファイルを作る[.bash_profile] – joppot PATHの追加と確認について MacでPATHを通す - Qiita nodebrewのインストールとPATHを通す 【Mac】nodebrewのインストールとコマンドなど使い方…

vue.js 1.0 その0003 vue-resourceを使ってajax通信をする

参考にさせて頂いたページ GitHub - vuejs/vue-resource: Resource component for Vue.js 今回使用しているバージョン vue-resource 0.7.0 ダウンロード vue-resource.jsをダウンロードします。 サンプル GitHubにある公式ページのドキュメントを参考に書い…

vue.js 1.0 その0002-001 公式ドキュメントを読む(API編) 自分用インデックス

参考にさせて頂いたページ vue.js はじめに 公式ドキュメントを見ただけだとすぐに理解できない所がまだあるので、自分で復習しやすいように自分の個別記事へのリンクを付けたりしてみます。 ちなみに2016年2月16日現在の最新v1.0.16についてです。 インデッ…

vue.js 1.0 その0001-004 算出プロパティ computed

参考にさせて頂いたページ 算出プロパティ - vue.js getterだけの場合 サンプルコード <div id="app"> ファーストネーム : <input type="text" v-model="firstName"> ラストネーム : <input type="text" v-model="lastName"> <span>フルネーム : {{ fullName }}</span> </div>

vue.js 1.0 その0001-003 フォーム入力バインディング select要素

参考にさせて頂いたページ フォーム入力バインディング - vue.js プルダウンに表示されている文字列をバインディングする例 option要素にvalue属性を設定していない場合は、表示されている文字列がそのままバインディングされます。 <div id="app"> <select v-model="aaa"> <option selected>ラベル1</option> <option>ラベル2</option> <option>ラベ</option></select></div>…

vue.js 1.0 その0001-002 コンポーネント 単一スロット、名前付きスロット

参考にさせて頂いたページ コンポーネント - vue.js コンポーネント - vue.js サンプルコード <div id="app"> <my-component> <p>スロットタグの位置に挿入されるタグ</p> <p>スロットタグの位置に挿入されるタグ</p> <p>スロットタグの位置に挿入されるタグ</p> </my-component> <my-component-multiple> <p slot="aaa">slot属性付きだと、components内のslotタグ</p></my-component-multiple></div>…