Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

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>…

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

参考にさせて頂いたページ vue.js はじめに 公式ドキュメントのガイドを見返すときに、「あれはどこに書いてあったかなー?」というのが、左カラムの大きい見出しだけ見てもまだよくわからなかったりするので、小さい見出しを展開したうえで少し要約して、と…

MySQL その0003 SELECT文とJOINと結合規則について読んで学習してみる

参考にさせて頂いたページ 取得データの結合(UNION句) - データの取得 - MySQLの使い方 内部結合(INNER JOIN句) - データの取得 - MySQLの使い方 外部結合(LEFT JOIN句, RIGHT JOIN句) - データの取得 - MySQLの使い方 SQL講座 INNER JOINを使った表の結合 …

さくらvpsとcakephp2.6.7で開発日記 その0021 HABTMで実行されているSQLのSELECT文とJOINと結合規則について読んで学習してみる

参考にさせて頂いたページ 取得データの結合(UNION句) - データの取得 - MySQLの使い方 内部結合(INNER JOIN句) - データの取得 - MySQLの使い方 外部結合(LEFT JOIN句, RIGHT JOIN句) - データの取得 - MySQLの使い方 SQL講座 INNER JOINを使った表の結合 …

さくらvpsとcakephp2.6.7で開発日記 その0020 actionの引数と名前付きパラメーター

参考にさせて頂いたページ 名前付きでパラメータを受け取る方法 - Writing Some Code 引数 例えば下記のようなURLでページにアクセスすると https://hoge.com/controllers/index/hoge/foo 以下のような感じで、indexアクションで'hoge'と'foo'が引数として受…

JavaScriptのfor文でオブジェクトの要素数だけループする

参考にさせて頂いたページ for..in文 - 繰り返し処理 - JavaScript入門 keyの取得と出力 例として以下の通り。 var obj = { "hoge" : "hoge", "foo" : "foo", "fuga" : "fuga", } for(var key in obj){ console.log(obj[key]); } 最近は、モダンなブラウザ向…

AngularJS1.x その0016 ng-bindとng-bind-htmlを使ってみる

参考にさせて頂いたページ 使用例について AngularJS: モデルをビューにバインドするには?(ng-bind/ng-cloak) - Build Insider AngularJS: ビューにHTML文書をバインドするには?(ng-bind-html) - Build Insider angular-sanitizeのインストールにつ…

AngularJS1.x その0015 angularUtilsのpaginationを使ってみる

参考にさせて頂いたページ 公式のgithubのページです。 angularUtils/src/directives/pagination at master · michaelbromley/angularUtils · GitHub bowerかnpmでダウンロードして、プロジェクトに配置する npmでダウンロードした内の以下のファイルを任意…

さくらvpsとcakephp2.6.7で開発日記 その0019 AngularJS1.xを使用してAjaxでテーブルデータを取得する

参考にさせて頂いたページ $httpサービスについて $http | AngularJS 1.2 日本語リファレンス | js STUDIO コントローラーの書き方について jQueryとAngularJSにおけるAjaxの微妙な違い | ゆっくりと… AngularJSでリクエストを送信すると$this->request->is(…

さくらvpsとcakephp2.6.7で開発日記 その0018 jQueryを使用してAjaxでテーブルデータを取得する

参考にさせて頂いたページ CakePHPとJSONでAjax用APIを作る方法 CakePHPでjQueryのAjaxを使う方法 以前作成したお問い合わせフォーム 以前以下の記事でお問い合わせフォームを作成したので、試しにcontactsテーブルのデータを非同期で取得してみようと思う。…

さくらvpsとcakephp2.6.7で開発日記 その0017 本番とステージングと開発で接続するデータベースやデバッグモードを動的に変更する

参考にさせて頂いたページ CakePHPでproduction,staging,developmentを自動で切り替える CakePHPのデータベースを開発環境と本番環境で切り分ける方法 » INSPIRE TECH ServerNameを取得する方法 cakephpでは、以下のように書くと取得できる。 env('SERVER_NA…

さくらvpsとcakephp2.6.7で開発日記 その0016 httpでアクセスされたときに、httpsにリダイレクトする

参考にさせて頂いたページ セキュリティ — CakePHP Cookbook 2.x ドキュメント CakePHP 2.xでSSL通信(https)を強制する – SOAR CODE はじめに Securityコンポーネントについて理解が浅いままにAppControllerに色々記述すると影響範囲が大きいので、このブロ…

WebデザインからCSS設計について考える その0002 デザインルールを決めながら作ってみる

前提として知っておく知識 前回の記事で、デザインを作成する際に参考にさせて頂いたサイトURLをまとめました。 WebデザインからCSS設計について考える その0001 前提知識みたいなもののリンクをまとめた - MOTOMICHI WORKS BLOG 前に見てたサイトどれだっけ…

さくらvpsとcakephp2.6.7で開発日記 その0015 Paginator(ページネーター)を使う

参考にさせて頂いたページ Paginatorコンポーネント ページ制御 — CakePHP Cookbook 2.x ドキュメント Paginatorヘルパー PaginatorHelper — CakePHP Cookbook 2.x ドキュメント Controller側の記述 まず以下の通り、Paginatorコンポーネントを使用する事を…

さくらvpsとcakephp2.6.7で開発日記 その0014 記事投稿フォームと記事一覧ページを作成する HABTM(hasAndBelongsToMany)

参考にさせて頂いたページ HABTM(hasAndBelongsToMany)について アソシエーション: モデル同士を繋ぐ — CakePHP Cookbook 2.x ドキュメント あの日見たHABTMの中間テーブルの使い方を僕たちはまだ知らない | 日記の間 | あかつきのお宿 HABTM(hasAndBelongsT…

AngularJS1.x その0014 DI(依存性注入)コンテナー機能を使う

参考にさせて頂いたページ AngularJSの依存性注入を利用するには? - Build Insider AngularJSのDIの仕組み、minify対策は覚えておこう! - Qiita 依存性注入(DI) | AngularJS 1.2 日本語リファレンス | js STUDIO DIを使用しない記述 これまではcontroller…

さくらvpsとcakephp2.6.7で開発日記 その0013 複数チェック可能なチェックボックス

参考にさせて頂いたページ type="checkbox"のinput要素について CakePHP 2.x - checkボックスを実装 (CakePHP2.x)Formヘルパーでチェックボックスを作成する | 日々の覚書…日常のことも少しだけ select要素について CakePHP 2.x - selectボックスを実装 フォ…

AngularJS1.x その0013 標準モジュール

参考にさせて頂いたページ AngularJSでモジュールを定義するには? - Build Insider 標準モジュール 自分で作成するモジュールの他に標準で用意された以下のようなモジュールがあるようです。 ng ngAnimate ngAria ngCookies ngMessages ngMock ngMockE2E ng…

AngularJS1.x その0012 モジュールの作成とその構成部品に何があるのか見てみる

参考にさせて頂いたページ AngularJSでモジュールを定義するには? - Build Insider モジュールの構成部品としてcontrollerを登録する controllerだけは以前やった。 AngularJS1.x その0004 myAppモジュールを作成して、その構成部品のcontrollerとしてSampl…

正規表現 その0001 特定の文字列を含まない正規表現

参考にさせて頂いたページ 特定の文字列を含まない正規表現について 【正規表現】以外と知らない特定の文字列を含まない正規表現 - 俺のIT 正規表現の包括的なこと 正規表現チェッカー PHP: preg_match() / JavaScript: match() 正規表現の構文 実例をいくつ…

さくらvpsとcakephp2.6.7で開発日記 その0012 記事タグ追加フォームを作る

今日の制作について ブログのシステムを作るので、記事投稿機能の前に記事に付けるタグ追加フォームを作る。 articletagsテーブルの作成 実行したSQLは以下の通り。 CREATE TABLE `articletags` ( `id` int(11) NOT NULL AUTO_INCREMENT, `user_id` varchar(…

AngularJS1.x その0011 タグを自作する(Custom Elementsを作成する) templateとng-transclude

参考にさせて頂いたページ Angular.jsについて AngularJSカスタムディレクティブのtranscludeオプション、ng-transcludeディレクティブの使用例 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで AngularJS Directive なんてこわくない(その…

AngularJS1.x その0010 Controller自身のDOMを選択したり、その他のプロパティを取得する

参考にさせて頂いたページ javascript - How do i get current scope dom-element in AngularJS controller? - Stack Overflow ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュ…

jQueryを使わずにHTML要素を参照する

参考にさせて頂いたページ JavaScriptについて検索すると、jQueryを使った方法ばかりがヒットしがちなので、忘れないようにリンクを控えさせて頂いた。 【DOM連載#1】JavaScriptのDOMでHTML要素を参照 - Noise of Web Programming

さくらvpsとcakephp2.6.7で開発日記 その0011 Model内で使用されている変数の内容を確認する

参考にさせて頂いたページ デバッグ — CakePHP Cookbook 2.x ドキュメント CakePHPで、ログを出力したい場合 | アリモト BLOG ブラウザで閲覧中のページに出力 debug() たいていはこれを使うのが良さそう。内部的にはDebugger::dump();が動いているらしい。 …

AngularJS1.x その0009 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法 $on, $emit, $broadcast

参考にさせて頂いたページ 【AngularJS】 $on, $emit, $broadcast | COTeggのバケツ ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにParentCtrlコントローラーを登録 app.…

AngularJS1.x その0008 コントローラーを入れ子にして、親子関係を作る

参考にさせて頂いたページ AngularJSのControllerをネストしたときのスコープ - hokaccha.hamalog v2 ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにParentCtrlコントロ…

AngularJS1.x その0007 a要素をクリックしたときに遷移させないようにする

参考にさせていただいたページ AngularJS ng-click で preventDefault したい - Blogaomu ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにSampleCtrlコントローラーを登録…

AngularJS1.x その0006 クリックイベントが発生した要素の$eventオブジェクトの取得

参考にさせて頂いたページ AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう (1/3):CodeZine(コードジン) ng-app.jsの記述内容 例として以下の通り。 // myAppモジュールを作成 var app = angular.module('m…

AngularJS1.x その0005 Controller as構文を使う

参考にさせて頂いたページ AngularJSの$scopeをController as で置き換えるべき理由 - Qiita ng-app.jsの記述内容 // myAppモジュールを作成 var app = angular.module('myApp', []); // myAppモジュールにSampleCtrlコントローラーを登録 app.controller('S…

AngularJS1.x その0004 myAppモジュールを作成して、その構成部品のcontrollerとしてSampleCtrlを登録して使う

参考にさせて頂いたページ AngularJSでモジュールを定義するには? - Build Insider 今回やること AngularJS1.x その0002 ng-controllerを使う - MOTOMICHI WORKS BLOG の記事おいて非推奨な記述とされていた記述のまま、 AngularJS1.x その0003 ng-clickデ…

AngularJS1.x その0003 ng-clickディレクティブ

参考にさせて頂いたページ AngularJS AngularJS: イベントリスナーを登録するには?(ng-clickなど) - Build Insider index.htmlの作成とその記述内容 例として以下の通り。 <div ng-controller="SampleCtrl"> <input type="text" ng-model="name" /> <button ng-click="onclick()">送信</button> <div>{{msg}}</div> </div> ng-app.jsの作成とその記述内容 例として以下の通り。 var Samp…

AngularJS1.x その0002 ng-controllerを使う

参考にさせて頂いたページ コントローラーについて | AngularJS 1.2 日本語リファレンス | js STUDIO AngularJS TIPS - Build Insider Controllerの役割 参考にさせて頂いたページによると コントローラーは下記のようなことをするのに使用されます。 ・ $sc…

AngularJS1.x その0001 バインディングしてみる

参考にさせて頂いたページ 公式ドキュメント(英語) AngularJS — Superheroic JavaScript MVW Framework とりあえず一通り勉強するのに良さそう AngularJS TIPS - Build Insider js STUDIO のAngular1.2日本語ドキュメント AngularJS 1.2 日本語リファレンス …

さくらvpsとcakephp2.6.7で開発日記 その0010 バリデーションエラーの項目にだけ任意の要素を表示する $this->Form->isFieldError('example')

参考にさせて頂いたページ FormHelper — CakePHP Cookbook 2.x ドキュメント やりたいこと バリデーションエラーがあったinput要素に対して、CSSのクラスを付け替えて色を変えたり、HTML要素を表示したい。 任意のctpに記述する内容 例として以下の通り。 Fo…

さくらvpsとcakephp2.6.7で開発日記 その0009 FormHelperを拡張する

参考にさせて頂いたページ U2Kの覚え書き CakePHP2.0で、FormHelperをカスタマイズする方法 app/View/Helper/MyFormHelper.phpの作成とその記述内容 例として、$this->Form->text()のとき出力されるHTMLを拡張する場合は以下のような感じ。

さくらvpsとcakephp2.6.7で開発日記 その0008 自作のHelper内でElementsを読み込む

参考にさせて頂いたページ ぷぎえもん日記 |CakePHPの練習:ヘルパーの中でelement()を使う cakephp - Using $this->element inside a customHelper - Stack Overflow はじめに ctpの中で使用するときみたいに、自作のHelper内で$this->element('Modules/mod…

さくらvpsとcakephp2.6.7で開発日記 その0007 Helperを自作する

参考にさせて頂いたページ ヘルパー — CakePHP Cookbook 2.x ドキュメント 最も簡易的な構造で作ってみる View/Helper/ExampleHelper.phpの作成とその記述内容 例として以下の通り。