Bootstrap GlyphiconsとFont Awesomeを一緒にwebpack経由で使いたい場合の使い方についてです。 npmモジュール gulpやwebpackの他、以下のモジュールが必要です。 webpackを使うことにより、依存関係は、画面周りであってもbowerを使うことなく、すべてnpmで完結します。 font-awesome bootstrap url-loader webpack.config.js ポイントとなる部分だけ抜粋。 module: { loaders: [ // jsやcssは省略 { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?mimetype=image/svg+xml' }, { test: /\.woff(\d+)?(\?v=\d+\.\d+\.\d+)?$/, loader:

flagParticipating posting campaigns0Participation summarizePosted articles0Articles

WebPackとBowerでjQueryを導入するところまでやってみました。 外部ライブラリを使う場合は通常どおり、scriptタグで読み込むのですが、あまり便利になった感がないのでbowerを使うようにしてみました。 基本的にはチュートリアルを参考にしています。 bowerの導入から実行までやってみました。 インストール #bowerをインストール npm install -g bower #jQueryをインストール bower install jquery #bower.jsonを作成 とりあえず、モジュールの形式はglobalにします。 bower init #webpackをインストール -gだと後で参照エラーが起きてしまう。 npm install webpack --save-dev var path = require("path"); var webpack = requ

こんにちは、エンジニアの小林です。 先日、スペースを貸し出すオーナー様向けのダッシュボード(管理画面)をリニューアルしました。 スペースマーケットはwebサーバもAPIサーバもRailsで構築しているのですが、JQueryをベースに構築していたリニューアル前の実装からReactをベースにした実装へ移行した際に得た知見を書きたいと思います。 サーバ構成 既存のサーバ構成では、webサイトはwebサーバから、アプリはAPIサーバからそれぞれデータベースを参照していました。 リニューアルに伴いwebサーバからもAPIサーバを参照する構成となります。 webサーバから別ドメインのAPIサーバにアクセスするためには CORSの設定 webサーバとAPIサーバはドメインが違うため、ReactのコードからAPIサーバにajaxリクエストが送れません。これを回避するためにCORS(Cross-Origin

先日、WordPressのTwitter Bootstrapプラグインを入れてみました。 WordPress Twitter Bootstrap Plugin Manage WordPress Better – Worpit WordPressでBootstrapが使えるようになります。設定できる主な項目は以下。 レスポンシブCSSを使用するか（bootstrap-esponsive.css） リセット用CSSを使用するか Bootstrapで使用するJavascriptファイルを読み込むか head要素でBootstrapで使用するjsの読込みを行うか Bootstrapのショートコードを使用するか（投稿） minの方を（bootstrap.min.css）使用するか サイドバーのウィジェットでBootstrapのショートコードを使用するか Google CDNのJQueryを使用する

Button spacing Because React doesn't output newlines between elements, buttons on the same line are displayed flush against each other. To preserve the spacing between multiple inline buttons, wrap your button group in <ButtonToolbar /> .

TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル

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

今回はちょっと趣向を変えて公開されているComponentの利用について書きたいと思います。 Componentは基本的にはPropがI/Fとなっているのでドキュメントを見てよくわからなかった場合は、Propを見るとどのようなI/Fがあるかわかると思います。 自分が公開する場合は、PropTypesやgetDefaultPropsを使ってI/Fを明確にしておくといいと思います。 Bootstrap 何はともあれまずは定番のBootstrapですがやはりちゃんとあります。 前回のRouterのサンプルでも使っていました。 使う場合は、react-bootstrapの他に別途bootstrapのCSSを読み込む必要があります。 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/boo

Scalaのソースを追っていたら変な記号が多くて？な状態になります。 ってことで備忘のためにScalaで使う記号をメモしておきます。 四則演算、剰余 + - * / % ビット否定、論理否定 ~ ! ビット演算 & | ^ && || 比較 < > <= >= ブロック {} コメント // …このへんまでは普通。 全般 _　: ステークホルダ *　: 可変長引数 ex. def echo(args: String*) => : 関数　ex. (x: Int) => x + 1 <- : 集合から個々の要素を取り出す ex. for(arg <- args) println(arg) Any ==, !=: Javaのequals, not equlas isInstanceOf: 型比較 asInstanceOf: キャスト AnyRef ## : hashCode eq, ne: Ja

第7章も相変わらず 型 について語るぞ！ 今回の主役は、Javaプログラマーには馴染みがない タプル ！ 複数の戻り値 戻り値で複数の異なる型を返したくなったことはある？ Javaだと引数の型は1つと決まっているから、単純には実現できないよね。 だから、代替案としてこんな手を使ったりするよね。 例えば、新たなDTO等の 情報格納役 を定義し、そのフィールドに複数の型を用意する 引数に複数のオブジェクトを渡して、戻り値相当をそのオブジェクトに設定する インタフェースを分割する。つまりそれぞれのデータを返すメソッドを用意する 戻り値をコレクションにして、複数の型のオブジェクトを格納する(ほとんどやらないけど) どれも面倒臭いんだよね。クラス名決めるのだって大変だし。。。 Javaの世界では諦めモードだけど、Scalaの世界では素晴らしい仕組みが備わっているんだ。 複数の型を返す仕組み、 タプル

コレクションのクラス関連図 Traverable : 操作可能なコレクション → Iterable : 繰り返し可能なコレクション → Set : 重複を含まない集合 → Map : キーと値のペアの集合 → Seq : 順序のある集合 → IndexedSeq : VectorやRangeなど、ランダムアクセス？ → LinearSeq : Listなど、順次アクセス？ → Buffer : 遅延評価？ Seq Range 範囲を持つ数値を表現するクラス。ループ処理やList生成で使える。 Range(start, end, step) あるいは、 until/to と by を使って生成できる。 scala> Range(0, 10, 2) res5: scala.collection.immutable.Range = Range(0, 2, 4, 6, 8) scala> 0 to

最近Bootstrapを使う機会が増えたので、カスタマイズする上で知っておきたい考え方を紹介します。 今回は特にCSSについてのお話です。 Bootstrapのカスタマイズパターン 現状、CSSのカスタマイズ方法として考えられるパターンが3つあります。 梅パターン すでに用意されているスタイル・コンポーネントをそのまま使う方法。 定義済みの スタイル や コンポーネント の組み合わせにより、ページを作成します。配置するのみ。 見た目のカスタマイズができないので、簡素でオリジナリティの無いデザインになります。 ザ・Bootstrap。 竹パターン すでに用意されているスタイル・コンポーネントをカスタマイズして使う方法。 定義済みのCSSを継承（上書き）して、元のデザインを変更します。 少ない作業で効率的にコーディングができます。 松パターン すでに用意されているスタイル・コンポーネントをカス

{ "name": "webpacktest", "version": "1.0.0", "description": "webpack test", "scripts": { "dev": "webpack-dev-server --hot --inline --port 3500 --progress --profile --colors", "build": "NODE_ENV=production webpack -p --progress --profile --colors " }, "dependencies": { "babel-core": "^6.7.2", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.6.0", "babel-preset-stage-0": "^6.5.0", "bootstrap-sas

はじめに XRDPをX11RDP-o-Maticを使用しインストールするための手順です。 XRDPとは何か Linux上で動作するRDP（リモートデスクトッププロトコル）の事です。 WindowsのリモートデスクトップのLinux版と考えてもらえれば結構です。 X11RDP-o-Maticとは何か Debian系で動作するXRDPのビルド&インストールツールです。 そんなもの使わなくても でいいのでは？と思われるかもしれませんが、上記コマンドで入るバージョンは0.6なのに対して最新版は0.9です。 0.6では 日本語キーボード配列に対応していないため自分で対応させる必要がある リモートデスクトップが切断された時今まで使っていたデスクトップに接続出来ない TLS接続に対応していない 等の事があり0.9を使用した方が良いのですが、自分でビルドするには必要なライブラリを全て自分でインストールする

var angular = require('angular'); console.log(angular.element('body')); //[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]

背景 なぜかこれのやり方に関する記事が簡単にみつからず、”じゃあいいよ俺書くよ！”ってことでメモ。 （こんだけ記事がないと何か根本的に俺は間違っているのだろうかと内心ビクついてるので、何かお気付きの方いらっしゃいましたら容赦なくツッコミ下さい。） 元々はフロントのes6をコンパイルするためにwebpackを導入してみたので、sassもwebpackで処理できればいいなと。 あ、あとjsとcssは別ファイルに出力したいという要件を前提にやってます。特に明確な理由があるわけじゃないけど、気持ちの問題で^^ 環境 node 0.12.10 webpack 1.12.14 手順 ここを参考にSEPARATE CSS BUNDLE 必要なライブラリをインストール npm install style-loader css-loader sass-loader extract-text-webpack-

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

Slick 2系では experimental 扱いではありますが、コード生成の機能が含まれていて、 めんどうなテーブル定義のコードを自動生成することができます。ちょっとやってみましょう。 テスト用のテーブル、こんな感じです。 slickcodegenexample=# CREATE TABLE users ( id serial PRIMARY KEY, first_name varchar(100) NOT NULL, last_name varchar(100) NOT NULL, birth_date timestamp NOT NULL ); コード生成機能は slick 本体の jar ではなく、slick-codegen と言う jar に含まれています。使用しているデータベースに合わせた jdbc driver も必要です。それぞれ build.sbt の libraryD

java.sql.Timestampからjava.util.Dateへの変換。 java.sql.Timestamp ts = <<ステートメントなどからTimesatamp取得>> java.util.Date = new java.util.Date(ts.getTime());