著者アーカイブ 村上

村上 著者:村上

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

村上 著者:村上

【イベント】2月2日に「第4回 浜松ICTシンポジウム」を開催致しました

以前もこのブログでご紹介しましたが、昨日2月2日(金)に、「第4回 浜松ICTシンポジウム」を開催致しました。
主催は、NPO法人浜松ソフト産業協会です。
今回の参加者は100名ほどでした。
昨年度よりは少し少ない参加者数でしたが、100名は超えたのでまあ良いのではないかな?

シンポジウムについて詳しくははこちら。

2018年2月2日、浜松ソフト産業協会主催「第4回 浜松ICTシンポジウム」を開催します。
https://hamamatsusoft.com/news/2017/00033/

 

講演のプログラムはこのような感じ。

今回は講師4人による講演と、結構盛り沢山な内容となっております。
で、今年も私は受付を担当していました。
受付だと、いろいろな方とご挨拶できて楽しかったです。

 

また、空いた時間を見計らって講演を聴くこともできました。
聴いたのはソフ協会員でもある、モアソンジャパンの森川社長の講演です。
身近なIoTのデバイスの紹介から始まり、実際で会社で行った事例の紹介、また他のソフ協会員の事業紹介など、興味深い内容でした。
個人的には、講演冒頭で自転車の写真が出てきて、そして自転車で使われているIoT機器の説明から入ったので、思わず「おっ!」となって内容に引き込まれましたね。
最近私も自転車を始めたので、興味のある分野を取っ掛かりにしていると、更に興味が湧きますね。

ということで、スタッフとして参加しつつも、今回は聴講もできたので、私としては結構楽しかったです。
忘れ物をするというミスも犯しましたが、大事にはならなかったので、良しとしていただきたい…。
…次回は気をつけます!

 

ちなみに、会場の写真がこちら。

プロジェクターが大きいので、後ろの席からでもよく見えました。
あと、毎回思いますが天井のシャンデリアが綺麗。

村上 著者:村上

【Webサイト】PDFファイルの回転・圧縮・分割・結合が簡単にできるサイト「Smallpdf」

最近、よくPDFファイルを扱うことがあるのですが、その際に便利なサイトが、こちらの「Smallpdf」。

smallpdf.com – 無料Pの変換はこちらでどうぞ!DF
https://smallpdf.com/jp

タイトルにあるように、PDFを回転させたり、圧縮したり、複数枚のデータのPDFを1枚ずつに分割できたり、逆に複数のPDFを結合できるサイトです。
それ以外にも、PDFを画像ファイルに変換したり、PDFをエクセルやワードに変換したりもできます。

 

「Smallpdf」のサイトはこちらのようなレイアウト。

トップページにボタンがずらりと並んでおり、ここからやりたいことを選びます。
アイコンもシンプルだし、下に何ができる丘も簡潔に書いてあって分かりやすいですね。

そのうちの一つを選択してみるとこんな感じ。
画像は「PDFを回転」を選択した画面です。

中央に大きく、ファイルを選択するエリアがあります。
ローカルファイルだけではなく、DropboxGoogle Drive から選ぶこともできます。
ファイルを選択した後は、右回転・左回転のボタンが表示されるので、任意の回転をかけた後「変更を保存する」ボタンを押します。
すると下の画像のようなファイルダウンロードページに移動するので、ここから PDFのダウンロードをします。

また、ダウンロード以外にも、Dropbox や Google Drive へ保存したり、もしくはさらにここからワードに変換したり、作成したPDFをパスワードで保護することもできます。
さらに変換したい場合、一度トップページに戻らなくて済むのは楽ですね!

 

ということで、ブックマークしておくと何かと便利な「Smallpdf」でした。
これよりさらに上のサービスをご希望の方は、「Smallpdf Pro」という有料サービスもあるようなので、こちらも検討してみてはいかがでしょう?
でも、数ファイルをちょこっと使う分には、無料版で十分ですね。

村上 著者:村上

【JavaScript】配列←→JSON文字列に変換する方法

今回はJSONの取扱いについて。
JSONから配列へ、もしくはその逆をやることがあるので、まとめてみます。

 

■ JSON → 配列

JSON文字列を配列にするときには、JSON.parse() を使います。
使用例は下記のとおりです。

var json_text = '{ "a" : 100, "b" : 200, "c" : 300 }';
var arr = JSON.parse(json_text);

 

■ 配列 → JSON

先程とは逆に、配列をJSON文字列に変換したいときは JSON.stringify() を使います。

var arr = ["a","b","c"];
var json_text = JSON.stringify(json_text);

 

パッと見ただけでは、何かが変わったようには見えないのですが、確かに配列←→JSON文字列に変換できていました。
JavaScriptでは、Ajaxの処理をするときに、渡すデータが JSON だったり、もしくは結果が JSON で返ってきたりするというシチュエーションが多いかな?
意外と使用頻度は高そうですが、特にスペルミスで、再検索したりするので、この機会に備忘録を兼ねてまとめてみました。
私は特に stringify のつづりを間違えます…。iが抜けるとか。

もしJSONを扱うときがあったら、ご活用いただければと思います。

村上 著者:村上

【JavaScript】テキストボックスに当てられたフォーカスを外す方法

今回はタイトル通り、Webサイトなどでテキストボックスに当てられたフォーカスを解除する方法です。
パソコンでは特に問題ないのですが、スマートフォン、特にAndroidでフォーカスが外れなかったために、ソフトフェアキーボードが消えず、ちょっと面倒な目にあったんですよね…。

で、肝心の方法ですが、フォーカスを外したいタイミングで下の3行を実行するだけ。

// 現在アクティブな要素を取得する
var active_element = document.activeElement;
// フォーカスを外す
if(active_element){
  active_element.blur();
}

いたってシンプル&簡単です!

 

ただ、この処理は要素からフォーカスを外すだけなので、逆に指定した要素にフォーカスを当てたい場合は下記のように記述します。

var element = document.getElementById("フォーカスを当てたい要素のID"); 
element.focus(); // カーソルを合わせる

 

ということで、要素からフォーカスを外す方法でした。
そこまで使用頻度は高くなさそうですが、覚えておけば便利かも?
もし、使う場面があれば、是非ご活用ください。