はてなブックマーク

GitHub Actionsを使ってFTP自動デプロイ（Webサイト公開）を実現！ソフトを使った手動アップロードを卒業する 2020/5/16 2021/5/16 プログラミング, 制作ツール GitHub、使ってますか？？ 僕も何かとお世話になっていまして、仕事をする日にGitHubを見ない日はないと行っても過言ではないのですが、2019年の11月には、「GitHub Actions」というものが公開されました。 GitHub Actionsというのは、Github上にあるリポジトリなどのデータに対してだったり、データを使った操作に関して、それまで手動で行っていた様々な操作を自動で行うことができるようになるための機能たちです。 例えば、GitHub上にあるリポジトリデータ（ Webサイトのソースコード）を使ってWebサイトの自動デプロイ（公開）作業を行うこともできるようになっています。

以前、Mac × Visual Studio Codeで始めるscss（sass）入門。環境構築も簡単にできる！という記事でも似た感じの内容の記事を書かせて頂いたことがありました！ Mac × Visual Studio Codeで始めるscss（sass）入門。環境構築も簡単にできる！では、「node-sass」というプラグインを使ってSCSS環境を構築する方法について書かせていただいています。 なぜ今改めて別のプラグインを使ってSCSSの環境設定についてのブログ記事を書くのかについては、一応歴とした理由があります。 実はsass（scss）公式からの情報発信を見てもわかるように、今後はnode-dassではなくdart-sassというものを推奨するという発表が既に出されています！ node-sassでは使用できた記法が、dart-sassでは使われなくなる、なんていう記法も存在していま

実は、Googleが2018年の時点で、Webサイトの表示速度を検索順位判定の材料に使用するという発表を公式に行っています! 従って、Webサイトのデータ容量が重いと「SEO・Google上での検索順位が下がる可能性が高まる」というデメリットが考えられますよね・・・。 また、上記Webサイト上にも表記されているように、ページの表示速度が少し遅くなるだけで そのページからの離脱率が高まる売り上げに影響する（売り上げが下がる）総じて顧客満足度が下がる と言われているところから、Webサイトが重いとデメリットしかないということがわかりますよね！ 確かに僕も自分自身を振り返ってみると、表示が重いWebサイトに出会ったり、通信環境の問題でWebサイトがなかなか表示されない状況になると、イライラしてそのページを見るのをやめてしまうことが多いなぁ…と思います。 Webサイト1ページで使用される全データの

Stripe × PHP(laravel）でクレジットカード登録・決済処理機能を実装してみよう！（事前準備編） 2019/12/11 2021/5/16 プログラミング 久しぶりのブログとなってしまいました・・・11月は本当仕事でバタバタしてしまい、ろくにブログもかけず、ちょっと自己管理の出来なさに反省をしている次第でございます。。。 さて、久しぶりのブログなんですが、今回はStripe×PHP（Laravel）を使ったクレジットカード決済処理機能の実装に関するブログを、自分の備忘録もかねて3回に渡って記載したいと思います。 3回の内容については、以下の通りの区分になっています！ 事前準備編（今回の記事はこちら）クレジットカード登録・更新編決済処理編 ※3回分のブログにさせていただく内容の最終形コードは、上記Githubに掲載しております。こちらの内容を元にお話を進めていきたいと思います！

以前、Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意！という記事を書いたことがありました。 この記事、Arrownの歴代記事の中でもかなりのバズを生み出してくれたのですが、今回のブログ記事は、1年越しの続編の記事になります！（遅い！笑） Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意！ でご紹介させていただいたように、2018年4月、それまで提供されていたInstagram APIの一部機能が終了したことにより、Webサイトに埋め込んでいたInstagramの写真が突然表示されなくなってしまったということがありました。 昨年2018年の段階では、Instagramを運営するFaceBook社側からは、「Instagram APIの代替方法につい

JavaScriptでオブジェクトのコピー・合体ができるObject.assign()が便利 2018/6/7 2018/6/21 JavaScript, プログラミング 真新しい内容でもないのですが、最近JavaScriptに触れている中でよくObject.assign()について触れる機会があったので、ブログに記録しておこうかなと思います。 オブジェクトのコピー・合体ができるObject.assign()は本当に便利だなーと思いますよ！ ちなみにこの記事は、JavaScriptのオブジェクトについて、書き方をご存知の方を対象としていますので、その点ご注意くださいね！ JavaScriptにおける参照渡しを理解する Object.assign()を理解する上で必要なのが、JavaScriptにおける「参照渡し」の仕組みを理解することです。 これを理解しないと、Object.assing(

CSSのprefers-reduced-motionについて。iPhoneで「視差効果を減らす」設定時には注意 2019/2/8 HTML&CSS, プログラミング こんにちは！ケインコスゲです。 今回は、なんともニッチと思われるかもしれない、 CSSのprefers-reduced-motionについてブログにしてみたいと思います。 完全に開発者・製作者の方向けの内容になりますが、アニメーションをCSSで設定することがある方はもしかしたら一度は経験したことがある内容も含まれているかもしれないので、ぜひご覧くださいね！ CSSのprefers-reduced-motionを知ったきっかけ 先日、とあるLP（ランディングページ）サイトのHTML・CSSコーディングのお仕事を、友人に紹介させていただいた機会がありました。 そのLP（ランディングページ）サイトは、なんとも派手なアニメーションを多

Visual Studio Codeの使い方・基礎基本 – Microsoft製のコードエディタ –という記事でVisual Studio Codeのインストール・設定方法についてはご紹介させていただいていますので、もしVisual Studio Codeをご使用でない方・導入してみたいという方は、ぜひご参照ください！ プラグインの導入方法は上記画像の通りに行っていただければOKです！ SFTPプラグインを探して、インストールボタンを押すだけという、いたってシンプルな手順となっています！ プラグインのインストールができたら、Visual Studio Codeの再読み込みを実行しておいてくださいね！ SFTPプラグインの設定 続いて、SFTPプラグインの設定を行います。まずは、Visual Studio Codeの画面でCommand + Shift + Pを実行します。 （Windows

前回、FirebaseをJavaScriptで扱う ~環境設定編~というブログ記事を書きました。 今回はFirebaseのHosting機能を使って、HTML・CSS・JavaScriptで作られた簡単なWebサイトを、レンタルサーバーを借りることなくインターネット上に公開する方法を書いて見たいと思います！ 前回に引き続き「FirebaseをJavaScriptで扱う」という観点からブログを書きますので、よろしくお願いいたします！ Firebase Hostingを使用するための準備 まずは、Firebase Hosting機能を使用するための準備・環境設定をしていきたいと思います！ 今回は、上記のような見栄えの簡単なポートフォリオサイトのデータ一式を、FirebaseのHosting機能を使ってインターネット上に公開する流れをまとめてみます！ Firebase プロジェクトの作成・出力コ

Google reCAPTCHAをWebサイトのお問い合わせフォームに実装する方法 2017/9/6 2019/9/5 プログラミング, 制作知識 Webサイトのお問い合わせフォームなどを利用している時に、「私はロボットではありません」という文言と共に、チェックボックスがついているような表現をみたことはありませんか？？ 何も知らないと、思わず「いや、ロボットじゃないに決まってるじゃん・・・」とツッコミを入れたくなった、あいつです。 あいつの正体は、googleが提供しているreCAPCHAというものなんですが、スパム対策の方法の１つとして非常に有名なものです。 今回は、google reCAPTCHAをWebサイトのお問い合わせフォームに実装する方法について、みていきたいと思います！ google reCAPTCHAとは何か google reCAPTCHAは、Webサイトを巡回し、時にア

BracketsのPHP debuggerとは？？ まずはPHP debuggerとは何かについて、ご紹介いたします！ 簡単にいうと、PHP debuggerを使うことで、まるでBrackets上でGoogle ChromeのデベロッパーツールにあるConsole機能やブレイクポイント機能を扱うかのごとく、PHPのデバッグができるんです！ 指定したPHPファイルの行でPHPの動きを止めることで、その行の時点でPHPの各変数の中身がどうなっているのか、$_GETや$_POSTのサーバ変数の中身がどうなっているのかなど、色々な情報を確認することができます！ すごく便利ですよね！ BracketsのPHP debuggerの導入手順 それでは、BracketsのPHP debuggerの導入手順についてご紹介していきます！ 手順の全体像としては、以下の通りになります！ 今回はあくまでBracke