MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Bootstrapは開発者でも整ったデザインが簡単に実現できる便利なUIフレームワークですが、jQueryに依存している点がいけてません。jQueryは便利ですが、今時…と思ってしまっている人も多いでしょう。実際、次期バージョンのv5からはjQueryを外すといわれています。 そんなBootstrapについて、現在のv4、そしてv3についてもjQueryを外したソフトウェアがNative JavaScript for Bootstrapになります。 Native JavaScript for Bootstrapの使い方 こちらはv3。 v4。JavaScript部分もちゃんと動作します。 Native JavaScript for BootstrapはjQueryを純粋なJavaS

Don't mind tech-related ads? Consider disabling your ad-blocker to help us! They are small and unobtrusive. Alternatively, support us on Open Collective!

ドロワーやモーダルといった、いかにもクリックアクションをJavaScriptで操作している系の動きも実はCSSだけで実現できたりします。 仕組みの大枠としては、以下の3つを組み合わせる感じです。 チェックボックにあるチェックされた時のスタイルを適応できる:checked クリック要素（チェックボックスのon/off）として使うfor属性 アニメーションを制御できるtransition

【Javascript入門】location.hrefの便利な使い方 18/12/02 15:15:19     19/05/05 16:13:54 Twitter Facebook はてブ Pocket LINE locationは現在の位置情報を得るためのコードです。 たとえば、URL、ホスト名のパス、プロトコルの基本データ、といった情報を取得できます。 具体的な使用方法としては、locationの後ろにドット○○と記述することで、必要な情報を取得することができます。 locationのプロパティ locationで取得できる情報は複数ありますが、プロパティ、メソッドには以下のようなものがあります。 location.href URLの取得、画面遷移 location.protocol 現在のプロトコル情報(http:、もしくはhttps:)を取得 location.host プロトコ

HTML でプルダウンメニュー（ドロップダウンリスト）をリンクメニューにする方法を紹介します。 例えば、スマートフォンサイトなどミニマムスペースのリンクメニューを実装したいときに便利な方法です。 HTML プルダウンメニューの項目をURLリンクにするには、location.href に URL 情報を渡してページを遷移させます。 <select name="select" onChange="location.href=value;"> <option value="#">ページを選択してください</option> <option value="aaaaa.html">AAAAA</option> <option value="bbbbb.html">BBBBB</option> <option value="ccccc.html">CCCCC</option> <option value

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5のAPIによって、Webブラウザからクリップボードを操作できるようになっています。共有を促すときにメッセージをクリップボードにコピーしたり、別な機能でコピーしたテキストを貼り付けるといった操作が考えられます。 今回紹介するCopyPasteJSは、そんなWebブラウザのクリップボード操作を簡単に行えるようにするライブラリです。 CopyPasteJSの使い方 指定されたDOMの文字列をコピーする指定法です。 data-copy-text を使えばコピーする文字列を直接指定できます。 ペーストもターゲットを指定するだけです。 カットもできます。 コールバックを受け取ることもできます。 CopyPasteJSはJavaScriptをコーディングせずに実装できるのが利点です。あ

STATIC ASSETS .png .css .jpg .js MODULES WITH DEPENDENCIES .jpg .png .sass .sass .js .sass .cjs .hbs .js

The zero configuration build tool for the web. JavaScript. CSS. HTML. TypeScript. React. images. SASS. SVG. Vue. libraries. Less. CoffeeScript. Node. Stylus. Pug. Electron. Elm. WebGL. extensions. GraphQL. MDX. XML. Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.

Netlify is offering all Gatsby Cloud customers easy migration paths to Netlify to unite two industry-leading platforms into one.

Webページでテキストコンテンツを書籍のように楽しめるようにする、そのための仕様がCSS Paged Mediaです。まだ仕様が固まっていませんが、標準化されればコンテンツの楽しみ方がまた変わってくるでしょう。 いち早くCSS Paged Mediaを体験したい方はPaged.jsを使ってみましょう。 Paged.jsの使い方 これはePubファイルという訳ではありません。HTMLに書かれた文書をこのようにページ区切りにして表示できます。 日本語や画像も表示できます。 目次も出せます。 数式表示も対応。 CSSなのでダイナミックにレイアウト変更できます。 Paged.jsではページサイズ、ヘッダーやフッターの設定、マージンなど細かな指定が可能です。ePubファイルを読み込んで表示する機能もあります。小説サイトのコンテンツもPaged.jsで表示すれば楽しみ方が増えることでしょう。 Page

概要 さっきこれを読んだ。 Next.js 9が出るんだって！嬉しい〜！ 目玉要素 TypeScriptが設定なしでビルトインで使える TypeScriptを使えば型チェックができるため、アプリケーションの信頼性が増す。Next.js 9はTypeScriptのtsxをおけば自動でTypeScriptサポートするようになった。 ファイル構成でダイナミックルートを構築できる カスタムサーバーを別に用意する必要なく、Next単体でダイナミックルーティングができるようになったので、複雑なアプリケーションが作りやすくなった。今までは、ダイナミックルーティングをしようと思うならば、exampleのcustom-server-ナンチャラ、例えばcustom-server-expressなりを参考に、サーバのミドルウェアとしてNextを走らせる必要があった分だいぶラクになった。 静的配信における自動最適

はじめに 本記事では「フレームワークをインストールして、それをインターネットに公開する」という0から1までのフェーズについて、Laravel+Nuxt.jsによって「蔵書管理」システムを構築して解説したいと思います。 また、実際に構築したシステムは下記になります。 - Heroku: https://frozen-castle-47874.herokuapp.com/ - Github: https://github.com/kon-shou/bcm-qiita-example 目次 システムアーキテクチャ Laravel/Nuxt.jsインストール Docker環境構築 Nginx設定 Typescript対応 サーバーでのモデル/ビジネスロジック実装 フロントでのモデル/ビジネスロジック実装 Heroku設定 システムアーキテクチャ 下記の技術スタックを用います。 サーバーサイド: L

TypeScriptの基本の型を学ぼう TypeScriptはJavaScriptに対して主に静的型付けとクラスベースのオブジェクト指向を加えることを特徴としたプログラミング言語です。 公式ドキュメントにはハンドブックとして、基本的な使い方が掲載されています。ハンドブックを元に学んでいきます。 Basic Types · TypeScript 今回は基本の型を見ていきましょう。 コンパイルしながら試す 以下では型の使い方の説明を書いていますが、都度 TypeScript ファイルにコーディングし、コンパイル・実行しながら試してみると良いでしょう。 以前投稿した記事を参考に tsc コマンドを実行できる状態にします。 まずは5分で学ぶ！TypeScriptことはじめ 適当なフォルダに main.ts を作成し、このファイル内に試したい内容を記述していきます。 main.ts let mess

標準ライブラリは、大ざっぱに言えばプログラミング言語に標準で備え付けられている機能群です。多くのプログラミング言語では、形態は様々ですが何らかの形で標準ライブラリが備え付けられています。標準ライブラリはプログラミング言語の一部であり、言語のバージョンアップに伴って標準ライブラリに機能が追加されることは良くあります。 この記事ではJavaScriptにおける「標準ライブラリ」がどんなものなのか、その歴史的経緯なども交えながら解説します。「標準ライブラリ？　何それ」という方も「そんなの基本だろｗ解説されなくても分かるわｗ」という方もぜひ一読していってください。 なお、記事執筆時点では標準ライブラリに関することは何一つとして標準化が完了しておらず、内容が今後大きく変化する可能性が十分にあります。この記事で概要を理解したあと、いざ使用する際にはご自分で最新の情報を調べたほうがよいでしょう。 お詫び

こんにちは。久しぶりのQiita投稿です。 今回は「ex-KAYAC Advent Calendar」の13日目の記事として寄稿させていただきます。 さて、改めて私の今やっていることを紹介させていただきますと、独立してから株式会社Lucky Brothers & co.という会社を設立し、主にWebの受託制作を行っています。 かれこれ３期目に突入致しました。 アドベントカレンダーということで改めて2018年という年を振り返ってみたのですが、一言で言うと「今年はフロントエンドエンジニアにとって大きな当たり年であった」と言えるのではないかと思います。特に私達の会社では、今までのいわゆる「Webサイト制作」だけの単一事業形態から脱し、他のあらゆるアプリケーション制作にも手を拡げられた年になりました。 そんな話をしようと思います。 Nuxt.js Vue.js製のフレームワークであるNuxt.js

まずはじめにお断りしておきますが、タイトルだけを見て、「Reactなどで、JavaScriptとCSSを融合させる」ような技術を連想した方は…大外れです。 カレンダーのとおり、これは現代には伝わっていないロストテクノロジーです。 JavaScript Style Sheet（JSSS）とは HTML5では<style>のtype="text/css"を省略できるようになりましたが、現実問題としてブラウザで直接使う、他のスタイルシート言語は存在しないように思えます。 …と思いきや、かつてtype="text/javascript"で書くスタイルシート言語が存在しました。これが、JavaScript Style Sheet、略してJSSSです。 文法概要 現代でもJavaScriptで要素ごとにCSSを指定する際にelement.style.marginLeft = '20px';のように書け

はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ