Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
テキストエディターを作ってElectronの基礎を学ぼう！ HTML5でPCアプリ開発入門 – ICS MEDIA
前回の記事「Electron入門」では、ElectronというHTML/JavaScriptのフレームワークを使って、デスクトップアプリケーションを作成するまでの手順を紹介しました。 今回は応用サンプルとしてテキストエディターの作り方を解説します。テキストエディターを作成することで、Node.jsのファイルの読み込み/書き込みや、ダイアログモジュールなどアプリケーション開発で必須となるElectronの技術を習得できます。30分程度で試せる内容になってますので、ぜひご覧ください。 ※本記事はElectron v18を使用し、macOS 12.3 MontereyおよびWindows 10にて動作検証を行いました。 完成デモの紹介 今回のサンプルのテキストエディターのデモをご覧ください。このオリジナルのテキストエディターではテキストの編集ができ、ファイルの読み書きができます。このテキストエデ
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
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
HTML5+Canvasでパーティクルっぽいのを作ってみる
Posted: 2015.07.16 / Category: javascript / Tag: HTML5, アニメーション HTML5+Canvasを使用して簡単な横に流れるパーティクルを作成してみます。 パーティクルオブジェクトを作成して動かす 基本的な作りは下記記事をベースに作成します。 HTML5で作るCanvasアニメーションの基礎 上記の記事では一つの円を動かすだけだったので描画関数だけ作成しました。 function drawCircle(x, y, scale, color) { ctx.beginPath(); ctx.arc(x, y, scale, 0, 2*Math.PI, false); ctx.fillStyle = color; ctx.fill(); } パーティクルの場合、粒子一つ一つに位置情報や速度の設定をしたいので、少し拡張してオブジェクトとして作成
単なるCSSリセットではなく、レスポンシブ対応のWeb制作を見据えたテクニックがいろいろ盛りこまれたスタイルシート -Marx
CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Marxの特徴 JavaScriptやclass付けを使用しないraw CSS すべてのブラウザに一貫したレンダリングを提供 クリーンなタイポグラフィ ナビゲーションやボタン、フォームなど、カスタマイズ可能 レスポンシブ対応 シンプルでミニマルなデザイン ファイルサイズは、7.7kb CSSリセットとしてはスタイルが少し多く、ページ作成のフレームワークとしては足りない感じです。 Marxのデモ デモペー
どんどん作ろう。オンラインで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で動くの
SVGモーフィングで、図形を徐々に変化させてみよう
2015年12月28日 SVG モーフィングとは、ある図形から別の図形へと自然に変形するように中間の画像を補正して映像を見せる技法です。Flashでは「シェイプトゥイーン」でモーフィングを表現していましたね（懐かしい！）。CSS3のアニメーションだと、画像の移動・回転なんかはできちゃいますが、形そのものを変形させるのは難しいです。SVGを使えば、そんなアニメーションも作成可能！さっそく挑戦してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記（2015年12月28日）：SMILはSVG次期バージョンから非推奨となるようです。 Intent to deprecate: SMIL – Google Groups SVGモーフィングを使った例 SVGモーフィングとはなんぞや？ってことで、まずは以下の作例をご覧ください。徐々に変化していく様子がおもしろいですね！ リンク先ではバットマンの
なぜ仮想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
スクロールしてもテーブルヘッダを固定表示できる「fixed-table-header」:phpspot開発日誌
hungnq1989/fixed-table-header GitHub スクロールしてもテーブルヘッダを固定表示できる「fixed-table-header」 通常はスクロールすると消えてしまって、何のカラムだっけ？と上にスクロールするという無駄な動きを生んでしまいますが、こちらのプラグインを使ってテーブルヘッダを初期化することでテーブルを使いやすくできます 関連エントリ インライン編集できるテーブル実装用jQueryプラグイン「editable-table」 ナイスなレスポンシブなテーブル実装jQueryプラグイン「Responsive tables」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」
HTML5とCSS3を職として身につけたい人が最初に読んでほしいオススメの本 -HTML5+CSS3の教科書
HTMLとCSSはWeb制作の中では敷居が低く、あまり詳しくなくてもWebページやブログなどを作成することができます。しかし職として考えた時は、必要な知識をしっかりと身につけたいものです。 HTMLってそもそも何なのか、どうして正しくタグをつける必要があるのか、CSSを使う意味は何？ といった基本から、実装でなぜこのタグを使うのかこういうテクニックを使うのかといったことまで、必要な正しい知識をしっかりとマスターできるコーディングをまじめに取り組みたい人にオススメの本を紹介します。 書店に並んでいる多くのHTML5とCSS3の書籍の中から自分にあった本を探す時は、必ずこの本も加えて検討してみてください。
ng-admin - 次世代のWeb管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はサーバサイドではHTMLレンダリングせず、RESTfulなWeb APIを使ってデータを取得、表示するといったWebアプリケーションが増えています。そうした中、運営側の管理画面においても求められるものが変わってきています。 そこで今回は次世代の管理画面、ng-adminを紹介します。AngularJSを使ったWeb管理画面になります。 ng-adminの使い方 Web APIを用意しておくことで、ユーザ向けはもちろんのこと管理画面においてもスムーズな操作ができるようになります。pushStateにも対応していますので、URLはユニークになるようです。 ng-adminはJavascript/HTML5製のオープンソース・ソフトウェア（MIT License）です。 Angul
六角形を回転させてブロックを消していくテトリスっぽい無料ゲーム「Hextris」
テトリスは上から落ちてくるブロック(テトリミノ)を消していくゲームですが、ブロックの着地地点が6カ所で、ヘックス(六角形)を回転させてブロックを重ねて消していくテトリスっぽい無料ブラウザゲームが「Hextris」です。 Hextris http://hextris.github.io/hextris/ 「Hextris」がどのようなゲームなのかは以下のムービーを見るとわかります。 「Hextris」をプレイしてみるとこんな感じ - YouTube ゲームをプレイするには画面のどこかをクリック。 するとカラフルなブロックが6方向から降ってきます。左右キーで真ん中のヘックス(六角形)を回転させることができるので、最適な場所を見極めてブロックを落としていきます。 同じ色のブロックを3個以上つなげると消滅する仕組み。つなげる方向は縦に3つでも横に並べても、縦2つの横に1つくっつけても、斜め以外で接
AngularでHTML5モバイルアプリを作るのに便利なライブラリたち
AngularでHTML5モバイルアプリを作るのに便利なライブラリたち ng-conf 2014っていうイベントが1月にあったようですね。 YouTubeで動画が公開されている(でもすべてではない)ので助かります。とても勉強になりますね。ほんと、いい時代になったものです。 さて、Daniel ZenのTalkを見ました。AngularJSでモバイルアプリを作るために使えるライブラリがいっぱい紹介されていたのでメモしておきます。 PhoneGap まず、PhoneGap。 今では、Open Sourceなんですね。 http://cordova.apache.org/ 使ったことはないですが興味はあります。 一部ネイティブ関数にもアクセスできるようです。 http://en.wikipedia.org/wiki/Phonegap#Supported_platforms APNも使えるようです
chrome-life.com - このウェブサイトは販売用です！ - chrome life リソースおよび情報
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.
html5j パフォーマンス部 第三回勉強会
2014年7月23日 著 7/22の覚え書き。シナジーカフェ GMO Yoursで開催されたhtml5j パフォーマンス部 第三回勉強会に参加しました。講師は藤屋マネジメント研究所の藤屋伸二氏、テーマは「ドラッカーにUSPを学び、コンテンツを削る」ということで、まぁ表示速度高速化につながってはいるものの、技術的な話ではないというのはあらかじめ織り込み済み。僕はそこそこ楽しめたけれど（やっぱりだいぶ経営目線の中身ではあったと思う）、しかし終わってから山家 支店に飲みに行ったら一緒に参加した同僚の方の受け取り方はだいぶ違っていて、そのギャップがまた面白かったかな。次回は9月に携帯通信網の基礎とか携帯3キャリアが集まってのパネルとかを予定しているそうで、楽しみです。以下、大半はスライドに乗っていた文字の起こしだけれども、覚え書きから： イントロダクション 日本の旅行会社のサイトはどこも似たり寄っ
紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。 今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ
