APIテスト（JSON形式でPOSTする）に使える汎用的なHTMLフォーム - Qiita
この記事は移行しました！最新の内容はこちらをご覧ください😀 API開発時にPOSTでメソッド渡さなければいけなくてその度にHTML書いて送信して〜ってのをやってたのですが、 いい加減毎回作るの面倒なので汎用的なのを作りました！ 画面こんな感じ ポイント！ APIのURLが書き換えられる Methodも切り替えできる パラメータ名と値が書き換えられる パラメータが足りなければ add で追加できる パラメータは [] で配列にも対応 ソース <html> <head> </head> <body> <h1>JSONでデータを送信する</h1> <p>Url: <input type="text" id="url" name="url" size="100" value="https://example.com/api/hoge"></p> <p>Method: <input type="t
WYSIWYGエディタで画像のアップロードを行う | Webエンジニアブログ
WYSIWYGのエディタSummernoteではファイルアップロード機能を実装できる Data URI schemeとFile Upload Bootstrap3でデザインされたWYSIWYGのエディタSummernoteに画像アップロード機能を実装する。 SummernoteをCakePHPで利用する SummernoteにはデフォルトでData URI schemeで画像ファイルをエディタに貼り付けることが可能。実際に画像を貼り付けて、HTMLのソースコードを確認してみたのが下の画像の状態になる。 Data URI schemeの方法を用いると画像をサーバ側にアップロードすることなく、画像をすべてエンコードしてテキスト状態にして貼り付けるため、画像を参照するためのHTTPリクエストが発生しないというメリットがある。 File Upload方式にて画像を管理したい場合には、Summern
canvasにローカル画像を表示 - Qiita
概要 html5を使ってローカルに有る画像ファイルを表示する簡単なhtmlを作ってみました。イメージの描画にcanvasを使用しています。 参考にさせて頂いたページ http://qiita.com/junya/items/0f977ae7f8f620fd83e7 http://d.hatena.ne.jp/oovu70/20111122/p1 ソースの説明 ファイルの読み込みに加え、イメージのロードも非同期になりますので、コールバックで処理をしないとcanvasへの描画は上手くいきません。 html要素として予め定義しているcanvasをセレクトしています。 getContext()メソッドで描画機能を有効にしています。jQueryのセレクタを使っていますのでcanvas[0]とします。 naturalHeight, naturalWidthでイメージのサイズを得ることが出来ます。縦横比
HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
HTMLファイルからPOSTでJSONデータを送信する - Qiita
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTMLファイルからPOSTでJSONデータを送信する</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#response").html("Response Values"); $("#button").click( function(){ var url = $("#url_post").val(); var JSONdata = { value1: $("#value1").val()
最小構成でSocket.IOを試すサンプル - console.lealog();
Nodeの勉強の足がかりとして、ぜひとも一緒に使いたいSocket.IOを勉強中。 Websocketの存在は知ってるものの、実際に何ができそうとかアイデアレベルに達するほどの知識はなかったんですよね。 というわけで、まずは最小構成からどんなものかをチェックチェック。 準備 Nodeはインストール済という前提で。 mkdir socketio && cd socketio npm install socket.io touch index.html app.js index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello SocketIO</title> <meta name="viewport" content="width=device-width, initial-sca
10分でできる！Node.jsのSocket.ioを使ったWebSocketによる双方向通信
Node.js の Socket.io を使うと WebSocket による双方向通信が驚くほど簡単に可能になるので、実装方法を簡単に紹介します。 これにより、リアルタイム通信が可能です。 準備 プロジェクトフォルダの作成 socket.io-sample を作成します。 プロジェクトフォルダへ移動 cd socket.io-sample コマンドプロンプトまたはターミナルを開いて、プロジェクトフォルダに移動します。 package.json の作成 npm init -y npm init コマンドで、package.json を作成します。 Socket.io のインストール npm install socket.io npm install コマンドで socket.io をインストールします。 HTML から Client API を呼びだす サーバプログラムを作成する app.j
WebSocketでチャットアプリを作ろう① ~WebSocketサーバの立て方~
チャットやオンラインゲームなどのアプリではリアルタイム通信機能が必要になります。実装の難易度が高そうに感じられるかもしれませんが、Monacaアプリで使われるHTML5であれば、WebSocketという技術を使うことで比較的簡単に実現できます。 こちらの記事ではWebSocketの概要と、その導入方法について紹介します。 WebSocketとは WebSocketは読んで字のごとく、Web上でソケット通信を実現する技術になります。これまでのHTTP通信では一回の接続ごとに情報が送受信されて切断される仕組みでした。そのため、サーバ側からクライアントに対して情報を送る（プッシュする）のが困難でした。 サーバ側から情報をプッシュする技術として、WebSocket登場以前にも幾つかの方法がありました。 multipart/x-mixed-replace Firefoxの前身であるWebブラウザ、N
鼎盛国际游戏平台-［诚信第一］
鼎盛国际游戏平台-［诚信第一］是包含了新葡京、威尼斯人、金沙、BBIN电子、MG真人视讯、BET365等多个官方平台，游戏、体育、娱乐的第一首选，点击进入最新的娱乐集团网址:www.782net,www.2007com,www.9159com,www.js333com,使鼎盛国际游戏平台-［诚信第一］成为亚洲一流的娱乐平台,鼎盛国际游戏平台-［诚信第一］,注册免费送28元2015。
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
Post by @0-9
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); (function () { var href = 'style sheet url'; var html = document.documentElement; html.st
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
ayacnews2nd.com - このウェブサイトは販売用です！ - ayacnews2nd リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5分で動かせるwebsocketのサンプル3つ - Qiita
GitHub - phacility/xhprof: XHProf is a function-level hierarchical profiler for PHP and has a simple HTML based user interface.
finefinefine.jp