Excel の表からHTML を書きたい

クライアントからリストを渡されて、それをHTML 化するとき、エディタでコピペするのは面倒だ。かといってデータベースを使うほどでもない時に、Excel を使う。

HTML構造

手順:

1)Excel で、品名、価格、コメントのリストを作成

表

2)Excel で、タグのセルではさまれた列に、それぞれのデータを貼り付け

HTML表 HTMLに表を貼り付け

3)タグを含んだセルを丸ごとコピーして、エディタで開いたHTML に貼り付け
例)

4)コードを整形

DreamWeaver CC
編集>コード>ソースフォーマットの適応

Eclipse
ソース>フォーマット
もしくは[Ctrl+Shift+F]ショートカット

小ネタ

ホームページから直接データを拾ってくる場合、表ならFirefox 限定で表選択(Ctrl + マウスドラッグ)ができる。

または、文章ダブルクリックで単語選択
トリプルクリックで段落選択できるので、これを利用する。

Windows 10 のエクスプローラーで、画像表示をサムネイルと詳細にすぐに切り替えたい

画像素材を探したり、レタッチした画像をエクスプローラーで確認している時、大アイコンと詳細を切り替えたい時がある。これまでは右クリックメニューの「表示」メニューを使って切り替えていたが、この切り替えボタンとショートカットがあることを知った。

何ができるか

エクスプローラーの「大アイコン/詳細」切り替えを、3動作から1動作に削減できる

方法

Windows 10で右下のボタンを押す

大アイコン表示
エクスプローラー、大アイコン表示

詳細表示
エクスプローラー、詳細表示

ショートカット

[Ctrl + Shift + 2] 大アイコン表示
[Ctrl + Shift + 6] 詳細

フォームでjQuery を使って、年月日それぞれのプルダウンメニューを、1つの項目にまとめたい

スマートフォン向けに年月日を選択できるWeb フォームで、それぞれ個別にプルダウン選択できるようにしたい。でも、送信する項目はひとまとめにしたい。

フォーム例
年月日のフォーム

対応

  • 年月日をそれぞれ3つのプルダウンメニューを作る
  • 年月日をまとめるフォーム”mydate” を hidden で追記
  • ID を割り振って、onChange でonChangeDate() を実行
    • 年月日それぞれの選択された値を取得して、”mydate”のvalue に設定

ソース

フォルダを任意のタイミングでバックアップするバッチファイル

後輩が、ウェブサイトコーディング中に、トラブルがあってバックアップしたファイルで巻き戻したとき、別のコードが消えているという2次被害を何度か起こしていた。気づいたことを本人に聞いたところ、「想定したよりバックアップの機会が少なかったから、起きた気がする。」とあった。そのため、バックアップ自体を簡単にしてみることにした。圧縮には7zip を使うので、事前にインストールすること。

参照

cmdのbatを使ってフォルダをCOPYして7zipで圧縮し最後に削除する方法 これくらいブログ
http://korekurai.com/itrelated/cmd-bat-7zip-folder.html

注意

手元の環境で実装するなら、まず空のフォルダで試すこと。安全に失敗するのが推奨される。

構造

バックアップ元

バックアップ先

backup_myfolder.bat

内訳

  1. DATENAME に年月日と時間の値を設定
  2. SOURCEPATH にバックアップ元のパスを設定
  3. TARGETZIP で圧縮ファイル名に年月日と時間を加える
  4. TARGETPATH にバックアップ先のパスを設定
  5. TARGETDIR にバックアップするフォルダ名を設定
  6. XCOPY でフォルダをコピー
  7. 7ZIP でコピーしたフォルダを圧縮
  8. rmdir で圧縮元フォルダを削除
  9. 最後に、バックアップの動作が行われたかを3秒だけ表示する

まとめ

動作テストして、問題がなければ対象フォルダの中身を入れよう。
作成したバッチファイルをランチャーに入れれば、任意のタイミングでバックアップできる。Windows のタスクに設定すれば、起動時や休憩時間にバックアップを自動でバックアップできるようになる。
コーディングが終われば、バッチファイルを解除しよう。

バックアップの定期復元テストは有用か?

わたしの経験では、バックアップの定期復元テストは有用だった。本記事で経験した内容を紹介する。

背景

とあるウェブサービスで、データベースを吹っ飛ばし、6重のバックアップが全滅していた話を聞いてぞっとしたから。

問題とその対策

ファイルサーバーへのバックアップが、一部ダウンロードされていなかった
バッチファイルの待機時間が長くて、別のタスクで実施された再起動で中断していた。待機時間を短く変更
ファイルサーバーで、古いファイルが自動削除されていなかった
バッチファイルを修正
設定に追加したサイトのバックアップが、ファイルサーバーにダウンロードされていなかった
サーバー側のバックアップファイル作成時間がバッチファイル実行時間より遅かった。順序を一致させた
ローカルでバッチ処理するパソコン乗り換えで、一部処理されないサイトが発生
ダウンロード管理表を使って、タスクを正しい時間に実行されるよう修正
復元作業手順書に書かれていない処理が分からず復元失敗
手順書を現状に即した内容で修正
復元先を間違えて、復元失敗
手順の中で、復元先を間違わないよう、日本語でディレクトリが分かるようにツールを変更

波及効果

  • 管理者がだれでも短時間で復元できるようになった
  • 手順書の強化に寄与できた

小規模サイト、サーバー自動バックアップ

2サイト以上の小規模なサイト運用をしている管理者にとって、バックアップは重要だが手間のかかる作業だ。ここを自動化した。詳細は別途、記事にする。

前提
Cron が使えるレンタルサーバー
本記事では、さくらインターネットのレンタルサーバーを例にする

概要

サーバー自動バックアップ

DBバックアップ:さくらのレンタルサーバーでシェルを使う、実行はCron を1時間ごとに実行
ファイルのダウンロード:Windows のバッチ処理でFTP 接続を使ってダウンロード、バッチはタスクスケジューラーを使って毎週実行
バックアップは1サイトのディレクトリとDBを圧縮している
サーバー丸ごとバックアップしないのは、負荷分散と、復元が1サイトごとになると想定しているため

必要な手動作業

  • バックアップ動作を監視する
  • 復元テストを定期的に実行する(1回/月、月初に)
  • 社内Wiki などに、復元作業手順書、復元テスト履歴を記載する
  • 自動化に必要なシェル、バッチファイル、スケジュール計画表を管理

動作

Cron でシェルスクリプトを実行。コンテンツとDBをサーバー内に圧縮保存(毎日0時~、1時間おきに1サイトをバックアップ)
タスクスケジューラーで毎週土曜日12:00~、1時間おきにバッチファイルを実行する
バッチ処理で作業場内のファイルサーバーにデータをダウンロード

管理用ツール

Podesora

Podesora  はターミナル。
さくらのレンタルサーバーでシェルスクリプトを手動で動かす
シェルスクリプトの文字エンコーディング:SJIS(管理者用メールで文字化けしないため)
SSH接続例)

例) /home/mysite/backup/backup_website1.sh と入力、バックアップのシェルスクリプトを実行

7-Zip File Manager 圧縮、解凍ソフト

7-zip は、.sql.bz .tar.gz2 を解凍する

データベースを解凍するときは、文字エンコーディングを”UTF-8″にする。(SJIS だと文字化けする)

Sass, Compass の導入

目的

DreamWeaver などのエディタで、Sass, Compass の自動コンパイルを使えるようにする。

背景

DreamWeaver のCompass コンパイルを使おうとすると、予期せぬ振る舞いでCSS書き出しディレクトリを指定できなかった

参考:DreamWeaver CC を使いWordPress テーマ内でCompass のコンパイルが正常にできなかった

Windows でSass とCompass を使う

SassとCompassのインストールの方法

Ruby をインストールする
Ruby をダウンロードしてインストール
https://rubyinstaller.org/downloads/

  • Ruby 2.x.x-x (x64) – Windows が64bit の場合
  • Ruby 2.x.x-x (x86) – Windows が32bit の場合

インストールの際、オプションの「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れるのを忘れずに。

コマンドプロンプトを立ち上げる
[Windows]キーを押して、”cmd”と入力
gem のバージョン確認

バージョンが出力される

アップデートが始まる

Sass とCompass をインストール

インストールが終わったらバージョンを確認する

バージョンの確認ができれば、インストール済みだと分かる。
※compass のインストールで、新しすぎるruby だとインストールできないエラーが起きた。
この場合、Ruby を一旦アンインストールし、1つ前のバージョンをインストールして試す。

WordPress インストール済みのディレクトリ構造

“config.rb”, “compass_start.bat” はこのあと作成する。

Compass の初期設定

コマンドプロンプトで、Sass, Compass を作成するディレクトリに移動する
面倒なら、エクスプローラーを開いて、該当するテーマのフォルダを開き、アドレスバーを選択(ショートカット[Alt+D])して”cmd”と入力

コマンドプロンプトで次のように入力

実行すると、次のようなファイルが作成される。

“sass”, “stylesheets” のフォルダは今回使わないため、エクスプローラーから削除しておく。

ツールを使って書き出される、デフォルトの設定

これを、WordPress テーマ内の構造に合わせて書き換える

config.rb の記述

CSS はテーマ直下のstyle.css として書き出す

compass_start.bat の設定

メモ帳などのエディタを開いて、下記を記述。

ファイルを保存するとき、テーマ内のフォルダを指定、”compass_start.bat”と名付けて保存
ただし、エクスプローラーで確認すると”compass_start.bat.txt” のようにテキストファイルの拡張子がついていることがあるため、ファイル名の”.txt”を削除

ランチャーを使っている場合、compass_start.bat はランチャーに登録しておく

動作テスト

compass_start.bat を実行
コマンドプロンプトが立ち上がって、監視が始まる

scss/test.scss を作成
試しにCSS を書く

ファイルを保存するとコマンドプロンプトにコンパイルの結果が表示される

書き出しが成功したら、テーマ直下に”test.css” が出力される
compass_start.bat の監視を終了するには、コマンドプロンプトで[Ctrl+C]を押した後のあと”y”と入力して[Enter]を押す

scss/style.scss を作成、WordPress のテーマ設定コメントが消えないようにする

これを

このように書き換え。
コメント開始を”/*!”にすることで、コンパイル時にWordPress で使うコメントが削除されなくなる

DreamWeaver CC を使いWordPress テーマ内でCompass のコンパイルが正常にできなかった

結論から書くと、DreamWeaver CC を使い、WordPress テーマ内にSass, Compass を使う場合は、DreamWeaver のコンパイルを切って、Ruby のコンパイルを使ったほうが時間を無駄にしないと思う。

できたこと

Dreamweaverで覚える最新Web開発ワークフロー: Sass編 を読むと、Ruby の知識がなくても、Sass, Compass が容易に使えるようになる。

ディレクトリ構造は次のような感じ

できなかったこと
wordpress ディレクトリがルートディレクトリで、テーマ内にscss, config.rb, style.css を保存しようとした

コンパイルするとどうなるか?

こうなったり、

こうなる。

これはましな方だが、狙ったディレクトリにCSS ファイルが書き出されない問題は残ったままだ。

Sass だけなら、「サイト設定>CSS プリプロセッサー>ソースと出力」で出力フォルダをテーマ内に指定するだけで、正しく書き出してくれる。だが、同サイト設定で、Compass>「Compass を使用する」でテーマ内のconfig.rb を指定すると、書き出し時のディレクトリ構造がおかしくなる。

まとめ

DreamWeaver CC のコーディング機能は快適で有用だが、Compass のふるまいだけは制御できなかった。

フォルダ内の特定のファイル名を削除する

画像ファイルを自動処理にかけて、一度に加工する場合がある。ファイル名の重複を避けるために、”{元のファイル名}-min.jpg”のように、ファイル名に文字列が追加されることがある。

この追加された文字列を、今まではFlexible Renamer を使って元のファイル名に戻していたが、アプリを立ち上げるのもつらくなったのでバッチファイルを利用するようにした。

前提

workarea 画像の一時展開場所。ウェブサービスを利用して、ファイルをダウンロードする場所にもなっている

手順

    1. \workarea フォルダに、処理するファイルを用意する。
      photo1-min.jpg
      photo2-min.jpg
    2. 処理するファイルと同じフォルダ内に、”del_file_name__min.bat” というバッチファイルを作成し、次のように記載する。

      バッチファイル内の”%fname:-min=%” が置換処理になっている。
      “%fname:{置換前の文字列}={置換後の文字列}%”
    3. 作成したバッチファイルを実行する。
      正しく実行されれば、同フォルダの対象ファイルは、次のようになっている。
      photo1.jpg
      photo2.jpg
    4. 作成したバッチファイルを、ランチャーに登録しておく。

ランチャーに登録しておけば、処理のたびにこのバッチファイルを実行するだけで済む。

参考:ファイル名をリネームする【Windows】

プロジェクト管理のできるグループウェア比較

プロジェクト管理や電子印鑑で仕事を早く進める方法を模索している。「グループウェア」というサービスがそれを実現する。紹介動画を見て、試用するサービスを「brabio」と「サイボウズ Office 10」の2つに絞り込んだ。

brabio
http://brabio.jp/
エクセルに似たガントチャートが使える。エクセルより早い(自称)

▼ ブラビオの使い方をご説明!
https://www.youtube.com/watch?v=DYkw3MJmcdw#t=601.761
ガントチャートで作業名、対応者、期限を決められる

サイボウズ Office 10
http://products.cybozu.co.jp/office/
プロジェクト管理がある。機能は多すぎるが制限できる

サイボウズ Office 10 機能紹介 <ファイル管理編> – YouTube
https://www.youtube.com/watch?v=fkQKlVsnddo
バージョン管理付き、閲覧権限もつけられる

サイボウズ Office 10 機能紹介 <ワークフロー編> – YouTube
https://www.youtube.com/watch?v=aMBYaOleTtM
稟議書の代替になる

サイボウズ Office 10 機能紹介 <スケジュール・施設予約編 …
https://www.youtube.com/watch?v=-uwIgGjre7c
施設を予約できる
複数人のスケジュールを作ることもできる

サイボウズ Office 10 機能紹介 <メッセージ編> – YouTube
https://www.youtube.com/watch?v=ROC-c0dMZk8
グループを決めてメッセージのやりとりができる(添付も可能)
増員や引き継ぎもやりやすくなる
社内のメールを「メッセージ」に限定することで、情報漏洩を防げる

サイボウズ Office 10 機能紹介 <日報(カスタムアプリ)編 …
https://www.youtube.com/watch?v=gGicl-4Sayg
日報アプリを追加できる。上司は報告される日報を整理して、未確認日報を確認できる

Backlog
http://www.backlog.jp/
制作会社、プログラマ向け?
プロジェクトの見える化、ファイル共有の支援ができる

Backlogビデオチュートリアル「課題管理編」 – YouTube
https://www.youtube.com/watch?v=msj60VdEOf0

Backlogビデオチュートリアル「ガントチャート編」 – YouTube
https://www.youtube.com/watch?v=qPuOiN4cbK8

Backlogビデオチュートリアル「ファイル共有編」 – YouTube
https://www.youtube.com/watch?v=cGoYJCR6d_U

ChatWork
http://www.chatwork.com/ja/
グループの作成、会議(文字、ビデオ)、タスク管理、ファイル共有の4つの機能だけある。アプリ機能を覚えきれない人が多い組織に向いている。
ガントチャートなどはほかのアプリ(Excel など)で作成して共有する。