UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse
Webサイトを訪れたユーザーが、もっとも重要視するのはUIデザインです。 ユーザーが直感的に操作でき、使いやすく、美しくデザインされたWebサイトは、長期的な成功につながります。 しかし、どんなUIデザインを作成したらよいか分からない、という声もよく聞きます。 そこで今回は、コピペで利用できるUIデザインライブラリ UIverse をご紹介します。 1200を超えるUI要素が公開されており、HTML/CSSをコピペするだけで、だれでも手軽に利用できます。 これらを押さえて、あなたのWebサイトをユーザーにとって魅力的で、使いやすくしてみましょう。 UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse UIverseではあらゆるプロジェクトに対応できる、HTML/CSSで作成されたオープンソースのUI要素を作成、共有できるウェブサイトです。 すべてのコードはM
ゼロからはじめるJavaScript(7) ChromebookでWebアプリ(Node.js/PHP)の開発環境を整えよう
ここ最近はChromebookの売上が好調のようです。Chromebookは安価ながら安定してWebアプリが利用できるのが魅力です。TVでもChromebookのCMを見かける機会が増えています。しかし、エンジニアとしては、Chromebookを使ってどこまで快適なWebアプリの開発環境が構築可能なのか気になるところです。今回、検証してみました。 ChromebookでWebアプリの開発環境を構築して開発しているところ 結論 - Linux仮想マシンでWebアプリの開発環境が整う まずは、結論から紹介すると、それなりに快適なWebアプリの開発環境を構築できます。そもそも、2019年以降に発売されたChromebookでは、設定からボタンを数回押すだけでLinux(Debian)の仮想マシンをセットアップできるようになっているからです。 また、昨今のChromeOS上ではAndroidアプリ
1行のJavaScriptコードでユーザーの行動分析を動画で確認できる「LogRocket」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、自分のWebサービスやサイトに訪問したユーザーが、どのような行動をしているのかを動画で再現してくれるサービスのご紹介です！ ユーザー側で発生した不具合などのログも記録されたり、特定のユーザーだけを抽出して分析できたり、とても便利な機能が無料で利用できるのでオススメですよ。 【 LogRocket 】 ■「LogRocket」の使い方！ それでは、実際に「LogRocket」を使いながらどのようなサービスなのかを見ていきましょう！ 今回は「LogRocket」の機能を試すために、以下のようなサンプルサイトを作っておきました。 このサイトを利用して、どのような機能が使えるのかをご紹介しようと思います。 まず、公式サイトへアクセスして「トップページ」のボタンをクリックしましょう。 ユーザー登録画面が表示されるので、「メールアドレス」と「パスワ
Windows バッチに JScript・VBScript・Oracle SQL スクリプトを混在させてバッチ処理の中で実行する - Corredor
2016年も終わりに近付いている昨今、今更ですが Windows バッチの黒魔術的な挙動にハマっていて、レガシーな職場で培ったレガシーな知識の総決算をしておこうかなと思うなど。 Windows バッチスクリプトを置いておく GitHub リポジトリを作っていますので、よかったらご覧ください。 GitHub - Neos21/windows-batch-scripts: ちょいと便利な Windows バッチ製のスクリプトやスニペット集 今日はその中から、Windows バッチファイル1つの中に、別の言語のスクリプトを混在させて実行する手法をいくつか紹介する。 JScript を混在させる Shebang VBScript を混在させる技 Oracle DB に渡す SQL ファイルを混在させ SQL*Plus を起動する 別の書き方 より実践的な使い方 WSH (JScript・VBScr
クールな画像拡大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
テキストエディターを作ってElectronの基礎を学ぼう！ HTML5でPCアプリ開発入門 – ICS MEDIA
前回の記事「Electron入門」では、ElectronというHTML/JavaScriptのフレームワークを使って、デスクトップアプリケーションを作成するまでの手順を紹介しました。 今回は応用サンプルとしてテキストエディターの作り方を解説します。テキストエディターを作成することで、Node.jsのファイルの読み込み/書き込みや、ダイアログモジュールなどアプリケーション開発で必須となるElectronの技術を習得できます。30分程度で試せる内容になってますので、ぜひご覧ください。 ※本記事はElectron v18を使用し、macOS 12.3 MontereyおよびWindows 10にて動作検証を行いました。 完成デモの紹介 今回のサンプルのテキストエディターのデモをご覧ください。このオリジナルのテキストエディターではテキストの編集ができ、ファイルの読み書きができます。このテキストエデ
最新版で学ぶElectron入門 – HTML5でPCアプリを開発する利点と手順 – ICS MEDIA
Electron（エレクトロン）とは、ウェブ技術でデスクトップアプリケーションを作成できるテクノロジーです。HTMLとCSS、JavaScriptを使って開発し、WindowsとmacOSの両OSのアプリケーションを1つのコードから作ることができます。近年、注目度が高まっておりマイクロソフトやGitHubなど、有名企業も採用しています。 Electronエレクトロン製のアプリケーションはChromiumクロミウム（Chromeブラウザの元となるもの）とNode.jsノードジェイエスがランタイムとなっています。ウェブコンテンツをそのままアプリケーションとして動かしたり、デスクトップアプリケーションとしてブラウザだけで実現できない機能を組み込めるのが特徴です。 利用用途として、テキストエディターやユーティリティーソフト、デザインツールなどの小規模な使い方から、イントラネット内のクライアントツー
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
ブラウザ内で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」 レスポンシブに要素を消さずに変形するテーブル
社内勉強会でReactとFluxについて喋った - pixiv inside [archive]
開発が大好きな@geta6です。 React meetupのことを完全に見逃していて悔しかったので、外部公開の社内勉強会でReactとFluxについての発表をしました。 経緯 現在ピクシブではReactでFluxな感じの構成で新サービスを開発中です。これまで社のプロダクトとしてReactを採用したことは無く、この新サービスが初の採用となる予定です。社内の空気感は「FluxもReactもよく聞くし何となくわかってるけど、詳しくは知らない」という感じでした。 そこで、自分の理解度の確認と、一緒に開発しているチームの人や社内外の開発現場の皆さんに大体の感覚を掴んでもらえるよう「ReactとFluxって一体全体なんじゃらほい」というテーマで、ざっくりと大枠を捉える発表をしました。 資料 speakerdeck.com ReactとFluxのこと // Speaker Deck スライドには入ってい
![社内勉強会でReactとFluxについて喋った - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a8d0ed6fcb034b99b3f6481c12f69296fc5deef2/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F11696248318756278971%2F8454420450092816254%2F1430122329)
JS自動レビューツール"jswatchdog"を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone 開発チームの天野 (@ama_ch) です。すっかり春らしくなりましたね。 少し前に JS の自動レビューツール jswatchdog をオープンソースで公開しましたので、こちらで紹介させていただきます。 使い方 https://kintone.github.io/jswatchdog/ 上記の URL を開き、左側のエディタに JS コードを貼り付けるだけです。 右側に修正が必要な箇所が表示されるので、適宜修正します。 特徴 バリバリの開発者じゃなくても使いやすい一画面完結の Web インターフェース lint ツールでお馴染みの構文チェックの他、知らずに脆弱性を作り込むことを避けるため、XSS の可能性がある箇所にも警告を表示 内部的には、JS の静的構文チェックツールとして ESLint と JSHint を組み込んでいます。 さらに XSS の可能性があ
[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll
コンテンツスライダー、画像ギャラリー、カルーセル、ウォールなど、スクロールするさまざまなUIエレメントを無限スクロール対応にするjQueryのプラグインを紹介します。 スクロール操作はデスクトップのドラッグやスマホのスワイプやフリックにも対応しており、非常に快適に動作します。 eco Scroll eco Scroll -GitHub eco Scrollのデモ eco Scrollの使い方 eco Scrollのデモ デモではWebページやアプリで見かけるさまざまなスクロールするUIエレメントを無限スクロール対応にしています。 操作はデスクトップのドラッグ、スマホのスワイプやフリックでもOKです。
![[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll](https://cdn-ak-scissors.b.st-hatena.com/image/square/a56e31e3e2effd7ccab786bc05874d94bd57bdec/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015032605.png)
リアクティブプログラミングの技術を用いてマウスストーカーを実装する - はこべにっき ♨
古き良きインターネットアプリケーションであるマウスストーカー*1をリアクティブプログラミングの技術を活用して実装してみるという取り組みをしましたのでご紹介します。リアクティブプログラミングというと主語が大きめですが、ここではbacon.jsを使ってるくらいの意味です。 できたもの まずは完成したマウスストーカーを紹介します。チェーンのように連なった星がマウスカーソルの軌跡を辿ってついてきます。工夫してうごかすとなかなか綺麗です。下のボタンを押すと実際にこの画面でマウスストーカーを有効にすることができます(requestAnimationFrameに対応したPCブラウザのみ)。いろいろ動かして遊んでみてください。 このページでマウスストーカーを有効にする 実装 このマウスストーカーがどのように実装されているか紹介します。ソースコードはGitHubに公開していますので、適宜ご参照ください。手元
[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ：Demo 3 In: bounceIn, Out: bounceOut a
![[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f7120768ce8f7380b64d8daf3a7d52402809916/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030405.png)
[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider
デモページ：Standard 操作は左右のナビゲーション、矢印キーを使ったキーボード操作にも対応しています。 外観はCSSのテーマファイルで変更することができ、アニメーションの変更、ビュレットのナビゲーション、サムネイルのナビゲーション、フルスクリーンスライダー、video/audioもサポートしています。 デモページ：Using API デモページ：Using Events デモページ：Multiple Sliders ダウンロードファイルに含まれているデモは、Retina用の画像も用意されています。 デモを幅480pxで表示 Ideal Image Sliderの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートを外部ファイルとして記述します。 「default.css」はスライダーの外観を定義したデフォルトのテーマです。 <head> ... <link rel="s
![[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/c553218678c826bd3f32579ee04c4e31354c3815/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091003.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VueとGASでつくる！サーバーレス家計簿📔
JS Bin
webtoolnavi.com
cow2design.com
Vue.js資料まとめ（古いので注意）
