著者アーカイブ 村上

村上 著者:村上

【Webサイト】ローディングのGIFアイコンが手軽に作れる「Loader Generator」

読み込み中であることを表すローディング画像を使う場面は多々あるかと思いますが、今回はそのローディング画像を手軽に作ることのできるWebサイトのご紹介です。

Loader Generator
http://loadergenerator.com/

「Loader Generator」というWebサイトで、7種類のローディング画像を自由な大きさと色で作成することができます。
それ以外にも、背景の色や回転の速度なども任意で変更できるため、サイトの色合いや雰囲気にあったローディング画像を作成することができます。
また、回転式のものだけでなく、Windowsでよく見るような、横棒のプログレスバーも生成できます。

ちょっと変わり種な、Wi-FiのGIFもあります。

 


こちらは「通信中」とか「接続中」の時に使えそうですね。

 

画像の作り方はとても簡単で、「Line」や「Circle」、「Arrow」など、お好みのデザインを選び、サイズや色などを調節するだけ。
サイズや回転のスピードはスライダーでの調節ですし、色もカラーピッカーが表示されるので、直感的に操作ができます。
左側にプレビューも表示されるので、こちらを見ながら、サイズや色の調整をしてください。
調整が終わったら、プレビュー下の「DOWNLOAD GIF」で画像をダウンロードします。
本当に簡単ですね!

 

ローディング画像って意外と青色が多いイメージで、時には「この色じゃない!」というときもあるので、色の指定が色コードでできると助かりますね。
また作成した画像は、ファイルサイズ2KBほどで小さめなので、扱いやすいです。
ローディング画像が必要な際は、こちらで作成してみてはいかがでしょうか。

村上 著者:村上

【CSS】疑似クラスを使って要素がクリック中であることを表現する方法

アプリなどでは、クリック時にボタンの色やカードビューの色が変わって、クリック中、もしくはクリックしたことが分かるようになりますが、今回はそれをCSSで実現する方法についてです。
Cordovaでウェブビューのアプリを作っているのですが、「クリックした感」がわからないので手動で追加してみました。
…これで二重クリックが減るかな?

 

今回使うのは「疑似クラス」というものです。
これを記述することで、マウスオーバー時、クリック中などのスタイルを指定することができます。
サンプルは下記のとおり。

<a href="">クリック中は色が変わります</a>
a:active {
    // クリック中に適用されるスタイル
    a:active {color:#FFF;background:#F00;}
}

上のサンプルを実行すると、リンクをクリックしている間、文字の色は白色に、背景色は赤になります。

なお良く使われるのは、このくらいかな。

  • :link 未訪問のリンクにスタイルを適用
  • :visited 訪問済みのリンクにスタイルを適用
  • :hover マウスオーバーの要素にスタイルを適用
  • :active クリック中の要素にスタイルを適用
  • :before 指定した要素の直前に内容を挿入する
  • :after 指定した要素の直後に内容を挿入する

なお、下二つのサンプルはこんな感じ

<h1>先頭に丸が付きます</h1>
<a href="">カギカッコで囲まれたリンク</a>
h1:before {
    content:"○";
}
a:before {
    content:"「";
}
a:after {
    content:"」";
}

contentプロパティは、文字だけでなく画像も指定できるので、リスト表示の先頭の丸をアイコン画像に変えたり、ブログとかでよく見る、リンクの後ろに新着記事を表す「New!」のアイコンを表示したりできそうですね。
それ以外は正直思いつきませんが…汎用性は高そうです。

 

ということで、今回は疑似クラスについてでした。
にしても、少し色を付けたりするだけで、「クリックした感」がぐっと上がるので、色などデザインの影響力の大きさを改めて実感しましたね。
もっと効果的に使えるようになりたいです。

村上 著者:村上

【JavaScript】フォームの送信ボタンの2重クリックを防止する方法

最近このフォームの2重送信に悩まされているので、とりあえず思いついた対処をメモ。
しかし、まだ解決には至っていません…何故効かないのか…。

 

■ ボタンを無効化する(disabled)

送信ボタンを押した後、JavaScriptで、そのボタンを押せなくする方法です。
これが一番わかりやすいかな?
サンプルコードは下記のとおりです。

<form>
    <input id="submit" type="submit" value="送信" />
</form>
var postingFlg = false;
$("#submit").on("click",function(){
    document.getElementById("submit").disabled = true;
    $.ajax({
        type: "POST",
        url: "送信先URL",
        data: "送信するデータ",
        success: function(msg){
            document.getElementById("submit").disabled = false;
        });
    }
});

ボタンが押されたら、ボタンを「disable = true」にし、送信などの処理が終わったら「disable = false」にして、再びボタンを有効化します。
そうすることで、処理中はボタンを押しても処理が走らないようにすることができます。
これは直感的で使いやすい印象ですね。

 

■ フラグを立てる

上のと少し似ていますが、こちらはフラグとなる変数を宣言し、その内容を見るパターン。
サンプルはこんな感じ。

<form>
    <input id="submit" type="submit" value="送信" />
</form>
var postingFlg = false;
$("#submit").on("click",function(){
    if(!postingFlg){
        postingFlag = true;
        $.ajax({
            type: "POST",
            url: "送信先URL",
            data: "送信するデータ",
            success: function(msg){
                postingFlg = false;
            }
        });
    }
});

送信の処理は、postingFlg の値が false の時のみ実行するようにしておきます。
そしてボタンが押されたら、postingFlg の値を true にし、処理が終わったら、postingFlg を false に戻します。

 

とりあえず試したのは上記の2つです。

個人的な好みは、1つ目のボタンの無効化ですね。
そもそもボタンを押せなくなるので、ユーザ側にもわかりやすいかと思います。
が、このあたりは、状況に応じて使い分けてください。
そして、もっといい方法があれば、是非お教えいただきたい…!
どうぞよろしくお願い致します。

村上 著者:村上

【Git】「fatal: Unable to create ‘.git/index.lock’: File exists.」エラーが発生したときの対処法

業務でソースの管理にGitを使っているのですが…たまにバグります。
Sourcetreeを使用している影響もあるかとは思うのですが(動きが凄く重い)、ついGUIの分かりやすさ&楽さに使ってしまいます。
…やっぱり、直感的に使えるのって楽です。

 

で、今回発生したのは、「fatal: Unable to create ‘.git/index.lock’: File exists.」というエラー。
こちらは、「.git/index.lock というファイルが既に存在していて、作成することができません」という意味です。
このエラーが発生すると、コミットやプッシュ、プルといった操作が全くできなくなります。

そんな致命的とも思えるエラーですが、解決方法は案外簡単で、エラーにあった既に存在している「.git/index.lock」ファイルを削除するだけ。
削除には、下記のコマンドを使用しました。

// .git/index.lock ファイルを削除
rm /作業ディレクトリ(自分の環境に合わせる)/.git/index.lock

が、他ウィンドウなどで gitコマンドを実行している時に別のコマンドを実行させようとしても発生するエラーらしいので、削除する前に、他にgitコマンドを実行していないかを確認してから、削除を実行してください。

なお私の場合、ファイルの削除は失敗したのですが、少し時間を置いたら、何事もなく通常通りに使うことができるようになりました…。
ちょっとモヤモヤしますが…直ったから良しとします。

 

ということで、Gitで発生したエラーの修正方法でした。
もし同じエラーに遭遇した時は、参考にしていただければ幸いです。

村上 著者:村上

【Android】「Gradle sync failed: ‘com.android.support:support-v4-27.0.2’ already disposed」エラーの解決法

ファイルの変更を元に戻したり、色々したところ、「Gradle sync failed: ‘com.android.support:support-v4-27.0.2’ already disposed」というエラーが発生してしまったので、その解決方法について。
解決できなくても、ビルドからの実機での起動ができたので、エラーというより警告のようですが…延々、黄色い帯と「Try Again」の文字が出ているのは、嫌だったので修正開始。

 

と言っても、主に下記のように build.Gradle を修正するだけでした。

allprojects {
    repositories {
        mavenCentral()
        jcenter()
        google()
        maven { url 'https://maven.google.com' }  // 追加する行
    }
}

そして、Android Support Library のバーションを更新します。

dependencies {
    compile fileTree(dir: 'libs', include: '*.jar')
    // SUB-PROJECT DEPENDENCIES START
    compile project(':CordovaLib')
    // compile "com.android.support:support-v4:24.1.1+"  // 修正前
    compile "com.android.support:support-v4:26.1.0"  // 修正した行
    compile "com.facebook.android:facebook-android-sdk:4.+"
    compile "com.google.firebase:firebase-core:+"
    compile "com.google.firebase:firebase-messaging:+"
    // SUB-PROJECT DEPENDENCIES END
}

あとは、SDK Maneger も確認し、アップデートがあれば SDK を更新しました。
ただ、これはあまり関係ないかも…?

なお、私の場合は、SDKのアップデートも行ったためか、一度 Android Studio を再起動させたところ、エラーが解消されました。
Gradle を修正したのに、問題が解決しない場合は、ソフトの再起動を試してみるのもよさそうです。

 

ということで、「Gradle sync failed: ‘com.android.support:support-v4-27.0.2’ already disposed」エラーの修正方法でした。
他にも、moven { url ‘https://maven.google.com’ } 以外にも、google() も追加する、との意見もありましたので、そのあたりは、自分の環境や、発生したエラーに合わせて変えてみてください。

村上 著者:村上

【HTML5】入力値の形式を正規表現で指定できる「pattern」属性

今まで、正規表現って PHP で行っていたのですが、HTML5 なら HTML 側で入力値をチェックできるとのこと。
使う機会がなかったので、今まで知りませんでしたが、これは便利そう。
ただ、「送信」などのボタンを押した後に、入力値のチェックを行うので、入力自体は出来てしまうんですよね。

 

使い方は、下記の通りです。

<form>
    <input type="text" name="userid" pattern="^[0-9A-Za-z]+$">
    <input type="submit" value="送信">
</form>

input タグに pattern 属性があるので、ここに正規表現を記述するだけです。
なお、正規表現で記述した文字列のパターンに一致しない場合は、下記のようにエラーメッセージが表示されます。

わざわざエラー文を表示する手間が省けて、これ良いですね!
見た目が買えられないのが難点かなとも思いますが、シンプルでわかりやすいので、このデザインでも問題なさそう。

と、いうことでHTMLで入力チェックをする方法でした。
…正規表現、覚えよう…。

 

最後に、よく使うのにすぐ忘れる、メールアドレスを判断するための正規表現をメモ。

// メールアドレス
^[0-9a-z_./?-]+@([0-9a-z-]+\.)+[0-9a-z-]+$
村上 著者:村上

【CSS】CSSで変数が使えるという「カスタムプロパティ」が便利そう

今日、偶然に見つけて便利そうだったので、簡単にではありますがまとめてみました。
CSS変数」「カスタムプロパティ」「CSS Variables」と呼ばれているもので、CSSで変数が使える、というものでした。

なお、偶然見つけたサイトはこちら。

CSSで変数(カスタムプロパティ)を使ってみよう
https://www.webcreatorbox.com/tech/css-variables

 

で、気になる使い方ですが、まず変数の定義は下記のように行います。

:root {
    --item-padding : 10px;
}

:root」の中で定義すると、グローバル変数のように使用できるとのこと。
変数の宣言は「」から始め、任意の名前を付けます。
それを「:」で区切り、変数の値を定義します。
上記では「–item-padding」という名前のグローバル変数に「10px」の値が定義されている、という意味になります。
なお、値は数値だけでなく、「center」などの文字列や、「#F00」という色コードもOKとのこと。
また、変数名は、大文字と小文字が区別されるため、「BackColor」と「backColor」は、別の変数として判断されます。

使用するときは、下記のように指定します。
.item {
padding : var(–item-padding);
/* padding : 10px と同義 */
}
var()」の中に、定義した変数名を指定すると、その変数の値を使用できます。
ちなみに、以前紹介した calc() との併用も可能で、下記のように書くこともできます。

:root {
    --item-padding : 10px;
}

.content{
    padding : calc(var(--item-margin) * 2);

 

また、変数の中で変数を呼ぶこともできるそうで、下記のようにして、背景をグラデーションにすることもできるとのこと。

:root {
  --main-color: #7117ea;
  --sub-color: #ea6060;
  --bg-gradation: linear-gradient(135deg, var(--main-color) 0%, var(--sub-color) 100%) fixed;
}

body {
  background: var(--bg-gradation);
}

body で書かれている、背景色を設定している部分の記述がとてもシンプルですね!
ただ慣れていないと、上の :root の中で、何を書いているのかが分からなくなりそう…。

さらに、CSSで記述した変数を、JavaScriptで利用する、という方法もあるそうですが…まだ使いこなせそうにないので、いったんこちらは置いておきます。
気になる方は、ブログ冒頭で紹介した記事をご覧ください。

そして、肝心の対応ブラウザですが、Chrome, Firefox, Safari, Edgeなどに対応しているとのこと。
IEは…乞うご期待!というところでしょうか。
メジャーなブラウザにはほぼ対応しているみたいなので、試しに使ってみるのもよさそうですね。

村上 著者:村上

【CSS】要素を非表示にする「display:none」と「visibility:hidden」の違い

CSSで要素を非表示にするときに使われる、「display:none」と「visibility:hidden」の違いについて。
最初のころはよく間違えたので、戒めも込めてまとめ。
というか、いまだに visibility が空で書けない。

 

まずは、それぞれの違いについて

■ display:none

display:noneは、このプロパティを指定した要素そのものが消えます。
単に非表示というよりも、削除された感じに近いですね。
なお、要素そのものが消えるので、後ろに配置された要素はその分詰めて表示されます。
再度表示させる場合は、「display:inline」か「display:block」を指定すればOKです。
 

■ visibility:hidden

visibility:hiddenは、display:none とは違い、要素を見えなくするだけです。
要素自体が消えるわけではないので、要素があった範囲は詰められることなく、そのまま残ります。
そこだけぽっかりと空間ができてしまうので、レイアウトが崩れることはないのですが、場合によっては少し不格好になって今う可能性もありそうです。
再表示する場合は、「visibility:visible」を指定します。

 

ということで、「display:none」と「visibility:hidden」の違いについてでした。
要素の非表示という機能はほぼ同じなので、混同しないようにしたいですね。
覚え方としては「none = なし」か「hidden = 隠す」という風に覚えると、理解しやすいかなと思います。
最初のころは、「display:hidden」とか書き間違えていたので、皆様はご注意ください!

村上 著者:村上

【Chromeアドオン】Webページ全体をキャプチャできる「Awesome Screenshot」

インストールしたのはだいぶ前のことですが、たまに使う機会があって便利なのが「Awesome Screenshot」というChromeの拡張機能です。

こちらは、Chromeウェブストアから追加ができます。

Chromeウェブストア
https://chrome.google.com/webstore/category/extensions

導入自体はそれほど難しくないので割愛しますが、どうしてもわからない方は、こちらのサイトが参考になります。

Chromeアドオンの「Awesome Screenshot」の使い方について|SmallStepアンテナ
http://small-step.jp/blog/2016/09/09/chromeアドオンの「Awesome Screenshot」no/

 

使い方はとても簡単で、まずキャプチャしたいWebページを開き、「Awesome Screenshot」のメニューを開きます。
英語なので少しわかりにくいですが、メニューの中から「表示されている範囲のみをキャプチャ」、「選択した範囲をキャプチャ」、「ページ全体をキャプチャ」などが選べるので、好きなものをチョイスします。
今回は「ページ全体をキャプチャ」してみます。
選ぶ項目は「Capture entries page」です。

こちらをクリックすると、下記のようにキャプチャされた画像が表示されます。

ここで自由に書き込みなどの編集もできます。
編集が済んだら、「Done」のボタンをクリックします。

すると下のようなページに移動するため、ここでキャプチャ画像をダウンロードします。

以上です!簡単ですね!

そして、キャプチャした画像がこちら。

きちんと最初から最後までページがキャプチャできています!

 

ということで、知っていると便利な拡張機能でした。
頻度は低くても、意外と使う機会があったりするので、インストールしておくことをおすすめします。

村上 著者:村上

【PHP】empty()関数で空と判断される値

そう言えば、ちゃんと調べたことがなかったのでまとめ。

変数に値が格納されているかのチェックをするために用いる empty() 関数ですが、「空の変数」だと判断される値は下記の8つです。

  • “” (空の文字列)
  • 0 (整数 の 0)
  • 0.0 (浮動小数点数の 0)
  • “0” (文字列 の 0)
  • NULL
  • FALSE
  • array() (空の配列)
  • 変数は宣言されているが、値が指定されていない変数

PHPマニュアルを参考にさせていただきました。

PHP: empty – Manual
http://php.net/manual/ja/function.empty.php

調べるまでもなく、大体把握していた通りでしたが…文字列の「0」も「空」だと判定されるのは実際にやったことがないので知りませんでした。
なお、指定した変数が存在していなくてもエラーにはならないとのこと。

また、似ている関数に isset() 関数があります。
こちらは、変数が宣言されており、かつ値がNULLでなければ true を返します。
…が、こちらはあまり使わないかな?

 

ということで、empty()関数についてでした。
意外と今までの経験から「多分こんな感じ」で把握しているだけだったので、こうして改めて調べるのも大事ですね。