著者アーカイブ 村上

村上 著者:村上

【コマンド】フォルダ構造をファイル名まで含めてツリー階層で表示する方法

使用頻度が少ないとすぐに忘れてしまうので、覚え書きとしてまとめ。
今回は、フォルダ構造をツリー階層で表示してくれるコマンドプロンプトのコマンド「tree」についてです。

 

コマンドプロンプト上で「tree」コマンドを実行すると、下の画像のように、現在のディレクトリ以下のフォルダをツリー階層で表示します。

※なお、一部のディレクトリ名等は、念のため伏せさせていただきました。
が、これだけだと、ディレクトリ名までしか表示されません。

で、ディレクトリ内にあるフォルダの名前まで表示するためには、コマンドのオプションを使用します。
使うのは「/F」というオプションで、tree コマンドの後ろに付けて実行します。
実行結果は下記のとおりです。

ちゃんとファイル名まで表示されました。

オプションはこれ以外にも、「/A」という ASCII文字で表示するものもあります。
こちらを指定すると、下のように表示されます。

そこまで大きく変化はしていませんが…線の表現の仕方で何となく見やすい気がしますね。
今回はあまり変化がよく分かりませんでした。

 

以上、フォルダ構造をツリー階層で表示する方法でした。
linux でもコマンドがインストールしてあれば使えるので、Windows・Macの両方で使えます。
資料作成の時に便利そうなので、機会があったらどんどん活用してきたいと思います。

村上 著者:村上

【JavaScript】クリックイベント等で取得したオブジェクトの中身

JavaScrip の クリックイベント等で、よく下記のようなコードを書くかと思います。

$("#button").on("click",function(event){
    // クリック時に実行したい処理
});

で、この時に取得できるオブジェクトから取得できる値の中で、使用頻度の高そうなものをまとめてみました。
今までは、イベントをキャンセルする event.preventDefault(); くらいしか使ったことがなかったんですよね。

 

・DOM要素の取得

var dom = event.target;

クリックしたDOM要素を取得できます。
が、これはこのまま使うよりも、後述する、ID・class名の取得と一緒に使う事の方が多そうですね。
 

・クリックした座標の取得

// x座標
var x = event.x;
// y座標
var y = event.y;

こちらはクリックした位置を取得できます。
click イベント以外にも、mousemove イベントや touchmove イベントでももちろん使えます。
 

・ID、class名の取得

// ID名取得
var id = event.target.id;
// class名取得
var class = event.target.className;

先述した、DOM要素の取得で取得できた要素の ID名、class名を取得できます。
 

・要素の幅と高さ

var width = event.target.offsetWidth;
var height = event.target.offsetHeight;

target で取得できた要素の幅と高さを取得する方法です。
単に width、height と記述しただけでは取得できないので、そこは要注意ですね
 

・要素のスタイル

var eventType = event.target.style;

要素のスタイルを取得できます。
これは .css() メソッドと一緒に使うことが多そうかな?
 

・イベントタイプの取得

var eventType = event.type;

イベントの種類を取得する方法です。
これも便利そうですね。

個人的には、要素名を取得するメソッドがあるとよかったのですが、無さそうだったので…今回はclass名の取得で対処しました。
まあ、でもclass名でも問題はなかったです。
…良く思うのですが、一度アルゴリズムでハマって考え込んでしまうと、「このやり方でなければいけない」と思い込んでしまうので、柔軟な発想って重要だなとつくづく思います。

 

以上、クリックイベント等で取得したオブジェクトから取得できる値の一覧でした。
他にも、要素の親要素・子要素を取得する方法もありましたが、今回は割愛します。
詳しくは、今回参考にさせていただいた下記のサイトをご覧ください。

【JavaScript】クリックイベントで取得したオブジェクトの使い方 まとめ|Web制作会社スタイル
http://www.hp-stylelink.com/news/2014/04/20140422.php

村上 著者:村上

プログラミング初心者におすすめの学習動画サイト「ドットインストール」

HTMLなど、プログラミングの勉強方法でおすすめなのが、こちらの「ドットインストール」というサイトです。

ドットインストール – 3分動画でマスターする初心者向けプログラミング学習サイト
https://dotinstall.com/

1つが約3分程の動画になっており、長すぎず見やすいです。
私も先輩スタッフにこのサイトのことを教えてもらいました。

 

実際の画面はこんな感じ。

こちらはHTMLのレッスン1「#01 HTMLとはなにか?」の画面です。
動画なので、分からないところを繰り返し聞けておすすめです。

また、学習できる言語は、HTMLのほかにも、CSS、JavaScript、jQuery、PHP、Ruby などがあります。
さらに、業務で使えそうなWordPress入門だったり、Android、iOSアプリの作り方だったり、サーバ環境の作り方だったり、ゲームプログラミングについてのレッスンもあります。
レッスンは、目的別で分類してあるので探しやすいです。

有料会員でないと見られない、中・上級者向けのプレミアムコンテンツもありますが、初歩的なことを勉強するなら、無料会員でも問題はなさそう。
少なくとも入門あたりであれば、どの言語・コンテンツでも見られます。
ちなみにプレミアム会員は、月額980円です。

 

ということで、おすすめのプログラミング学習サイトでした。
経験がある人には物足りないと思いますが、「プログラミングをやってみたいけど、何から勉強していいかわからない!」という入門者・初心者の方にはぴったりだと思います。
プログラミングを勉強したい人は、参考にしてみてください。

村上 著者:村上

【CSS】iOSで画面を滑らかにスクロールさせる方法

iOSの端末で縦に長い画面をスクロールさせた時に、慣性スクロールが効かず、途中でつっかえるような、ぎこちない動きになってしまったときの対処法です。
と言っても対処法というほど難しいことはなく、そのスクロールする要素に対して -webkit-overflow-scrolling プロパティを適用するだけです。
具体的には下記のとおりです。

<div class="scroll">
    <p>スクロールさせたい要素です</p>

    // 以下、要素の中身を記述
</div>
.scroll {
    height: 300px;
    overflow: scroll;
    -webkit-overflow-scrolling : touch;
}

重要なのは、4行目の -webkit-overflow-scrolling : touch; です。
これを指定することで、慣性スクロールが有効になります。

この -webkit-overflow-scrolling プロパティは、値に auto もしくは touch を指定します。
なお、デフォルト値は auto で、この場合は慣性スクロールが適用されません。

 

ということで、iOS で慣性スクロールを適用する方法でした。
この指定があるのとないのでは、実際に使っているときの感覚に大分違いがあるので、スマートフォンでの閲覧が考えられる場合は、記述しておいた方が無難だと思います。
スマートフォンでのスクロールがカクつくと、ここまでなのか!と意外なくらい、ストレスを感じました。

村上 著者:村上

【CSS】改行された文章で2行目以降の文字の始まりを字下げする方法

タイトルだけだとわかりにくいですが…要するに下の画像のように表示する方法です。

こちらは先日上司に、「これをやりたいんだけど方法を知ってる?」と聞かれて調べたのがきっかけです。
が、その時は既にやり方をご存知だった先輩がお答えしてくださいました。

 

使うCSSのプロパティは text-indent です。
文章の段落などの一行目のインデント幅を指定する際に使用するプロパティで、負の数を指定することもできます。

で、上の画像のように表示するには、下記のように記述します。

p{
    width: 200px;
    text-indent: -1em;
    padding-left: 1em; 
}
<p>※長い文章を書いたときに、2行目以降の始まりを字下げする方法です。<\p>

上のコードでは、まず text-indent を使って、一行目を左に 1em だけずらしています。
が、このままでは、ブラウザウィンドウの左端にめり込んでしまうため、padding-left プロパティで、p要素全体を 1em 分だけ、右に移動させています。
やっているのはこれだけ!
ちなみに、width は改行させるためにわざと入れているので、字下げには直接関係はありません。

勿論、字下げの幅は変更できますので、例えば【!注意!】のような文字分だけ、少し長めに字下げする、ということも可能です。

 

質問されるまで、このプロパティを知らなかったのですが…調べるたびに新しいプロパティがポコポコと出てくる感じがします。
全部覚えるのは無理にしても、少なくとも実際に調べて使ったものに関してはきちんと覚えておきたい…!
ちなみに、今のお気に入りは calc() です。
これ凄く便利!

村上 著者:村上

【jQuery】要素直下の子要素を取得する方法

これまた業務中に方法を調べたものについてまとめ。
今回は、指定した要素の直下の子要素を取得する方法です。

参考にさせていただいたサイトはこちら。

jQueryで子要素を取得する方法:children(), find()
http://uxmilk.jp/10873

子要素を取得する方法には、children() メソッドと、find() メソッドを使う、二通りの方法があります。
なお、私は children() メソッドを使いました。

 

使い方はこんな感じ。

var children = $("#parent").children("span");
<div id="parent">
    <span>子要素です</span>
</div>

上記のようにすると、idparent が指定された要素の直下にある子要素の span を取得できます。
要素名を指定すればOKなので、id名 や class名 がわからなくても使うことができます。

 

取得したい子要素の class名 や id名 が分かっている場合は、find() メソッドを使用します。
サンプルコードはこちら。

var children = $("#parent").find(".children");
<div id="parent">
    <div class="children">子要素1です</div>
    <div class="children">子要素2です</div>
</div>

こちらを実行すると、id 名が parent 要素の子要素である class 名が children が指定された要素を取得することができます。
なお、この find() メソッドは、子要素だけでなく、孫要素も対象となっているので、子要素の中にさらに class=children が指定された要素があれば、その孫要素も取得できます。
一括でごっそりと要素を取得したいときに便利そうですね。

 

ということで、以上、要素直下の子要素を取得する方法でした。
また、昨日の記事で紹介した、クラス名を取得する attr() メソッドをあわせて使えば、親要素が parent である span 要素のクラス名を取得する、ということも出来ちゃいます。
単体では使い道があまりないかもしれませんが…こういった合わせ技をしたいときにすごく便利なメソッドですね。

なお、昨日の記事はこちらから。

【jQuery】要素に指定したclass名などの属性の値を取得する方法

こちらも参考になれば幸いです。

村上 著者:村上

【jQuery】要素に指定したclass名などの属性の値を取得する方法

HTML要素に指定された class 名や id 名などを取得する方法です。
私は今回、class名を取得するのに使いました。

 

使用するメソッドは「attr()」です。
サンプルコードはこちら。

// div要素のclass名を取得
var className = $("div").attr("class");

<div class="sample">DIV要素です</div>

上記を実行すると、変数 className には div要素のクラス名である「sample」が代入されます。

属性の取得についてはこんな感じです。
とても簡単でした!

 

また attr メソッドは、属性を取得するだけではなく、追加することもできます。
サンプルコードはこちら。

// div要素のid名にsampleと指定
$("div").attr("id", "sample");

<div>DIV要素です</div>

こちらを実行すると、div要素に id=”sample” が追加されます。

classの追加なら .addClass() メソッドもありますが、こちらの attr() メソッドは、属性名と値を指定できるので、class以外にも、id、href、type、value なんかも追加できます。
また、下記のように属性を一度に複数追加することもできるので、コードがすっきりして分かりやすいです。

$("div").attr({id : "sample",
               class : "text"});

 

追加があるなら削除もできる、ということで、属性の削除には removeAttr() メソッドを使います。

// div要素のclass名を削除
$("div").removeAttr("class");

<div class="sample">DIV要素です</div>

上記を実行すると、class属性が削除されます。

このあたりはセットで覚えておくと良さそうですね。

 

ということて、要素に指定された属性の値を取得する方法でした!
class名に○○が指定された要素を取得、というのは使用したことがあるのですが、divに設定されたクラス名自体を取得する、というのはやったことがなかったので、今回調べてまとめてみました。
似たような箇所で悩んでいる方は、是非ご参考にしてください。

村上 著者:村上

【Android Studio】「パッケージorg.apache.http.clientは存在しません」が発生した時の対処法

Androidアプリをビルドした時に遭遇したエラーその3。
ちなみに、これがラストです。

 

今回は、「エラー: パッケージorg.apache.http.clientは存在しません」というエラーです。
アプリ内で、org.apache.http.client をインポートしているのですが、こちらが存在しないためインポートに失敗して発生したエラーのようです。

なお、今回参考にさせていただいたサイトはこちら。

エラー: パッケージorg.apache.http.clientは存在しません への対策
http://www.what-a-day.net/entry/2016/12/11/124959

対処法はいたって簡単。
build.gradle に「useLibrary ‘org.apache.http.legacy’」を追加するだけです。

android {
    compileSdkVersion 19
    buildToolsVersion "19.1.0"

    useLibrary 'org.apache.http.legacy' /* この行を追加 */

    defaultConfig {
        ……
    }
}

あとは普通にビルドすれば、他のエラーがない限り成功するはずです。

もしくは、下記のように記述してもOKとのこと。

dependencies {
    compile files('libs/org.apache.http.legacy.jar')  /* この行を追加 */
}

こちらの方法は試していないので、有効かどうかはわかりませんが、1つ目の方法を試したところ、ビルドに成功しました。

 

とても簡単ですが…以上、「パッケージorg.apache.http.clientは存在しません」エラーの対処法でした。
今回、様々なエラーに遭遇しましたが、すべて検索結果に簡単に引っかかるものばかりだったので、そこまで苦労せずに済みました。
もし、同じエラーにお困りの場合は、こちらの記事を参考にしていただければと思います。

村上 著者:村上

【CSS】テーブルのセルの横幅を均等にする方法

テーブルで表を作成するとき、覚えておくと便利そうなスタイルが table-layout というプロパティです。
先日初めて使いましたが、このプロパティを適用すると、テーブルのセルの横幅が均等になるので、なかなか見やすい表を作成できました。
ただ、表示させるデータにもよるかな。

 

サンプルは下記のとおりです。

上は、表の横幅を指定しただけのテーブルで、下は table-layoutfixed を指定したテーブルです。
上記のように、横幅が均等になるので、類似データを表示するときに重宝しそう。

下の表のコードは下記のとおりです。

<table border="1" id="fixed">
    <tr>
        <th>月曜日</th>
        <th>火曜日</th>
        <th>水曜日</th>
        <th>木曜日</th>
        <th>金曜日</th>
        <th>土曜日</th>
        <th>日曜日</th>
    </tr>
    <tr>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday</td>
        <td>Saturday</td>
        <td>Sunday</td>
    </tr>
</table>
#fixed {
    width:800px;
    table-layout: fixed;
}

見てわかる通り、table-layout: fixed; を指定しているだけです。
なお、table-layout プロパティは、テーブルの横幅が指定されていないと有効にならないため、必ず width プロパティを指定しましょう。

ちなみに、table-layout を適用したうえで、特定のセルのみの横幅のサイズを指定することもできます。
その場合は、横幅を指定したセル以外のセルは、引き続き均等の横幅で表示されます。

 

ちょっとしたことですが、セルの横幅が揃うだけでも、見やすさは大きく影響されますね。
また、テーブルに table-layout: fixed; を指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあるのだとか。
行数が多いデータを扱う場合は、積極的に使っていきたいですね。

以上、テーブルのセルの幅をそろえて、見た目を整える方法でした。

村上 著者:村上

【CSS】IEでのみ適用されるスタイルを指定する方法

今回は久しぶりにスタイルシートについての記事です。
Chromeとかでは問題ないのに、IEで閲覧した時だけ、ここのアイコンの位置がずれる…ってことあるかと思います。
そういったときに、IEでのみ余白のサイズを○pxにするなど、ブラウザを指定してスタイルを適用する方法です。

参考にさせていただいた記事はこちら。

IE11にのみ適用するスタイルシート – Qiita
https://qiita.com/eturlt/items/d43b1e19d7878ed41456

 

記述方法は、下記のとおりです。

image {
    width : 300px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    image {
        width : 250px;
    }
}

上記のようにメディアタイプを指定し、閲覧に使われているブラウザが IE だと判断したら、その中で記述した CSS を適用するという方法です。
こちらを使うと、例えば上記のコードでは、Chrome などで閲覧したときは画像の横幅は 300px で表示されますが、IE で閲覧したときのみ、画像の横幅は 250px で表示されます。
こちらを指定したところ、狙い通りに IE でのみ特定のスタイルを指定することができました。

が、こちらの方法、実はあまり推奨されていない方法なのだとか。
そのことについてまとめてあるサイトはこちら。

-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 / JeffreyFrancesco.org
https://jeffreyfrancesco.org/weblog/2017042601/

また、こちらの方法では、依然として Microsoft Edge でデザインが崩れたままでした。

 

やはり IE、Edge は癖があって苦手です…!
が、とりあえずは IE では意図したとおりのデザインで表示させることができたので、一旦これでOKとしようかな…。
もし、他にいい方法があるようでしたら、あらためてご紹介します。