GASのWebアプリケーションでクライアント側JavaScriptを使うための基礎知識
GASユーザーかつHTMLページ・CSS初心者向けにWebページの作り方の基本中の基本を解説していきます。まず、その最初の一歩として、GASで最も簡単なWebページを作成して公開する方法をお伝えします。 面倒なサーバーの準備も不要、しかも無料…。 社内用アプリケーションとかちょっとしたツールを作る上で、どうしても必要になる技術があります。 それは、クライアント側のJavaScriptです。 クライアント側、つまりブラウザで動作するJavaScriptを使いこなすことで、作成したWebページに動きをつけたり、リアルタイムで更新や計算をしたり、さまざまなことが実現できるようになります。 このシリーズでは、はじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法を紹介していきます。 初回となる今回
クールな画像拡大jQueryライブラリ「lity.js」、レスポンシブにも対応！ | SHINGO IRIE
クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。 使い方公式サイトから一式ダウンロード。 ダウンロードしたファイルの中で使うのはdistフォルダ内のlity.js、lity.cssのみ。 jQueryの後に読み込ませます。 <link href="lity.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="lity.js"></script> あとは、 <a href="http://image.jpg" data-lity>Image</a> のようにdata-lity属性をつけるだけで動きます。かんたんですね。下がlity.jsの表示サンプルです。 WordPressへの組み込みWor
HTML5でクロスプラットフォームなデスクトップアプリを開発できる「Electron」とは
Electron（旧Atom-Shell）とは、Web開発者がHTML5とNode.jsでMac、Windows、Linuxのデスクトップアプリを作れるクロスプラットフォーム実行環境です。Electronはオープンソースで無料で使える上に、MITライセンスであるため、商用利用も可能です。開発元はGitHub社です。 最近はJavaScript、HTML5の進化によって、多機能なWebアプリケーションが増えてきました。それに伴い、モバイルでは、WebViewやApache Cordovaなどを使ったハイブリッドアプリも注目されています。Electronはその流れの中から生まれた新しい実行環境です。 ElectronはChromiumブラウザを内蔵しているのが一番の特徴です。Chromiumブラウザは、Google製のChromeブラウザのオープンソース版にあたります。ウェブ開発者がChrom
フォームのデザインを簡単に整える「iCheck」がとっても便利！ | WebChokoTips – ウェブチョコチップス
フォームのデザインって難しいですよね。でも、ユーザの動きを考えやすくて作りがいがあるかと思います。 しかも、デフォルトのスタイルだと全体のテイストと合わなかったりするので、実装に手間がかかってしまいます。 そこで今回紹介するプラグインは、「iCheck」というjQueryのプラグインです。スタイルの変更が面倒なチェックボックスとラジオボタンをいい感じに整えてくれるすぐれものです。 まずはDEMOを用意したのでご覧ください。 DEMO DEMOにあるフォームはサーバーへの送信はしていませんので、お気軽に試して見て下さい！ 使い方 HTMLは以下のような感じで、特別なマークアップは必要無いようです。
IEだけに適用されるHTML「条件付きコメント」の使い方
こんにちは、さち です。 ウェブサイト制作の経験がある人には有名な話なんですが 古いバージョンの Internet Explorer（以下：IE） は ウェブサイトの表示で 特殊な挙動，未実装の問題 があり サイトを作る時に、別途 IE 対策が必要です。 そこで今回は IE だけに適用される HTML を記述できる 「条件付きコメント」の使い方についてまとめていきます。 「条件付きコメント」とは？ 「条件付きコメント」は IE だけが解釈できる HTML コードです。 構造は下記のようになっています。 <!--[if IE 7]> 適用するHTMLコード <![endif]--> 最初に、<!--[if IE 7]> で適用する IE のバージョンを指定。 例では、[if IE 7] なので 閲覧者のブラウザが IE7 の場合に適用します。 次に、適用内容を HTML 形式で記述。 最後に
ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌
Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル
HTML/JavaScript/CSS対応のWebIDE「Orion 8.0」がリリース。ホバーツールでエラー表示などが強化
OrionはWebブラウザから使えるエディタ、デバッガなどが統合されたツールで、HTML/JavaScript/CSSに対応。ファイルマネージャ、エディタ、Gitによるバージョン管理、デバッガ、プレビューなどの機能が含まれています。 エディタのキーバインディングには、viとEmacsが標準で用意されており、マウスとカーソルキーだけでなく使い慣れたエディタの操作でコードの編集が可能。タグを入力するときには下記画面のように補完機能も自動的に働きます。
シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選
どんどん作ろう。オンラインでHTML5/JavaScript/CSS3の実行確認ができるWebサービス×16選 Web技術の良いところはブラウザさえあれば実行確認ができて、テキストエディタだけで作れてしまう所ではないでしょうか。さらに今回紹介するようなサービスはWeb上にHTML5/JavaScript/CSS3を保存して共有できるので、HTML5の新しいAPIを試すのに使ったり、テクニックを披露するのに使えますよ。 JSFiddle 多種多様なJavaScriptフレームワークの読み込みも可能で、HTML/JavaScript/スタイルシートの記述ができます。 Create a new fiddle – JSFiddle CodePen グラフィックス系の投稿も良く見かけるWebプレイグラウンドです。 CodePen – Front End Developer Playground &
jadeのテンプレートを触ってみた ｜ Tips Note by TAM
こんにちは。中川です。みなさまご無沙汰です。お元気でしょうか。 さて新しい案件で、何か新しいことをしてみようかと思い、jadeを使ってみようかと思いました。 で、ひと通り調べたことをメモしていきます。（注：以下は全てMacでの操作になります） ■jade（http://jade-lang.com/(外部サイトに飛びます)） githubのページには、 「Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node. 」 （Hamlに影響を受けた、Node.jsのHTMLテンプレートエンジン。） と書かれています。 これだけはいまいちピンとこないので、さっそく使ってみることにしました。 ■インストール jadeはnode.jsで動くの
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
Polymer と Web Components の違い9選（もとい Polymer の便利機能）
違い、または付加機能 色々な周辺事情で、勢力を広げつつある Polymer さん。（つい最近、それに加担したような気もする） 「どこまでが Web Components で、どこからが Polymer なのか」を理解するためにもPolymerの機能をメモる。Polymer は色々なことを便利にしてくれるライブラリであり、差分を言い出すとキリがないので主要なポイントだけ。 <template> が自動で Shadow DOM に放り込まれる Shadow DOM内の <link> をインラインの <style> に展開 repeat のサポート {{interpolate}} のサポート <element> のかわりを <polymer-element> としてサポート on-click とかイベントハンドラの宣言 this.$ による idが付加された要素のコレクション observe に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JS Bin
ソースコード検索エンジン「NerdyData」で世界1.4億のサイトから実用コードが探せる
キトー君の悪い口コミ・失敗談と効果・販売店舗情報・安全と危険性・代用自作方法
http://www.nijilog.info/2014/05/23/215
A Node in Nodes
Jade について。
0行から始めるクライアントサイドJavaScript入門 - Qiita
chrome-life.com