ファイルアップ時に進捗を表示する方法を紹介致します。 UI的にかっこ良くなりますし、ファイルのアップロード状況がわかるのはとっても嬉しいですね 以前の記事の2つを応用した方法で可能となります。 ドラッグ & ドロップでファイルをアップロードする方法 HTML5 進捗状況を表示するプログレスバーを使ってみる 下の画像が完成した機能です。 HTML5 進捗状況を表示するプログレスバーを使ってみるから変更点があるのはJavascript、HTML側。 ちょこちょこ変わっていますが重要なところをハイライトにしています。 Javascript HTMLサンプル <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ファイルのアップロード</title> <script src="http://ajax.googleapis.com/a
速度制限が毎日続くTakuyaです。こんにちは!。 データセンターにmpeg動画を送信して、サーバー側でffmpeg 掛けてました。節電の為に自宅鯖を停止し、Linuxボックスだけ起動してました。重い処理はサーバーにやらせてました。ファイル送信が3TB超えてついに速度制限を喰らいました。怖いですね。11/01に無事解除されましたが。。。 <input type=file /> の通信状況を見たい。 UP速度制限が100kbpsでした、ブラウザのファイルアップロードに不自由を感じました。iphone4の写真UPに1枚あたり30秒位かかってました。さくらVPSのWEBアプリに写真をアップするだけでも大変でした。ファイル送信状況が見えないと不安しかたありません。< input type=file/> でアップしたファイルの送信状況を見れるようにフォームを改造しました。 $.ajax でHTMLフ
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffects の場合は、当然ながら動画として出力しvideo要素で動画を埋め込んで表示させるわけだけど、SVGの場合は、(主に)インラインSVGを設置してJavaScriptでアニメーションさせて実現する。 少し前までは、一部のブラウザでうまく表示できなかった(気がした)が、今は全く問題なく表示させることができるようになっていた。古いIE(10以前)ではさすがに無理だけど、もう考慮する必要はないと思われるので、十分に使える表現だと思う。 SVGの作成が意外に面倒だったので作成時のポイントとか、HTMLへ設置する方法、JS実装ではまった点等を覚書として書いておく。 ハンドライティン
Vue.jsでフォームバリデーションをするとき、以前ならvue-validatorという公式コンポーネントがあった。しかし、vue@2.0のリリースにともない公式から外れてしまった。 気づいている人はいるかと思うけど、vue-validator も vue-resource と同様に実はこちらから願いでて、公式から retire してます。理由は、vue.js のコアに必要なくっているのと、開発時間をキープするのが難しくなっているということで。 — 🐤kazuya kawaguchi🐤 (@kazu_pon) 2016年12月1日 そのため、何か良いFormValidatorがないか調べていたのだが、HTML5 input要素のバリデーション用の属性を思い出した。 ということで、HTM5 input要素の設定でフォームバリデーションを行う。 HTML5 inputの設定でフォームバリデ
An open source load testing tool. Define user behaviour with Python code, and swarm your system with millions of simultaneous users. Tweet Follow @locustio Define user behaviour in code No need for clunky UIs or bloated XML. Just plain code. Distributed & scalable Locust supports running load tests distributed over multiple machines, and can therefore be used to simulate millions of simultaneous u
シェーディングの方法は大きく分けると、次の二つの方法があります。 スムースシェーディング フラットシェーディング スムースシェーディングは少ないポリゴン数でも、表面がなめらかに見えるように法線情報を補間して表示する方法です。 一方フラットシェーディングは法線情報を補間せずにエッジを強調したシェーディングです。 ほとんどのゲームではスムースシェーディングを使うと思いますが、ローポリのモデルを利用した味のある表現をしたい場合は、わざとフラットシェーディングにすることもあります(↓こんなのとか) Unityでショートアニメの実験中。飛行機の登場シーン作った。まだ人が乗ってない幽霊飛行機だけど・・・ pic.twitter.com/7ZA94W5iBZ— 北村愛実 (@tasonco_company) 2016年8月20日 Unityでフラットシェーディングの設定をするには UnityはBlend
対象に追従するカメラです。 特定のレイヤが設定されたオブジェクトを壁とみなし、 対象とカメラの間に壁が存在する場合は、 対象に接近することで壁の後ろに隠れてしまわないようにします。 /** オブジェクトを追従するカメラ オブジェクトとカメラの間に壁が存在した場合、オブジェクトに近づくことで壁を回避する */ public var tg : Transform;//対象となるオブジェクト public var dist = 3.0; //カメラからオブジェクトの距離 public var fastness = 1.0; //カメラの追従速度 public var cameraHeight = 2.0; //カメラの高さ public var layerMask : LayerMask; private var nextLoc : Vector3; //次にカメラが移動すべき目的点 //カメラ
using UnityEngine; using System.Collections; using System.Collections.Generic; public class AutoRotateCamera : MonoBehaviour { // キャラクターのTransform [SerializeField] private Transform charaLookAtPosition; // カメラの移動スピード [SerializeField] private float cameraMoveSpeed = 2f; // カメラの回転スピード [SerializeField] private float cameraRotateSpeed = 90f; // カメラのキャラクターからの相対値を指定 [SerializeField] private Vector3 base
今回のサンプルはこちらで試せます。ソースコードはこちら。 Unityでは指定の位置での地形(Terrain)上の情報(Yの値)が Terrain.activeTerrain.SampleHeight() で簡単に取得出来ます。 地形に沿った移動処理を行いたい場合には以下の様な記述だけで簡単に出来ます。 【JavaScriptのプログラム】 function Update () { transform.position.x += Input.GetAxis("Horizontal"); transform.position.z += Input.GetAxis("Vertical"); transform.position.y = Terrain.activeTerrain.SampleHeight(transform.position) + 2.0; }
Particleを動的に生成できることを知ったので、適当なMeshを持つモデルの形状に変化するParticleSystemを勉強がてら作ってみました。こういうやつです 参考 ほぼここのコードです。 Kinect for Windows SDK 2.0 Unity Pro Add-in でポイントクラウド風描画 - 自習室 コード 空のGameObjectを作成し、ParticleSystemとこのスクリプトをアタッチします。ParticleSystemはRenderer以外のチェックを外します。 またこのスクリプトのTargetPrimitiveには適当なMeshFilterを持つオブジェクトをアタッチするだけです。 using UnityEngine; using System.Collections; public class AbsorbableParticle : MonoBeha
ホーム < ゲームつくろー! < Unity/Shader編 Shader編 その4 サーフェイスシェーダでガラスを作る 実践としてサーフェイスシェーダでガラスを作ってみます。うまくいくかな…(^-^; ① ガラスたらしむ要素 ガラスは透明です。透明と言う事は向こうが透けて見える訳ですが、ただ透けるだけだと「半透明の何か」にしかなりません: これはサーフェイスシェーダのSurfaceOutput.Alphaに0.3を単純に入れて出力した画です(地の色は白)。…透明な何かでして、ガラスっぽくはありませんよね…(-_-;。ガラスをガラスたらしめている要素は何なのでしょうか? 家にあるコップを撮影してみました。これを見ると、まずガラスというのは大変に透明度が高いのがわかります。しかし、その透明度は場所によって異なっているのもわかります。コップの縁の方は背景が透けておらず、周囲の景色がかなりくっき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く