【サボりたいエンジニア向け】コーディングに役立つチートシートまとめ - Qiita
はじめに こんな人が役に立つ記事 コーディング業務の効率を上げたい。 コーディングに関するチートシートを知りたい。 打つのもめんどいからコピペでなんとかしたい（笑） 今回は、コーディングに役立つチートシートをまとめました。 VSCODEチートシート エンジニアなら必ず使うであろうVsCodeのショートカットチートシート。これはよく使ってます！ HTML系のチートシート集 HTMLに関するチートシートをまとめてみました。 HTML5 タグチートシート HTML5 のタグチートシート。サイトには 5 から廃止になった避けるべきタグなどもまとめてられており、 PDFでダウンロードできます。 HTML5 入れ子チートシート HTML の入れ子の可否を視覚的に分かりやすく、色づけしてくれます。対象要素の親、子を選ぶだけで、簡単に調べることが出来ますので便利なチートシート 特殊文字一覧：HTMLで使え
管理画面を作る：AdminLTE 基本編 - Qiita
管理画面を作るのは大変なので、なるべく手間を省きたい。Bootstrapでもいいが、意外としょぼくなるのと、何よりメニュ周りの制御が今ひとつな感じがする。そこで、管理画面作成に特化したCSSフレームワークを使ってみる。 いくつか選択肢はあるが、ここではAdminLTEを利用してみる。 bootstrapベースとはなっているが、いろいろと独自の癖があり、「bootstrapだと動くのに・・・」みたいなことがままある。 最初に注意 まじめに、TOPメニューから作って見たが、Dropdown等、基本的な機能がうまく動作しないことがあった。どうやら、他の要素に依存しているので、header(class="main-header")だけでなく、サイドバー(class="main-sidebar")や、コンテンツ(class="content-wrapper")、フッター(class="main-fo
[サーバレス] Googleスプレッドシートでスクレイピング - Qiita
スクレイピングがやりたかったんだけど、サーバの管理がめんどくさくなったので、Googleスプレッドシートの上でスクレイピングを出来るようにした。 やりたいこと 献血で、400mlAB型の血液が不足してます、A型は今大丈夫です、みたいな情報が、献血センターのwebサイトに掲載されるようになった。 たとえば 宮城県赤十字血液センターの今週の献血状況。AB型の人は成分献血にするか、次の機会にしたほうが良いらしい。 これ以外の県も、各県の献血センターに掲載されている こういう情報をオープンにしてくれたのはとてもうれしいことなんだけど、webページに掲載されたって、ぼくらがわざわざ見に行かない限り気が付かない。できればこう、SNSで「今週の献血状況」みたいなことを発表してくれるといいよね。そしたら、「あ、AB型足りない？今週は余裕があるからじゃあぼく行くね」みたいなことが出来ていいと思うのよ。 ない
![[サーバレス] Googleスプレッドシートでスクレイピング - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/887726243bc177ea271bd5e4156739bf5152ac79/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgzJUFDJUUzJTgyJUI5JTVEJTIwR29vZ2xlJUUzJTgyJUI5JUUzJTgzJTk3JUUzJTgzJUFDJUUzJTgzJTgzJUUzJTgzJTg5JUUzJTgyJUI3JUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgxJUE3JUUzJTgyJUI5JUUzJTgyJUFGJUUzJTgzJUFDJUUzJTgyJUE0JUUzJTgzJTk0JUUzJTgzJUIzJUUzJTgyJUIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jMDMxYmRhZGMzYzgxODQ4YzQ4OWVjOTIzYTk5NjgzNg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtb2d5YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Y2Y1YTI5ZDlmNGVjNjYwMWRkYjAyNjZiM2UyMTMyMDg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g6YGL5Za26ICF44Ku44Or44OJ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D6702fb6f54a8fa3741edd3899a82a324)
Awesome JavaScript : 素晴らしい JavaScript のライブラリ・リソースの数々 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージ
タスク、プロジェクト管理の表示に便利なガントチャートライブラリまとめ
業務システムでは各人員のタスク管理が重要になります。単発のタスクだけでなく、グルーピングしたり、さらにあるタスクの成果物が他のタスクに関連したりしていると必要になってくるのがガントチャートです。 今回はWebベース、HTML5で作られたガントチャートライブラリをまとめて紹介します。自社システムに組み込む際にぜひ参考にしてください。 Twproject Gantt Webサービスのガントチャートも提供していますが、オープンソース（MIT License）で取得もできます。チャート内での変種機能、クリティカルパス設定、リサイズ、スクロール、SVGによるドロー、ドラッグ&ドロップによる移動などの機能がサポートされています。 Twproject Gantt jQuery.ganttView シンプルな色合いのガントチャートです。ドラッグ&ドロップ、スクロール、イベントのハンドリングなどの機能があり
最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
phiary
はじめに 今更な感じもしますが, わりと最近でも jQuery UI を使うことがあります. まぁサクッとドラッグや並び替えを実装しようと思うと jQuery UI が一番楽だったりするんですよね. ただ, 普通に jQuery, jQuery UI を読み込むだけだとスマートフォンのようなタッチデバイスでちゃんと動いてくれません. jQuery UI Touch Punch そこで使えるのが『jQuery UI Touch Punch』です！！ なんとこれ, 読み込むだけで jQuery UI をタッチデバイス対応してくれます. 中でやってることはマウスイベントをタッチイベントに切り替えてるだけなんですけどね. jQuery UI Touch Punch - Touch Event Support for jQuery UI furf/jquery-ui-touch-punch: A d
node.jsとjQueryでスクレイピングするウェブアプリの作り方
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。 と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。 で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。 今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイ
ドラッグ＆ドロップで並べ替える対象となる要素を指定
項目 3-1 項目 3-2 項目 3-3 実装例の動作について 「項目 1」にカーソルを合わせると、カーソルの形状が移動用カーソル形状になる。「項目 1」をドラッグし、「項目 2」のボックスの上に持ってくると、「項目 2」のボックスが上へ移動し、「項目 2」のボックスと「項目 3」のボックスの間にスペースができる。そのスペースへドロップすると、「項目 1」のボックスと「項目 2」のボックスが入れ替わり、「項目 2」「項目 1」「項目 3」のボックスの順番になる。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jqu
ドラッグ＆ドロップで並べ替えた順番を送信
jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えた順番を、送信する方法。 「この並び順を送信」ボタンを押すと、「この順番でよろしいですか？」という確認ダイアログが出現し、「OK」を選択した場合、項目IDを送信する。 実装例（サンプル） 項目名 A (項目ID:1) 項目名 B (項目ID:2) 項目名 C (項目ID:3) 項目名 D (項目ID:4) 項目名 E (項目ID:5) 実装例の動作について 「項目名 A」をドラッグして、下へ動かし、「項目名 B」の上に持ってくると、「項目名 B」が上へ移動し、「項目名 B」と「項目名 C」の間にスペースができる。そのスペースへドロップすると、「項目名 A」と「項目名 B」が入れ替わり、「項目名 B」「項目名 A」「項目名 C」…の順番になる。 「この並び順を送信」ボタンを押すと、 項目名 B (項目ID
初心者でもほぼ無料でJavaScriptを勉強できるコンテンツ16選 -
Photo by dotConferences こんにちは。谷口です。 プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい！」という方は多いと思います。 JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。（JavaScript - Wikipedia） Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……？」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい！」という方や、「初心者だけど、なるべくコス
最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
スマホの傾きを検出してParallax効果を作れる「parallax.js」:phpspot開発日誌
parallax.js スマホの傾きを検出してParallax効果を作れる「parallax.js」 キャンペーンサイトなどでやると印象がグッとアップしそうなエフェクトが作れるっぽいですが、このデモは必見ですね。 画像は以下のようにulでリスト形式にしてレイヤーをずらす形で実現されるようです。 やってることの割りにはJSで比較的簡単に実装ができそうです 関連エントリ レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 パララックスなスライダーを実装できるjQueryプラグイン「FractionSlider」 パララックス効果を作るスクリプトやプラグインのまとめ レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」
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.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドラッグ&ドロップにも対応の、JavaScript製タイムスケジューラー・「jq.schedule.js」 - かちびと.net
ドラッグ＆ドロップでli要素の並べ替え→DB書き換え - Qiita
素早く簡単にGoogleマップを導入できるjQueryプラグイン「initmap.js」:phpspot開発日誌
Site Under Maintenance
[JS]面倒なスマフォ・タブレットでの異なるビューポートサイズの確認が簡単にできるスクリプト -rFrame