モバイルブラウザでの画像アップロードについて覚え書き
前置き スマートフォンブラウザで画像アップロードしたいという要件があったので、あんまり無理しないで実装できるとこまでやったら、どうなるのかやってみた。 やりたいことは、アップロードに加えて、画像データにリサイズ処理を適用すること。さすがに3G回線で2MB近い画像データを、input[type="file"]でそのまま送りつけるのは無理がある。 某所で書いたブツの要約版なので、某所のほうを見た諸氏はアレでソレして解釈してください : ) サンプルコード 基本方針としては、以下のようなコードで処理することになる。 var elFileInput = document.getElementById('js-select-photo'), elPreview = document.getElementById('js-preview-photo'), createObjectURL = windo
Web制作のアイデアが膨らむ気象情報や政府統計データなどのAPIまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ひろゆきです。 今回は、何かしらに使えそうなAPIを紹介していこうと思います。 Web制作者の方などは、運営されているWebサイトに使えそうなものがあれば利用してみてはいかがでしょうか？ （※各APIの使用条件などは、提供元よりご確認ください。） 1. Yahoo Japan YOLP 気象情報API http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/weather.html こちらは、緯度経度を元に、その地域の現在の天候や60分後までの降水強度予測を取得することができます。レジャー系のサイトなどで使えそうですね。 2. clarifai 画像タグ付けAPI http://www.clarifai.com/ 以前、「画像を解析して写真にタグ付けをするAPI『clarifai』のデモを試してみた」でご紹介した
OAuth 2 または OpenID Connect への移行期限まであと 1 ヶ月
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
【古い内容です！！！】Angular 2 を試してみた感想とハマりどころ - Qiita
Angular 2 alpha.11, alpha.13 時点の情報です。現時点の最新版とは全く異なる内容です。現在では公式サイトのドキュメントが充実しているので、そちらを参照することをおすすめします。 昨日参加してきた ng-japan の間、Angular 2 の 5 Min Quickstart という Hello World 的なサンプルから始めて、貧弱な TODO アプリを作ってみました。感想と、その過程でいろいろハマったところを書いてみます。 まずは感想から。 別のフレームワーク？ やっぱり Angular 1.x とは別のフレームワークだなあという印象です。概念も書き方もツールも違う。ライブラリもそのまま使えない。Angular とは別の名前にした方がいいのでは、というくらいです。 現時点では、他のコンポーネント志向のフレームワークに乗り換えてもコストは同じな気がします。Ne
Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
MySQL と寿司ビール問題 - かみぽわーる
MySQL と Unicode Collation Algorithm (UCA) - かみぽわーる に関連するトピックで、 MySQL には寿司ビール問題というのがある。 寿司ビール問題どっかで詳しくお話を聞くべきだよなぁ。。。— RKajiyama (@RKajiyama) March 18, 2015 これはどういう問題かというと、 MySQL の Unicode では binary collation にしてコードポイントで比較しないと🍣と🍺に限らず絵文字が同値判定されるという問題です。 あれ？ MySQL の utf8mb4 charset って、4バイト文字同士を比較すると同じ文字扱いされる？ SELECT '🍣'='🍺' → 1 MySQL的には寿司とビールは同じ扱い。— とみたまさひろ (@tmtms) December 22, 2014 MySQLで select
NativeScript - 夢再び。JavaScriptでiOS/Androidアプリを開発 MOONGIFT
ワンソース、マルチプラットフォームは甘美な響きであり、誰もが夢見る存在です。ずっと昔から言われており、アプリ開発において最も望まれている存在かも知れません。 かつてはTitaniumが有力候補が出てきたのですが、最近ではあまり聞かれません。そこで登場したのがNativeScriptです。 NativeScriptの使い方 NativeScriptはCLIで操作します。node/Homebrew/mono/JDK/ant/Android SDKなどが必要です。準備が終わったら、 $ npm i -g nativescript にてインストールができます。 コマンドは次のようになります。 // 対応プラットフォームを追加 tns platform add android tns platform add ios // デバイスで実行 tns run android tns run ios //
ブラウザおよびnode.jsのための高度な地理空間データ分析ライブラリ「turf.js」
選択した範囲内の家賃相場を求めるとかいろんなことに使えます。 example Turf.jsはMapbox社謹製の地理空間データ分析ライブラリです。ピュアJavaScriptで作成されていてフロントエンドでもサーバーサイドでも動作します。 Turfの特徴としては、対応するデータ形式をGeoJSONを絞っており、基本GeoJSONで受け取ったデータを分析して分析結果をGeoJSONで返すといったライブラリになっています。 そのため、GeoJSONに対応した地図ライブラリと組み合わせることで、分析結果を簡単に視覚化することができます。もちろんD3.jsと組み合わせて使うのも簡単！ いろいろな可能性を秘めた今後が楽しみなライブラリです。 今回は入門編として、Leaflet上で選択した範囲内のデータの基本統計量を計算します。 マーカーのプロパティには、それぞれ「value」値が設定されていて、選択
ng-japan 2015行った #ng_jp - pirosikick's diary
ng-japan - AngularJS Japan User Group | Doorkeeper Angular1.3以降や2系についてはあんまり追っていなかったので、参加してみた。 最近はディスられていた印象が強かったけど、Communityがすごい規模になってもCommunityを重視して開発を進めようとしているっぽいので、Angularは長く支持されそうだなと思った。 2系ではパフォーマンスがかなり改善されるし、TypeScriptとの連携も強くなるようなので、しばらく使っていなかったが触っておかないと今後困ることがありそうだなと感じた。 以下、メモ。 Angular 1.4 and beyond @chirayuk Chirayu Krishnappa https://twitter.com/chirayuk Google 1.4まだ出てないけど１週間位で出るで もっとも安定し
A Collection of Pure CSS Animation Snippets & Demos
The following gallery consists of 26 different snippets for creating animated effects with pure CSS. Open source code has ushered in a new era of frontend web development. Beginners and experts alike can save time and stress by working with pre-built code snippets. The following gallery consists of 26 different snippets for creating animated effects with pure CSS. All of these code snippets can be
Android UI Automated Testing
Does the integration test mentioned in the article mean the test between many small libraries in the app? ReplyDelete Hey Allen, You need 2 types of integration tests. 1) Integration test between client and server, for more details on integration tests, see the backend testing section of blog 2) As you mentioned, integration tests between small libraries in the app. Delete
東急ハンズのクラウドデザインパターン アーキテクチャー編
JAWS DAYS 2015 Big Track 「東急ハンズのクラウドデザインパターン」 アーキテクチャー部分の資料です。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
