Fly higher! Sky is the limit!

webの現場で働く人のブログ

JSONジェネレータを作る(Vue.jsとかJavaScriptとか)

!!!いきなり完成品!!!!

See the Pen JSON GENERATOR by paradox_tm (@takumaro-web) on CodePen.

作成手順

1. JSONを用意して、HTML上に表示する。

{
    "name": "安室奈美恵",
    "sex": "女性",
    "age": "41"
}

私が今回利用したサイトはこちら(というかいつも利用している。)
http://hilite.me/

2. 値が変わるところを書き換えていく。

JSONジェネレータを作る(Vue.jsとかJavaScriptとか)

※ 大枠のmain要素に#generatorも追加してます。

JS - code

var createJson = new Vue({
  el: '#generator',
  data: {
    name: "安室奈美恵",
    sex: "女性",
    age: "41"
  }  
});

3. それぞれの値を変更できるようにinputタグを用意する。

これでリアルタイムにJSONの値を変更することができる。

JSONジェネレータを作る(Vue.jsとかJavaScriptとか)

エアロスミスは、バンドやし!バンド結成から48年やし(2018年現在)!

JSONをダウンロードするためのJSを記述

var test;
function json_create() {
  test = [
      {
          "name": "安室奈美恵",
          "sex": "女性",
          "age": "41"
      }
  ];
}

function json() {
  var data = JSON.stringify(test);
  var a = document.createElement('a');
  a.textContent = 'Download JSON' //ボタンの文言を定義
  a.download = 'test.json'; //JSONの名前を定義
  a.href = window.URL.createObjectURL(new Blob([data], { type: 'text/plain' }));
  a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');
  var exportLink = document.getElementById('download');
  exportLink.appendChild(a);
}json();

参考サイト https://kuroeveryday.blogspot.com/2015/07/javascriptExportFile.html

値をリアルタイムで監視し、生成するJSONの中身も書き換えていく

ここが今回のミソ。

function jsonGenerat() {
  test = [
      {
          'name': createJson.$data.name,
          'sex': createJson.$data.sex,
          'age': createJson.$data.age
      }
  ];
}

createJson.$watch('name', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
createJson.$watch('sex', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
createJson.$watch('age', function (newValue, oldValue) {
   document.querySelector('#download a').remove();
   jsonGenerat();
   json();
})
  • 生成するJSONの中身もinputタグで書き換えられた内容にする
  • ダウンロードリンクも新しいものになるように毎回上書きをおこなう

これでJSONジェネレータの完成!!!

あまり難しいテクニックもなく、このようなジェネレータを作ることができました。
あなたの日々の更新が少し楽になるかもしれません。

以上です。

WordPress(ワードプレス)の投稿内でJavaScriptを実行するTips

この記事は以下の現象の人におススメの記事です。

  • JavaScriptを記述したのになぜかpタグに書き換えられてしまう。
  • 複数人で更新しているため、できれば自分の投稿(固定)ページのみに適応させたい。
  • 事情によりサイト共通部分(php)は弄れない。

など

WordPressの投稿内でJavaScriptを実行する方法

以下のページを読めば、大体方法はわかる。

WordPressの記事内にJavaScriptを挿入する4つの方法
https://minory.org/wordpress-javascript.html

WordPressの投稿でjQueryJavaScriptを使う方法
https://itstudio.co/2015/07/24/4455/

こちらのページで解決されたら、この記事にはもう用がない。

しかし...

divで囲んでも『jQuery』と接頭辞をつけてもJSコードがpタグに書き換わってしまう場合

こちらの方法でpタグに書き換わってしまうのを阻止すればええやん」と声が聞こえてきそうだが、複数人でサイトを管理しており、勝手にプログラムを修正したら他の人にも影響が出てしまうので不可能という状況の場合、どうするか。

悩んだ結果...解決策が浮かんだ。

それは、JavaScriptの難読化だ。

JavaScriptの難読化

  • 難読化させることでpタグになるのを回避させる!
  • さらにセキュリティ面も向上するので一石二鳥!

我ながら、「キタコレ」と思った瞬間であった。

手順

http://utf-8.jp/public/aaencode.html

  1. 上記のサイトにアクセスし、自分がかいたJavaScriptを張り付ける
  2. 記事内にコピぺする

難読化できるサービスはいくつかあるが、とりあえず顔文字のやつは動いてくれた。

めでたし、めでたし。
少しでもお役に立てれば幸いです。

以上

無料画像編集ソフト「Pixlr Editor」の広告が邪魔だから、消すブックマークレットつくった。

普段、Photoshopを使用しているので私は必要はないんですが、作ってくれと頼まれたのでつくった。
以下のブックマークレットをブックマークに登録し、「Pixlr Editor」のページを開いた状態でポチっと押せば消える。

ソースコード

javascript:(function(){!function(c,b,a){a=c.createElement("script");a.src="//j.mp/1bPoAXq";a.onload=function(){b(jQuery.noConflict(1))};c.body.appendChild(a)}(document,function(a){a("body").css({"padding-right":"0"});a(".ad-wrap").remove()})})();

サイト

https://pixlr.com/editor/

【Web業界】新卒入社1年目の思い出と今思う11のこと。

初心に返るためこの業界に入ったときの思い出や今感じていることを述べたいと思う。 これからWeb業界で働きたい方や就活生の参考になればと。

11のことって多いけど、とりあえず駄文をダラダラと連ねてみる。

【その1】横文字やカタカナが多すぎ問題。

Web業界に限らずかもしれないが、何せ横文字やカタカナが多い。

  • 「これコミットしておいて!」
  • 「このタスクは..」
  • エビデンスは?」
  • アサインして~」
  • アジャイル開発や」
  • MTG(ミーティング)」
  • 「オンスケやで~」
  • 「リスケで。」
  • 「キックオフするぞ!」
  • 「クリティカルだ」
  • 「スコープは?」
  • 「ナレッジ共有」
  • 「ハレーションしてるやん」
  • 「FB(フィードバック)は?」
  • 「フィックスで!」
  • 「フェーズ1をスタートします」
  • 「ブレストしよう。」
  • 「この開発におけるベストプラクティスは?」
  • 「ペルソナを決めよう」
  • 「ボールを持ってんの誰?」
  • マイルストーンはいついつです。」
  • 「マージしといて」
  • 「●●マターでお願い」
  • 「ユーザーを意識して~」
  • リスクヘッジしよう」
  • リテラシー低くない?」
  • 「ローンチされた!」
  • 「リソース足りねぇー!」
  • ペンディングしておきます。」

英語ばっか使う無国籍ラップ!
日本語に心動くべきだ!
ジャパニーズヒップホップじゃねえのかよ!

キングギドラからもツッコミが入りそうなくらい横文字が多い。
業界の背景から仕方がないのかもしれないけど。

新卒1年目の時は「何言ってんだこいつ。ルー大柴か!」と腹の中で思いつつ、必死にその言葉をググっていたなー。
「パディング」「ペンディング」「ペッ●ィング」とごっちゃになっていたのが懐かしい。

もちろん、今ではめっちゃ多用している。

【その2】挨拶が返ってこない。

元々体育会系出身の私は【礼に始まり、礼に終わる】で生きてきたこともあり、これは衝撃だった。
ただ、会釈や今でも消えてなくなりそうな声での挨拶は返ってくる。
たまに元気な人の挨拶だけは、職場に鳴り響く。

制作現場なんか特に静かだ。
静か過ぎて気が狂いそうになったのを覚えている。

大分この静けさに慣れてきたが、それでも今でもお声がけや挨拶は心掛けている。
うざがられてるかもしれないけど..

【その3】わずか50cmとなりの席からメールでお説教される。

これは本当にびっくり。
口で説教すればいいのにメールでお説教される。
しかも、共用メール(皆が見れるメール)で怒られる。(=晒される。)
こちらとしては、話しかけて謝った方がよいのか、メールで返信した方がいいのかわからない。

マジで悩んだ。

その時は口頭で「申し訳ございません。」と言ってみたが話すとそんなに怒っていなかったり。
メールの文章から受ける印象と口頭での印象ではかなりの差があった。

これが原因で、神経性胃炎(※)になったのを覚えている。
常に喉に詰まりものがあるような状態で、吐き気とゲップが止まらなかった。

コミュ症の人が多いのか、こういったメールでお説教する人が多い気がする。
何かあったら口で言おうぜって今でも思う。

※ 不安や緊張などのストレスにより自律神経のバランスが乱れ、胃の不調をきたした状態。
  精密検査をしてもどこも悪くないため、通称イモと呼んでいた。

【その4】超有名企業やWebサイトや芸能人などの画像を扱える。

え!このサイトもウチが!?みたいな感動が味わえる。
世の中に出ていない情報を先に知ることができたり、芸能人の画像を加工できたり。
社外秘のため周りに言えないけど、世の中に出た時に優越感に浸れる。

【その5】学歴不問!やった分だけ力になる世界。

やったか、やってないか。
やった分だけ力になるし、ソッコー学んだ技術を仕事で活かせる業界だと思った。
有名国立大学を出たとか、有名私立を出たとかそんなん関係なくて。

新卒一年目のときは、寝る間も惜しんで勉強していた記憶がある。
明らかに周りとレベルが違いすぎたから。
一時期は学歴コンプレックスを抱いたりもしたけどそんなの関係ないことに途中で気付いた。

やってるか、やってないか。
手を動かしたか、動かしてないか。

超絶シンプル。

やったら、力になる。

Web業界に限らずかもしれないけど。
このブログ然り、今でも継続的に学習は続けている

【その6】好きなことをガチで仕事にできる。

Web制作やパソコンでモノづくりが大好きな人にとっては天職かもしれない。

パズルを組み立てていくような感覚。
まるでゲームをやっているかのような。

そこにはタイムリミット(納期)が設けられていて、たまに徹夜したり、クッソ残業したり、
そういう意味では、趣味の延長に近いような感じ。

逆に好きじゃない人はこの業界に来るべきでないと思う。
多分苦痛でしかないし、別の道を歩むべきかも。

早々にリタイアする人は、大体好きじゃない人が多い印象。

※※注意※※ その能力が会社に平等に評価されるかどうかは、会社によるので知りません。

【その7】Googleに載っている情報がもはや自分の能力になる。

周りの先輩方が忙しすぎて自分で調べるしかなかったのを覚えている。
そして、気付くとググる能力がめちゃくちゃついた気がする。

個人的な見解だが、質問に対してググって答えれればもう自分の能力だと思ってよいと思ってる。
覚えることが多すぎる業界なので、全部覚えることは不可能。
なので、どれだけ迅速にググって正しい答えを導きだせるかが大事かと。

何度も同じような内容をググっていれば、知識として頭にも入るし次回以降に活かせる。
まさに、Google先生のデータベースがもはや自分の能力の一部になると思う。

【その8】新しい技術やモノが大好きで、自発的に学習できるかが肝

なんだか、採用情報に記述されていそうな内容だが、
業界的に移り変わりがめちゃくちゃ激しいのでこれは本当に大事なことだと思う。

新卒の時に一生懸命学んだ技術(例:古いブラウザへの対応など)は、今となっては使い物にならないものが多い。
この業界では、そういった使いものにならないものは切り捨て、新しいものを取り入れていく姿勢が常に必要だと思う。

【その9】時間に対する認識が甘くなる傾向。

  • 朝の出社時間、体調が悪く遅刻してくる人が多い。
  • 打ち合わせ時間への遅刻が多い。
  • 残業(業務時間)に対する意識の低下。
  • う●こ長すぎ(たまにいびきが聞こえる)
  • 勝手に休憩し始める。

そんな印象を入社したときに感じた。
「遅く残っている人がえらい」みたいな風潮も存在したりする。(IT業界にありがちなやつ)

残業に関しては二種類存在すると思う。

1.単純に業務量が異常
2.能力がない

1.の場合は、周りが助けるべきだし、仕事量を分散させるべき。
2.の場合は、「事前にやれ!学べ!」としか言いようがない。

会社側の理解や評価も大切かと思う。

【その10】10年後にどうなっているかわからない業界

入社したときに抱いた気持ち。
「この業界10年後どうなってんだろう...。」
漠然とした不安だけが頭に過ったのを覚えている。

今は、別にそこまで不安に思わない。
なぜならいきなり10年後はこないから。

1年、2年、3年、...と積み重なった上で10年後がくるわけで
その都度、未来を見据えつつカメレオンの如く時代に合わせて自分の能力を磨いていくしかないから。

生き残りたいならやるしかないよね。

【その11】SNSには気をつけろ。

どこからばれるかわからないけど、会社の人はめっちゃ見てくる。
終いには、「どこどこ行ったんだって?」とか嫌味を言ってくるやつもいる。
また、Web戦闘能力が人の25倍くらい高い人が多いため、晒し上げられることもある。

すごい嫌な思いをしたのを今でも鮮明に覚えている。
結果今は、ネット上にはまじめなことしか言わないようにしている。(← チキン)

ソシャハラ、ダメゼッタイ。

振り返ってみて。

色々あったなぁ。 結構リアルな部分も多いけど、少しでも参考になればと思います。

※本記事の意見や見解は、個人の立場において記したものであり、所属組織等を代表するものではありません。

'npx' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。

webpackを使用したら少しハマったので備忘録。

各バージョン・環境

Windows 10
- node : 8.9.0
- npm : 5.8.0

※ nodeのバージョン管理に「nodist」を使用。

実行した手順。

①実行したいプロジェクトのディレクトリに移動し、以下のコマンドを叩く。

npm init -y

よし、package.jsonが生成された!!

②続いて、webpackを実行するために本体をインストールする。

npm i -D webpack webpack-cli

よしよし、node_modules やら package-lock.jsonやらが生成されたぞ。。

③エントリーポイントをビルドしてみる。

npx webpack

'npx' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。

ゲェ~~~ン!
え?なんで?と思い、ググる。。
“Node.jsをバージョン8.2.0以降、npxはnpmにバンドルされているため、npxの個別インストールは不要”
ん...?なのになぜ動かぬ。。

おそらく原因は、nodist

しょうがないのでnpxを直接インストール

npm install -g npx

改めてコマンドを叩く。

npx webpack

シャキ~ンッ!

無事にコンパイルされました。
現場からは以上です。

参考サイト
https://ics.media/entry/12140
https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533d

【JavaScript】2回目に訪れたユーザーに何かしたいとき。

データーベースで制御することも可能ですが、フロント側だけでやるのであれば、Cookieで制御するのがよいかと思います。

cookieで制御してみる - サンプルソース

//Cookie取得
var checkCookie = document.cookie;

//Cookie内に【XXX】という文字列があるかないか判定。
if(checkCookie.match("XXX")){
  /* =====================================
    2回目の訪問したときの処理
  ========================================*/
  
  console.log("2回目ですね。")

}else{
  //Domain名取得
  var domain = document.domain;
  //Cookieの内容を格納
  var visitorCookie = "visitorCookie=XXX; domain="+domain+"; path=/;"
  //Cookieに書き込み
  document.cookie = visitorCookie;
  /* =====================================
    1回目の訪問したときの処理
  ========================================*/
  
  console.log("1回目ですね。")
  
}

Cookieを取得しその中に1回目に訪れた時のCookieがあるかないかを判定して、無ければ初回の訪問、あれば2回目の訪問として処理を行う。
上記のソースの場合、cookieの有効期限は、セッション限り(ブラウザを閉じるまで)になっている。

Cookieを保持させたい場合は、以下のように指定

var visitorCookie = "visitorCookie=XXX; max-age=秒; domain="+domain+"; path=/;"

<例>半年の場合

var visitorCookie = "visitorCookie=XXX; max-age=15552000; domain="+domain+"; path=/;"

【CSS3】ふわっと始まりふわっと終わる。

お久しぶりです。
すっかりCSS3のアニメーションは当たり前のように使われる時代になりました。
少し意識した組み方をすることで、グッとよくなったりします。

以下のサンプルをご確認ください。

ふわっと現れ、パッと消える - パターン1

f:id:paradox_tm:20180419151120g:plain

DEMO

https://codepen.io/takumaro-web/full/ooQeaw/

cssにてdisplay:noneを使用しているものになります。
パッと切り替わっているので少し目に優しくないのと違和感を感じます。

ふわっと現れ、ふわっと消える - パターン2

f:id:paradox_tm:20180419151151g:plain

DEMO

https://codepen.io/takumaro-web/full/VrVzqM/

cssにてvisibility: hidden; ⇄ visibility: visible;でアニメーションをしているもになります。
パターン①より、違和感を感じずスムーズな見え方になります。

display:none;とvisibility: hidden;の使い分け。

display:noneの場合、要素自体なくなってしまうので、アニメーションをさせるのは難しいです。
この場合は、visibility: hidden;を使って要素はあるけど見えない状態をつくることでアニメーションが可能になります。

【少しの記述で表現は変わる。。】

現場からは以上です。