読者です 読者をやめる 読者になる 読者になる

CODE-LIFE│コーディング・プログラミングのメモブログ

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ

自動でファイル名に日付を入れてバックアップするバッチファイル

1.下記のコードをテキストエディタにコピペ
setlocal
   rem /* 今日の日付を取得(yyyymmdd) */
   set now=%date:~-10,4%%date:~-5,2%%date:~-2,2%
   
   rem /* ○○に日付を入れてをバックアップ */
   xcopy /Y /E C:\○○ D:\○○_%now%\
 
   rem /* 一時停止 */
   pause
endlocal
2.○○のところにバックアップしたいファイルのパスを入力
3.「backup.bat」などのファイル名で保存しておく
4.コンピュータ→管理→タスクスケジューラ→基本タスクの作成
5.3で保存したbatファイルを指定、任意のトリガーを設定

これで自動でバックアップを取ってくれるプログラムの完成です。

毎日作業するExcelのバックアップなどを設定しておけば一日30秒の短縮。ファイル数によってはもっと時間の節約になりますね。

CSSで画像をぼかしてオンマウスした画像だけ鮮明に

See the Pen CSSで画像をぼかしてオンマウスした画像だけ鮮明に by maru (@maru0014) on CodePen.

img {
  width:30%;
  -webkit-filter: blur(2px);
  filter: blur(2px);
}

filterプロパティはその名のとおり画像にフィルターをかけることができます。 これを使って画像をぼかして、hover時に通常表示に直しています。

グレースケール→カラーも可能です。

img {
  width:30%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
img:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

その他にも色々なエフェクトがかけれる! ↓こちらが参考になります。

qiita.com

CSSのみで「スクロールすると表示されるフローティングメニュー」

ECサイトなどでタグの規制があり、JavaScriptが使えない環境下でもこれなら可能。

jQueryなどで実装する場合はスクロールイベントを拾ってきて表示させるんじゃないかと思いますが、 この場合はheader部分の背面にフローティングメニューを隠しておくイメージです。

headerにz-index:2;を指定する

z-indexを指定するにはpositionの指定も必要なので、position:relative;も指定します。 これでheaderが最前面に表示されることになります。

menuにz-index:1;を指定する

こちらはフローティング化するので、 position:fixed;top:0;を指定します。

これでheaderの背面に隠れることになります。

完成状態がこちら

See the Pen CSSのみで「スクロールすると表示されるフローティングメニュー」 by maru (@maru0014) on CodePen.

headerに背景色もしくは背景画像を付けるのを忘れずにね!

HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座

.load()メソッド IE10で読み込まれない原因は

IE11では正常にhtmlが読み込まれるのに対して、IE10では表示されない。

IE10は.load()メソッドは対応しているはずなのに・・・。

まず疑ったのはキャッシュ。
キャッシュを全て削除して更新してみたが改善されない。

原因は・・・・。

<script>
  $(function() {
    // 文字コードの修正
    $.ajaxSetup({
      beforeSend: function(xhr) {
        xhr.overrideMimeType("text/html;charset=euc-jp");
      }
    });
    // 共通パーツ読み込み
    $("#header").load("../parts/header.html");
    $("#side").load("../parts/side.html");
    $("#footer").load("../parts/footer.html");
  });
</script>

上記を見たら皆さんお気づきかと思いますが、僕は15分くらい悩んだ末IEのデバックツールで見たら一発でした。(一番最初に確認するべきだった・・・)

文字コードの指定が非対応

文字コードの修正の部分は、euc-jpで作られたhtmlがajaxによってutf-8に強制変換され文字化けしてしまうのを防ぐために書いたのですが、overrideMimeTypeはIE10以下非対応でした。

これのせいでscriptが停止し、読み込まれなかったわけです。

IE10はまだまだ利用者の多いブラウザのため切り捨てるわけにはいかず、パーツとなるhtmlの文字コードutf-8にし、overrideMimeTypeを廃止しました。

念のため.load()のキャッシュを無効にする

今回の件で調べているうちにキャッシュが原因で1回めのアクセス時に表示されず、リロードすると表示されるなどの不具合があるという記事が見つかったので、念の為にキャッシュさせない設定を組み込みました。

<script>
  $(function() {
    // キャッシュOFF
    $.ajaxSetup({
        cache: false
    });
    // 共通パーツ読み込み
    $("#header").load("../parts/header.html");
    $("#side").load("../parts/side.html");
    $("#footer").load("../parts/footer.html");
  });
</script>

要素内のtextをタグで囲むスクリプト jQuery

タイトルではちょっとわかりづらいかな・・・。

例えば

<h1>見出し</h1>

というHTMLがあったときに、jQuery

<h1><div>見出し</div></h1>

というふうに内側のテキストなどをタグで囲める。

通常なら普通にタグを記述すればいい話なのだが、

  • サイトを立ち上げてからかなり時間がたち全てのhtmlを更新するのが困難な場合
  • ブログやECサイトなどでhtmlを変更出来ない箇所がある場合

などに便利である。

See the Pen 要素内のtextをタグで囲むjQuery by maru (@maru0014) on CodePen.

上記の場合はボーダーがついたh1タグの内側をdivで囲みdivに対してborder-leftを付けることで見出しのデザインを作っている。 このように既存のhtml構造では不都合がある場合に一括でタグを追加することができる。

使い方

jQueryの読み込み

このスクリプトjQueryが必要なので、まず
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
を記述してライブラリを読み込む

スクリプトを記述
<script>
  $(function(){
   $("外側のタグ").wrapInner("内側を囲むタグ");
  });
</script>

と記述。
今回の例の場合では

<script>
  $(function(){
   $("h1").wrapInner("<div></div>");
  });
</script>

となる。

 
以上、要素内のtextをタグで囲むスクリプトでした。

Atom URL編集時に10秒ほどフリーズする問題の原因

f:id:maru0014:20151203104450p:plain

予想される発生条件

 
  • 「autocomplete-paths ver 1.0.2」が有効
  • HTMLモードになっている(Plain Textモードでは発生しませんでした。)
 
上記の条件下でURLを編集した際に発生しました。
 
 
「autocomplete-paths ver 1.0.2」を無効化した状態ではフリーズせず。
 
その他のパッケージとの干渉というわけでもなく単体で発生しました。
 
 
autocomplete-pathsとは
URLを入力時にプロジェクトフォルダ内のファイルパスに似たようなフォルダ名やファイル名があればオートコンプリートしてくれるパッケージ。
 
プロジェクトフォルダ内の検索がフリーズの原因かと思われる。
フォルダが多すぎるせいで検索に時間がかかっているのかもと思い、ファイル単体での編集も試みたが同様の現象が発生。
 
やむなく機能を無効にし、次のアップデートで修正されるのを待つことにする。

同一ウィンドウ内にhtmlとCSSとJavaScriptを書いてリアルタイムプレビューできるなんて・・・

f:id:maru0014:20151105210519p:plain

しかもブラウザ上で動作するなんて・・・   CodePenがこんなに便利なんて知りませんでした(´ェ`)

今までWEBプログラミング系のブログで何度か埋め込みを見たことはありましたが、実際に使ってみると使いやすいのなんのって!

しかもemmetが使える

半信半疑で ! を入力してTABキーを押してみると・・・使えた!

素晴らしい。スニペットとかちょっとしたコーディングならエディタ起動するまでもないですね。

使えるスニペットが盛りだくさん!

他のユーザーが公開しているcodeが使えるのも楽しすぎる。

ボタンデザインとかだけでも参考になりますなぁ。