phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python 備忘録. スペニット的に使ってもらえれば幸いです. DOM 要素の絶値座標を取得する element.scrollTop とかだと親からの相対値になっちゃいます. getBoundingClientRect() を使えば絶対座標を取得できます. window.onload = function() { var element = document.getElementById('hoge'); // hoge というIDがついたやつを取得する var rect = element.getBoundingC
ブラウザでzipファイルの展開後のファイルサイズを取得したい - Qiita
クライアントサイドでzipファイルの展開後のファイルサイズの合計を出す要件があり、その対応をメモしておく。 ちなみに用語として展開を表す言葉は「解凍」や「伸張」等様々だが、本投稿では「展開」で統一しておく。＃個人的にはどれでもよいが 要件 要件は以下の通り。 ・画面でzipファイルの展開後のファイルサイズを測り、サーバにリクエストしたい ・画面には「input type="file"」のファイル入力欄がある ・ライブラリは「zlib.js」を使用する ・可能であれば展開せずにファイルサイズのみ知りたい zlib.jsとは？ 簡単にzlib.jsについて説明。 zlibというC言語で作成されたオープンソースのライブラリを使用したjavascript向けのライブラリ。 詳しくはこちらを参照のこと。（https://github.com/imaya/zlib.js/） ＃zlibはgzipを開発
[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
ReactJS: Input fire onChange when user stopped typing (or pressed Enter key)
Component.jsx pk��dU ��ɻdU import React, { Component } from 'react'; import TextField from 'components/base/TextField'; const WAIT_INTERVAL = 1000; const ENTER_KEY = 13; export default class TextSearch extends Component { constructor(props) { super(); this.state = { value: props.value }; } componentWillMount() { this.timer = null; } handleChange(value) { clearTimeout(this.timer); this.setState({ v
npmのあまり知られてない機能 10選 - from scratch
なんか最近Twitterとか職場でも「npmの機能でそんなのあったんだ」って言われること多いので、説明していきます。 ちなみにタイトルにとりあえず10選って書いたけど、あんまりたくさん思いついてないのに、10選って書いてしまったので最後の方は微妙かもしれません。 1. npm installは npm i でも同じことができる まぁ単純なショートカットですね。isntallとかtypoしてても空気読んでくれるんですが、短いほうがいいよねってことで。 # npm installって書くのも $ npm install socket.io #npm i って書くのも同じ $ npm i socket.io # ちなみに --saveは -S, --save-devは -D にできる $ npm i socket.io -S $ npm i mocha -Dショートカット小ネタ。 2. npm
Fullscreen API をさわったのでメモ - Qiita
document.querySelector('img').requestFullScreen()とかすると画像が全画面表示されるやつ。画面ロード直後にいきなり全画面表示とかはできないようになってるのでclickイベント内とかで行う。 詳しくは以下 フルスクリーンモードを使用する - Web developer guide | MDN 画像ギャラリー的なUIでの利用を想定してみる。画像をクリックしたら最大化表示されるやつ。 <style> img{ width: 300px; height: 233px; border: solid 4px #aaa; border-radius: 16px; } img:hover{ border-color: #00aaff; cursor: pointer; } </style> </head> <body> <h1>FullScreen Demo
You Might Not Need Underscore
You Might Not Need Underscore During past years utility libraries like Underscore and lodash have found their way into the toolchain of many JavaScript programmers. While those utility libraries might make the code easier for you to write, they don’t necessarily make the code simpler or easier to understand. People reading and maintaining the code are obliged to, in addition to knowing the languag
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
if ( Electron && Windows && フレームレス && 全面ドラッグ移動可 && リサイズ可能) { 設定して欲しいCSS } - Qiita
if ( Electron && Windows && フレームレス && 全面ドラッグ移動可 && リサイズ可能) { 設定して欲しいCSS }CSSWindowsCSS3Electron 概要 Electronアプリ フレーム非表示 画面ドラッグでウィンドウを移動 リサイズできる Windows対応 を実現するために、Macではおそらく不要で、 Windowsでは必要なCSS設定が実装次第ではある。 検証環境 Windows7 Professional 64bit electron 0.37.2 node v5.2.0 もしかしたらWindows7 固有かも。 サンプル electron/frameless-window.md at master · electron/electron を参考に、フレームレスはこう設定し、
iOS向けWebアプリ開発に役立つ情報超絶まとめ
毎度、必要になったときに調べていたiOS Safari向けWebアプリ開発の情報をまとめました。 iOS Safariの画面サイズを有効活用したい すでにコピペで拡散している情報をまとめるだけでは能がないので、すっかり定着したレスポンシブレイアウトに逆行しつつも「Webアプリ」として画面サイズを有効活用するための一連の情報になることを目的とします。 もっとも、そういうことならすでにjQuery Mobileや類似フレームワークもいくつか存在しますが、どうしても余計なスタイル定義や不透明な処理も多いので、よりライトに必要最小限の設定に留めたいという意図もあります。 まずは判定 UserAgentで大雑把にふるい落とす 容易に偽装可能なUserAgentですが「iOS Safariではない」判定には、やはり便利です。下記で browser が "Safari" でない場合は、iOS Safar
Chrome extensionを開発するためのいくつかのポイント
今日はここでChrome extensionを開発するためのいくつかのポイントを書きたいと思います。 ポップアップウィンドウのリロード Browser actionを登録すると、extensionはポップアップバルーンを開くためのボタンが表示されます。開発者は、manifest.jsonファイルの中で、ポップアップバルーンの中に描画されるHTMLファイルの名前を指定することができます。 一般的に、いくつかのJavaScriptファイルがポップアップバルーン内で使われるでしょう。HTMLファイルやいくつかのJavaScriptはいつロードされるでしょうか？はい、ポップアップバルーンを開く度です。もちろん、JavaScriptオブジェクトは、それが閉じられるときに破棄されるでしょう。 それ故に、ポップアップバルーンコンテキスト内のいかなる情報は、そのバルーンのライフサイクルを超えて保持されませ
数値文字列に3桁区切りでカンマを入れる処理 - Qiita
var num = '10000000'; num = num.split(/(?=(?:\d{3})+$)/).join(); 正規表現は素晴らしい。 (2014/11/07追記) 元々、この実装は「正規表現を使っていかに短く書けるか」「String.prototype.replace のコールバック関数を使わずに書けるか」の着想を元にコーディングしています。 その為、かなり割り切った仕様にしており、下記制約があります。 数値文字列と数値以外の文字列が混在した文字列をサポートしない(完全な数値文字列でなければならない) 整数値のみをサポートし、小数値をサポートしない 本格的なコード 前述でサポートされなかった仕様に対応するためには String.prototype.replace のコールバック関数を利用するしか手段はないと考えています。 具体的には下記のようになります。 /** * i
Electronを初めて触った時にハマった5つのこと - Qiita
初めてElectronを使ってTwitterクライアント https://github.com/k0kubun/Nocturn を作ったときによくわからず時間を吸われたことについて、これからElectronを使いはじめる人のために残しておく。 トラックパッドでスクロールすると画面の外までひっぱれてしまう マウスホイールでスクロールしてると気づかないのだが、トラックパッドで画面の適当なところを引っ張ると画面の外側が見えてしまい、普通のブラウザっぽくなる。Electronの検索性が低くてなかなか情報にたどり着けなかったが、ChrominumベースなのでChromeについてググったら直し方がわかった。 http://stackoverflow.com/questions/12046315/prevent-overscrolling-of-web-page html, body { width:
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
window.location.href not working in chrome extension
2024 Developer survey is here and we would like to hear from you!
jQuery Recursive AJAX Call Promise
I'm still trying to figure out how to use jQuery deferred object in recursive AJAX call. I have a code like this function request(page, items){ //building the AJAX return value for JSFiddle dummy AJAX endpoint var ret = { totalPage: 10, currentPage: page, items: [] }; for (var i = page; i < (page + 5); i++){ ret.items.push(i); } //calling the AJAX $.ajax({ url: '/echo/json/', method: 'POST', dataT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://rossscrivener.co.uk/blog/javascript-get-domain-exclude-subdomain
UA偽装しているブラウザでも、Desktop/Mobileを判別したい - Qiita
[archived] メンテナブルな React Component を目指すための小技集 - Qiita![[archived] メンテナブルな React Component を目指すための小技集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7cb674b8df50065447b8523b0d6ff79fd4daff89/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCYXJjaGl2ZWQlNUQlMjAlRTMlODMlQTElRTMlODMlQjMlRTMlODMlODYlRTMlODMlOEElRTMlODMlOTYlRTMlODMlQUIlRTMlODElQUElMjBSZWFjdCUyMENvbXBvbmVudCUyMCVFMyU4MiU5MiVFNyU5QiVBRSVFNiU4QyU4NyVFMyU4MSU5OSVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFNSVCMCU4RiVFNiU4QSU4MCVFOSU5QiU4NiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTRiMjczMDE3NTRjZjY5MGM2YjE4ZDk1OGM3YTQ0N2M%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGVycmllcnNjcmlwdCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTFkZjZjZDM1M2Y2ODg4ZDVlMjFmNTY0MWQ2N2QyNWQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D67d5b855250304fbfd5b3ced00c9b48a)
https://qiita.com/yodatomato/items/4fbbf7657cce1de99927