OCテックノート

HTML5 Canvasでグラデーションを描画する

HTML5ではCanvasという機能があり、高度な描画が可能です。
今まで、デザイナーがPhotoshopやIllustratorを利用して描いていたような描画が、ある程度HTML5のソースコードに書くことで可能になります。

ここでは、まず簡単なグラデーションの描画をやってみます。

 <!DOCTYPE html>
 <html>
 <head><meta charset="utf-8"></head>
 <body>
 
 <!-- canvas描画のために、canvasタグを使います -->
 <canvas id="gradient_canvas" width="500" height="500"></canvas>
 
 <script type="text/javascript">
   // canvasを取得します
   var gradient_canvas = document.getElementById("gradient_canvas"); 
 
   // canvasのコンテキストを記述　2dとしておきます。3dが出てくるときのためにある引数ですが、
   //　現時点ではまだ3dには対応していないみたいです。
  var context = gradient_canvas.getContext("2d");
  
  // 線形のグラデーションを描きます　createLinearGradientの引数は順番に
  //　Canvas内のグラデーションのX軸の開始座標、Y軸の開始座標、X軸の終了座標、Y軸の終了座標、
  var gradient = context.createLinearGradient(0,0,500,500);
 
  //グラデーションの内容を指定。引数は順番に、開始位置、グラデーションの色
  gradient.addColorStop(0, "#ffffff"); //白
  gradient.addColorStop(0.5, "#ffff00"); //黄色
  gradient.addColorStop(1, "#ff0000"); //赤
 
  //コンテキストを、gradientで塗りつぶします
  context.fillStyle = gradient;
 
  //四角形を描画します。fillRectの引数は順番に
  //Canvas内のX軸の開始座標、Y軸の開始座標、X軸の終了座標、Y軸の終了座標
  context.fillRect(0,0,gradient_canvas.width,gradient_canvas.height);
 
 //ななめに白から黄色、赤に変わるグラデーションの長方形になります
  
 </script>
 
 </body></html>

実際のサンプルはこちら　HTML5が動作するブラウザで見てください。

http://onlineconsultant.jp/web/html5_sample/gradation.html

2018年6月22日

HTML チェックを付けたら値が入る方法

HTML　チェックを付けたら値が入る方法

これは、方法として良いのかどうかわかりかねますが、解決できたので記載します。

確実にデータが飛んできてほしい！、値が「０」でもname属性を送ってきてもらいたいなど、そんな時はありませんか？

プログラムとして記載方法が良いかどうかわかりませんが、記載しておきますので、よかったらどうぞ。

上段に「hidden」で「value」を「０」にしておいて、下段にチェックが付いたら「１」にする

 <input type="hidden" name="?" value="0">
 <input type="checkbox" name="?" value="1">

もし良くなかったらどなたかご教授ください。。。

2018年6月22日

HTML Chromeブラウザ画像のheightを100%にすると、おかしくなる

IE、Firefoxでは表示させても大丈夫なのに、Chromeだけおかしくなりました。。。

どうやら、height=100%はダメらしいので使用しないようにしましょう！

2018年6月22日

HONEYCOMB cannot be resolved or is not a field

Android

HONEYCOMB cannot be resolved or is not a field

 Build.VERSION_CODES.HONEYCOMB

などとやると、

 HONEYCOMB cannot be resolved or is not a field

というエラーが出ます。

ビルドターゲットが、このバージョンコードより下だとこのエラーが出ます。

ここでは、HONEYCOMBは3.0ですので、ビルドターゲットを3.0より上を指定します。

2018年6月22日

Gradle エラー　Failed to resolve com…

Android

Android Studioで開発をするようになって、否応なく、Gradleを使わされていますが、実はあんまりよくわからず使っている人も多いかと思いますが、私もその一人です。(;^ω^)

さて、弊社では、下記のライブラリを使っています。

osmbonuspack
https://github.com/MKergall/osmbonuspack/wiki/HowToInclude

今まで、Eclipseで開発していた時は、libフォルダ内にライブラリをブチこむ、という原始的なやり方で、なんか負けた感あったのですが、AndroidStudioになった今こそ、Gradleでやろうと思うわけです。

上記の公式サイトには、さらっと

 repositories { 
     ...
     maven { url "https://jitpack.io" }
 }
 dependencies {
    ...
    compile 'com.github.MKergall.osmbonuspack:OSMBonusPack:v5.6'
 }

ってつけようね！って書いてあるので、そのようにやってみましたが、うまくいきません。 [sad]

うまくいかなかったときのbuild.gradleは下記のとおりです。

 apply plugin: 'com.android.application'
 
 buildscript {
    repositories {
        maven { url 'https://jitpack.io' }
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.3.1'
 
    }
 }
 
 dependencies {
    compile fileTree(dir: 'libs', include: '*.jar')
    compile 'com.google.android.gms:play-services:6.1.+'
    compile project(':ratethisapp')
 
    //これがうまくいかない
    compile 'com.github.MKergall.osmbonuspack:OSMBonusPack:v5.6'
 }
 
 android {
 
    compileSdkVersion 17
    buildToolsVersion "21.1.0"
    dexOptions {
        jumboMode true
 　…後は省略

これでビルドすると、次のエラーが出ます。

 Error:A problem occurred configuring root project 'hogehogeappli'.
 > Could not resolve all dependencies for configuration  ':_google_play_in_serviceDebugCompile'.
   > Could not find com.github.MKergall.osmbonuspack:OSMBonusPack:v5.6.
     Searched in the following locations:
         https://repo1.maven.org/maven2/com/github/MKergall/osmbonuspack/OSMBonusPack/v5.6/OSMBonusPack-v5.6.pom
         https://repo1.maven.org/maven2/com/github/MKergall/osmbonuspack/OSMBonusPack/v5.6/OSMBonusPack-v5.6.jar

いろいろと試行錯誤しながら困っていたら、下記のサイトに答えがありました。
http://stackoverflow.com/questions/29118606/gradle-in-android-studio-failed-to-resolve-third-party-libraries

はうあ！
つまりは、repositoriesを書く場所が間違っていたのです。
下記の部分が間違い。

 buildscript {
    repositories {
        maven { url 'https://jitpack.io' }
        jcenter()
    }

これは、ビルドスクリプトのためのリポジトリであって、プロジェクトのためのリポジトリじゃないんですね [sad]

下記が動作するバージョンです。

 apply plugin: 'com.android.application'
 
 repositories {
    maven { url 'https://jitpack.io' }
    mavenCentral()
 }
 
 buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.3.1'
    }
 }
 
 
 dependencies {
    compile fileTree(dir: 'libs', include: '*.jar')
    compile 'com.google.android.gms:play-services:6.1.+'
    compile project(':ratethisapp')
 
    //osm bonuspackでつけたし
    compile 'com.github.MKergall.osmbonuspack:OSMBonusPack:v5.6' 
 }
 
 android {
    compileSdkVersion 17
    buildToolsVersion "21.1.0"
    dexOptions {
        jumboMode true
    }
 …後は省略

ちなみに、

 repositories {
    maven { url 'https://jitpack.io' }
 }

として、mavenCentral()を書かないと、今度はcom.github.MKergall.osmbonuspack:OSMBonusPack:v5.6
内で読み込んでいるorg.apache.commons:commons-lang3:3.3.2などが読み込めず、下記のようなエラーになります。
Error:Failed to resolve: org.apache.commons:commons-lang3:3.3.2

ところで、なんでGradleがわかりにくいのかっていうと、公式サイトがわかりづらいし、いろんな問題があるかと思います。Android開発においてのGradleについて教えてほしいと思っても、Flavorでビルドのバージョンを簡単に変えられるよって記事の方が多くて、そもそもこのスクリプトたちって何してるの？？というのがよくわかりづらいと思います。

ちなみに、それ系ならこちらでも解説していたりします。。。
Android Studio Flavorでやりたいことを切り替えるサンプル

どなたか、オススメのサイトか、本などありましたら、教えてください。┌o　ﾍﾟｺｯ

おかげで、悩んでいた問題を解決した！本当にありがとう！！：D — {2016-01-13 (水) 17:47:29}
おかげです悩んでいた問題を解決した！ありがとう〜 — Sabrina {2016-01-13 (水) 17:48:14}

HTML5 Canvasでグラデーションを描画する

HTML チェックを付けたら値が入る方法

HTML Chromeブラウザ 画像のheightを100%にすると、おかしくなる

HONEYCOMB cannot be resolved or is not a field

HTML　チェックを付けたら値が入る方法

HTML Chromeブラウザ画像のheightを100%にすると、おかしくなる