デモ要約disable時の見た目はopacityで対応。 デザインもそのように作ってもらう必要はある。フォームパーツのグループや、フォームパーツ以外にもdisableな見た目にする必要がある場合はfieldsetを使うdisable時の見た目はopacityで対応。フォーム
2019-08-25
4〜5年前の「JPEGmini最強!」の時代で止まっていたので、改めて調べてみた。結論mozjpeg最強候補JPEGminiImageOptimWebpmozjpeg結果圧縮率・品質自体は4つともそんなに大差はなかった。(品質に関しては目視では4つの違いがわからん)(目視でわから
2019-08-16
pathモジュールの使い方毎回忘れるのでメモ/** 情報取得系 **/// 絶対パスかどうかを判断path.isAbsolute('/foo/bar') // => true// パス情報を分解。拡張子を除いたファイル名も簡単に取れて便利// 以降のdirname, basena
2019-07-14
結論huskyとlint-stagedを導入すればいい。導入手順前提として、eslintがインストール済なことインストールyarn add --dev husky lint-stagedpackage.json記述{ "husky": { "hooks": {
2019-07-04
GitHub - nodenv/nodenv: Manage multiple NodeJS versions.なぜnodenvか?.node-versionファイルを配置しておくだけで自動的にNode.jsのバージョンを切り替えてくれるため。自動切り替えは言わずもがな便利だし、
2019-05-18
保存から0.5~1秒程度要してしまうが、ファイル保存時に特定のコマンドを実行させるFileWatcherの機能を使えば実現可能。(Mac/WebStorm環境で確認)やることVueCLIでフォーマッタにPrettierを指定した場合の出力ファイルを参考に環境の準備WebStorm
2019-04-06
Veturのインストールjsconfig.jsonの作成vueファイルへの定義ジャンプを可能にする方法ESLintでの保存時フォーマットjsconfig.jsonの作成Vue CLIやNuxtの場合、最初から@や~といったエイリアスが用意されている。エイリアスはjsconfig.
2019-04-06
position: fixedなヘッダーがある場合、何も対策していないとスムーススクロールの際にヘッダーとスクロール先の要素が被ってしまう。そういう場合に一般的には以下のようにヘッダーの高さ分スクロール位置をずらすことで対策をしている。var duration = 300;var
2019-04-03
jsconfig.json ReferenceVSCodeのJSに関する設定ファイルinclude/excludeプロジェクトのソースコードとして認識させるファイル群をホワイトリスト/ブラックリスト形式で指定する。両方共globパターンが使用できる。注意点はincludeやexc
2019-03-28
結論基本utf8mb4_binでいいんじゃなかろうかと個人的に思った。ただ、ネット上の情報だと何故かutf8mb4generalciを選択しているパターンが多い…なにか見逃しがあるのかもしれない。各collationにおける比較結果の表各collationで「a」と「A」や「🍣
2019-03-10
手順端末ごとに1回だけやればいいESLintの自動修正+保存のマクロを登録プロジェクト毎にやるPHPStormでESLintを利用するようにするエイリアスを利用している場合は、PHPStormにエイリアスを認識させるためのファイルを配置詳細ESLintの自動修正+保存のマクロを登
2019-03-10
手順(Dockerの場合)Dockerの設定CLI Interpreterの設定PHPUnitの設定テスト実行に関する設定詳細(Dockerの場合)Dockerの設定Preference > Build, Execution, Development > Dockerで+を押して
2019-03-06
rebaseしてsquashすればいい例% git log [20:52:42]commit afed1fc70e8c890d310505f71569a
2019-03-03
参考プロジェクト上のtwitter-list-image-viewerのreference/page-transitionブランチでは、VueRouterでの画面遷移時にトランジションをつけている。まだちゃんと動作する理由は把握しきれていないがメモとして動作の肝となる部分をメモ。
2019-02-16
Prettierも組み合わせて使いたかったけど諦めた。組み合わせて使おうとしたらコミット時の整形内容と、エディタで保存時にかかる整形内容が何故か異なってしまって気持ちが悪かった。なので、ESLintでカバー可能な範囲のフォーマットだけ行うことに。手順保存時に自動フォーマットされる
2019-02-16
めちゃくちゃ今更だけどやっとPrettierを入れたのでメモ。ESLintとの連携は後回し。公式prettier/prettier: Prettier is an opinionated code formatter.手順prettierインストールプロジェクトルートに.pret
2019-02-12
「style属性つかうやつは糞」みたいな言葉をHTML/CSS学び始めた初期に頻繁に見て悪いイメージしか無かったんだけど、最近は使い所に気をつければめちゃくちゃ良いんじゃないかって思い始めたのでメモ。style属性を使うべきパターンその場所でしか出てこないような例外的なデザインs
2019-02-11
最近Herokuの活用事例を聞いて試してみたくなったので試した。そのメモ。手順GitHubリポジトリの準備Herokuの準備 アプリの作成 BuildPackの適用 DBの準備 GitHubリポジトリと連携初回デプロイ 最初は手動デプロイ 環境変数の設定GitHubリ
2019-02-05
プロトタイプチェーンに関して実際に手を動かさないとよくわからなかったのでメモ程度に// Person Classvar Person = function(firstName, lastName, age) { this.firstName = firstName; this
2019-02-02
使用する場合の前提条件HTTPSもしくはlocalhostServiceWorkerのバージョンアップServiceWorkerとして登録されているファイルに変更があっても、即時適用されるわけではない。ファイル変更を検知すると、installイベントが発火される。install完
2019-01-30
まず前提として、ハッシュ化とは不可逆変換の事。なので、パスワードのハッシュ化は復号しない・出来ない前提の物。(パスワードの暗号化という言い方は間違いになる)パスワードのハッシュ化は、ハッシュアルゴリズム(md5,sha1,sha2等)を使ってランダムに見える値に変換する行為。前述
2019-01-29
minifyしたソースとsourcemapをSentryにアップロードしてminifyソース対応以下手順まだ入ってない場合sentry-cliを入れる。https://docs.sentry.io/cli/installation/npm install @sentry/clis
2019-01-28
複合ユニークキー複数のカラムの組み合わせでユニークであることを担保する方法。CREATE TABLE users ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(255), age INT,
2019-01-27
多くの他言語だと例えば、try { // 例外が発生しうる処理} catch (SomeException error) { // 例外処理}のように書いて、SomeExceptionのみcatchしてそれ以外は普通に例外吐かせて処理を止めることが出来る(よね?)。ただ、Ja
2019-01-26
SPAを作る際のリダイレクトルールの設定firebase.jsonに設定する。{ "hosting": { ~ "rewrites": [ { "source": "**", "destination": "/index.htm
2019-01-14
PHPDocに関してこまごましたことプロパティやメソッドの1行上で/**と書いてEnterすると、適当なPHPDocコメントを入れてくれる。特定の型の配列を指定private $users = []というUser型の配列があったとする。単純にPHPDocを自動生成すると、/**
2019-01-12
特定ポートの疎通確認telnetを使用する。telnet [対象ホスト/IP] [ポート番号]
2019-01-10
手順sendmail.iniを編集cgiの該当設定ファイル等に、XAMPP内のsendmail.exeのパスを指定sendmail.iniを編集smtp_server=smtp.gmail.comsmtp_port=587auth_username=[GMailのメールアドレス]
2019-01-07
詳細な手順は省略。詰まった所をメモっておくAWSの認証情報をDockerコンテナ内に配置するAWSの認証情報は通常~/.aws/credentialsとして配置し、AWS SDKもそこから情報を読み取る。認証情報はaws configureした際にファイルが作成されるが、コンテナ
2019-01-07
基本的に公式サイト読めばわかるのでとりあえず読んだほうが良い。ローカル端末からAmazonECRへイメージをpushaws cliをインストールpip install awscli --upgrade --user初期設定aws configurepushするイメージをビルドdo
2019-01-05
インストールAWSの場合は以下の方法でインストールAmazon ECS における Docker の基本 - Amazon Elastic Container ServiceMacの場合はDocker for Macを入れればdocker-composeも含めてインストールされた気
2019-01-03
雑に「+」で文字列連結print('hoge' + 'fuga')文字列と非文字列の連結はエラーprint('合計は' + 100 + '円です')文字列へのキャストはstrprint('合計は' + str(100) + '円です')数値へのキャストはintint('100')
2018-12-11
基本的なコマンド等SELECTSELECT直後の列指定には、式も指定できる。SELECT id, name AS '商品名', price, price - genka AS '利益' FROM items WHERE price >= 1000 AND price -
2018-12-05
Dockerで立ち上げたMySQLサーバーに対してSequelProで接続しようとしたところ、ホスト 127.0.0.1 に接続できなかったか、リクエストがタイムアウトしました。アドレスが正しく必要な権限のあることを確認するか、接続タイムアウトを増やして試してください(現在 10
2018-11-13
仕様はMDNを参照Promiseを使う - JavaScript | MDN以下のサンプルコード用の通信系の疑似関数としてget()を用意。function get() { return new Promise((resolve, reject) => { s
2018-11-12
最終的なスクリプト#!/bin/sh#----------------------------------------動画のダウンロード#----------------------------------------echo "プレイリストのURLを入力してください。"read
2018-10-05
Monologには、Slack用のHandlerは公式で用意されているが、今回DiscordのWebHookを使いたかったためそれに関してメモ。Monologのコード例は以下な感じ。pushHandler(new StreamHandler('path/to/your.log',
2018-10-02
Eloquentのallはメモリ消費量が多いので注意大量のレコードを処理する場合はchunkを使おう。Laravel(Eloquent): chunk() vs cursor() - Qiita作った関数とか処理を手軽に試したいtinkerを利用する。php artisan ti
2018-09-17
Twitter認証をしてログインするまでの手順が難しくはないがやることが結構あったので覚書手順socialiteのインストールconfig/service.php及び.envの更新LoginControllerの作成usersテーブル、Userモデルの作成ユーザー情報登録・ログイ
2018-09-13
LaravelのtimezoneをデフォルトのUTCからJST(日本標準時)へ変更するLaravelでJSTを扱う時、上記のような解決法が挙げられている。ただこの方法を試したところ、DBへ保存される時間もJSTになってしまった。出来るならDBにはUTCで保存しておき、出力の際に適
2018-09-12
Laravelが日付のライブラリとしてCarbonを使用している。便利という話は聞くものの、DateTimeとどのような差があるのかよくわからなかったので簡単なサンプルを書いて確認してみた。format("Y/n/j G:i:s") . PHP_EOL; // => 2018/9
2018-09-11
PHPStormを使い初めたのですが、Laravelにおいてコード補完が働かない場合がちょくちょくあります。例えば、php artisan make:model Worldで作成したWorldクラスに関して、ControllerでWorld::where(~)と書くと、Metho
2018-08-14
分岐パターンn対n単一のObservableに複数subscribeした場合、subscribeしたタイミングでStreamの複製が割り当てられる。で、何が起こるかというと、複製されたStreamではまた値が最初からになる。RxJS を学ぼう #4 – COLD と HOT につ
2018-08-09
ユニットテストしやすくするために、クラス内で他クラスのインスタンスを生成するのでなく、コンストラクタの引数としてインスタンスを受け取ろうぜっていうアレ例実際にVRChatのAPIを叩くサンプルプロジェクトを作って試してみた。GitHubDIなしimport { VrcApi }
2018-07-25
ノーマルマップを自前で実装する際に学んだことをメモ。前提として、右手系で考える。OpenGLとDirectXで法線マップ画像が異なる理由OpenGL用では緑が強いほど上方向へ傾いているがDirectX用では下方向に傾いており、Y軸に関して逆になっている。これは、OpenGLが右手
2018-07-12
tsconfigに関して、必要そうな設定に関して覚書。{ "compilerOptions": { // 変換するJavaScriptのバージョンを指定 // とりあえず、'ES5', 'ES2015', 'ES2016', 'ES2017'のど
2018-05-19
delegate変数に関数を格納するために、関数の型を定義するための方法。例えば、`delegate void OnCalcComplete(float value);`これは、「float型の引数を持ちvoidを返すOnCalcCompleteという型の関数」を定義している。`
2018-05-10
Demo概要UI用のカメラを配置UI用のカメラは、UIレイヤーのみを表示するようにCullingMaskを設定UI用のカメラを配置UI上には通常UI部品しか配置出来ない。ただ、UIを表示する用のカメラを配置し、そのカメラにUIを描画させることでモデルをUI上に描画させることが出来
2018-04-24
実装したものダイクストラ法ダイクストラ法(最短経路問題)最短経路探索アルゴリズムに関して、今回はアルゴリズムがシンプルなダイクストラ法を試してみた。クリック検知Unity(3D・2D) EventSystemでクリックイベントの制御 - Qiitaこちらの方法で、クリックに反応す
2018-04-21
Unityのシェーダーの種類Unityのシェーダーには以下の3種類が存在する。Surface Shader頂点シェーダーとフラグメントシェーダー固定関数シェーダー「Surface Shader」は簡単だが出来ることに制限がある、「頂点シェーダーとフラグメントシェーダー」は難しいが
2018-04-18
勉強のために、モデルを回転・拡大・移動させる簡易ビューワーを作成した。GitHub Pagesその際に詰まったことや学んだことのメモ。マウスの座標を取得Input.mousePositionで取得可能。ウィンドウの左下を(0, 0, 0)として現在のマウスポインタのピクセル座標を
2018-04-16
シーンの遷移とフェードを管理するクラス【Unity】【uGUI】 - (:3[kanのメモ帳]シーンのフェード遷移に関しては、上記リンク先に参考とすべきコードがあるが、自分がコードの内容を完全に理解しきれておらず、理解しきれていないコードを使うことに抵抗があるため簡単なものを自作
2018-04-16
Unityの練習として倉庫番を作成した。Demoこんな単純なゲームでも、色々と学ぶことは多かったのでメモとして残しておく。FindはアクティブなGameObjectのみ返すGameObject.Find - Unity スクリプトリファレンスGameObject.FindGame
2018-04-09
ESではNumberは64ビット倍精度浮動小数点方式なので符号:1ビット(0が正、1が負)指数部:11ビット仮数部:52ビット例えば、3は内部的には0100 0000 0000 10000000 0000 0000 00000000 0000 0000 00000000 0000
2018-04-08
C#に関して、自分が知ってる言語には無かった点や罠になりそうな点をまとめておく。ドキュメンテーションコメント以下のように/// でドキュメンテーションコメントが記述出来る。ドキュメンテーションコメントの内容は、インテリセンスの際に要約として表示してくれる。(インテリセンスへはVi
2018-02-26
再現する状況外部アプリからリンクをクリックして表示ブラウザはChrome上記2点を満たす際に、transitionが設定されているものに関して、ブラウザデフォルト値から設定値へのtransitionが発動するデモDemo前述の通り外部アプリからのリンクでないと再現しないことに注意
2018-02-25
Unicodeでは、特定の文字を表現する方法が複数存在する場合がある例えば「ボ」という文字を表現する場合、合成文字(U+30dc)と結合文字(U+30db U+3099)の2通りの方法が存在するこういう合成文字・結合文字2通りの表現方法が存在する文字をどちらかに変換する事を「Un
2018-02-04
Demo概要CSS スクロールスナップ - CSS | MDNCan I use... Support tables for HTML5, CSS3, etcCanIuseで分かる通り、2018/2/4時点ではChromeが対応していない。とはいうもののChrome以外では対応し
2018-01-26
Demo※タッチイベントのみに対応
2018-01-25
creationix/nvm: Node Version Manager - Simple bash script to manage multiple active node.js versionsインストール方法変わるかもしれないので公式読め各種コマンドヘルプnvm --he
2018-01-02
JavaScriptにおいて、以下のコードは同じ意味である。var hoge = {};var hoge = new Object();var hoge = [];var hoge = new Array();{}と[]は、それぞれnew Objectとnew Arrayのシンタ
2018-01-01
結論ディープコピーしたいならlodashのcloneDeepを使え。シャローコピーとディープコピーシャローコピー:参照を維持しているコピーディープコピー:参照を切ったコピーシャローコピーの方法普通に代入すれば良いvar original = [0, 1, 2];var copy
2017-12-29
hyperappが300行程度のフロントエンドフレームワークとして話題になっていたので読んでみた。結論から言うと、量が少ないから読みやすいかと思いきや、行数節約のために結構自分からしたら変な書き方が散見されており、全部読み切る気が途中でなくなってしまった。というものの、途中までで
2017-12-17
メジャーなコンポーネントを作成する際の個人的なベストプラクティスに関してメモ。随時追加。ツールチップDEMOキモとなる箇所重要な箇所のみ抜粋 テキスト.ToolTip { width: 300px;}.ToolTip_body { display: inline-block
2017-12-17
ツールチップに汎用性を求める場合、ツールチップを起動するコンポーネントの子要素としてツールチップを配置してしまうと祖先要素にoverflow: hiddenが設定されている場合に、見切れてしまう可能性がある。そのため、body直下にツールチップを配置する必要がある。公式サイトを見
2017-12-14
Karabinerに関するメモ置き場設定ファイルGitHubメモ特定のアプリで特定のキーバインドを無効にしたい無効にしたいキーバインドのconditionsに以下のような設定をすれば可能。{ "description": "キーバインドの説明", "manipulat
2017-12-12
DEMO※クリックの際に座標とtargetに関する情報を流している。クリック座標関係|プロパティ名|備考||:----|:----||offsetX/Y|targetの左上からの相対座標||pageX/Y|documentの左上からの相対座標||clientX/Y|ブラウザの左上
2017-12-10
Demo概要コンポーネントの内容を呼び出し元である程度自由にしたい場合、プロパティだけでは不十分な場合がある。その場合にslotという機能を使用して、呼び出し元から柔軟にコンポーネントの内容を調整出来るようにする。スロットの種類単一スロット名前付きスロットスコープ付きスロット単一
2017-12-10
呼び出したコンポーネントにclickイベントで何かしたい場合はnative修飾子をつけるコンポーネント — Vue.jsボタン上のように、呼び出したコンポーネントに直接ネイティブのイベントで何かさせたい場合はnative修飾子をつける必要がある。ページ遷移アニメーションを設定して
2017-12-10
Demoコンポーネントの内部実装を意識しないで使える汎用的なタブコンポーネントを作りたかったが、Vue力が足りなくて無理だった。使い方としては、 Tab01 Tab01のコンテンツ Tab02 Tab02のコンテンツのように、tabsプロパ
2017-12-08
以下のようなHTMLが存在する。これをこのようにbtn-componentとしてVueコンポーネントした場合、どのようにバリエーション(デフォなのかprimaryなのかsecondaryなのか)を指定するのかは色々方法はあると思うが、自分が良いと思った手法をメモとして残しておく。
2017-11-15
BackstopJS準備ローカルにインストールnpm i -D backstopjs設定ファイルを生成npx backstop init設定ファイルの書き方設定項目は色々あるが、基本scenariosとviewportsだけ弄れば使える。scenarios{ ~ "scena
2017-11-14
概要feature/fix01ブランチでadd textを行い。その後本来developからfeature/aboutブランチを切ってするべきだったmake about htmlとadd about/style.cssをfeature/fix01ブランチのまま作業してしまった。こ
2017-11-12
PixiJSを使用して簡単な縦シューティングゲームを作ってみようと思いJSを書いていたら、色々と便利な物を見つけたのでメモ。オブジェクトをマージするObject.assignjQueryの$.extendと同様にオブジェクトをマージしてくれる。以下のように、引数としてオプションを
2017-11-08
graphvizのインストールbrew install graphvizJDKのダウンロードJava SE - Downloads | Oracle Technology Network | Oracle下記画像赤枠部分のボタンからダウンロード。atomにplantuml-vie
2017-10-28
マテリアルデザインでよく見るボタンを押した際のRippleエフェクトに関する覚書DEMO覚書今回実装にあたり、Vuetify.jsを主に参考にした。その過程で知ったことを以下に覚書として残しておく。currentColorでcolorと同じ値を指定出来る汎用的なRippleエフェ
2017-10-22
バリデーション関係はプラグインが結構あり、本来はそれを使うべきなんだろうけど勉強がてら実装。細かいバリデーションはまだややこしいので必須チェックのみ。Demo詳細オブジェクトをループ処理したい場合はkeysを上手く使う算出プロパティのisValidでやっているが、Object.k
2017-10-21
公式ドキュメント内にプロパティとして関数を渡す例が挙がっていなかったため気づかなかったが、プロパティとして関数を渡す事も可能。例えばコンポーネントを削除するにあたり、子コンポーネント内で$emitをする事で親コンポーネントでイベントを受け取り削除処理を実行するプロパティとして削除
2017-10-15
DemoソースHTMLJSVue.component('check-component', { data: function() { return {}; }, props: ['value'], methods: { updateValue: functio
2017-10-09
今まではJSHintを使用していたが、webpack+Vue.jsで個人的に物を作るにあたってES2015以降の構文を使用したい状況が多く出てきたため、ESLintに移行することにした。その備忘録。ESLint - Pluggable JavaScript linter全体の流れ
2017-10-01
以下に構築中GitHubメモしておきたいことは随時追記する。概要vue-cliを利用して単一ファイルコンポーネントの機能を使用することが推奨されているが、webpack初心者な自分にとっては一番シンプルなテンプレートでも複雑で、ブラックボックスが大きいため気持ちが悪い。そのためv
2017-09-24
単一ファイルコンポーネントの懸念点主にCSSに関する懸念点がある。単一ファイルコンポーネントでは以下の描き方でローカルスコープで閉じたスタイル指定が可能となっている。 Dummy Texth1 { font-size: 12px;}これのコンパイル結果は以下のようなものとなる
2017-09-24
Gulpを使用している際に、本番・開発環境の切り分けをしたいと思うと、EJSは簡単に出来るのだが、SassやJSに関しては直接的な方法ではちょっと面倒。なので、Sass/JSに関してはEJSで出来る範囲の方法で行うという形が一番楽なのかなと思った。以下その方法をまとめておく。環境
2017-09-23
要約Shebang(シェバング)という。CUIからファイル名を直接叩いた際、基本的にはそのファイルにはマシン語が記述されている前提で解釈される。ただしUnixはファイルが「#!」から始まっている際は、その後に記述されているコマンド経由でファイルが実行される。(追記)Macの動作を
2017-09-18
以下のように記載されている。PHP: json_encode - Manual> エンコードに失敗した場合は、jsonlasterror() を使ってエラーの内容を調べることができます。PHP: json_decode - Manual> デコードに失敗した場合は、jsonlas
2017-09-18
Unicodeは文字集合、UTFは符号化方式文字集合:「この文字をコンピュータで扱えるようにしてぇな〜」って文字の集合符号化方式:文字集合を具体的にどういうルールで表現するかの方法UnicodeとUTFの歴史ざっくりまずASCIIコードが作られる当然ASCIIコードの文字だけじゃ
2017-09-13
結論DEMO詳細諸々省略すると単純な実装は以下の通りになる。DEMO Header Footer.l-app { display: flex; flex-direction: column; min-height: 100vh;}.l-app_content { fl
2017-09-08
デモDEMO詳細普通は中央配置をする際.modal { width: 800px; height: 600px; position: fixed; left: 50%; top: 50%; margin-left: -400px; margin-top: -300px;
2017-08-19
スクロールに応じてアニメーションを起動するスクリプトを組む機会があり、以後同様の物を組む必要が出た時の為のメモDEMOポイントdata属性による微調整以下のように、data属性を使用してアニメーションの微調整を出来るようにしている。〜JSでは、以下のようOR論理演算子を使用してd
2017-08-14
DEMO詳細Web Audio APIを使ってオーディオビジュアライザを作る | KRAY Incほぼこの記事の内容通り。画面に出力するだけならめちゃくちゃ簡単だけど、コードの意味は理解しきれてない部分も多い。AudioContext.createAnalyser()により取得し
2017-08-12
円形の進捗を表示するデザインはd3.jsにデフォルトで用意されているが、それだけの為にd3.jsを利用するのはオーバーな感じがする。SVGに関して無知だったので調べてみたら、d3.jsをわざわざ使わなくても結構簡単に実装出来たのでまとめておく。pathのd属性を弄るDEMO一番最
2017-08-11
現在制作物をPWA対応しようと思い、そのためにサイトをHTTPS対応しようとしているのだが、その手順の中に「なぜこの手順が必要なのか」っていう物が非常に多く、それを理解しないままこなしていくのは非常に気持ちが悪い。「手順の必要性がわからないのはHTTPS通信の仕組みを理解していな
2017-08-05
以下のようなCSSで実現可能html { height: 100%;}body { height: 100%; overflow: hidden;}上記のように、html,bodyをheight: 100%;にした上で、bodyにoverflow: hidden;を適用すれ
2017-07-22
fromCharCodeの変換ルールが最初意味不明だったのでメモ。要約引数で渡された値をUnicode表を元に文字に変換して返却UCS-2なので、2バイトの範囲内の文字しか変換出来ない。より広範囲の文字を変換したい場合はfromCodePointを使用する。実例console.l
2017-07-02
Git関係マージ&ブランチ削除git merge branch-namegit branch -d branch-name一定期間手動でやって、煩わしくなったらaliasを作る。コミットをまとめるgit rebase -i HEAD~[まとめる数]vimが開かれるので、ベースにす
2017-07-02
某ブラウザソーシャルゲームでメモリを直接書き換えることによりドロップを弄る方法が過去に話題になり、それに関して半年くらい前に興味が湧いて調べた。それに関するメモ。要約モダンブラウザは変数をメモリに入れる際に(恐らく)暗号化されているので、Firefoxの過去バージョン等をインスト
2017-07-01
今やっているスマホゲームがどんなAPI設計をしているのか、どんなjsonが返ってきてるのか気になったので、iOSアプリの通信内容をキャプチャする方法を調べて試してみたのでそのメモ。手順Xcodeのインストール使用する端末のUUIDを取得rvictlでリモート仮想インタフェースとし
2017-05-30
2017/05/30現在、SierraだとKarabinerが使用できません。英数キーにワンショットモディファイアとしてCtrlを設定していた身としては、それができないとかなり不便(Ctrl+npbfでカーソル移動している)なので方法をメモ。Karabiner-Elementsの
2017-05-30
SSHに関して頻繁に仕組みを忘れては調べなおしてってのを繰り返しているので、後々再び忘れた際にすぐに思い出せるようメモっておく。要約SSHは実際のデータのやり取りは共通鍵暗号方式で行っている共通鍵暗号方式の鍵を公開鍵暗号方式でやり取りすることで、共通鍵の問題点を克服している詳細共
2017-05-29
もはや今更な話だけど、ネット上のNormalize vs Resetの記事を見ててもNormalize肯定派しか見当たらず、その主張が個人的に納得いかないものだらけだったので自分の意見をまとめておく。Normalize/Resetの例Normalize: sanitize.css
2017-05-26
わざわざ一つの記事にするものでもないやつの寄せ集め。codeタグ内の文字がChrome等Webkit系で小さくなる原因Webkit系のブラウザは、monospace系のデフォルトフォントサイズが小さい。(具体的には通常フォントサイズが16pxだが、monospace系は13px)
2017-05-26
翻訳途中express-sessionの設定項目が意味不明で日本語情報もほとんど見当たらなかったので、自身の理解のために雑に翻訳。英文そのままの所は未翻訳。翻訳信頼性は限りなく0に等しいので参考にしないほうが良い。自分自身が追記した注釈に関しては「独自追記」と記載。翻訳元GitH
2017-05-25
バックエンドをNode.jsに切り替えようとしてExpress使ってexpress-sessionを使ってセッションを扱おうとしたらCookieに関するオプションがよくわからなかったのでまとめておく。サーバー側からの送信方法HTTPヘッダーにSet-Cookieを付与することによ
2017-05-22
FlexBoxがいい加減積極的に使うべき物になってるので、まとめておく。不具合philipwalton/flexbugs: A community-curated list of flexbox issues and cross-browser workarounds for t
2017-05-21
あまりES4/ES5/ES6の違いを意識しておらず、まだES4の書き方をしてしまっている部分が多そうなので手始めにES5で使いそうな機能を調べた。ちゃんと覚えておいてES4までの古い情報に惑わされないようにしたい。use strict知識として知ってはいるものの、使ったことがない
2017-05-20
結論IE11,Edgeが非対応なため、sticky的な挙動が必須要件の場合はJSでやったほうがいい。「メジャーなブラウザでsticky的な挙動してくれたらユーザビリティ的にありがたいよね」程度の物に関しては手軽に実装出来るので良い。Safari用にベンダープレフィックスが必要iO
2017-05-19
タスクランナーにはまだGulpを使っていたんだけど、Grunt/Gulpで憔悴したおっさんの話 - MOLとかを過去に見た記憶からnpm runでのビルドを試したくなったので試した。結論ryou/npmbuildtest: npmで諸々をビルドしてみるテスト遅い。scssファイル
2017-05-19
ローカルにインストールしたパッケージをターミナルから実行したい./node_modules/.bin内に実行ファイルがあるので./node_modules/.bin/[パッケージ名]で実行可能。browserifyなら./node_modules/.bin/browserify
2017-05-19
方法は以下リポジトリに書いてる。ryou/expresstwittertest: ExpressでTwitterAPI扱うためのテストプロジェクト以下雑文フロントエンドとバックエンドで両方JavaScriptで統一しようと思ってnode.js始めたんだけど、PHPがいかに楽かって
2017-05-18
注意パッケージのバージョンアップでめっちゃ挙動変わるので、動かない場合は公式をチェックすること。sassを使いたいexpress-generatorのオプションで、sassオプションが存在する。プロジェクト生成時にexpress [project-name] -c sassとやれ
2017-05-17
Vue.jsを特に何も考えずbrowserifyでビルドすると以下のエラーが発生する時がある。[Vue warn]: You are using the runtime-only build of Vuewhere the template compiler is not ava
2017-05-17
プライベートでバックエンドは今までPHPを触っていたんですけど、仕事でマークアップメインでやる上にJavaScriptもPHPもやるってなるとどれも浅い知識で終わってしまう気がしてきたので、バックエンドでもJavaScriptを触るためにnode.jsに移行することに。ただ、今プ
2017-05-16
備忘録のため、メモ程度に残しておくjson-servertypicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)APIモックを作るのに便利
2017-05-15
参考CSS iOS 7 toggle button詳細DemoHTMLCSS.m-iosToggle { position: relative; display: inline-block; cursor: pointer;}.m-iosToggle .m-iosToggl
2017-05-12
検証環境Mac Chrome 58.0.3029.96結論root要素のfont-size指定が、Chromeの最小フォントサイズ指定を下回る場合(デフォルトだと10px)、Chromeでpaddingやmarginのremが正常に計算されなくなる。詳細DemoChromeのバー
2017-05-11
PHPでソートをしたくなって、usortって関数がすごく便利で良かったんだけど正直理解しづらい部分があって未来の自分がすぐ使い方を思い出せるようにするための覚書。PHP: usort - Manual使い方usort($array, function($a, $b) { //
2017-05-08
結論.bg-black { background: #000;}.bg-black a { color: #fff;}これは駄目。「タグに対するスタイル指定を避ける」というCSSを書く時の大原則に逆行してます。.u-whiteTxt { color: #fff;}ってスタイ
2017-05-07
次の例みたいに、画面にフィットするセクションを作って並べたいって要望が時々ある。例1ネットで調べればやり方はいくらでも出てきて実装には困らないのですが、仕様上の根拠が知りたかったので備忘録としてメモ。MDNMDNのheightの項目をみれば答えがずばり書いている。> 相対値の基準
2017-02-09
手順CentOS7の立ち上げる各種インストール Apache PHP MySQLCakePHP3のインストール Composerのインストール CakePHP3プロジェクトの立ち上げCentOS7を立ち上げるVagrantbox.esよりダウンロード(今回はCentOS 7 x
2016-05-08
この前QiitaでバズったjQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったものという記事に関して、「jQueryのセレクタを使う場合は下方向の探索(find)のみを使う」という部分が気になったので自分のなかでまとめ。親方向の探索を使った場合に問題になるパターン