liguofeng29’s blog

個人勉強用ブログだっす。

2016-01-01から1ヶ月間の記事一覧

HTML5のcanvas要素 - canvasのサンプル一覧

・ 四角を描く ・ テキストを描く ・ 影を描く ・ 円を描く ・ 角丸四角を描く ・ 多角星を描く ・ N葉っぱ花を描く ・ イメージを描く ・ 座標システム変更 ・ 雪落下 ・ 矩形陣変換 ・ 合成制御 ・ グラデーション ・ 出力

HTML5のform関連 - バリデーションチェック

バリデーション属性を使う required pattern min,max,step checkValidityメソッドを使う setCustomValidityメソッドを使い、カスタムメッセージを表示する バリデーション属性サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> Validity </title> </head> <body> <form action="add"> book(必須)</form></body></html>

HTML5のform関連 - javascriptでクライアントファイル読み取り進捗表示

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> progress表示 </title> </head> <body> ファイル選択<input id="file1" type="file"/><br/> 読み取り進捗<progress id="pro" value="0"></progress> <div id="result"></div> </br/></body></html>

HTML5のform関連 - javascriptでクライアントファイル中身アクセス

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> ファイル中身アクセス </title> </head> <body> ファイル選択<input id="file1" type="file"/><br/> <div id="result"></div> <input type="button" value="テキスト読取" onclick="readText();"/><br/> </br/></br/></body></html>

HTML5のform関連 - 複数ファイル選択

HTML5以前では、下記のような制限があった。 単一ファイルのみアップロード クライアントコードはファイルパスのみ取得でき、内容アクセスはできない 複数ファイル選択&ファイルアクセス <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 複数file選択 </title> </head> <body> イメージ選択<input id="images" type="file" multiple accept="image/*"/> </body></html>

HTML5のform関連 - 新規input要素とoutput要素

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC" /> <title> input and output </title> </head> <body> <form action="do"> type="color":<br/><input name="color" type="color"/><p> output:<br/><output name="a" for="color" onforminput="innerHTML=color.value;">…</output></br/></p></br/></form></body></html>

HTML5のform関連 - 新規属性

form属性 : form要素外のコンポーネントもform属性を指定して、リクエストパラメータを生成する formaction属性 : submit毎にactionを指定する formxxx属性 : submit毎にenctype、POST/GET、formtargetを指定する autofocus属性 : ロード後にフォーカスを取…

HTML5のform関連 - input要素、label要素、button要素、select、textarea要素

1. input要素 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> input要素 </title> </head> <body> <form action="http://www.google.co.jp" method="get"> <label><b>input要素について</label></b><br/> type=text</br/>

HTML5の要素と属性 - DataTransfer

DND(Drag And Drop)を行う際のデータ運びに使うのはDataTransferオブジェクトである。 DataTransferの属性とメソッド dataTransfer.dropEffect : DND可能な操作 属性値は、none, copy, link, move dataTransfer.effectAllowed 属性値は、none, copy, copyLin…

HTML5の要素と属性 - DND(Drag And Drop) API

HTML5では要素をドラッグ&ドロップするAPIを提供する ドラッグ&ドロップイベント ondragstart : ドラッグ開始時 イベント元 : HTML要素 ondrag : ドラッグが継続している間 イベント元 : HTML要素 ondragend : ドラッグ終了時 イベント元 : HTML要素 ondra…

HTML5の要素と属性 - head要素

head要素の内部要素について。 heda内部要素 script style link title base : ページ内ハイパーリンクの方式 href属性 target属性 : blank, parent, self, top meta : ページの情報 http-equiv属性 Expires : ページ期限切れ指定 Pragma : ローカルバッファ…

HTML5の要素と属性 - HTML5新規要素③(meterとprogress)

HTML5から特殊な要素が追加されている meter value : 現在値、デフォルト0 min : 最小値、デフォルト0 max : 最大値、デフォルト1 low : 指定範囲の最小値、minより大きい high : 指定範囲の最大値、maxより小さい optimum : best値? progress max : 完成値…

HTML5の要素と属性 - HTML5新規要素②(semantic関連)

・mark - 強調される ・time - 属性:datetime - システムに時刻であり、値を提供するため。 yyyy-MM-ddTHH:mmフォーマットである <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>semantic </title> </head> <body> <article> <header> <h2><mark>HTML 5</mark>について</h2> </header> <p> <mark>HTML 5…</mark></p></article></body></html>

HTML5の要素と属性 - HTML5新規要素①(ドキュメント構造関連)

HTML5以前では、div要素で表現してたが、HTML5からはドキュメント構造を表す要素が大量に追加されている。 HTML5ドキュメント構造要素 article : 独立する完全かる文章 内部要素:header - タイトル 内部要素:footer - 脚注 内部要素:section - 段落 内部…

HTML5の要素と属性 - HTML5新規共通属性

HTML5は既存HTMLの殆どの要素は残していて、かつ新規属性を追加している。 HTML5新規属性 contentEditable属性 trueの場合、要素内の内容編集可能 継承性を持っている designMode属性 グローバルcontentEditableである onの場合、ページ全体が編集可能 hidde…

HTML5の要素と属性 - 既存HTML要素③ (表関連)

テーブル要素 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC" /> <title> テーブル定義 </title> </head> <body> <table style="width:400px" border="1"> <caption><b>テーブルのタイトル(一つのみ含む)</b></caption> <tr> <th>列1ヘッダー</th> <th>列2ヘッダー</th> </tr> <tr> <td>1-1</td> <td>1-2</td>…</tr></table></body></html>

HTML5の要素と属性 - 既存HTML要素②

アンカー(Anchor)要素 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> アンカー(Anchor) </title> </head> <body> <a href="http://www.google.co.jp"><b>現在ページ</b></a><br /> </body></html>

HTML5の要素と属性 - 既存HTML要素①

基本要素 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基本タグ</title> <meta name="author" content="HTML5基本タグ" /> </head> <body> <h1>h1のテキスト</h1> <h2>h2のテキスト</h2> <h3>h3のテキスト</h3> <h4>h4のテキス…</h4></body></html>

Androidのweb開発 - HttpClient

Androidで保護されているwebリソースにアクセス際にはsession、cookieなどを使う場合には、HttpClientを利用する 使用流れ HttpClientオブジェクト生成 メソッド生成 GETの場合、HttpGet POSTの場合、HttpPost setParams(HttpParams params)でリクエストパラ…

Androidのweb開発 - HttpURLConnectionでマルチスレッドファイルダウンロード

HttpURLConnectionはURLConnectionのサブクラスである。 拡張されているメソッド int getResponseCode() String getResponseMessage() String getRequestMethod() void setRequestMethod() マルチスレッドでイメージダウンロードサンプルコード ①ダウンロー…

Androidのweb開発 - URLConnectionでリクエストを投げる

URLでリクエストを投げ、データを取得できる。 手順 URLオブジェクトのopenConnectionメソッドでURLConnectionオブジェクトを取得する URLConnectionのパラメータと属性?を設置得する リクエスト GET : connectメソッドで送信する POST:URLConnectionオブジ…

Androidのweb開発 - URLを使いwebリソースにアクセスする

URL(Uniform Resource Locator) 形式: protocol://host:port/resourceName サンプルコード URLを使いwebのイメージを取得し、Androidアプリに表示する。 ① AndroidManifest.xml <uses-permission android:name="android.permission.INTERNET"/> ② activity_main.xml </uses-permission>

Androidのweb開発 - socket通信

Socket通信の概要 サーバ ServerSocket(int port) ServerSocket(int port, int backlog) ServerSocket(int port, int backlog, InetAddress localAddr) クライアント Socket(InetAddress/String remoteAddress, int port) Socket(InetAddress/String remoteA…

AndroidのResource - ほか諸々

Androidのリソースに含まれるもの。 1. オリジナルXML @[<package_name>:]xml/file_name [<package_name>.]R.xml.<file_name> XmlResourceParser getXml(int id) InputStream openRawResource(int id) 2. Layoutリソース XMLを使い画面レイアウトを定義する 3. Menuリソース XMLを使いメニューを定義</file_name></package_name></package_name>…

AndroidのResource - Property Animation

Animatorは抽象クラスであり、通常はそのサブクラスを使用する。 サブクラス AnimatorSet ValueAnimator ObjectAnimator TimeAnimator ルート要素 <set.../> <objectAnimator.../> <animator.../> サンプルコード ① color_anim.xml </animator.../></objectanimator.../></set.../>

AndroidのResource - ClipDrawableサンプルコード

① my_clip.xml <clip xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/skytree" android:clipOrientation="horizontal" android:gravity="center"> </clip> ② activity_main2.xml

AndroidのResource - Drawableリソースサンプルコード

① StateListDrawableリソース <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/red" android:state_pressed="true" /> </item></selector>

AndroidのResource - Drawableリソース

DrawableリソースはAndroidで最も使われるリソースである。 直接.png,.jpg,.gif,.9.png等を使用するかXMLの使用も可能。 イメージリソース 直接.png,.jpg,.gif,.9.png等を/res/drawable-xxxフォルダに配置する。 [<package_name>.]R.drawable.<file_name> @[<package_name>:]drawable/file_name Stat</package_name></file_name></package_name>…

AndroidのResource - Arrayリソース

Androidはjavaソース内の配列定義はお勧めせず、/res/values/arrays.xmlを使い配列リソースを定義するようにしている。 定義 <array.../> <string-array.../> <integer-array.../> 使用 [<package_name>.]R.array.array_name @[<package_name>:]array/array_name Resourcesのメソッドでアクセス String getStringArray(int id) int StringI</package_name></package_name></integer-array.../></string-array.../></array.../>…

AndroidのResource - 文字列、色、サイズリソース

文字列、色、サイズリソースに対応するXMLファイルはすべて/res/values/配下に保存する。 デフォルトリソース名 /res/values/strings.xml /res/values/colors.xml /res/values/dimens.xml Rクラス内の内部クラス名 R.string R.color R.dimen Android色の形式…