作者別: EU-Create

See the Pen
Flowchart (Responsive) by EU-Create (@EU-Create)
on CodePen.

CodePen上だとHTMLとCSSに変換してありますが、実際はPugとSASSでプログラミングしました。
ちなみに画像部分はSVGです。
実際に組んだ時のSASS。
Autoprefixerも通してあります。

last 5 versions, Android >= 4, iOS >= 9

$viewportWidth1: 640
$imgPath: "../images/"
$viewportSpBaseWidth: 320

// color
$colorGreen: #009055

// font
$baseFontSize: 16
=fontFace
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "HelveticaNeue", "Helvetica Neue", Arial,sans-serif

=fontSize($size)
  font-size: $size + px
  font-size: ($size / $baseFontSize + rem)

=fontSizeVw($size)
  font-size: #{$size}px
  font-size: ($size / $viewportSpBaseWidth * 100 + vw)

=marginVw($size, $position, $important: false)
  @if $important == true
    $important: " !important"
  @else
    $important: ""
  margin-#{$position}: #{$size}px#{$important}
  margin-#{$position}: ($size / $viewportSpBaseWidth * 100 + vw)#{$important}

=paddingVw($size, $position, $important: false)
  @if $important == true
    $important: " !important"
  @else
    $important: ""
  padding-#{$position}: #{$size}px#{$important}
  padding-#{$position}: ($size / $viewportSpBaseWidth * 100 + vw)#{$important}

// position
=positionXCenter
  left: 50%
  transform: translateX(-50%)

=positionVw($size, $position, $important: false)
  @if $important == true
    $important: " !important"
  @else
    $important: ""
  #{$position}: #{$size}px#{$important}
  #{$position}: ($size / $viewportSpBaseWidth * 100 + vw)#{$important}

// width
=flexWidth($size, $baseSize: null)
  // 指定した数値が単位を持っているかどうか判定し、単位がなければtrueが返るので%で出力。
  @if unitless($size)
    @if $baseSize
      flex: 0 0 percentage($size / $baseSize)
      max-width: percentage($size / $baseSize)
    @else
      flex: 0 0 percentage($size / 100)
      max-width: percentage($size / 100)
  // 単位があればそのまま出力
  @else
    @if $baseSize
      flex: 0 0 $size
      max-width: $size
    @else
      flex: 0 0 $size
      max-width: $size

=vwWidth($size)
  width: $size + px
  width: $size / $viewportSpBaseWidth * 100 + vw

body
  +fontFace

a
  &:hover
    img
      opacity: .7

.pc
  display: block
img
  &.pc
    display: inline-block
.sp
  display: none
// スマートフォン
@media screen and (max-width: ($viewportWidth1 + px))
  a
    &:hover
      img
        opacity: 1
  .pc
    display: none !important
  .sp
    display: block
  img
    &.sp
      display: inline-block

// フロー
.introduction_preparation
  h2
    height: 297px
    margin-bottom: 0
    padding-top: 100px
    text-align: center
    img
      max-width: 620px
      width: 100%
  .contents
    background: #f4f4f4
    .inner
      max-width: 960px
      margin: 0 auto
      padding-top: 64px
      padding-bottom: 14px
      .flow
        min-height: 1826px
        margin-bottom: 44px
        background:
          image: url(#{$imgPath}branch_flow_right.svg), url(#{$imgPath}branch_flow_left.svg), url(#{$imgPath}branch_flow_right.svg), url(#{$imgPath}branch_flow_left.svg), url(#{$imgPath}branch_flow_right.svg), url(#{$imgPath}branch_flow_left.svg), url(#{$imgPath}flow_bg_1.svg)
          repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat
          position: calc(50% + 42px) 1380px, calc(50% - 42px) 1260px, calc(50% + 42px) 936px, calc(50% - 42px) 660px, calc(50% + 42px) 380px, calc(50% - 42px) 160px, top center
        .flex
          display: flex
          justify-content: space-between
          align-items: flex-start
          flex-wrap: wrap
        .contents
          +flexWidth(400, 960)
          background: #fff
          border-radius: 20px
          h3
            margin-bottom: 21px
            padding: 25px 24px 0
            img
              width: 100%
          .images
            margin-bottom: 24px
            img
              max-width: 400px
              width: 100%
          h4
            padding: 0 30px
            margin-bottom: 24px
            img
              width: 100%
          h5
            padding: 0 30px
            +fontSize(18)
          .bottom_text
            padding: 0 30px 24px
            +fontSize(14)
            line-height: (20 / 14)
      @for $num from 1 to 7
        .flow_contents#{$num}
          @if $num == 1
            margin-bottom: 36px
          @else if $num == 2
            margin-top: 50px
            margin-bottom: 36px
          @else if $num == 3
            margin-top: -50px
          @else if $num == 5
            margin-top: -13px
          @else if $num == 6
            margin-top: 36px
          h3
            img
              @if $num == 1 or $num == 2
                max-width: 184px
              @else if $num == 3
                max-width: 208px
              @else if $num == 4
                max-width: 310px
              @else if $num == 5
                max-width: 275px
              @else if $num == 6
                max-width: 264px
          h4
            @if $num == 2
              margin-bottom: 60px !important
            img
              @if $num == 1
                max-width: 210px
              @else if $num == 2
                max-width: 261px
              @else if $num == 3
                max-width: 220px
              @else if $num == 4
                max-width: 188px
              @else if $num == 5
                max-width: 260px
              @else if $num == 6
                max-width: 253px
      .bottom_contents
        display: flex
        max-width: 700px
        margin: 45px auto 0
        background-color: #fff
        border-radius: 20px
        .images
          +flexWidth(300, 700)
          margin-bottom: 0
          img
            max-width: 300px
            width: 100%
        .right_contents
          +flexWidth(400, 700)
          margin-top: 24px
          padding-right: 34px
          padding-left: 34px
          h3
            margin-bottom: 33px
            img
              max-width: 264px
              width: 100%
          h4
            margin-bottom: 22px
            img
              max-width: 188px
              width: 100%
          h5
            +fontSize(18)
          .bottom_text
            +fontSize(14)
            line-height: (20 / 14)
      .notice
        margin-bottom: 0
        text-align: right
        +fontSize(12)

// スマートフォン
@media screen and (max-width: ($viewportWidth1 + px))
  // フロー
  .introduction_preparation
    h2
      height: (318px / 2)
      padding-top: (80px / 2)
      background: url(#{$imgPath}title_introduction_preparation_bg_sp.png) no-repeat center bottom
      background-size: 640px 20px
      img
        max-width: (570px / 2)
    .contents
      .inner
        +paddingVw((40 / 2), "top")
        .flow
          background:
            image: url(#{$imgPath}branch_flow_2_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}branch_flow_1_sp.svg), url(#{$imgPath}flow_bg_1_sp.svg)
            repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat
            position: ((38 / 2) / $viewportSpBaseWidth * 100 + vw) ((3806 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((3232 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((2640 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((2048 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((1458 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((868 / 2) / $viewportSpBaseWidth * 100 + vw), ((52 / 2) / $viewportSpBaseWidth * 100 + vw) ((278 / 2) / $viewportSpBaseWidth * 100 + vw), ((30 / 2) / $viewportSpBaseWidth * 100 + vw) top
            size: ((107 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((94 / 2) / $viewportSpBaseWidth * 100 + vw) auto, ((60 / 2) / $viewportSpBaseWidth * 100 + vw) auto
          .flex
            justify-content: flex-end
            +paddingVw((60 / 2), "right")
            +paddingVw((60 / 2), "left")
          .contents
            +flexWidth(490, 580)
            border-radius: (20px / 2)
            h3
              +marginVw((19 / 2), "bottom")
              +paddingVw((23 / 2), "top")
              +paddingVw((24 / 2), "right")
              +paddingVw((24 / 2), "left")
              img
                max-width: initial
            .images
              +marginVw((30 / 2), "bottom")
              img
                max-width: initial
            h4
              +paddingVw((26 / 2), "right")
              +paddingVw((26 / 2), "left")
              +marginVw((36 / 2), "bottom")
              img
                max-width: initial
            h5
              +paddingVw((28 / 2), "right")
              +paddingVw((28 / 2), "left")
              +fontSizeVw((24 / 2))
              font-feature-settings: "palt" 1
            .bottom_text
              margin-bottom: 0
              +paddingVw((28 / 2), "right")
              +paddingVw((18 / 2), "bottom")
              +paddingVw((28 / 2), "left")
              +fontSizeVw((24 / 2))
              line-height: (36 / 24)
              font-feature-settings: "palt" 1
          @for $num from 1 to 8
            .flow_contents#{$num}
              @if $num == 1 or $num == 4
                +marginVw((20 / 2), "bottom")
              @else if $num == 2 or $num == 3 or $num == 5 or $num == 6
                margin-top: 0
                +marginVw((20 / 2), "bottom")
              h3
                img
                  @if $num == 1
                    +vwWidth((223 / 2))
                  @else if $num == 2
                    +vwWidth((224 / 2))
                  @else if $num == 3
                    +vwWidth((254 / 2))
                  @else if $num == 4
                    +vwWidth((378 / 2))
                  @else if $num == 5
                    +vwWidth((334 / 2))
                  @else if $num == 6
                    +vwWidth((324 / 2))
                  @else if $num == 7
                    +vwWidth((322 / 2))
              h4
                @if $num == 2
                  +marginVw((74 / 2), "bottom", true)
                img
                  @if $num == 1
                    +vwWidth((262 / 2))
                  @else if $num == 2
                    +vwWidth((327 / 2))
                  @else if $num == 3
                    +vwWidth((274 / 2))
                  @else if $num == 4
                    +vwWidth((235 / 2))
                  @else if $num == 5
                    +vwWidth((324 / 2))
                  @else if $num == 6
                    +vwWidth((316 / 2))
                  @else if $num == 7
                    +vwWidth((235 / 2))
        .notice
          +paddingVw((30 / 2), "right")
          +paddingVw((30 / 2), "left")
          +fontSizeVw((18 / 2))

今回はPugは省略します。

SyntaxHighlighter Evolvedの開発者の1人であるAlex Mills氏に感謝するとともに、彼のご冥福をお祈りいたします。
Thank you Alex Mills, one of the developers of “SyntaxHighlighter Evolved”, and I may his soul rest in peace.

ブログを移転しました。
従来型の携帯電話は対応しておりません。
（ガラホは対応しております。）
※デザインについては今後対応したいと思っております。

今後ともよろしくお願いいたします。

とあるサイトのサーバー移転を機に、baser CMSのバージョンアップをしてみました。

バージョンは2.1.2から3.0.14。

ざっくり仕様を。
・サブディレクトリで設置してある
・デザインテーマは「nada icons」（いらない要素は削除してある）
・アップローダープラグインのみインストール済み
・スマートURLはON

もちろんですが、作業はローカルで行います。
手順は「baserCMS 2.1系 から baserCMS３に移行する | baser CMS – 国産オープンソース！フリー（無料）で『コーポレートサイトにちょうどいいCMS』」に沿ってやってみました。

まずは、一気に3.0.14へしてみることに。
現在ダウンロードできる最新の「DBマイグレーター」をダウンロードして、やってみました。
結果はエラーが出てダメでした。
そして、先ほどのページのBcDbMigratorをダウンロードしてbaser CMS 3.0.0から順にアップしてみることにしました。
しかしここで問題が。
リンク先が削除されているようで、404エラーが。
にっちもさっちもいかない状況になりました。
しばらく考えた結果、名案が浮かびました。
今まで使っていたパソコンに古いデータがあるかもしれないと思い、久しぶりに電源をON。
ハードディスクを漁っていたら、ありました。
ナイス、昔の自分。
早速作業を開始し、無事にバージョンアップ完了。
次はここから3.0.14にアップデートしてみました。
もちろん、アップデート前にはバックアップをしておきます。
（ファイル，データベース，管理画面上のデータメンテナンスからもバックアップ）
結果はエラーが発生して、またにっちもさっちもいかない状況に。
構造も全然違うので諦めて、再度3.0.0をインストール、復元。
今度は順を追ってアップデートすることにして3.0.5.1までは順調に完了しました。
次は、3.0.6.1。
これ以降はエラーでアップデートできませんでした。
また、にっちもさっちもいかなくなりました。
どうしようもないので、作戦を変えて3.0.14をインストールしてから、3.0.5.1のバックアップデータから復元をしてみることにしました。
データベース構造は変更がないと思ったからです。
まず、3.0.5.1から管理画面上のデータメンテナンスからバックアップを作成。
一旦、すべて削除。（ファイル，データベース）
3.0.14をインストール。
管理画面のデータメンテナンスから復元。
アップローダーでアップしたデータをコピー。
nada iconsのカスタマイズ部分をコピー。
インストールディレクトの「/app/config/install.php」の

Configure::write('Security.salt', '文字列');

のコピペも忘れずに。
これを忘れると管理画面に入れなくなります。
一通り作業をして確認したところ、問題なく動作しているようです。
これで3.0.14へのアップデートが完了しました。

あとは本番環境で問題ないか、実際にアップしてみて確認します。
「/app/config/install.php」、「/app/config/database.php」を本番用に書き換えてアップロードします。
データベースもphpMyAdminを使用してアップしておきます。

いよいよ本番で確認し、問題なさそうなです。
今度はローカル上の古い方（2.1.2）をバックアップして、古い方を削除し、古い方のディレクトリ名に変更し、「/app/config/install.php」の

Configure::write('BcEnv.siteUrl', 'サイトのURL');

を変更します。
ローカルで問題なければ、本番用も同様に作業します。

これでまた確認して問題なさそうなので、作業終了です。

紆余曲折はありましたが、何とかバージョンアップ完了しました。

今回はあまりカスタマイズしていなかったのと、当時DBマイグレーターをダウンロードしてあったのが幸いして、何とか上手く行きました。

baser CMSは現在4.0.3が最新ですが、3系もまだメンテナンスされているので、サポート終了間近までは3系で行こうと思います。

以上、baser CMSのバージョンアップでした。

ちょいとPHPをFastCGIで動かす必要があったので、VirtualBox内のテストサーバーに設定した。
次やる時に思い出せるようにメモ。
環境はCentOS5、PHP5.2.11。
インストールするのはmod_fcgid。
標準のyumレポジトリには、このモジュールが無いので、別途epelを設定してインストール。
（今回はepelの設定は割愛。）

# yum --enablerepo=epel install mod_fcgid

でインストール。
後はvhosts.confの設定したい箇所に

<Directory "/hoge/moge/poge/">
Options ExecCGI
AddHandler fcgid-script .php
FCGIWrapper /usr/bin/php-cgi .php
</Directory>

を追加してから

# /etc/init.d/httpd restart

でApacheを再起動して、

<?php phpinfo();

と記述したPHPファイルアップし、「Server API」に「CGI/FastCGI」と表示されいればOK。

既に多くのプログラマーさんがやっているとは思いますが、PHPでInternet Explorerのバージョンを判定するプログラムを考えてみました。

$ua = $_SERVER['HTTP_USER_AGENT'];
$uaBrowserInfo['browser'] = "";
$uaBrowserInfo['version'] = "";
if (preg_match("/Trident\/(\d{1,}\.(\d{1,})).*rv:(\d{1,}\.(\d{1,}))/", $ua, $regExpResults)) {
$uaBrowserInfo['browser'] = "IE";
$uaBrowserInfo['version'] = (float)$regExpResults[3];
} elseif (preg_match("/MSIE\s(\d{1,}\.\d{1,})/i", $ua, $regExpResults)) {
$uaBrowserInfo['browser'] = substr($regExpResults[0], 2, 2);
$uaBrowserInfo['version'] = (float)$regExpResults[1];
}

ざっくり解説。
まず、uaという変数にUser Agentの値を入れる。
uaBrowserInfoのbrowserとversionを空にする。
正規表現で、先ずはIE11の新しくなったUser Agentかどうかを判定する。
Tridentとrv:があればIEとして、uaBrowserInfoのbrowserにIEと入れ、versionにはregExpResultの4番目の値がrv:の後の値が入っているので、それをfloatに変換して入れる。
次の処理で、従来の「MSIE バージョン番号」が見つかったら、uaBrowserInfoのbrowserにregExpResultsの1番目の値からIEという文字列抜き出して入れる。
バージョンはregExpResultの2番目の値をfloatに変換して入れる。
色々なパターンを試してみたので、おそらくこれで問題はないかと思います。

【2014/8/1 14:37追記】
ちなみに、互換モードは考慮していません。

WebKeepersのVPS(Linux)を2013年2月6日からの新プランに変更すべく、急遽作業開始。
OSはCentOS6.3(64bit)に、Pleskは11になったんだ〜。
後でyumのインストールをと思って、まずダメ元で「yum list」を実行。
動いた！
どうやらyum使えるらしい＼(^o^)／
後はひたすら移行作業。
[2013年3月20日9時53分追記]
あ、ローカルサーバーもこれを機にアップさせないと(^^;;