vimでdebug | スターフィールド株式会社
前々回の投稿で扱ったデバッガをvim(CLI)にて再現しました。 普段はIDEでなくvimで作業するため 実運用的にこちらを採用していきます。 他のブログで紹介されているものと特に異なるのが 【vimを起動する環境とPHPを起動する環境が同じ】 という点にご留意ください。(一応同条件のものは少数だが確認しました) 良かった点 ツールの行き来が無いので無駄な作業が減る 慣れてるvimの操作の分めちゃくちゃ速い 微妙, 悪かった点 vim内部でダイナミックにpythonを実行できるようコンパイルし直し 独自のdbgpというプロトコルを認識する必要がある IDEと違ってnginxのポートと重複しちゃだめ(?) 最後の点で恥ずかしながら苦戦を強いられました。 今回使用するブラウザとしてChromeを挙げます。 こちらからダウンロードしてインストール。 拡張機能の設定から”Xdebug helper
デバッガの導入 | スターフィールド株式会社
デバッガなるものを導入しました。 平たくいえばやった内容は ・文字列や数値以外のデータ可視化 です。 使ったツールはVisual Studio Code. 開発環境は仮想環境に入ってるものとします。 まずはエディタのダウンロードです。 ここから 次にVisual Studio Code(以下VSC)上でPHPのデバッガをインストール・設定します。 そして設定。 Debug → Add Configuration → PHP を選択 以下の差分を追記。 該当行の左側にデバッグ対象としたい仮想環境のディレクトリを記述します。 { // IntelliSense を使用して利用可能な属性を学べます。 // 既存の属性の説明をホバーして表示します。 // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387 "version
ネイティブアプリ並みのパフォーマンス！WebAssemblyでフロントエンド開発が変わる | スターフィールド株式会社
スターフィールド株式会社 > Blog > 制作 > html5 > ネイティブアプリ並みのパフォーマンス！WebAssemblyでフロントエンド開発が変わる JavaScriptは現在のWeb上で欠かせないものとなっています。近年のWebアプリケーションは物理演算や画像・音声・映像の処理、人工知能といったネイティブアプリと同じような機能や動作が求められるようになってきています。また、ユーザー側の端末のパフォーマンスが大幅に向上してきたことから、以前はサーバー側で行っていた処理をフロントで行うようになってきているため、フロントのプログラムはより複雑に、大規模なものが必要になってきています。 しかし、そのような複雑で大規模な処理をJavaScriptだけで行うことに限界が出てきていました。JavaScriptは元々複雑な処理や大規模な開発を前提としたプログラム言語ではないため、言語の特性上、
WebGLの仕組みについてまとめ直してみました | スターフィールド株式会社
2010年12月に WebGL が Chrome で利用可能となり、 2011年には3月に Firefox、7月に Safari で利用可能となり、 2013年10月には IE の最終版で WebGL も利用可能な IE11 が登場し、 一般的なほとんどのブラウザで WebGL が利用可能となりました。 それから5年経った2018年、ようやく GPU などのハード面でも WebGL の動作環境が一般的に整い、 今、WebGL の実装の機会が増え、必要性も求められつつあります。 私もそんな状況も踏まえ、WebGL の技術習得を本格的に目指そうと思い、 WebGL のライブラリである Three.js について、これまでも何度か勉強してきたのですが、 Three.js の 公式 DEMO をコピーして画像やモデルを差し替える程度に留まってしまい、 技術を応用して新たに何かを作り出すというところ
Three.jsによるWebGLで360度パノラマ表示 ｜ スターフィールド株式会社
"use strict"; //イベントの振り分け var EVENT = {}; if ('ontouchstart' in window) { EVENT.TOUCH_START = 'touchstart'; EVENT.TOUCH_MOVE = 'touchmove'; EVENT.TOUCH_END = 'touchend'; } else { EVENT.TOUCH_START = 'mousedown'; EVENT.TOUCH_MOVE = 'mousemove'; EVENT.TOUCH_END = 'mouseup'; } (function () { var camera, scene, renderer; var cube, sphere, torus, material; var count = 0, cubeCamera1, cubeCamera2; var f
Canvasで波のアニメーションを描画する | スターフィールド株式会社
(function () { var unit = 100, canvas, context, canvas2, context2, height, width, xAxis, yAxis, draw; /** * Init function. * * Initialize variables and begin the animation. */ function init() { canvas = document.getElementById("sineCanvas"); canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる canvas.height = 300; context = canvas.getContext("2d"); height = canvas.heigh
CSSアニメーションでinputに動きをつける ｜ スターフィールド株式会社
昨今CSS3やjQueryによって簡単に動きを付けられるようになっているので、 マテリアルデザインでも提唱していますが、インタラクティブな動きつける傾向が強まっています。 傾向があるというか色々付けたがっているという感じもしますが・・・（僕もそんな一人です・・・） ということで、今回は、 今まであまり動きをつけることのなかったフォームのinputに動きをつけてみました。 こういうサイトを見つけたので、 マネしてやってみました。 Awesome input focus effects – Usingcss3 試したデモは以下からご覧ください。 DEMO html <div class="inputBox"> <input type="text" class="style1"/><label>名前</label><span class="border"></span> </div> <div
css3のflexboxを使うとすごい簡単になるレイアウトを試してみた | スターフィールド株式会社
css3で登場したflexboxですが、そろそろ使える頃合いがくるんじゃなかろうかということでflexboxを使ったら簡単だったなぁと思うレイアウトを実際に試してみました。 flexboxについてのそもそも解説はいろんなブログにあるので、ここでは割愛させて頂きます。 どんなものか理解するためのサイトとしては以下をお薦めします。 Visual Guide to CSS3 Flexbox: Flexbox Playground | 簡単にいうと、cssの新しいレイアウト方法になります。これまでの方法と比べると、グッと簡単に様々なレイアウトができるようになります。 DEMOを作りましたのでそちらをご覧ください。 DEMO flexboxのサンプル ツーカラム よくあるツーカラムのコンテンツですね。 今までだとfloatを使って…という感じでしたが、 flexboxを使うとこんな感じになります。
【Canvas】円でぼかしのような視覚効果 | スターフィールド株式会社
メインの被写体に注目させたり、遠近感を出すとき、 背景をぼかす効果が威力を発揮します。 背景にあるものをぼかす場合、 以下の様なぼかしの方法(Photoshopでいうガウス)が、一番良く使われると思います。 この効果をHTML5のCanvasで使うと表現の幅が広がって良さそうだと思ったのですが、 Canvasでこの効果を再現しようとすると、非常に演算が重くなるという難点があり、 CSSやSVGのfilterでもその問題は同様です。 そこで、ほかにぼかしの効果として使えるものはないかといろいろ試している中、 カメラで撮影した場合に見られる、以下の様なぼかしの効果に今更ながら気づきました。 ↓↓ 拡大 ↓↓ ボケたところは単純にぼやけているわけではなく、 カメラの絞りの形が重なり合ったようになっているんですね。 特に明るいところではこの形がはっきりとしています。 焦点が外れたと
JavaScriptのprototypeを使ったオブジェクトを作ってみよう | スターフィールド株式会社
前回 JavaScriptのprototypeを使ってオブジェクト指向のプログラムを組む方法についてご紹介しましたが、 今回は、実際にprototypeを使ってオブジェクトを作ってみました。 ↓作ってみたもの DEMO 作ってみたものの概要 //コンストラクトを定義 setBgImage = function (selector) { this.element = document.querySelector(selector); this.selector = selector; this.init(); //デフォルトで実行する関数の指定 }; //メソッドを定義 setBgImage.prototype = { getSrc: function() { return this.element.getAttribute('data-bgimg'); }, init: function(
JavaScriptでCSSを操作する方法 | スターフィールド株式会社
のように記述すれば操作ができます。 ただ、案件によってはjQueryのが利用できなかったり、 対象の要素がSVGなどでブラウザによって認識されないなど、 jQueryを使わずにJavaScriptでCSSを操作する必要があります。 そこで、JavaScriptでのCSSの操作方法をまとめてみました。 var target = document.getElementById("example"); //対象要素をIDで指定 var target2 = document.getElementsByTagName("div"); //対象要素をタグで指定 var target3 = document.getElementsByClassName("example"); //対象要素をクラスで指定(IE9以上) target.style.color = "red"; //colorを設定 targ
html5で増えたinput関係で実際使ってみたいもの | スターフィールド株式会社
html5では、inputのtype属性がいろいろ追加されました。 今までは、javascript等で制御してた部分をhtmlだけで対応できてしまうというものです。 これは便利！ なのですが、まだまだブラウザの対応が追いついてません。。。 特にIE・・・ なので、案件等ではまだ使えませんが、 使える時になったらぜひ使いたいものを紹介します。 type属性 color値 カラーパレットを表示します。 これだけで、カラーパレットが出てくるなんて・・・ IE非対応…
javascriptで「window.matchMedia」があるというのを今更知った件 | スターフィールド株式会社
レスポンシブのサイトをコーディングする際、javascriptでSPの時だけ動かしたいことや、SPの時にjavascriptを使って制御しなきゃいけない時に、今までは以下の用に書いていました。 (jQuery使用)
ユーザーをいらだたせる定番のWEBデザイン５個とその改善策(スマホ向け多め) ｜ スターフィールド株式会社
WEBデザインとして定番として使われているものの中には、 実はユーザーにとって、ストレスの元になっているものがいくつかあることを最近知りましたので、 そういったユーザーをいらだたせている定番のWEBデザインについてご紹介させていただきます。 今回紹介するものはスマホの時に特に問題となるものが多いです。 PCでご覧の方でDEMOページをご覧になる方は、スマホからご覧になることをお勧めいたします。 ↓このページのQRコード 予告のないポップアップ・別タブ表示(特にスマホ) 通常リンクと区別のない唐突な別タブでのリンクや、 ページ訪問時のポップアップでの情報掲載などは、 ユーザーが意図していない動作であることが多く、ユーザーをいらだたせる原因となります。 スマホではタブ操作がやや面倒な場合が多いため、別タブでのリンクの表示もストレスのもととなります。 DEMO リンク先を別タブで表示するときは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSフレームワークFoundationを試してみた | スターフィールド株式会社
OAuth(オー オース)認証紹介 | スターフィールド株式会社
Canvasで画像の白を透過にする | スターフィールド株式会社
よく使うgitコマンド | スターフィールド株式会社
CSSでボーダーのアニメーションを考えてみたけど・・・ | スターフィールド株式会社
CSS3で合成効果 | スターフィールド株式会社
