GASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩
GASでクライアント側にもJavaScriptを使用してWebアプリを作成する方法をシリーズでお伝えしています。今回は、GASでクライアントJavaScriptを使用する超簡単なプログラムについて紹介します。 前回のおさらい まず、前回作成したプロジェクト構成を紹介します。 URLリクエストを受け取ったら、後述するindex.htmlを受け渡すdoGet関数を含むmain.gsです。 function doGet() { var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); htmlOutput .setTitle('GAS+Vue.js') .addMetaTag('viewport', 'width=device-width, initial-scale=1') return htmlOutpu
HTML・CSSだけでWebアプリを開発できる「Mavo」でGitHubをデータベース代わりにしてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、HTMLに専用の属性を追記するだけで、誰でも簡単にWebアプリを開発することができるフレームワークのご紹介です！ カスタマイズ性も非常に高く、GitHubと連携してデータを保存することも可能なのでアイデア次第でユニークな開発を楽しめますよ。 【 Mavo 】 ■「Mavo」の始め方！ それでは、まず「Mavo」を利用するための準備から始めていきましょう！ 手順はとてもシンプルで、HTMLファイルを作成して専用の「JS / CSSライブラリ」を読み込むだけで完了するというお手軽さです。 読み込むライブラリは次の通りです！ //CSSライブラリ https://get.mavo.io/mavo.min.js //JavaScriptライブラリ https://get.mavo.io/mavo.min.js このライブラリは、他にも「圧縮
Minify Resources (HTML, CSS, and JavaScript) | PageSpeed Insights | Google for Developers
Minify Resources (HTML, CSS, and JavaScript) Stay organized with collections Save and categorize content based on your preferences. This rules triggers when PageSpeed Insights detects that the size of one of your resources could be reduced through minification. Overview Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by t
CSSが苦手な人、CSSを書く時間がない人に最適！見栄えのよいページを簡単に作成できるスタイルシート -sakura
CSSの知識は必要なく、そして時間もない時に、簡単にいい感じのデザインになるCSSのフレームワークを紹介します。 CSSが苦手な人に、バックエンドで作業する用の即席プロトタイプにも最適です。 既存のHTMLに一行、もしくは二行追加するだけで簡単に利用できます。 sakura sakura -GitHub sakuraの特徴 sakuraのデモ sakuraの使い方 sakuraの特徴 かなり古くさいデザインのページでも、モダンなページでも、わずか数秒で見栄えのよいページにすることができます。 使い方は簡単。外部ファイルを加えるだけで、既存のHTMLでさえも見栄えのよいデザインを適用できます。 即席のプロトタイプにも最適。特にバックエンドで作業する時に、簡単にスタイルを適用できます。 友達や叔母さんなど、CSSが難しいという人にも美しいブログが構築できます。 他のすべてのCSSフレームワーク
【HTML入門】余白の取り方(paddingとmargin)について | プロスタ
HTML言語では、上下左右に余白を取ろうと思ったときに「padding」「margin」を用います。 どちらを使用しても、見た目上では同じように余白が取れているように見える場合があるので、どちらがどのような余白を意味するのか正確に理解していない人もいるのではないでしょうか。 paddingとは paddingは、内側（要素内）の余白のことを表しています。 文字だけで書いてもイマイチピンと来ない人もいるので、図を用いて説明しましょう。 上図で示している「Content」の部分は、divタグ、pタグ、imgタグといったような要素の事です。 Contentに対して装飾（背景色を付けたり線で囲う等々)をすることが出来ますが、 この線（border）の内側の余白部分を「padding」で設定することが出来ます。 Contentにpaddingを設定するとその分領域が広がるので、Contentに背景色
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
Froala WYSIWYG HTML Editor - 綺麗なデザインのWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 昔のWYSIWYGエディタと言うとツールバーに多くの機能が並んでおり、生成されるHTMLは相当分かりづらいものでした。機能が豊富すぎたために表示速度が重たかったり、一般ユーザにとっても混乱しかねないものだったと思います。 現在ではずいぶん進化しており、すっきりとしたデザインで使いやすいものが増えています。今回はFroala WYSIWYG HTML Editorを紹介します。 Froala WYSIWYG HTML Editorの使い方 Froala WYSIWYG HTML Editorには幾つかのモードがありますが、ツールチップモードでは文字を選択すると装飾が出ます。 画像も選択できます。 大きさを変えることもできます。 YouTube動画を埋め込み。 絵文字も使えます。 ツー
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
SSEを使ってHTMLエスケープを高速化してみた - k0kubun's blog
高速なHTMLエスケープをするライブラリを作った ある日HTMLエスケープを速くしたくなって、hescapeというライブラリを作った。 github.com とにかく速いHTMLエスケープがしたい Railsアプリのビューのレンダリングにおいて、CGI.escapeHTMLを高速化*1することでRailsのデフォルトのテンプレートエンジンが大きく高速化されたり*2、GitHubでもHTMLエスケープが全体のパフォーマンスに影響が大きかった事例もある*3など、常に自動でHTMLエスケープが行なわれるRailsの環境ではHTMLエスケープの速度が割と大きな意味を持っている。 従って、Hamlitの最速性を維持するためにHTMLエスケープのパフォーマンスを極めておきたかった。 vmg/houdini を倒したい 前述したGitHubの人が既にhoudiniというかなり速いエスケープライブラリを作
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わかばちゃんと学ぶ Webサイト制作の基本 : 湊川 あい : 本 : Amazon.co.jp