カテゴリーアーカイブ 言語

asaba 著者:asaba

mapboxのポップアップについて

今回は、mapbox上でピンをタッチすると、画像がポップアップとして出てくるコードを紹介します。

 

ポップアップを付けるときに、画像を撮影した場所にピンを付与して、それをクリックすると

画像がポップアップとして出てくる機能を追加する作業をしていたので備忘録として載せておきます。

 

ざっくりですが説明します。

ポップアップを表示するメソッドを作ったあとに


var el = document.createElement('div');

でピンのオブジェクトを生成します。

 

その後に

 
popup = new mapboxgl.Popup({offset: [16, 0]})

で、ポップアップオブジェクトを生成して使用可能にします。

 

次に、画像をポップアップとして扱うコードなのですが

.setHTMLメソッドを使って表示します。

本来は、htmlの文字列を表示する役割ですが、ここでは

 

 
src = '+image+'

引数のimageを取って中の画像のurlを渡すことができます。

 

ピンが複数立っている時は、そのピンをクリックするときに引数に画像のurlを持たせて

そのurlに合わせて表示するポップアップを変えていると考えるとわかりやすいかもしれません。

 

後は

setLngLat([lmg,lat])

 

 

で、引数のlatとlngを渡せば撮影した場所にピンが立ちま

す。

以上ですが、ここでは肝だけ説明させていただきました。

 

mapboxは柔軟性が高く、細かい箇所まで地図をカスタマイズできるので

慣れてきたらシムシティ感覚で楽しくなってくると思います!

  • この記事いいね! (0)
著者:杉浦

変数や関数の使用されている場所を探す

 変数や関数の使用されている場所を探すにはファイルを横断して検索を掛けるという方法が考えられます。正規表現を用いた正規表現によっていくらかは絞り込めますが、完璧に行うには正規表現のみでは力不足です。
 変数名や関数名といった識別子を検索すれば、ある程度、変数や関数の使用されている場所を探すことができます。

 このままではhogeやhogebも検索結果に含んでしまいます。識別子でない文字で括られていることを判断する正規表現で、余分な識別子を検索結果から弾きます。

 [^a-zA-Z\$_]の部分は言語によって異なります。上記の正規表現はJavaScriptの規則に従っています。

JavaScript の識別子は必ずアルファベットかアンダースコア (_) かドル記号 ($) から始まらなくてはなりません。続く文字は数字 (0-9) も使えます。JavaScript は大文字・小文字を区別するため、使えるアルファベットは “A” から “Z”(大文字)と “a” から “z”(小文字)です。
引用 変数 – JavaScript | MDN

 ざっくばらんに行うならこの方法で十分ですがこの方法には問題点があります。問題点はスコープを無視するという点と、変数と関数と文字列の区別をつけない、という点にあります。下の様なコードを検索した場合、一つ目の変数hogeの呼び出しカ所を知りたいのに、関数名hogeや文字列hoge、即時関数内のhogeを検索結果に含んでしまいます。

var hoge = 0;
console.log(hoge);
(function hoge(){
	var hoge = 1;
  console.log(hoge);
})();
console.log(' hoge ');

 スコープを無視する、変数、関数の区別がつかない、という問題の単純な解決法は同名の識別子で宣言を行わないことです。固有な識別子をそれぞれが持つならば、このような問題は起こりません。

  • この記事いいね! (0)
著者:杉浦

早めに処理を抜けるソースコード

 条件文を重ねてネストが深くなったソードコードは往々にして読みにくいものです。何々なら処理を行うという意味で作られた条件文を何々なら処理を行わないという条件文に書き換えることでソースコードを読みやすくできることがあります。
 次のコードは、もしデータが未定義でなく、データのidが数字ならば、処理を行う、という動作をそのまま書き下したソースコードです。

function (data){
	if(data !== undefined){
		if(typeof data.id === 'number'){
			//処理
		}else{
			return;
		}
	}else{
		return;
	}
}

 実際のコードでは”//処理”の部分が大きくなり、else以下を読もうとした時このelseの元のifはなんだったか、となることがあります。ならなくともifの中を覚えておくことに記憶領域を一部占有されます。
 このコードの条件文による分岐で行いたいことは”条件に合えば処理を行う”ということであり、これは”条件に合わなければ処理を行わない”と言い換えられます。この言い換えの通りに先のコードを書き換えると次の様になります。

function (data){
	if(data === undefined){
		return;
	}
	if(typeof data.id !== 'number'){
		return;
	}
	//処理
}

 元のコードではelse以下の文を読む時ifの中を記憶したまま”//処理”の部分を通る必要がありましたが、書き換えたコードならば処理を行わない条件に当てはまった場合、処理を行わずに抜けるということがすぐにわかります。これにより条件文の中身を覚えておく必要がなくなりました。またこの例の場合、単純で短い条件文二つ程度なのでさらにまとめて下の様にするのもよいです。

function (data){
	if((data === undefined) || (typeof data.id !== 'number')){
		return;
	}
	//処理
}

 一見、data===undefinedの時にdata.idを参照することによってnull参照でエラーが起きる、と思えますがそうはならない言語が多数です。大体の言語には評価が決まった時点で評価を返す機能である短絡評価機能が備わっています。そのためdata===undefinedの時にはdata===undefinedを読んだ時点で条件はtrueと評価されif節の中に入ります。結果data.idは参照されずエラーは起きません。

  • この記事いいね! (0)
asaba 著者:asaba

おすすめの書籍

これからプログラミングを始めたい人が最初に考えがちなのが、どういった学習をしていけばいいかということだと思います。

自分は、この「気づけばプロ並みPHP」という書籍を使ってプログラミングの動きを体系的に学びました。

この書籍の良い所は、プログラミングの基礎だけでなく、サーバーやデータベースも業務で使われているシステムに限りなく近いスタンスで触ることができることです。

また、章ごとにコンポーネントを作っていくので、一つ一つ完成させてゴールを目指すことでモチベーションを保つことができるという点では大きいです。

(さすがにどこでエラーになったかはブラウザで自分でデバッグしなければいけませんけどね。)

キャラクターも可愛いのでとっつきやすいと思います。

また、PHPはブラウザだけでも動かすことができるので、これからプログラミングを始めたい人やコードの動きを改めて見直したいなって思う人には向いていると思いました。(swiftとかjavaだと環境設定も手間かかるし対応するOSも変わってきますしね)

自分が今まで読んできた書籍は、厚くはないものの記載されているコードがどういう時に使われるのかどう応用されるのか説明がないまま漠然とコードを書かされているような感じにさせられるものばかりだったので、これならネットで落ちているソースコードを真似てミニアプリでも作ったほうが身になるなって感じで途中でやめていました。

自分もまだ駆け出しの身で、作りたいものがあっても辞書引きしながらでないとうまく作れないので今でもたまに初心にかえってQiita見たり色々読み返したりしています。

一番大事なのは、つくりたいものが明確にあることですが、自分にあった書籍に出会うことも大事なのかなって感じます。

以上です。

  • この記事いいね! (0)
asaba 著者:asaba

JSXの中で即時関数を使ってみた

Reactでコードを書いていると、jsxの中でコードを埋め込んでコンポーネントを動かしたい時があります。自分は即時関数を使って処理を書きました。

 

 

即時関数は通常使う関数と違い、いちいち変数を宣言して関数を格納しなくても記述した時点で使うことができます。

 

ここでは少し使い方が異なりますが、自分の中での即時関数の解釈です。

 

コードの初めと終わりに{}で関数を内包していますが

java scriptで通常通り(()から即時関数を書き始めると関数と認められずエラーになります。

 

Reactを使ってJSXをいじりたいときはこの方法で記述します。

ユーザーの特定するもの(会員番号など)を値として受け取り

その値に沿ってコンポーネントを変化させたいときは便利です。

jsxを中からいじる方法は他にもあるかもしれないので

発見次第投稿したいと思います。

  • この記事いいね! (0)
著者:杉浦

ソースコード中のコメントした方がいいこと、悪いこと

 ソースコード中には自由にコメントを書くことができます。コメントの良い点はプログラミング言語の記法に縛られることなく自然言語で書き手の意図を読み手に知らせることが出来る点です。コメントの悪い点はソースコード中の文字数が増えるところです。
 良い点が悪い点を超える際にのみコメントを記述することが理想になります。しかしながら困ったことに読み手がどのような人かによって良い点が悪い点を超える瞬間は大きく左右されます。例えば、次のようなコードがあります。

array_object = Array.prototype.slice.call(array_like_object)//array_like_objectを配列に変換する

Array.prototype.slice.callはjavascriptで配列っぽいオブジェクトを配列として変換したい時によく使われる慣用句みたいなものです。”Array.prototype.slice.call”(完全一致)でググると約171,100件もヒットします。散々使われ倒しているため、javascriptをやり込んでいる少なくない人にとって、このコメントは余分な情報で邪魔者です。一方で、Array.prototype.slice.call(引数)という文面には引数を配列に変換するという意味の単語はまるで使われていません。これがarray_like_objectを配列に変換するコードだと連想することは難しいでしょう。初めて読んだ時は自分も何だこれとなりました。javascriptを学んでいる途中の人にはこのコメントは必要でありがたいものです。慣れという部分でコメントをするべきしないべきかが変わり境界は曖昧です。
 明確にコメントを行うべきでないという場合はソースコード中の記述がそのままコメントの内容と同じになるときです。javascriptのES6記法では配列っぽいオブジェクトを配列として変換したい時に次の様な記述ができます。

array_object = Array.from(array_like_object)//array_like_objectを配列に変換する

 コメントはいらないのではないかというくらい動作を連想しやすい記述です。そのまま英語として読めるくらいです。このような際にコメントは多くの人にとって邪魔なものになるでしょう。
 おまけに極端な場合を紹介します。
 情報を伝えないコメントは単に無駄なだけでするべきでないコメントです。コメントアウトされている過去のコードは特にこの手のコメントになりやすいです。
 コメント行がより多くのコード行を説明できる場合、コメントは有用になりやすいです。プログラム、ファイル、関数のようなまとまり全体を説明する場合、大体これにあてはまります。コメント十行でコード数百行を説明するような感じです。

  • この記事いいね! (0)
takahashi 著者:takahashi

Webブラウザで動くVimとWebAssembly

ふとニュースを見ていたら、こんな記事を発見。

テキストエディター戦争は「Vim」がまた一歩リードか、Webブラウザーで動作可能に – 窓の杜

LinuxをはじめとしたOSでよく使われるCUIテキストエディタ”Vim”を、なんとブラウザ上で動作するウェブアプリケーションとして移植してしまった方がいるらしい。

ソースのページである
Vim を WebAssembly に移植した – はやくプログラムになりたい

というサイトから、デモページに飛ぶことができるようです。
実際にアクセスしてみました。

おおおすごい!
本当にVimがブラウザで動いてる!!!

まさかJavascriptで一から書き直したのか…!?!?
と思ってしまいますが、実はVimを”WebAssembly”という形式のバイナリにビルドすることによって動作を可能にしたとのこと。

WebAssemblyとは、ブラウザ上で動作するバイナリ形式の規格で、現時点ではC/C++やRustなどといった言語からバイナリファイルを生成し、WebAssemblyに対応したブラウザ上で直接実行できるとのこと。

この辺りの記事が詳しそうです。
【2017年4月版】WebAssemblyとは?〜実際にC言語をブラウザで動かす〜 – Qiita

記事の中にはUnityで作られたゲームをWebAssemblyでブラウザ上で動作させてしまうデモもありました。すげぇ…
ただ、現時点ではWebAssemblyからDOMの描画ができないようで、今回のVimの移植では、描画部分はjavascriptを利用しているとのことです。

Webプログラマなのにこういうこと言ってしまうのもアレですが、実は自分はJavascriptが”嫌い”です。
その理由の一つに、ブラウザによって動作速度が異なる(非常に遅くなる)、という点があります。
ライトなWebアプリなら全く問題はないのですが、ブラウザ側でどうしても重い処理をせざるを得ない状況になると、いつも大きな悩みの種になります。

今後、WebAssemblyのようにブラウザ上でバイナリを動作させられる環境が整えば、こういった重い処理を高速化する際の選択の幅が広がることになるので、個人的にはとても嬉しい話です。

また、CやC++を得意とした方が、Webプログラミングに参加しやすくなるという意味でも、非常にいい流れなのではないかなと思います。

是非実用的に利用できるレベルまで発展していってほしいですね…!

  • この記事いいね! (0)
著者:杉浦

GETメソッドとブックマークレット

 HTTPはHyperText Transfer Protocolの略であり、HTMLなどのwebコンテンツを送受信する際によく使われています。GETメソッドはHTTPプロトコルの通信方式の一つです。GETメソッドはURLの末尾にパラメータを付加して通信を行います。URLはブラウザの履歴、サーバやファイアウォールのアクセスログなどユーザが意図しない内に様々な場所に記録されます。このためURLを得ることでその通信時のパラメータを得ることのできるGET方式で第三者に渡されるべきでない情報を扱うことは厳禁とされています。
 GET方式は通信内容を把握しやすく、改ざんしやすい方式です。この扱いやすさのため検索エンジン等の通信時の情報が第三者に渡されてもかまわない様な通信ではGET方式がよく使われます。GET方式の様な通信はURLをしかるべき形に加工してそのURLに移動するだけで任意の通信が行えます。実際、下の様なコードで手軽にwebサービスを利用できます。リンクは直下のソースコードを一行にしただけのブックマークレットです。
選択されているテキストを英語から日本語へ翻訳するgoogle翻訳

javascript: (function () {
	open('http://translate.google.com/translate_t?hl=ja&sl=en&tl=ja&q=' + encodeURIComponent(window.getSelection()));
})()

選択されているテキストの類語をWeblio辞書 類語辞典で検索

javascript: (function () {
	open('https://thesaurus.weblio.jp/content/' + encodeURIComponent(window.getSelection()));
})()

選択されているテキストの正規表現をREGEXPERで表示

javascript:(function(){
        open('https://regexper.com/#'+encodeURIComponent(window.getSelection()));
})()
  • この記事いいね! (0)
著者:杉浦

安全で整ったコードを作るためプログラムlint

 lintとはソースコードを厳密に詳細にチェックするプログラムの総称です。総称とある通り、多数の言語でlintは作成されています。
 規模や目的の複雑さにもよりますがプログラムを完全に想定した通りに動かすことは容易ではありません。また、想定外の問題が起きることも多々あります。lintはプログラムが動作不能になるような致命的な文法エラーのみならず様々なものを発見する目的で使用します。例えば、間違いを犯しやすい記述であるアンチパターン、インデントの乱れのようなコードスタイルのぶれなどです。lintはソースコードをコピペするだけで実行されるwebページの手軽なものから、様々な設定を行った上で複数フォルダ間を総じて検査するCLIのがっつりしたものまでさまざまな規模のものがあります。
 手軽なjavascriptのlintの一つとしてjshintというものがあります。このページはコピペだけでjavascriptの厳密なチェックを行ってくれます。
 以前記述した10行程度の簡単なコードをjshintにかけてみました。結果は下の図の通りです。

 セミコロンが抜けているという警告、未定義の変数が存在しているという報告がされました。前者は限られた状況、例えばブックマークレットや一行記述にコードを変形した際に、プログラムの挙動が変化したり、実行不能になったりする問題が起きます。今回のケースに限り後者は大きな問題です。この記述においてhoge_strはグローバル変数として扱われ名前領域の汚染など他の記述に影響を与えてバグの原因になりえます。
 非常に多くの場面で使われているオープンソースの一つであるjQuery中の一つファイルをjshintにかけた結果が下の図です。
 
 全体で130行程度のコードですが、完璧に記述されています。変数defineが未定義とされていますが、他のファイルとの連携のために記述されているもので、このファイルの処理中には一切登場しません。余談ですがこのファイルはjQueryのcoreフォルダ中で最も長いファイルです。上手く作られていますね。

  • この記事いいね! (0)
村上 著者:村上

【Swift】「Unexpectedly found nil while unwrapping an Optional value」エラーの対処法

最近、iOSアプリ開発に関する記事ばかりですが…今日も今日とて、アプリ開発中に遭遇したエラーについてです。

エラー文はこちら。

Unexpectedly found nil while unwrapping an Optional value

Google翻訳を使って翻訳したところ、「オプショナル値をアンラッピングしている間に予期せずnilが見つかりました」とのこと。
ある程度アプリ開発をしている人なら原因はすぐに分かるか、もしくはそもそもこのエラーが発生しないように対処済みかと思います。
が、Swift 初心者だと、オプショナル型が理解しづらく(実体験)、なかなかハマったのでまとめます。

 

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

どこよりも分かりやすいSwiftの”?”と”!” – Qiita
https://qiita.com/maiki055/items/b24378a3707bd35a31a8

まずオプショナル型がイマイチわからない…という人は、この記事よりもこのリンクを読みましょう。

 

さて、対処方法ですが、まずエラーが発生したコードがこちら。

var title: Sting! // オプショナル型

/* 何らかの処理 */

print(title!);

簡単に説明すると、上記のコードの title という変数は、nil(null)を代入できるオプショナル型です。
非オプショナル型と違い、代入された値がラップ(包み紙)に包まれています。
これのおかげで、nil を扱うことができています。
で、この変数にタイトルのテキストを代入するなどの処理を行い、結果を print() で出力しています。
が、このとき、何らかの原因で、title変数に値が代入されないことがあります。
そして、中身が nil の状態で、包み紙を剥がすアンラップの処理を行うと、エラーが発生します。
このエラーが、今回紹介した「Unexpectedly found nil while unwrapping an Optional value」です。

これを解決するために、アンラップの処理を下記のように変更します。

// 変更前
// print(title!);

// 変更後
if let unwrap_title = title {
    print(unwrap_title)
}
else {
    print("値が代入されていません")
}

なお、この方法を「オプショナルバインディング」と言います。

簡単に解説すると、新しいコードでは、まずオプショナル型の変数を if 文以降の定数に代入しています。
その結果が nil でなかれば、if 以下の処理が実行されます。
一方で、title を代入した定数が nil であれば、else 以下の処理が実行されます。
なお、title の値は unwrap_title に代入されていますので、こちらを利用します。
処理としては以上です。

 

最初に紹介したアンラップ方法は、「強制的アンラップ」といい、文字通り代入された値に関係なくアンラップの処理を行います。
この方法は、絶対に nil が代入されない変数に対してのみ使うようにしてください。
そうでなければ、オプショナルバインディングを使うことを強く推奨します。

私も最初はオプショナル型が全く理解できず、かなり苦労しました。
個人的には、実際にコードを書いてみて、どういうときにプログラムが落ちるのかを体験するとわかりやすいかなと思います。

  • この記事いいね! (0)