著者アーカイブ asaba

asaba 著者:asaba

【javascript】クロージャは即時関数で囲むとより効果的

今回はクロージャを使っている中で少し躓いたことを綴ります。

クロージャとは、関数の中に関数が入っている状態のことを指し、スコープ内の変数を関数に渡したい時によく使われます。

javascripterにとっては基本中の基本ですが、恥ずかしいことに下のような間違いを犯してしまい手こずる羽目に・・・。

 

</pre>
document.body.onload = addElement;
var json = {
ハンバーグ: {
分類: '今日はハンバーグを食べました。ボリューム満点!',
主成分: 'タンパク質'
},
カレー: {
分類: '暑い夏には激辛カレーが一番!',
主成分: '炭水化物'
},
親子丼: {
分類: 'ふわふわトロトロ懐かしの味!',
主成分: 'タンパク質'
}
};
function addElement () {
for (var item in json) {
// 新しい div 要素を作成します
var newDiv = document.createElement("div");
// いくつかの内容を与えます
var newContent = document.createTextNode(json[item]['分類']);

newDiv.addEventListener('click', function() {
sample (json[item]['主成分']);
}, false);

// テキストノードを新規作成した div に追加します
newDiv.appendChild(newContent);

// DOM に新しく作られた要素とその内容を追加します
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
}
function sample (e) {
var component = e;
console.log(component);
}
<pre>

 

addEventListenerの中の関数にjsonの要素を指定しています。本来ならば順に「タンパク質」「炭水化物」「タンパク質」と

出したかったのですが、生成されたdivの中身をクリックすると全ての要素に一番最後の「主成分」要素である「タンパク質」

が格納されてしまっています。

これは、格納しようとした値が保持できないために起きる事故です。

この場合は即時関数で実引数にjson要素を持たせればちゃんと値を保持したまま回ってくれます。

もっと沼るかと思いましたが即時関数のことを知っていたのでさくっと直すことが出来ました。

正しくはこんな感じです↓

 

</pre>
(function(n) {
newDiv.addEventListener('click', function() {
sample (n);
}, false);
})(json[item]['主成分']);
<pre>

 

reactをやっている限りはまあ使うことはないと思いますが(mapがありますしね)生のjavascriptを触るうえで覚えておくと

クロージャと即時関数まとめて理解できるので損はないと思います~。

 

asaba 著者:asaba

【react】react-tagcloudの使用感について

snsでバズっているワードをタグクラウドで出したくてjqueryとかで色々探していたのですがjqueryプラグイン

同士の競り合いを起こしたり古いバージョンのjqueryが必要だったりとやたらと面倒だったのでnpmの

react-tagcloudというプラグインの力を少しお借りしました。

名前の通りreact向けにタグクラウドを生成してくれるnpmのパッケージで、規約(決まったコード)が少ない

ので比較的自由度が高く少しのアレンジでタグクラウドをカスタマイズすることができます。

 

</pre>
--------render------

const values = ["like vegetable", "like meet", "like fish"];
const data = [];
for(i=0; i < values.length; i++){
data[i] = { value: values[i], count: 5 };
};

--------return-------

<TagCloud minSize={5}
maxSize={35}
tags={data}
onClick={tag => this.tagClick(`'${tag.value}'`)} />
<pre>

 

これは配列に格納した値を順にTagCloudのプロパティに設定するだけのコードです。

(自作ですがconosle.logで最終的に値を取れたので載せておきます)

render内でdata[i] = { value: values[i], count: 5 };と二つのオプションがありますが、valueは

タグにしたい文字列、countはタグの大きさを指定しています。20でもかなり大きいので10前後にして

おいたほうが見栄えがいいかもです。

 

次にTagCloud内の説明になりますが、tags={data}で上でぶん回した配列の値を指定しています。

onClickの書き方がちょっと特殊で処理内に`’${tag.value}’`と書いてありますが

これは格納してあったタグの値つまり”like vegetable”, “like meet”, “like fish”を指定しており、処理も

値別に分けることができます。

 

簡単な説明ですが以上になります。

このコード量でタグクラウドの基本的な動きを抑えられるので、ブラウザで化けなければ採用できるかもです。

タグクラウドのプラグインの中でも一番わかりやすくて余計なことが書いていないので、同じような

機能を探している人におすすめのプラグインです。

 

asaba 著者:asaba

wi-fiを再接続したらslackが真っ白になり何も表示されなくなった時の話

今回はslackの話です。

自分はwi-fiを自動接続する設定のままノートpcを色々な場所に連れまわしていたのですが、ある日その状態で

slackを開くと一番最初のチャンネルのみなぜか真っ白になって何も表示されなくなってしまいました。

他のチャンネルを試してみたのですが、こちらは至って普通(返信もレスポンスも正常に返ってくる)に

機能します。しかも、普通のブラウザで見るとこちらは正常に動いていることが分かりました。

ますます分からない・・・。

 

実はこれ自体の解決策簡単で、ただpcを再起動するだけでチャンネルを復活させることができます。

後は、wi-fiの自動接続をoffにしてその都度繋げることでこれを防ぐことができます。がまだ具体的な原因が

わかっていません・・・。移動先で仕事をする場合に絡まれたら厄介なので具体的な解決策が見つかりましたら

随時載せていきたいと思います。

wi-fiの自動接続をoffにする方法については、設定ページにてアダプターのオプションを変更する->指定のpcを右クリックで「状態」を

クリック->ワイヤレスのプロパティをクリック->このネットワークが接続範囲内に入ると自動的に接続するのレ点を外す。

 

asaba 著者:asaba

【cordova】cordovaのプラグインで天気予報を取得する方法

コルドバプラグインの中でも比較的メジャーなプラグインの一つであるcordova-plugin-geolocationですが、

このプラグイン使えば使うほど汎用性の高いプラグインだとじわじわ思い知らされます。

例えば、今いる自分の位置情報を取ってきたり、店舗や施設の位置情報を取って更に機能を展開したりと

短いコードですぐ取得できるので初心者にも易しい取説となっております。

これだけでも便利なのですが、オプションを変更するだけで天気予報も取得できることを知って自分の中で

更に評価が上がっております。

これが使えば天気予報を教えてくれたりその天気の情報によって振る舞いを変える機能を作ったりと

多岐に渡る活躍が期待できそうです。

サンプルコードですが、数十行で事足りるのでこれから実装したいと考えている方は参考にしてみてください。

</pre>
// Success callback for get geo coordinates

var onWeatherSuccess = function (position) {

Latitude = position.coords.latitude;
Longitude = position.coords.longitude;

getWeather(Latitude, Longitude);
}

// Get weather by using coordinates

function getWeather(latitude, longitude) {

// Get a free key at http://openweathermap.org/. Replace the "Your_Key_Here" string with that key.
var OpenWeatherAppKey = "Your_Key_Here";

var queryString =
'http://api.openweathermap.org/data/2.5/weather?lat='
+ latitude + '&lon=' + longitude + '&appid=' + OpenWeatherAppKey + '&units=imperial';

$.getJSON(queryString, function (results) {

if (results.weather.length) {

$.getJSON(queryString, function (results) {

if (results.weather.length) {

$('#description').text(results.name);
$('#temp').text(results.main.temp);
$('#wind').text(results.wind.speed);
$('#humidity').text(results.main.humidity);
$('#visibility').text(results.weather[0].main);

var sunriseDate = new Date(results.sys.sunrise);
$('#sunrise').text(sunriseDate.toLocaleTimeString());

var sunsetDate = new Date(results.sys.sunrise);
$('#sunset').text(sunsetDate.toLocaleTimeString());
}

});
}
}).fail(function () {
console.log("error getting location");
});
}

// Error callback

function onWeatherError(error) {
console.log('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
<pre>
asaba 著者:asaba

【node】nodistを使ってもnode.jsのバージョンが変わらない時の対処法

前回は、nodistでnode.jsのバージョンの変更する方法を書いていましたが、これを使ってもバージョンが

変わらないよ~という方向け(というか自分向け)に対処法を書いていきます。

nodistインストール後にnode.jsをインストールした場合は、この「nodist 8.0.0」というおなじみの

インストール方法でサクッとバージョン変更できるのですが逆の場合つまりnode.jsが先にある若しくは

node.jsをインストールした後にnodistをインストールした場合はnodistのコマンドが効かず、先に存在してい

たnode.jsのコマンドが優先して働いてしまうみたいです。なので、実際に違うバージョンのnode.jsをインスト

ールできてもそれ以降はnodistコマンドが邪魔されたままでnode.jsのコマンドを入力している状態となって

いる訳です。

自分の場合は、windows左下のスタート画面内の設定(歯車のアイコン)を押してwindowsの設定という

ページに移動します。真ん中の検索欄で、システム環境変数の編集と検索をしてください。

 

 

すると、予測ワードにシステム環境変数の編集というワードが出てくるのでこれをクリック。

すると、次のようなページに移り変わります。ここで右下の環境変数というボタンをクリックします。

 

 

すると、下記のようなページがでてくるので下の欄からpath変数を探して編集を押してください。

 

 

ここで各アプリのパスが列挙されますが、その中でnodistとnode.jsのパスに着目します。この時に

node.jsのパスがnodistのパスより上にあればビンゴです。nodistのパスを「前へ」コマンドでnode.jsより

上にくるようにしてok若しくは適用を押してコマンドを再起動してnodist 8.0.0を実行してみましょう。

その後にnode -vで確認すると正常にバージョンが変更できていることがわかると思います。

この方法を知るまではバージョンの変更方法がわからなくて詰みかけていたので本当に助かりました。

同じような症状で困っていたら参考にしてみてください。

asaba 著者:asaba

【node.js】node.jsのバージョンが8以下だとcreate-react-appが使えなくなりました

react初級者が手っ取り早くreact開発をするのに便利だったcreate-react-appですが、知らない間にnodeの

バージョンが低いとcreate-react-appでテンプレートを作れなくなっていました。

今の自分のnodeのバージョンが6.3.10だったのですが、試しにcreate-react-app toyBoxで適当にテンプレを

作ろうと思って実行したところ、このようなエラーが出ました。


Y<span style="color: #ff6600;">ou are running Node 6.10.3.</span>
Create React App requires Node 8 or higher.</span>
Please update your version of Node.</span></span>

分かりやすい。このエラーが出た場合は今のnodeから8以上のnodeに切り替えてください。

nodistをインストールしている場合は、コマンドでnodist +8.0.0でnodeのバージョン(8以上なら何でもいい)を

インストールします。その後に同じくコマンドでnodist 6.11.3と打ち込んで現在のnodeから実際に8.0.0に

切り替えます。

node -vでバージョンを確認して8.0.0になっていれば切り替え成功です。ここで再度create-react-app toyBox

を打ち込んでみましょう。緑色の文字でsuccessが出れば成功になります。

もし、正常に動かないまたはnode.jsのバージョンが変わらなかった場合は一回node.jsをアンインストール

することをお勧めします。

 

asaba 著者:asaba

【cordova】cordova-plugin-email-composerで簡単にメールフォームを作成する

cordova-plugin-email-composerは、導入するだけでメールのフォームをそのままアプリに取り入れることができます。

よくあるメールを送ってお問い合わせしてくださいというアレです。アプリでは主に設定画面やパスワードを忘れたときのために

導入されることが多いと思われます。

導入方方法もとても簡単で、以下の通りに通常のプラグインと同じようにサンプルを入れるだけで機能してくれるのでおすすめです。


mailSend(){
  window.cordova.plugins.email.isAvailable(function (hasAccount) {
    if (hasAccount) {
      window.cordova.plugins.email.open({
        to: "username@gmal.com",
        subject: "テストメール",
        body: "こんにちは!",
        isHtml: false
      });
    } else {
      window.ons.notification.alert({
        message: "There is no email client available."
      });
    }
  });

subjectとbodyにapiなどから取得した値を格納した変数を入れることが出来れば使い幅がぐっと上がりそうですね。

asaba 著者:asaba

【Excel】縦列のセルを一括で横列に張り付ける方法

今回は、縦一列に並んでいるセルを横一列に一挙にペーストする方法を載せていきたいと思います。

方法はとっても簡単。ペーストしたいセルをコピーした後に形式を選択して貼り付け->形式を選択して貼り

付けを選択。

 

excel2010ならば上記のような画面がでてくると思います。

形式を選択して貼り付け後、以下のようなダイアログがでてくると思います。

 

この中の、右下にある行列を入れ替えるのチェックボックスにレ点をつけてokを押すだけで縦横を

変化させてコピペすることができます。

 

※コピー前

 

※コピー後

 

忘れないうちにメモしましょう。

asaba 著者:asaba

【Excel】ヘッダーの編集方法と戻り方※自分用

Excelでドキュメントを作る時に見出しとしてヘッダーを設けることでどのページが先頭なのか識別することができます。

今まではあまり意識していなかったのですが、ページ数が多かったりするときはこのヘッダーを使うことでかなり見やすい資料に

アレンジすることができます。

さて、方法ですがExcel2007では挿入リボンの中のヘッダーとフッターをクリックします。

 

 

すると、今まで作っていたエクセルが分割されて再出力されているのが分かります。左端にヘッダーという文字が書かれているので

無事にヘッダー編集画面に移動出来たことが分かります。

 

 

ここの右端に何か適当にヘッダーにしたい文字を入力するだけで印刷画面時にヘッダーとして組み込まれていれば成功です。

また。ヘッダーを編集した後はどうやって戻ればいいのと思ったのですが、Ctrl + zで何事もなく元のエクセルの画面に戻れます。

このコマンドは基本作業を戻したい時に使うのですが、ヘッダーを編集した作業はなぜか元に戻らず編集したままになっています。

自分の中では一番簡単な戻り方だ捉えているのでそこはお好みでお願いします。

ヘッダーを上手く使って綺麗なExcelドキュメントを作れるように心がけたいですね~。それでは。

 

asaba 著者:asaba

【java】HasuMapを使ってキーと値を一緒に取得する※自分用

javaにはphpのようにforeachで回す手段が無く、代わりに拡張for文を使ってキー・値を取得する方法が用意されています。

例えば、hasumap配列に格納したキーと値を取り出すには以下のようにentrySet・getKey・getValueを使って取り出すことができます。

</pre>
import java.util.HashMap;
import java.util.Map;

public class Main {

public static void main(String[] args) {

Map<String, String> map = new HashMap<>();
map.put("name", "asaba");
map.put("job", "programmer");

for (Map.Entry<String, String> entry : map.entrySet()) {
System.out.println(entry.getKey() + " : " + entry.getValue());
}
}
}
<pre>

hashmapを使う時はimportでimport java.util.HashMap;とimport java.util.Map;と定義しないとno such no fileのエラーが

出るのでそこは注意しなければですね。

片方だけ取ってくる方法も存在するのでそこは作りたいものに合わせて調整する必要があります。(簡単ですが)