NTT docomoの知識Q&A APIを使ったbot作りました。

サンプル置き場にNTT docomoの知識Q&A APIを使ったbotのサンプルを置いておきます。 遊んでみてください。 デモ

jQueryで動的に高さを取得するときにハマる問題点

jQueryでブラウザのスクロール量を取得するには、スクロールすると発生する「scrollイベント」と「scrollTop()メソッド」を使うことで値を取得することができます。 また、ある要素の位置を動的に取得することは  >>続きを読む

WordPress子テーマ作成のポイント

WordPressのテーマには様々なものが無料、有料を問わず存在します。これらを上手に活用してサイトを作成することはそのサイトの成功に繋がるでしょう。なぜなら、デザインをあれこれ迷ってテーマを一から作ることは時間の無駄で  >>続きを読む

slickの使い方〜jQuery

レスポンシブ対応のカルーセルを導入したい場合にjQueryのプラグインでslickがあります。 受講生の作品づくりにも人気のものですが、なぜか導入が上手くいかないという質問が多いので導入方法を書いておきます。 上手くいか  >>続きを読む

DreamweaverCCのFTP機能でファイルサイズや修正日が表示されない時の対処

DreamweaverCC(2017.5)のFTP機能ではファイル名とフォルダ名しか表示されてなく、ファイルサイズや修正日が表示されていません。 旧来のようにこれらの情報を表示させる方法です。 次の画像がDreamwea  >>続きを読む

AngularJS入門(1)〜AngularJSで送信フォームの作成でviewの活用

AngularJSはGoogleが開発に携わるJavaScriptのフレームワークです。AngularJSには様々なバージョンがあり、現在(2017/11月)ではバージョン5がリリースされています。 尚、「Angu  >>続きを読む

Bootstrap4でのGrid system変更点〜Flexがポイント

Bootstrapでは12等分のカラムでグリッドを作成するGrid systemが用意されています。また、レスポンシブレイアウトにも柔軟に対応できる仕組みのため、複雑なレイアウトを簡単にコーディングすることができます。   >>続きを読む

リクルートA3RTを使ったAI Bot

リクルートA3RTを使った簡単なAI Botを作成しました。サンプル Sample置き場に置いていますので、暇なとき会話してみてください。

クリーンインストールしたMacOS “High Sierra”にSophos Home導入の注意点

Sophos Homeは無償マルウェア対策でMacで手軽に使用できるものです。 MacOS High SierraにSophos Homeを導入する場合、ちょっとわかりにくかったので書いておきます。 システム環境設定の「  >>続きを読む

Tableの使い方詳説〜HTML & CSS(1)

テーブルの記述はHTMLもCSSも面倒な設定や思う通りに行かない場合があったり、思わぬ落とし穴に悩むこともあります。 今回はテーブルについてしっかりと学習していきます。 HTMLでのテーブル関連タグの使い方 テーブル作成  >>続きを読む

PhotoshopCCの画像アセットの生成機能の使い方

PhotoshopCCの画像アセットの生成を使えば、カンプを作成する最中にWebで必要な画像がどんどん書き出される便利な機能があります。これを使うとスライスの必要がほば無くなります。 今回の例はPhotoshopCC20  >>続きを読む

Photoshop レイヤーマスクと選択範囲作成小技

人や動物の選択を行う方法です。 ペンツールのパスで大まかに選択してレイヤーマスクを作成 パスを選択範囲に変更するにはctrl(command)+return 毛並みなど複雑なところは色域指定など使って別途選択範囲を作成   >>続きを読む

Dreamweaver CC 2017.5で新しく加わったGit機能を使う方法

2017年6月にDreamweaver CC 2017にいよいよGitの機能が標準で搭載されました。さっそく使ってみることにします。 今回の記事はすでにGitの使用経験がありSorceTreeなどから乗り換えたいとお考え  >>続きを読む

Node.js入門(2)Gulpの導入と使い方

GulpとはNode.jsをベースにした開発ワークフローで苦労したり時間のかかるタスクを自動化するためのツールキットです。 Gulpでできること Sassのコンパイル コードの連結と圧縮 画像の圧縮 CSSベンダープリフ  >>続きを読む

Node.js入門(1)環境づくりと少しだけ試してみる

Node.jsのページ Node.jsについて Nodeとは何か?これは本家のページの「NODE.JSとは」のページに記述されています。 Node はスケーラブルなネットワークアプリケーションを構築するために設計された非  >>続きを読む

MySQLをコマンドで操作〜Mac編

MySQLの操作をphpMyAdminでは行ったことがあるが、コマンドでは操作できないという脱初心者向けのコマンドによるMySQLの基本操作を紹介します。 環境はMacでMAMPを使用したものです。MySQLバージョン:  >>続きを読む

Redmineのインストール方法〜Mac用

Redmineはチームでシステム開発を進める場合に誰がいつまでに何をやるのか、また現在どのくらい進んでいるのかをRedmineに記録することでタスク管理することができるオープンソースソフトウェアのツールです。 チーム作業  >>続きを読む

Photoshopの描画モードを理解する〜「乗算」を理解すれば「スクリーン」もわかる

Web素材を作成するときに、ネットや本などのチュートリアルでPhotoshopの「描画モード」を使用する事は多いと思いますが、「描画モード」の仕組みをしっかりと理解しないまま終わっていませんか。 今回はPhotoshop  >>続きを読む

アスペクト比を保ちながら拡大縮小できるブロックの作成

レスポンシブサイトを作成するときに、アスペクト比(縦横比)を保ったまま拡大縮小するブロックを作成したい場合があります。簡単そうで結構ハマるところです。 今回はアスペクト比を保ちながら拡大縮小できるブロック領域の作成テクニ  >>続きを読む

スマートフォンサイトのイベント〜jQuery

スマートフォンなどのモバイルサイトを作成するときには専用のイベントが必要になります。 今回はタップ、スワイプのイベントに対応する方法を解説します。 タップイベント タップとは、画面を指先で短く1回叩くことをさします。通常  >>続きを読む

CSSで表現するブレンドモード〜CSS3

ブレンドモードは2つの画像や画像と塗りをブレンドして表現するものです。 Photoshopなどで頻繁に活用される手法ですが、CSSでも使用することができます。 background-blend-modeプロパティ 注)I  >>続きを読む

Mac Retina ディスプレイでPhotoshopの作業を行う時に解像度を変更する方法

最近のMacBook ProなどはRetina ディスプレイが標準になってきています。Retina ディスプレイでは解像度が驚くほど高くなっていることが売りです。 そしてこれまたRetina対応したPhotoshop(C  >>続きを読む

CSS3でフィルター効果をつける

フィルター効果は本来SVGのグラフィック効果として実装されました。しかし、フィルター効果はCSSからも利用することができます。 CSSでフィルター効果をつけるのは非常に簡単な上にその効果も大きくPhotoshopなどでの  >>続きを読む

Photoshopで作成した複数のシェープのパスをつなげる方法〜PhotoshopCC2017

Photoshopでシェープを作成した後に複数のシェープのパスをつなげることができます。PhotoshopにもIllustratorのパスファインダーのような仕組みが用意されています。 複数のシェープを作成するとその数だ  >>続きを読む

animate()の使い方〜jQuery

animateの指定は2つの方法があります。 まず、一つ目の方法は入門書などで紹介されている記述方法で以下のものです。 animate(params, [duration], [easing], [callback])   >>続きを読む

animate()メソッドのプロパティの値に「toggle」キーワードを使うと便利〜jQuery

jQueryでスライドして表示非表示を切り替えるにはslideDown()やslideUp(),あるいはslideToggle()などのメソッドを使用することで簡単に実現できます。簡単で便利ですから頻繁に活用されるものと  >>続きを読む

Illustratorのカラー設定

Illustratorのファイルを渡されて、カラーピッカーを使って塗りや線の色の設定を行おうとしても色が着かない場合があります。 ドキュメントのカラーモードでRGBを選択しているにも関わらずカラーピッカーで選択した色にな  >>続きを読む

バージョン管理付きNode.jsの導入方法〜Mac用

フロントエンドの開発ではNode.jsが必須になってきます。 今回はNode.jsの導入方法についての解説です。 Node.jsを導入する際に注意することは本家からダウンロードしたものをインストールするのではなく、nod  >>続きを読む

Photoshop 文字パネルの初期化

Photoshopの「文字ツール」で入力したテキストのトラッキングや垂直比率などを変更すると、次回また文字ツールを使用した場合に前回設定したトラッキングの値がそのまま適用されてしまいます。 テキストを入力したら基本的には  >>続きを読む

[HTML5.1] tfootの使い方が変わっています。

テーブルの構造化を行うタグ「tfoot」の使い方がHTML5.1で変更になりました。 「tfoot」は「thead」「tbody」の後に使用する事となっています。 HTML4.01時代は「thead」「tfoot」「tb  >>続きを読む