JS 感圧で遊ぶ iPhone6s以上限定ですが、押し込んで面白い表現を作ってみようと思います。 タッチ3Dの押し込まれた値によってどんなことができるか検証します。 この記事はiPhone6s以上で閲覧をお願いします。 #press_area3{ width:200px; hei... 2019-08-07 22:47:03
JS 感圧の検証 この記事はiPhone6s以上で使える3Dタッチ(感圧)についての検証です。 iPhone6s以上だと画面を強く押すと圧力を感知して、タップとは違う挙動になります。 その挙動に対してJSによる感圧を取得する関数でトリガーを実装すると、どう... 2019-08-07 22:43:16
JS 元画像のサイズと表示画像のサイズ サイト上で画像を小さく表示することはよくありますが、表示されている縦横のサイズはよく使うのですが、たまに元の画像のサイズを使いたい時があります。 そんな時は以下のようなJavaScriptで元の画像のサイズを取得することができます。 [[<img id="neko" src="/img/demo/cat/002.jpg"... 2019-08-07 22:34:44
jQuery BMIの計算ツール JSはいろいろできるので、せっかくなので標準体重を図るツールを作りました。 BMI (Body Mass Index)と呼ばれる指数は、成人の体格の肥満度を表す指数です。 算出方法は「体重(kg)÷身長(m)の二乗」とシンプルですので、JSを用いて計算す... 2019-08-03 21:52:15
CSS3 flexを使った配置3(行間の操作) 以前掲載した、flexで配置した時の改行のサンプルに続き、行全体の配置のサンプルです。 まずは共通のスタイルを用意します。 .demo_box{ backgroun... 2019-08-03 21:29:20
CSS3 flexを使った配置2(要素の改行) 以前掲載した、flexでシンプルに横に並べるサンプルに続き、子要素の数が多くなった時の応用編です。 まずは共通のスタイルを用意します。 .demo_box{... 2019-07-30 21:50:18
CSS3 flexを使った配置1(横の位置) flexを使ってfloatのような配置を実装します。 CSS3より追加されたflexのサンプルです。 flexという言葉の通りこれがあればレイアウトをうまいことやってくれるのでfloatやmarginで悩むことが減りそうです。... 2019-07-29 21:51:41
JS タップ圧力(感圧)検知 スマホやタブレットなどでは、タップした圧力を検知し、操作するシーンが増えてきました。JavaScriptで圧力を数値化する関数が用意されているので、実装してみました。 画面をグッと押し込むと発動するサンプルです。 このサンプルはスマホやタブレットなどのタップの圧力を検知できる端末で参照してください。 #press... 2019-07-29 21:46:07
GAS HTMLのページを作成する Google Apps Scriptの開発環境にてHTMLのページを作成する基本スクリプトのサンプルです。 index.htmlを表示するには「コード.gs」に以下の記述をします。 [[function doGet() { return HtmlService.createTemplateFromFile("index").... 2019-08-07 22:25:57
AngularJS リピートのフィルターいろいろ 以下のようなAngularJSのリピートの構文を使う場合様々なフィルターが用意されています。 [[<div ng-repeat="item in items | filter : 'あ'"&g... 2019-08-03 12:40:15