なんかパッと解決できなかったので備忘録。Nuxt.jsではcreate-nuxt-appをするときに「dotenv使うかー？」的なこと聞かれてインストールする方も多いと思います。初めは一つの.envファイルに下記のように一つのファイルに設定してコメントアウトして切り替え…
slackのアプリを作って、Botユーザーに権限与えた時にちょっとハマったやつです。 やりたいこととしては、webAPIを使って チャンネル一覧取得 チャンネルに投稿 という二点だったので、権限としては「channels:read」と「chat:write」の二つを「Bot Token Sc…
最近まで会員サイトの構築に追われておりましたが、無事リリースすることができひと段落できました。さて、今回はタイトルの通りJavaScriptのオブジェクト（連想配列）の値を検索してソートする方法についてご紹介していきたいと思います。基本的なところだ…
最近仕事でオーディションサイトを「Serverless+Nuxt.js」で作っているのですが、今回は初めてイケてると話題のNuxt.jsを業務で取り入れてみました。 右も左も分からなかったのですが、学習&実務で学習したことをお話ししていこうと思います。 今回お話しす…
めっちゃ久々になりました... お仕事落ち着いてきたので再開しようと思います笑 今回は「単純に見えてやってみると意外と難しい!」と友人から質問を受けたオブジェクトのソートです。 今回のソート条件としては単純で、下記のようなオブジェクトのvalueでソ…
タイトルの通りです。備忘録的に簡単なFactoryとSeederを使用したダミーデータの追加例を残しておきます。 FactoryとSeederとは Factoryは追加するダミーデータの型みたいなものを定義するところです。 その名の通り、人形焼の鋳型を生産する工場的なものだ…
dockerでcodeigniterの環境を作っていて、公式チュートリアルをやっていたところform_openというメソッドを使うとURLがおかしくなってしまう、という現象に出くわしました。form_openというのは、formを生成してくれるCodeIgniter独自の関数です。どのように…
連投です（笑）今回はいたってシンプルなお話で、TweenMaxとScrollMagicを関数化したというお話です。 See the Pen scrollMagicTweenFunction by nakajima masahiro (@nakajima333ta) on CodePen. なんとなく、TweenMaxとScrollMagicを使っている中で一々同…
しばらく暇らしいので連投します（笑）前回に引き続き、webページのアニメーションをさせる際によく使うライブラリであるScrollMagicについてお話していこうと思います。ScrollMagicはその名の通り、スクロールをして指定した要素に到達した際にイベントやら…
お久しぶりの更新です…またもや忙殺されていました... 最近はシステム案件の仕事をすることも多いのですが、今回は久しぶりにwebページのコーディング案件に取り組むことに。 そして今回の案件は結構アニメーションが多かったんですよね。 以前の記事でTween…
今回、Android 4.4.2の標準ブラウザでレイアウト崩れがあったんですよね笑 というこで、デバッグをしなければということになったのですが、Chromeなら 1.「devtool」のオプションである「more tools」->「remote devices」 2. chrome inspect にアクセス で…
さて、今回もさらっと。 今回のコーディングの一部で、butoonタグの子要素としてimgタグを入れ込んでおりました。 そしてこのimgタグにクリックイベントをセットしていたんですね。 しかし… Firefoxだけイベントはセットできるものの、全く発火しない… Chrom…
今回はさらっとIEのエラー対処について。jsonを扱う際にfetchを使ってデータを取得しているのですが、どうやらIEだとpromiseやfetchが使えないようなんですね。ということで、まず簡単なCDNから。 <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.3.1/es6-promise.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js"></script> これらを読み…
今回は前回の続き、ということでPHPファイルについてお話していこうと思います。hubarifront.hatenablog.com 前回お話したgulpfileで重要だったのは、PHPコマンドを叩くタスクでしたね。そしてこのタスクにはコマンドライン引数として変更したファイル名を渡…
明けましておめでとうございます！なかなか年末まで案件が終わらずブログが更新できませんでした…泣 さて、そして年末まで取り組んでいた案件というのが今回のテーマであるAMP対応です。AMPとは簡単にいってしまえば、Webページを高速化するための枠組みです…
最近Webpackが流行っていますが、やっぱ馴染み慣れたgulpを使ってしまう私がいます…今回はたまに出くわしていた「TypeError: args.cb is not a function」というエラーの対処法について一つ。こちら、実際にエラーが出ていても動くものなんですがなんか怖い…
こんにちは〜〜今回はGoogle Analyticsでオプトアウトするときの設定をご紹介します。Google Analyticsは今や多くのWebサイトで活用されているアクセス解析ツールです。そしてオプトアウト、というのはGoogla Analyticsにサイト閲覧者の情報を送らないように…
仕事ではGmailを使ってやりとりをすることが多いのですが、最近結構返信メールが長くなって送信済みメールを見るとなにやら署名の部分が紫色に… 相手側には黒色で見えている、との口コミもありましたがどうやら相手側にも紫色で見えてしまっているよう... 「…
こんにちは、今回はCookieをJavaScriptで扱った際の備忘録です。Cookieはサーバーから付与される「key」と「value」を持ったデータのことで、Sessionとは違い「ブラウザ側」に保存されるものです。そのため、フロントエンドであるJavaScriptでも扱うことがで…
さて、今回はアニメーションライブラリを使ってみよう！というお話です。そして今回ご紹介するのは「TweenMax」と「ScrollMagic」、TweenMaxは日本でそこまで知名度があるわけではないですがアメリカではかなり人気のライブラリのようですね。ただアニメーシ…
久しぶりの投稿ですね… わりと沖縄へ行ったり熱海へ行ったりと最近は忙しめでした(笑) さて、今回はデザインファイルを触るときによく見かける「768px」という数値についてお話しようと思います。 正直「半端やな…770pxでもええやんけ…」とずっと思っていた…
今回は私が愛用しているエディター「Atom」についての備忘録です。今回の問題はAtomのコード整形パッケージ「atom-beautify」でPHPの整形がうまく行かない、ということについて。エラーが出るわけではないのですが、注意書きで次のようなポップアップが出て…
Dockerのコンテナ内でComposerを使おうとした時のメモです。 まず、何も考えずに「curl -sS https://getcomposer.org/installer | php」でComposerをインストールするとカレントディレクトリにcomposer.pharが置かれます。 もちろんこのままではcomposerコマ…
「ちょっとReactでアプリ作れるっぽいんだけど触ってみてくんない？」というお言葉から、本日はReact Nativeをかるーく触ってみました！ 以前Reactを触ってみたお話しをしましたが、React Nativeはアプリケーションを作るためのものという認識なので触れてな…
今回はブラウザテストについてお話ししようと思います。 以前記事で書いた「診断コンテンツ」がありましたが、結局これはReactを使ってもっとボリュームのあるものを現在開発しています。 hubarifront.hatenablog.com ただ、診断コンテンツのように選択肢に…
さて、しばらくコードの話をしていたので今回はイラレについてお話しようと思います！ 私は業務でデザイナーさんから送っていただくデザインを元にコーディングすることが多いのですが、その場合フォトショかイラレかのどちらかをいただきます。 その中でも…
今回は先延ばしにしていたReact.jsを使うための環境構築、そしてAPIからデータを取得して利用する方法についてご紹介していきたいと思います。いや〜propsの理解についても苦労しましたが、何と言っても環境構築が一番手間取りましたね...最近ではDockerなど…
さて前回はReactの概要的なところから最終的にはstateを使ったカウントアッププログラムまでを説明しました。前回のような単純なプログラムであればstateだけでも確かにいけるのですが、それではまだReactの恩恵に預かっているとは言えないよう。今回ご紹介…
今回は何かと話題のFacebook謹製jsライブラリ「React.js」について学習した記録を書き綴ろうと思います。 Angular、Vue、Reactの御三家みたいなところはありますが、なんとなく名前がかっこいいのとFacebook製というところに惹かれ一週間前からちびちび学習…
本日業務で診断コンテンツを作成することがありましたのでそれの備忘録をご紹介しようと思います。 本日作成したのは以下のような診断コンテンツです。 結果は最終的に4つのタイプに分かれる 二択の質問に回答して結果に導く 問題数は全部で5個 まあシンプル…
