phiary[B!]新着記事・評価 - はてなブックマーク

『phiary』

phiary
5 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python
- テクノロジー
- 2017/08/10 16:03
- YAML
- JSON
- javascript

phiary
3 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python エラーが起きたい際に, 共通で何か処理をやりたい場面ってよくありますよね？例えばエラーが起きた行をconsole 以外で表示したいエラーの内容を日本語化したいエラーの内容をサーバーに送りたいなどなど. 今回は JavaScript で起きたエラーを検知, 捕捉してハンドリングする方法を紹介します. エラー時に必ず呼ばれる関数を登録しよう JavaScript ではエラーが起きると window オブジェクトの error イベントが発火します. なので下記のように error イベントを登録し
- 世の中
- 2017/05/30 18:37
- unclassified
phiary
4 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Feedparser とは? Feedparser とは, RSS や Atom といったフィードを json 形式にパースすることができる Node.js のモジュールです. https://github.com/danmactough/node-feedparser Feedparser をインストールしよう npm 経由でインストールします. $npm install feedparser ついでにサンプルで使う request もインストールしておきましょう. $npm install reque
- テクノロジー
- 2017/05/02 17:45
- RSS
phiary
6 users
phiary.me

Code HTML <div id='editor' class='editor' contenteditable="true"> 吾輩は猫である。... </div> <button class='btn' id='btn-show'>表<br />示</button> CSS .editor { width: 100%; height: 100%; padding: 2rem; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; writing-mode: vertical-rl; background-color: white; } .btn { position: fixed; left: 15px; bottom: 15px; } JavaScript window.onload = functio
- テクノロジー
- 2017/04/23 01:53
- HTML
- CSS
phiary
5 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python gulp で express, watch と２つのプロセスを立ち上げてるときに片方でエラーがでると片方だけプロセスが立ち上がった状態になってしまうことがあります. その状態でもう一度同じ gulp タスクを実行すると下記のようなエラーがでて再起動できなくなります. gulp [17:24:35] Using gulpfile <project_path>/gulpfile.js [17:24:35] Starting 'watch'... [17:24:35] Finished 'watch' afte
- テクノロジー
- 2017/01/27 17:25
phiary
4 users
phiary.me

先日紹介した『Web Audio API で音を再生しよう』は, 音楽ファイル(.mp3や.wav)を読み込む前提の方法でした. 今回は, Data URI Scheme のデータを読み込んでそれを音楽用のバッファに変換して Web Audio API で使う方法を紹介したいと思います. この方法であれば, ファイルに埋め込めるようになるのでクロスドメインの制約に引っかからなくなります! Flow 1. 音楽データを用意する wav なり mp3 なりを Data URI Scheme に変換します. var DATA = 'data:audio/wav;base64,UklGRnoGA...'; 先日作った下記のツールを使えばカンタンに変換できます. Web Tool - File to Data URI Scheme | phiary 2. Data URI Scheme を Ar
- 世の中
- 2017/01/21 07:57
- api
- web
- *あとで読む
phiary
3 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Runtime Permission とは？ Runtime Permission とはその名の通り, 実行時にパーミッションの許可確認を行うもので Android 6 から採用された方式です. Cordova で開発する際の注意点 Android 5 までは, インストール時にパーミッションを確認する方式だったので, カメラや外部ストレージを使う際もあまり意識してなかった方が多いのではないでしょうか？ Cordova でも同様です. ですが Android 6 からはこの Runtime Permiss
- テクノロジー
- 2017/01/10 18:58
- Android
phiary
23 users
phiary.me

Google が発表してからちょこちょこ話題に上がっているマテリアルデザイン. 今回はそのマテリアルデザインをベースとしたフレームワーク『Materialize』使ってみたのでそのメモです. 毎回 bootstrap じゃ飽きちゃいますしね♪ Materialize って？公式より A modern responsive front-end framework based on Material Design 「マテリアルデザインをベースとしたモダンでレスポンシブなフロントエンドフレームワークです.」的なことが書かれてますね. ざっくり言うと bootstrap のマテリアルデザイン版です. less ではなく sass 使ってるとことか若干インターフェースが違ったりしますが, 基本的には同じ感じで使えます. Reference Official Github cdnjs Materi
- テクノロジー
- 2016/11/27 17:20
- CSS
- webデザイン
- あとで読む
- Rails
- UI
- webdesign
- webサービス
phiary
3 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python
- テクノロジー
- 2016/11/15 19:14
phiary
6 users
phiary.me

thview.js とは ThView.js is a JavaScript image viewer program which shows spherical image photograph like RICOH THETA. RICOH THETA などで撮影した球体画像を表示するイメージビューアー JavaScript ライブラリ的なことが書かれています. RICOH THETA画像を表示するJavaScriptライブラリ作った - aikeの日記 aike/thview.js: JavaScript Spherical Image Viewer Demo 実際に使ってみたデモです. 写真をドラッグすると 360 度回転しながらパノラマ画像を見ることが出来ます. またスマートフォンでアクセスするとジャイロセンサーに合わせて画像を表示してくれます. Install ちょっと行儀悪い
- テクノロジー
- 2016/11/14 23:30
phiary
3 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Lity とは？画像や動画, 自作の要素など, なんでも良い感じにポップアップ表示してくれるプラグインです. jQuery のプラグインで軽量かつレスポンシブにも対応しているので PC, SP 問わず手軽に導入できます. Lity - Lightweight responsive lightbox Install 下記を追加するだけです. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'></s
- テクノロジー
- 2016/11/07 10:26
phiary
9 users
phiary.me

『yield』に引き続きマニアックな Riot.js tips です. 先日下記のようなツイートが流れてきました. ちょっとこれは驚愕の事実かも...riotjsでタグで直接onscroll="{hoge}"ってかたちでbindするじゃん？スクロールする度に、updatedが呼ばれる。。。つまり、スクロールする度にupdate()がかかってる。。。！？ — 杏z (@AnzNetJp) 2016年10月27日もれなく私も昔これにハマったことがあったので, その対処法を紹介したいと思います. Riot.js におけるイベント発火時のライフサイクル Riot.js は, onほにゃららに設定している関数を呼ぶと自動で update を呼ぶ仕様になっています. onclick や ontouchstart といったそれほど頻繁に発火しないイベントならそれでも良いのですが, onscroll
- テクノロジー
- 2016/10/28 18:55
- Riot.js
- title
- JavaScript
phiary
3 users
phiary.me

Code html .wrap 要素を作って, その中にスクロールさせるための詰め物 .pad 要素を作っています. <body> <h1>スクロールしてね♪</h1> <div class='wrap'> <div class='pad'></div> </div> </body> css .wrap を画面中央, いっぱいに表示して, .pad の height の値を大きくすることでスクロールできるようにしています. .wrap { position: absolute; height: auto; top: 0; bottom: 0; width: auto; left: 0; right: 0; overflow: auto; } .pad { height: 2000px; } javascript スクロールイベントを登録後, スクロール値に応じて背景色を変更しています. w
- テクノロジー
- 2016/10/19 13:21
- jQuery
- JavaScript
phiary
5 users
phiary.me

今回は, jQuery の animate 関数を使ったサンプルを紹介します. ブログとかでよく作る機能で, かつ汎用性も高いので知ってて損はないと思います! Runstant Demo とりあえず, 今回作るデモです. Top ボタンを押すとページトップにスムーズスクロールするのがわかるかと思います. animate 関数とは？ jQuery には animate という簡単にアニメーション(値を変化)させることができる関数があります. これを使うことで簡単にスムーズスクロールさせることができます. animate に渡せる引数はこんな感じです. animate(params, [duration], [easing], [callback]) params ... 変化させたい要素のプロパティ名:変化値を持ったオブジェクト duration ... アニメーションの動作時間です.
- 学び
- 2016/09/13 19:08
phiary
3 users
phiary.me

Tree コマンドとは？ Tree コマンドとは, ディレクトリ一覧をツリー形式で表示してくれる便利なコマンドです. ディレクトリ構造を一覧で確認したいってときや, プログラミング系のエントリーなどを書いているときに構成ディレクトリを載せたいって場面で使えるかと思います. The Tree Command for Linux Homepage Tree をインストール Mac での話なので Homebrew 使います. $ brew install tree これだけですね. Tree の使い方 $ tree [path] [option] という形で使います. ターミナルで $ tree -L 2 と打ち込んでみてください. 下記のような感じでディレクトリ構造をツリー形式で表示してくれるのがわかるかと思います. . ├── README.md ├── bower.json ├── b
- 学び
- 2016/09/13 09:51
phiary
7 users
phiary.me

はじめに今更な感じもしますが, わりと最近でも jQuery UI を使うことがあります. まぁサクッとドラッグや並び替えを実装しようと思うと jQuery UI が一番楽だったりするんですよね. ただ, 普通に jQuery, jQuery UI を読み込むだけだとスマートフォンのようなタッチデバイスでちゃんと動いてくれません. jQuery UI Touch Punch そこで使えるのが『jQuery UI Touch Punch』です！！なんとこれ, 読み込むだけで jQuery UI をタッチデバイス対応してくれます. 中でやってることはマウスイベントをタッチイベントに切り替えてるだけなんですけどね. jQuery UI Touch Punch - Touch Event Support for jQuery UI furf/jquery-ui-touch-punch: A d
- テクノロジー
- 2016/08/03 14:10
- jQueryUI
- jQuery
- スマートフォン
- js
- ui
phiary
5 users
phiary.me

About 『js-yaml』『js-yaml』とは, JavaScript で書かれた YAML パーサーです. Node.js, Browser どちらにも対応しており簡単に YAML を JSON に変換することができます. https://github.com/nodeca/js-yaml Usage 1. js-yaml を読み込む. <script src='https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.4.2/js-yaml.min.js'></script> 2. jsyaml.load を使って変換 var doc = jsyaml.load('greeting: hello\nname: world'); 3. 結果を確認 console.log(JSON.stringify(doc)); // {"greeting
- テクノロジー
- 2016/07/31 08:20
- database
- ブックマークバー
phiary
4 users
phiary.me

Twitter と連携するアプリケーションや Twitter Bot などを作る際, まず必要となるのが Twitter API Key です. 今回その取得方法について紹介します. Twitter API Key とは？大抵アプリケーションを作る際に必要になるのか Consumer Key, Consumer Secret, Access Token, Access Token Secret の４つです. これらはそれぞれ下記のような意味があります. name description
- 世の中
- 2016/07/13 23:20
- API
- Twitter
phiary
18 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python C言語で数当てゲームを実装 /* * 数当てゲーム */ #include <stdio.h> #include <stdlib.h> #include <time.h> int main(void) { srand((unsigned)time(NULL)); int answer = rand()%100+1; int n = 0; int turn = 0; printf("★ 数当てゲーム ★\n"); while (true) { printf("1~100 の間の数字を入力してください: ")
- テクノロジー
- 2016/06/23 10:21
phiary
38 users
phiary.me

はじめに『form 値取得』とかで検索すると for 文で一通りチェックして... jQuery で要素を取得して val() で... ってのがヒットしますよね? これらの方法でも全然問題ないんですが, ピュアな JavaScript でもわりとスマートに値を取得, 設定することができます. っということで今回は, フォーム系要素の値をピュアな JavaScript で取得, 設定する方法を一通りまとめてみました. よかったら参考にしてください. デモまずはデモです. 一通り form を並べてそれぞれ設定, 取得を行っています. console に各要素の値が表示されているのがわかるかと思います. コードデモのコードです. HTML <form name='mainForm'> <div> <h3>text</h3> <input name='_text' type='text
- テクノロジー
- 2016/06/21 11:12
- javascript
- form
- js
- あとで読む
- HTML
- web
phiary
17 users
phiary.me

Riot.js には yield という仕組みがあります. これを使いこなすことで定義済みのコンポーネントの一部を柔軟に拡張することができるようになります. 今回はこの yield について, デモや図を交えて解説したいと思います. そもそも Riot.js について知りたい方はまずこちらをどうぞフロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary Riot.js の yield とは？ yield は, Riot.js のコア機能の一つで子タグに親タグから部分的に HTML を差し込むことができます. この仕組みをうまく活用することで拡張性のある柔軟なタグ(コンポーネント)を定義することができます. yield を使ったデモ yield を使ったデモです. header の中身を外から指定したり, material
- テクノロジー
- 2016/06/17 10:37
phiary
16 users
phiary.me

スマートフォンで, リンクやゲーム要素をタップした際の反応を遅いと感じたことはないでしょうか？終盤に実機確認してこの問題が発覚! どうしよう... なんてことを経験した方も少なくないと思います. そんなときは, 今回紹介する FastClick を使いましょう. 既存のページでも後から簡単に導入できます. Cordova とかで包んでアプリを出している方なんかにもオススメです. スマートフォンで手軽に確認できるよう QR コードも置いておきます. FastClick とは？モバイル端末でのクリックイベントは touchstart touchend cilck という順番で発火するのですが, このタップとクリックの間に 300ms の遅延が発生します. この遅延を解消してくれるのが FastClick です! これを導入するだけで, ほぼ touchend と同じタイミングで click
- テクノロジー
- 2016/06/08 10:06
phiary
18 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Twitter を見ていると『Riot.js でも Sass 使いたいー！』ってのをちらほら見かけます. Riot.js は, 標準で Less にも Sass にも対応してると思っていたんですが, ちゃんと中身を読んでみると Less にしか対応していませんでした💦 (以前ドキュメントで対応してるっての見た気がするんだけどなぁ...) ただ, 引数で簡単に拡張できるよう良い感じに作ってくれているので, 手軽に Sass を導入できます. なので今回は, 実際に Riot.js のパーサーに Sass
- テクノロジー
- 2016/06/06 13:36
- Riot.js
- sass
- less
- javascript
- dev
- app
- あとで読む
phiary
15 users
phiary.me

リリースされているバージョン一覧を確認する方法 $ npm info <package name> versions 例) $ npm info cordova versions インストール済みのパッケージのバージョンを確認する方法 $ npm list --depth=0 グローバルは $ npm list --depth=0 -g バージョンを指定してインストール $ npm install <package name>@<package version> 例) $ npm install cordova@5.4.1 グローバルは $ npm install <package name>@<package version> -g
- テクノロジー
- 2016/06/05 23:39
- npm
- Node.js
- javascript
phiary
371 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 未だに form の validation って, とりあえずなんでも受け付けてサーバー側でしてエラー返ってきたらヘッダーなりダイアログなりでエラーメッセージを表示するなんてのをよく見ます. 某大手サイトなんかはエラーがあるとリロードしちゃったりするし... ユーザーさんからすると入力した段階で何かしら間違いがあったらすぐに教えて欲しいですよね. 実はこの辺って HTML5 からクライアントサイドでもある程度チェックできるように整備されています. なのでライブラリを使わなくてもある程度サーバーに送る前に
- テクノロジー
- 2016/06/02 17:07
- html5
- validation
- HTML
- form
- javascript
- CSS
- あとで読む
- 正規表現
- ui
- WEB制作
phiary
5 users
phiary.me

Code Chip タグの定義部分です. Jade で書いてます. chip(class='{has-icon: opts.icon, deletable:opts.deletable}') div.chips-icon(if='{opts.icon}') span(if='{opts.icon === true}', style='background-color: {iconColor};') {value.substr(0, 1)} img(if='{opts.icon !== true}', src='{opts.icon}') a(href='') {opts.value} div.delete-icon(onclick='{_del}') i.material-icons clear style(scoped, type='less'). :scope { display: i
- テクノロジー
- 2016/06/02 10:08
- JavaScript
- あとで読む
phiary
3 users
phiary.me

問題 CSS3 の calc() を LESS で使うと, コンパイル時に計算されちゃって意図しない値になってしまうことがあります. height: calc(100vh - 36px); ↓コンパイル後 height: calc(64vh); 解決方法この問題は, 計算式をエスケープさせることで回避できます. height: calc(~'100vh - 36px'); ↓コンパイル後 height: calc(100vh - 36px); Reference css - Less Aggressive Compilation with CSS3 calc - Stack Overflow
- 暮らし
- 2016/06/02 10:08
- あとで読む
phiary
4 users
phiary.me

今更なエントリーですが, 環境変わる度に忘れるので備忘録. node.js x express などで開発する際, サーバー側のプログラムを反映させるためには書き換える度に node index.js する必要があります. すごく面倒ですよね？それを *自動化してくれる便利なモジュールが node-dev * です! node-dev をインストール $npm install -g node-dev node-dev の使い方いつも node コマンドを使って起動しているのを node-dev に変更するだけです. $ node index.js ↓ $ node-dev index.js これで index.js とそれに関連するファイルを書き換える度に自動で再起動してくれます.
- 世の中
- 2016/06/02 07:48
phiary
680 users
phiary.me

phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
- テクノロジー
- 2016/06/01 02:51
- riot.js
- javascript
- フロントエンド
- riot
- あとで読む
- react
- HTML
- ライブラリ
- js
- css

次のページ

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx