個人でWebサイト作る人の雑記ブログ

Webサイトを個人で作ってる人が人の役に立ちそうなことを書いていく雑記ブログです

Bootstrap3のブレークポイントを増やしたいときの処方箋

やりたいこと

Bootstrap3のグリッドシステムを利用してるけど、タブレット以下のブレークポイントが768px未満ってこれちょっと大雑把すぎませんかね?(Extra(特別な)smallっていう割には全然特別感のない幅感というか・・・)
ということで自力で
col-xs ~320px
col-ss 360px (これを追加)
col-sm 768px
col-md 992px
col-lg 1200px~
となるようにscssを改変->cssを生成したい!
というのがやりたいことです。
(特別なブレークレイアウトにしなきゃいけないのって個人的にはiPhoneSEなどの横幅320px系だと思っているので、こういう分け方にしてます。)

稼働中のサービスに反映させたいと言うことで、col-xsが一番小さいブレークポイントとしていたるところにクラス指定してるので、
途中に挟み込む形にしたいと言うわけです。

編集するscss

当方はHonoka v3.3.7を利用しているため、これを改変していきますが、
行数は違えど公式版bootstrap3でも役に立つかもしれません。

honokak.osaka
※バージョン指定でダウンロードしたい場合は、Gitページに飛んでからTagsをご参照ください。

また、デフォルトで生のbootstrap3のsassはhonokaには同梱されていないので、別途/honoka/bootstrap/~として配置する必要があります。
github.com
※これもバージョンをTagsからしっかり合わせるようにしてください。
※分かりづらいですが/assets/stylesheets/配下にあります。

編集するファイル

honoka/_variables.scss

#289あたり

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  320px !default; // !変更!
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// !追加!Small screen / smart
//** Deprecated `$screen-sm` as of v3.0.1
$screen-ss:                  360px !default;
$screen-ss-min:              $screen-ss !default;
//** Deprecated `$screen-smart` as of v3.0.1
$screen-smart:              $screen-ss-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

#320あたり つながる様に追加&変更

$screen-xs-max:              ($screen-ss-min - 1) !default; /*!sm->ss!*/
$screen-ss-max:              ($screen-sm-min - 1) !default;/*!追加!*/
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

honoka/bootstrap/_grid.scss

#56あたり

@include make-grid(xs);

// !追加!
@media (min-width: $screen-ss-min) {
  @include make-grid(ss);
}

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: $screen-sm-min) {
  @include make-grid(sm);
}

honoka/bootstrap/mixins/_grid.scss

#38おわりあたり

// !追加!Generate the smart columns
@mixin make-ss-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-ss-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-ss-column-offset($columns) {
  @media (min-width: $screen-ss-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-ss-column-push($columns) {
  @media (min-width: $screen-ss-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-ss-column-pull($columns) {
  @media (min-width: $screen-ss-min) {
    right: percentage(($columns / $grid-columns));
  }
}

honoka/bootstrap/mixins/_grid-framework.scss

#6からの関数に2箇所追加

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-ss-#{$i}, /*!追加!*/ .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-ss-#{$i},/*!追加!*/  .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ceil(($grid-gutter-width / 2));
    padding-right: floor(($grid-gutter-width / 2));
  }
}

honoka/bootstrap/_responsive-utilities.scss

#31

@include responsive-invisibility('.visible-xs');
@include responsive-invisibility('.visible-ss'); /*!追加!*/

#37あたり

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-ss-block,/*!追加!*/
.visible-ss-inline,/*!追加!*/
.visible-ss-inline-block,/*!追加!*/

#74あたり 真似して追加

/*!追加!*/
@media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) {
  @include responsive-visibility('.visible-sm');
}
.visible-ss-block {
  @media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) {
    display: block !important;
  }
}
.visible-ss-inline {
  @media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) {
    display: inline !important;
  }
}
.visible-ss-inline-block {
  @media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) {
    display: inline-block !important;
  }
}

#154あたり 真似して追加

/*!追加!*/
@media (min-width: $screen-ss-min) and (max-width: $screen-ss-max) {
  @include responsive-invisibility('.hidden-ss');
}

お疲れ様でした。コンパイルしましょう!

honoka/階層にある「bootstrap.scss」をコンパイルして生成されるcss
元のbootstrap.cssと置き換えて、ちゃんと動くか確認してみてください!

クリムゾンの迷宮を読んで(ネタバレなし)

先日読み終わった「クリムゾンの迷宮」について読書感想文を書いていきたいと思います。
(概要だけでネタバレはしないように書いていきます)

おすすめ度

★★★★☆

概要

ある日起きたら一面表紙のイラストのようなクリムゾンな砂丘に訳も分からず自分がいる。
この「バングル・バングル」と言われる地を主人公は、ある指令のもと彷徨い歩くことになる。

感想

目覚めたら非現実的な世界に自分がいる、
この時点で私の場合完全に主人公に感情移入を果たしてしまっていたわけですが、
そこからのストーリー展開が続きが気になる続きが気になるの連続で、
読書習慣があまりない私のような読書ビギナーでも飽きることなく最後まで読むことができると思います。

読み終わった後、なんでこんなにスラスラ読めたのかを考察してみたのですが、気づいたのが
『回想シーン』が全然ないのと主人公目線で最後まで話が進んでいくということです。

回想シーンが全然ない

ストーリーが面白いのは勿論なのですが、
回想シーンがあまりないので、話が逆戻りせず、捲ったページの分だけ時間が進みます。

小説の表現の仕方はいろいろあると思いますが、
この小説のストーリーの内容的に続きが気になるばかりなので、
時間が戻されることによる「しらけ感」がなく、1本の時間軸で話の臨場感を保ったまま話が進んでいきます。

主人公目線で最後まで話が進んでいく

これもストーリーの内容的にすごく読みやすかったです。
ドラゴン○ールで例えると、
『悟空とフリーザバチバチにやり合ってる途中で、「一方その頃…」と別のシーンに移動してしまう』
みたいな「時間に対する目線の平行移動」がないので、これまたしらけずに読み進められた1因だと思いました。

総評

「バトルロワイヤル」もののようなものが好きで、非現実的な世界に自分を置いてみたい。
そんな方は絶対に面白いと思える作品だと思います!(そうでない方も読みやすいので1本の映画を見る調子で是非。)
でも結末はもうちょっと情報が欲しかったなぁ…

Javaバージョンあげたらorg.hibernate.HibernateException: identifier of an instance of was altered from xxx to null

仕事の都合上、アプリケーションのJava実行環境を

oracle製のJRE6からopen系のJRE7にバージョンアップすることになった。

 

すると、とある検索ロジックの処理で以下のようなhibernateエラーが発生。

org.hibernate.HibernateException: identifier of an instance of SampleModel was altered from xxx to null
at org.hibernate.event.def.DefaultFlushEntityEventListener.checkId(DefaultFlushEntityEventListener.java:58)
at org.hibernate.event.def.DefaultFlushEntityEventListener.getValues(DefaultFlushEntityEventListener.java:164)
at org.hibernate.event.def.DefaultFlushEntityEventListener.onFlushEntity(DefaultFlushEntityEventListener.java:120)

解決法

当方はDBにpostgresqlを使っているが、
どうやらView系のテーブルに検索いった後、キャッシュを削除せずに次の検索にいくとエラーが出てるらしかった。
よってwebでいろいろ調べた結果、以下のようにView系の検索をsession.evict()してやると解決した。

// 検索(ViewSearchUtil内でView系テーブルを検索していると仮定)
ViewModel viewModel = ViewSearchUtil.searchView(session, viewCode);
if(viewMode != null){
    process(viewModel);
    session.evict(viewModel);
}
// evictしないとここでエラー
HogeModel hogeModel = HogeSearchUtil.search(session, hogeCode);

 

疑問

なぜJRE6->JRE7にあげたら再現するようになったのか。。

マジ神!JqueryUIを使っててイメージ式アイコンにイライラ!フォント化したい人必見!

お久しぶりです、ピー山です!

久々に記事にしたいことがありましたので書きます☆٩(。•ω<。)و

 

 JqueryUIのアイコンのimage式iconにイライラしたことありませんか?

僕はあります。

理由1

あれ、JqueryUIをインストールするときにcssディレクトリ直下にimagesディレクトリ配置しなきゃアイコンとして機能してくれないじゃないですか?

気持ち悪い。css直下に画像ファイルがあることがもう無理。

cssディレクトリとは別にimage専用のディレクトリを用意しているため)

 

理由2

 ローカルから本番環境にリリースするときに、

cssディレクトリをまるっとうpすると絶妙にイライラする時間がかかる。

なぜなら細かいアイコン(画像ファイル)が150個近くあるから。

 

何とかアイコンフォント化できないん?

FontAwesomeに置き換えてくれるjqueryUI用のcssを配布していただけてるとか、

だいたい自分が考えるようなイライラは先人の方が解決&記事にしてくれているものです。

 

 

・・・と思いきや、海外のサイト等を回ってもなかなか解決記事がない。

2時間ちかく徘徊しましたorz

 

 

ということでたどり着いた神をご紹介!

いやぁー見つけました。

有志でjqueryUIのアイコンをフォント化してくれているゼウスを。

 

github.com

 

神すぎる。しかもしっかりとjqueryUI1.11, 1.12ともにバージョンごとの対応もされてる。

 

適用も簡単

ファイルをダウンロードして、

①fontディレクトリ直下のフォントファイルを全てフォントを管理するディレクトリにコピー

②root直下にあるcssファイルを使ってるJqueryUIのバージョンに合わせてcssを管理するディレクトリにコピー(jquery.ui.cssのtopにバージョン表記されてます)

③【任意】②でコピーしたcssファイルの最初の10行目くらいまでにフォントファイルへのパス指定がされているので、①で置いた場所によっては適宜パスを変更

jquery-ui-1.11.icon-font(.min).cssjquery.ui.cssの次に呼び出して完了。

 

感動。

cssファイルの中にimagesアイコンファイルがないのにdatepickerなどでJqueryUIアイコンが表示されてマジ感動。

mkkeckさん本当にありがとう。

 

ということで、私みたいなストレスを抱えている方は、

導入も簡単なので試してみてはいかがでしょうか?

 

それではまたいつか_(:3」 ∠)_

ツイッターの丸みUI(デザイン)変更で迷惑している人たちが続出!?

本日のIT系ニュースで何かと話題になっているツイッターの丸みデザイン変更

今日はそんなデザイン変更で迷惑しているが続出しているようなので、ちょっと私の主観も含めてまとめてみたいと思います。

 

どんなデザインに変更になったのか

 

f:id:pyamasan:20170616145402p:plain

f:id:pyamasan:20170616145409p:plain

f:id:pyamasan:20170616151640p:plain

丸い。アイコンからボタンまで何もかもが丸くなっています。

 

デザインがビジネスに与える影響

そもそもWebのユーザインターフェースには流行り(ハヤリ)みたいなのがあって、1、2年前とかだと

これからのデザインはフラットデザインだ

なんてのが流行りました。

かの有名なiPnoneのOSもアップデートで立体的なアイコンからフラットなデザインになりましたが、こういう動きがあると、ビジネスに影響を与えたりします。

前述した例で例えるなら、

iPhoneのプリインストールされているアプリアイコンがフラットデザインになったわけですから、AppStoreに転がるアプリたちも続々とフラットデザインにアイコンを変更します。

こうなると、フラットデザインと従来の立体的デザインのアイコンでダウンロード数や売上が変わってくるわけですね。アプリの中身がある程度クソでも、ホーム画面の統一感を重視してフラットデザインアイコンのアプリをインストールする人がいたほどですから。

 

このように、デザインが与える影響はビジネスにまで及ぶことも珍しくないんですね。

 

デザイン変更で苦悩する人が続出

ツイッターは、あなたのアイコンを作るからお金くださいみたいなビジネスをする人や、世界的な大企業が使っていたりするほどのツールです。

今回のアップデートはそんな方々に影響があったのではないでしょうか。

とある掲示板には、

『四角に合わせてアイコンのデザイン作ってたのに。』

個人はまだいいが、四角をイメージとする企業はショックだろうな。

などの声が書かれていました。

 確かに丸デザインになると、新しいデザインとしてアイデアは生まれそうですが、

今回の急なレイアウト変更(たぶん、事前アナウンスはなかったかと思います)だと、

既にデザインをし始めていたアイコン絵師様などはもろ影響を受けたでしょう。

また、ユニクロなどの四角形がイメージの企業ももしかしたら影響があるかもしれませんね。

 

その他丸デザインへの変更で見つけた影響

パズドラ広報ムラコさんのアカウントは回復(ハート)属性でなくなりました(キレに枠が見えなくなりましたね笑)

f:id:pyamasan:20170616145420p:plain

 

殺伐としたタイムラインにパインアメが!w(公式)

f:id:pyamasan:20170616150554p:plain

 

結論

今回のツイッターの丸アイコンへのデザイン変更は、いろんな方にマイナスの影響を与えたようです。(個人的には問題なかったですが)

ただ、今回の騒動に紛れてあった、

「アイコンのデザインとかいいから、検索機能を向上させろ」

「タイムライン表示で本日のハイライトほんとにいらん。時系列で表示してくれればそれでいい」

といった意見のほうが、個人的にはめちゃくちゃ共感できました笑

今回の騒動も丸く収まればいいですね!笑

個人でオリキャライラスト投稿サイト「パロコラ」を作成&稼働&現在に至るまで ~最終回~

すんごい前回から間が空いてしまいました。。申し訳ありません。。

 

その前回からパロコラのほうもだいぶ変化がありましたが、

今回はパロコラを今まで運営していて思い通りの運営ができているのか、という点に焦点をおいて話すことで今回のこの「個人でオリキャライラスト投稿サイトパロコラ」のシリーズを締めくくりたいと思います(_´Д`)

 

さて、早速急ですが、約2か月前ほど、

パロコラは無事2周年を迎えることができました!やったー!

 

そんなこんなでまだ張り切って運営中のこのサイトですが・・・

 

パロコラメンバーの方々の多大なる支えの存在

運営を開始した2015/4/1の当時には到底考えもしなかったことです。

本当に今もなおパロコラが運営できているのは、ご利用者様の多大なる支えがあってのことだと思っております。

 

というのも、サイトをアップデート繰り返していくうちに、技術を重要視するあまり、

本質的な、利用者様が何を求めているのかに対して盲目になってしまうことが多々あったのです。

 

一番印象に残っているのは、オリキャラ(一次創作キャラ)に対しての評価観念の存在について。

 

よくある某イラスト系SNSサイトでは当たり前のようにあるイイね機能を当たり前のように実装したのですが、

当サイトのコンセプトに合わないことに実装している最中に全然気づかなかったのです。

どういうことかと言うと、当サイトのコンセプトはもちろん「オリキャラ」を投稿するサイトですから、「オリキャラ」という点に関して中心にサービスを展開するべきで、ごちゃまぜ系イラストサイトとは考え方に一線を画す必要があるわけです。

 

平等な目線でオリキャライラストを見ることができる。

評価数が画面上にチラつくと、どうしても人は評価が高いものを重点的に見てしまいます。

当たり前のように実装した「評価数の可視化」や「評価順によるソート」は当サイトには不要な機能であるということをご利用者が教えてくださることで、

パロコラの軸をブラさずに今も運営できていると思っています。

 

思ってたよりご利用者様は増えない

冒頭にも申しましたが、現状パロコラは2年と2か月歳を迎えているわけですが、

メンバー登録していただいた方は209人

その中でのアクティブユーザは15名ほどとなっております。

※運営開始当時は2年運営してたら1000人くらい行くだろーなんて安直にも思ってました笑

 

これは運営開始当時の予想に反して思った通りにならなかったことですね(´^`;)

この件に関しては今まさに今後の課題として考えていることで、どうすれば

いかにご新規様が使ってみたいサービスだなぁ

と思ってくださるかをめっちゃ考えてます・・・!

 

いろんなことに手を出してしまった結果

運営開始当初の大きな目標であったパロコラで独自のトレーディングカードゲームをつくろう!がまだ全然進んでませんorz

理由はいくつかあるのですが、最も大きいのが、パロコラでオリジナルゲームをつくろう!(ツクールで)とか時間のかかる新しい提案をしてしまったり、いろんな興味のあることに手を出してしまったことです。

とりあえず、当初の目的であるカードゲーム作りからやっていきたいと思っています・・・。ゲーム作りにご期待いただいて方申し訳ありませんorz

結論

 運営開始当初に思っていた予想は、いい意味でも悪い意味でもハズレたと思っております笑

ただ、ひとつ確実に言えるのは、

今とても楽しくパロコラを運営できているということです!

これからもご利用者さまにとってパロコラが良いサービスになるように一層精進してまいる予定ですので、ご利用者さまは引き続き、ご新規様もどうぞよろしくお願いいたしますm(__)m!

 

ではお粗末ではありますが、これで

「個人でオリキャライラスト投稿サイト「パロコラ」を作成&稼働&現在に至るまで」

シリーズのペンを置きたいと思います。。