30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
template要素についてのお勉強 - Qiita
はじめに HTML5の新たな要素としてtemplate要素 <template> がありますが、これを使うと何が便利になり何が嬉しいのか。 自分が後で見返すためのメモとして書き記しておきます。 template要素って何さ template要素はブラウザ上では表示されず、主にJavaScriptによる操作がメインになる要素です。 名前からもわかるようにテンプレートとして使うコンテンツを中に書いてJavaScriptであれこれできるやつです。 template要素内のコンテンツは、JavaScriptの操作で本文へと挿入されない限り本文に何も影響を与えません。 つまり、template要素内で <img> で画像を指定していても、挿入されるまでその画像はロードされることはありません。 <script type="text/template"></script> との違い script要素を
基本的な動作方法
赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名 前のページ 読み込み時に動作 <script>タグ内にJavaScriptの命令を書き込むことで、ページの読み込みと同時に実行されます。 <script type="text/javascript"> <!-- （ここにスクリプトを記述） //--> </script> 使用例 <script type="text/javascript"> <!-- document.getElementById("text").innerHTML = "ようこそ私のページへ"; //--> </script> リンクをクリック（直接記述） <a>タグ内にスクリプトを直接記述します。 hrefには通常URLを記述しますが、「javascript:」から記述を始めることでJavaScript
ちょっとしたHTMLはGitHub Gistに置いてbl.ocks.orgで表示するのがお手軽です - Qiita
はじめに JavaScriptを含んだHTMLを表示するのにGitHubでレポジトリを作ってGitHub Pagesを作るという手もありますが、ちょっとしたHTMLだと、わざわざレポジトリ作るのも面倒です。 FirefoxのBugzillaを見ていたら、984796 – SVG path getTotalLength returns large incorrect numberでたまたま見つけた bl.ocks.org - aboutが便利だったので紹介します。 使い方 index.html というファイル名でGistを作成します。 あとは、GistのURLの https://gist.github.com を http://bl.ocks.org に置き換えてアクセスすれば表示されます。 bl.ocks.org - aboutに上げられている https://gist.github.co
動的コンテンツを画像化できるJSライブラリ "html2canvas" を使おう - KAYAC Engineers' Blog
こんにちは、HTMLファイ部新卒の石崎です。 今回は、Webページを画像化できるJavaScriptライブラリ、html2canvas について紹介します。 html2canvasを上手に活用することで、Webサイト側で表示ページのキャプチャを用意して処理したり、ユーザに提供したり出来るため、作れるWebサービスの幅がきっと広がります。 スクリーンショットを撮る html2canvasを使うとWebページのキャプチャを作れますが、そもそもスクリーンショットを得る方法は他にいくつもあります。 Webページの見えている部分のキャプチャをユーザが撮る Mac command + shift + 4 + space Windows Alt + PrintScreen このコマンドで、Webページのウィンドウに表示されている部分のキャプチャを撮ることができます。 スマートフォンであれば、端末の電源ボ
JavaScriptからHTMLフォームをサブミットする | iPentec
JavaScriptを利用してHTMLフォームをサブミットをするコードを紹介します。 概要 JavaScriptでフォームのサブミットをする場合は、フォームのオブジェクトのsubmit()メソッドを呼び出します。 プログラム コード 以下のHTMLファイルを作成します。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script language="javascript" type="text/javascript"> function FormSubmit() { var target = document.getElementBy
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな
SPAがネイティブアプリをぶっ壊す：HTML5/Javascriptが変えるWebの未来 - Qiita
はじめに タイトルは半分釣りですが、半分本気で考えてもいます。 近い将来、Webアプリが今のネイティブアプリの市場を超えてくる、と仮説を立てています。 ぜひ、先人のみなさんのご意見やお考えを教えてください。 SPAについて SPAとはなにか（What） 歴史 佐川夫美雄さんのイベントレポートの一部が、非常にまとまっていてわかりやすい部分でしたので、まず引用させていただくこととします。 RIAはアプリケーション利用者に対し高い評価を得ましたが、2010年のAppleショックにより衰退の方向へ向かいます。具体的には2010年にSteve JobsがFlashを激しく批判したことに端を発します。プロプライエタリ(Proprietary Software)なFlashよりオープン性のあるHTML5を推進するようになりました。2011年にはMicrosoftがWeb開発者に対してSilverligh
複数のCanvasを結合し、1つの画像として保存したい | teratail
1var createImage= function(context){ 2 var image= new Image 3 image.src= context.canvas.toDataURL() 4 return image 5} 6 7var context1= document.createElement('canvas').getContext('2d') 8context1.fillText('foo',0,10) 9 10var context2= document.createElement('canvas').getContext('2d') 11context2.fillText('bar',0,20) 12 13var context3= document.createElement('canvas').getContext('2d') 14context3.fill
無料エディター「Brackets」にも恋に落ちた
先日から、Adobe提供の無料開発エディター「Brackets」を使っています。 僕はこれまで、Wordpressテーマの開発などは「恋に落ちるエディター」のキャッチフレーズでおなじみのSublime Text 3を利用してきました。Sublime Textは、そのキャッチフレーズ通りの素晴らしいエディターです。 けれど、初めてBracketsをインストールして少し使ってみた瞬間から、「これは！」と、Sublime Textを初めて使った時と負けないぐらいの衝撃を受けました。 Bracketsも、Sublime Textと同様拡張で様々な機能を追加できるようになっています。けれどまず今回はデフォルト機能だけで気に入った部分を紹介したいと思います。 Bracketsとは Bracketsは、HTML、CSS、JavaScriptで開発されているオープンソースコードエディターです。Window
href=\"javascript:...\"とonclick=\"...\"の違い(その1) - DEVELOPMENTOR*LEARNING RESOURCE LAB.
ソフトウェア開発現場の視点からソフトウェアと開発者の価値を高める「ホットな何か」をお届けします。(休止) javascriptでaタグのクリックイベントをハンドリングする方法は2通りあります。「href="javascript:..."」のようにhref属性を使う方法と「onclick="..."」のようにonclick属性を使う方法です。 javascriptは用途と限定して使うことが多いため気づきにくいのですが、href属性とonclick属性は振る舞いが異なります。次のスクリプトを実行してみるとその違いがわかります。 <script language="javascript"> <!-- function go1(text) { alert(text); } --> </script> <a href="javascript:void(0);" onclick="go1('%35%3
【jQuery】外部ファイルの読み込みと操作 - MAXIMUM.PROの日記
今回は、外部ファイルの読み込みと操作、GETメソッドを使ったファイルの扱い方を中心に紹介していきます。APIを使ったWebアプリケーションをつくる際に必要になってくるJSON形式について覚えましょう！！ 以下のファイルを用意してください。 sample.html <h2>load</h2> <p>外部ファイルのテキストデータをそのままタグに置き換える</p> <!-- javascript:void(0)：リンク表示、アクションは起こさない --> <div><a id="load" href="javascript:void(0)">読み込み</a></div> <div id="txtLoad">データ</div> <br /> <p>外部ファイルのHTMLデータをそのままタグに置き換える</p> <a id="load2" href="javascript:void(0)">読み込み
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
(JavaScript)jQueryで選択した要素のタグ名を取得したい | old_3流プログラマのメモ書き
jQueryでidやnameを使って要素を選択しますが、選択した要素のタグを知る方法です。 以下のようにすればいいようです。 ●HTML側 <select id="hoge" name="hoge"> <option value="1"> hoge1</option> <option value="2"> hoge2</option> <option value="3"> hoge3</option> </select> <input type="button" onclick="return getTagName()" value="タグゲット"> ●JavaScript側 function getTagName(){ alert( $("#hoge")[0].nodeName ); } 実行結果は "SELECT" となります。 参考： javascript or JQuery でタグ
unityをhtmlに埋め込むやり方 « UXIC.net
flashと同じく、unityをhtml（サイト）に埋め込むにはjavascriptを使う必要があります。もしかしたらhtmlのembedタグでできるかもしれませんが、枠ができたり一旦クリックしなくてはいけなかったりする可能性がありますし、結局たいしてコードが短いわけでもないのでjavascriptがよいかと思います。 javascriptをhead内に埋め込む 共通で使う以下のタグをjavascriptをheadタグ内に埋め込みます。 <script type="text/javascript" src="http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject.js"></script> 単独の記事向けにjavascriptを埋め込む サイト内にunityのオブジェクトが1つしかない場合はheadタグ内
jsdo.it
We’re getting things ready Loading your experience… This won’t take long.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
templateタグをjQueryで操作しようとしたらハマった話 - Qiita
DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier
CodePen - Front End Developer Playground & Code Editor in the Browser
オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開