dev.kokushin

HTML5、CSS3、JavaScriptを中心に、日々のプログラミングで得た知識をメモしています。

移転しました

hexoでのブログ投稿に切り替えました。 以降はこちらで更新しますので、よろしくお願いします。 Code of Duty

GitHubを2段階認証にして、Visual Studio Codeからプッシュする際にエラーが出る場合の対処法

セキュリティ意識の向上からGitHubにもやっと2段階認証を設定したのですが、Visual Studio Codeからのプッシュ時にエラーが出てしまうようになったので、その際の対処法をメモっておきます。

YouTube動画を背景に使うなら「jquery.mb.YTPlayer」が良さげ

最近YouTubeの動画をWebサイトの背景として使う案件が増えており、何か手軽に実装できるプラグインないかなーと探していたら「jquery.mb.YTPlayer」というのにたどり着きました。 なかなか使いやすいプラグインだと思ったので、実装メモを残しておきます。

Browsersyncでサーバー立ち上げ時に開くページを指定する方法

Gulpとセットで使うと捗る「Browsersync」ですが、サーバー立ち上げ時に開くページを指定する方法をメモっておきます。

範囲を指定してランダムな数値を出力するTips

指定した範囲内でのランダムな数値を取得したいときってありますよね。 そんな時に使える便利な関数をメモっておきます。

「browsersync」で「Shift_JIS」を指定すると文字化けが起こるので、強引に回避する作戦

変更があったら勝手にブラウザをリロードしてくれる「browsersync」ですが、「Shift_JIS」形式のファイルを読み込ませると文字化けを起こしちゃいます。 大手企業サイトのコーディングとかやるとよく遭遇するので、強引に回避してみます。

<video>タグの高さを取得する場合は「loadedmetadata」イベントが発火してから実行する

<video> タグの高さを取りたいのだけれど、正確な数値が取れない時がある...という時は、loadedmetadata イベントが発火してから取得すると正確に高さを取ることが可能です。</video>

Electronにメニューを追加・パッケージ化した際にショートカット操作できるようにするTips

先日作ったマークダウンエディタですが、パッケージ化したらショートカット操作(コピペや選択)が出来なかったので修正しました。Electronに「メニュー」機能を追加するだけで対応出来ました。

Vue.js + Electron でマークダウンエディタをサクッとつくってみた

最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。

ビルドツール webpack 触ってみた

そろそろ「webpack」触ってみようと思い、チュートリアルを見ながら試してみました。 たくさんのモジュール群を最後にキュッとビルドするときの快感がやばいっすね。

JavaScriptでviewportを動的に切り替えるTips

レスポンシブ対応したいときに、タブレットだけはPC表示がいい!って時ありますよね。 そんな時はJavaScriptで動的にviewportの横幅を指定してあげましょう。

Node.js+Express+EJS+HerokuでWebアプリケーション開発 その4

前回は、「EJSを使ってHTMLに変換して出力する」までを学習しました。 今回はExpressのテンプレート出力を行ってくれる「express-generator」の使い方をご紹介します。

きよっち塾 #1 「本当にわかってる?Webサイト・Blog・SNSの役割」レポート

僕の学生時代の恩師であるきよっち先生(@kiyotchi)によるマーケティング講座に参加してきましたので、勉強会レポートとしてメモっておきます。

ハッシュタグを指定してツイートできるリンクを設定する

ハッシュタグを指定して、記事内にツイートできるリンクを設置する方法です。 どこで使うんだよと突っ込まれそうですが、実際に案件で使ったのでメモしておきます。

JavaScriptでスマホ画面を横に回転させた時(Landscape)に処理を実行するTips

スマホ画面を横に回転させた時に処理を実行するための記述をメモしておきます。 これは割とよく使うので早めに暗記したいところ。

JavaScriptでスマホ画面の比率を取得して条件分岐させるTips

画面が特定の比率だった場合、違った処理をさせたいという時の半ば強引なやり方をメモっておきます。 パフォーマンスとか全く考えられていないので、良い方法があったら教えて下さい😅

Node.js + Socket.ioでチャットアプリをつくってみるメモ

忘れないうちに「Socket.io」の使い方をメモ。 リアルタイム通信ができるので、ゲームやチャットアプリなどに使えそうですね。

JavaScriptで配列内の数値を昇順・降順でソート(並び替え)するTips

配列内の数値をJavaScriptで昇順・降順でソート(並び替え)したい時に使える簡単なテクニックをご紹介します。

Node.js+Express+EJS+HerokuでWebアプリケーション開発 その3

前回は、Node.jsの軽量フレームワーク「Express」を利用して「Hello, World!」を表示するまでをご紹介しました。 今回は、テンプレートエンジン「EJS」を利用してページを生成するまでをメモります。 EJSはPHP的な書き方が出来る、gulpとかでも有名なアレで…

Node.js+Express+EJS+HerokuでWebアプリケーション開発 その2

前回はNode.js単体で「Hello, World!」を表示するサンプルを作りました。 今回以降は、Node.jsのフレームワークである「Express」とテンプレートエンジン「EJS」を利用して実際にWebアプリケーションを作成していきます。 まずは「Express」の環境構築と、動…

Node.js+Express+EJS+HerokuでWebアプリケーション開発 その1

すみません、先月くらいに「CodeIgniterでWebアプリ作るぜ〜」って言ってましたけど、気が変わったので「Node.jsでWebアプリ作るぜ〜」に変更します。※CodeIgniterは時間を見つけて更新します(´・ω:;.:... 今回はNode.jsでHello, Worldを表示させるまでをメ…

RetinaディスプレイでPhotoshopを起動するとキャンバスサイズが縮小されるときの対処法

RetinaディスプレイだとPhotoshopを開いた時にキャンパスサイズが半分くらいに縮小されてしまう問題、いい加減解決することにしました。 ググってみたところ、思った以上にあっさり解決できたので困っている方は参考にどうぞ。

Instagram APIを使って他人のタイムラインを取得してサイトに出力するメモ

2016.07.11 追記 APIの仕様変更で上手く動作しなくなっています。 詳しい情報・対策方法はまた別の記事で。 InstagramのタイムラインってTwitterとかと違って公式でウィジェットが用意されてないんですね...。なので提供されているAPIつかって自分でゴニョゴ…

El CapitanでApp Storeに接続できない、起動しない時の対処法

最近OSX El Capitanの調子が悪いので、システムアップデートをしようと思い「App Store」を立ち上げたのはいいものの、ローディングがぐるぐるしててなかなか接続できず。 その時の対処法をメモしておきます。

ハッカソンに見学に行ったので個人的にメモ

今日は先輩のお誘いを受けて東京のハッカソンを見学することができました。 今後、ハッカソンに参加するためにも、気づいたことなどをメモしておこうと思います。

Create.js使って「名前募集バーガー風」画像ジェネレータを作ってみた

友達に突然画像ジェネレータを作って欲しいと言われたので、1日徹夜して作りました。 JSのライブラリにCreate.jsを使っています。

要素の高さを揃えるjQueryプラグイン「jquery.matchHeight.js」がクソ便利

最近増えてきたカード型レイアウトですが、ちょっとでも文字数が増えたり画像の高さが変わったりしたら高さがズレてしまい、カラム落ちしてしまう...そんな時は「jquery.matchHeight.js」を使ったらあっという間に解決出来ましたぜ。

WordPressからはてなブログに移転しました。

タイトル通り、WordPressからはてなブログに移転しました。 以下に移転理由をざっくり書き記しておきます。

Jade はじめました

突然ですが「Jade」はじめました。 いままで「EJS」を使っていたのですが、「両方使えたほうが状況によって使い分けれるから便利だよ☆」と教えていただいたので勉強することにしました。

初心者が「Codeigniter」でWebアプリケーションを作ってみる #1

サーバーサイド初心者がPHPのフレームワーク「Codeigniter」を使ってWebアプリケーションを作るまでの流れと苦労の記録をここに記す。 ※必要最低限の情報しか載せてません。

新プロジェクトの撮影で静岡県に行ってきた

昨日と今日と、新しいプロジェクトの動画撮影で静岡県に行ってきた。

ノンプログラマーでも使える!作業を格段に早くする便利なUNIXコマンドをメモ

手動でGUI操作なんて時間の無駄! ...なときもあるので、便利なUNIXコマンドをメモっていきます。 気が向いたらぼちぼち更新していきまーす。

「.DS_Store」や「._hoge」などの不要な不可視ファイルを一発で削除するMac用コマンド

「.DS_Store」とか「._hoge」みたいな不要な不可視ファイルを一発で削除できる、Mac OS用のコマンドを教えてもらったのでメモ。 黒い画面(ターミナル)から使える魔法です。

Slack+Botkitでアマデウス紅莉栖を実装してみる・開発編

はろー。 前回はBotkitの導入までをご紹介しました。 Slack+Botkitでアマデウス紅莉栖を実装してみる・導入編 今回は、実際にbot.jsを編集してオリジナルのBOTを作成してきます。 予め記述してあるサンプルコードを改変していきますので、複雑なことをしなけ…

Slack+Botkitでアマデウス紅莉栖を実装してみる・導入編

はろー。 唐突にSlackでBOTつくりたくね?って話になったので勉強がてら触ってみることにしました。 Botkitと呼ばれる簡単なBOT作成キットを使用します。 今回作成するBOTのモデルにはシュタインズ・ゲートに登場する牧瀬紅莉栖を元に開発された人工知能、 …

【El Capitan対応】パッと見、便利そうだから入れてみた Alfred Workflow まとめ

昨日「Alfred Powerpack」を購入し、使えそうなWorkflowを色々探してみました。 ネットに転がっている定番のものから、個人的に気になってインストールしたものなどをご紹介します。

効率よく作業するために「Alfred Powerpack」を購入しました

Macの定番アプリケーションの一つ、「Alfred」の有料版である「Alfred Powerpack」を購入しました。 より快適に効率よくAlfredを利用するためには、「Powerpack」という拡張機能が必須です。この機能は無料のAlfredでは利用できないので、思い切って購入に踏…

ブログをはじめます

どうも はじめましてkokushinです。 ちょうど案件も落ち着きつつあるので、ブログを始めることにしました。