Vercel+Nuxt.jsで爆速Webアプリ作成
CodeSandboxとNowでアプリを作る話の続き。（読んでなくてもOK） create-nuxt-app で作ったNuxt.jsアプリをVercelでデプロイする話です。 いつの間にやらZEITは新たなるブランドVercelに生まれ変わったそうで、NowもVercelという名称に変わってました🙄 よってこれからはNowとは言わずVercelと呼ぶことにします。 最近刀剣乱舞（ゲームの方）に復帰したんですけど、 イラスト回収状況がゲーム内で分からなすぎたのでメモ帳を作りました。 この時点はCodesandboxでVueテンプレートから作ってました。 周回しながら捏ねてたらイメージが固まったので、このままデプロイしてもよかったんだけど、ローカルで作り込みたかったのでNuxt.jsに移植した。 それをVercelでデプロイしたのがこちら。 状況の算出とかはふいんきでやっつけたから間違ってる
[Vue/Nuxt] Vue Test Utils の コードスニペット集
ユニットテストの書き方メモ。 サンプルコードのテストランナーはJestです。 jest.config.js ルートにおいとけばとりあえず動くと思うコンフィグ。 testEnviromentはjest-environment-jsdom-global、 アセットのスタブにjest-transform-stubを利用する。 const path = require('path'); module.exports = { verbose: false, // 実行中に各テストを報告するかどうか testPathIgnorePatterns: [ '/node_modules/' ], moduleFileExtensions: ['json', 'js', 'vue'], transform: { '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-je
![[Vue/Nuxt] Vue Test Utils の コードスニペット集](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
[Vue.js] ページネーション機能の作り方（弐）コンポーネントのテスト作成入門
[Vue] ページネーション機能の作り方とコンポーネント作成入門 からの続き。 続きなので前の記事で作ったやつがないとできません！ 引き続きCodeSandboxでやります。 ローカルに環境作った方はそちらでどうぞ。 CodeSandboxのプレビューのところに、Testsっていうタブがあるのに気づきました？ これ、テストを実行して結果を表示してくれる便利機能です。 今回はこの機能を使えるようにします！ 【2019/10/21追記】CodeSandboxのバグでテスト機能が動きません インストール Vueのテストには 公式の Vue Test Utils を使います。 テストランナーはJestを使います。 Add Dependency ボタンを押すとインストール用のモーダルが出るので、 必要なものを検索してDependenciesに追加します。 @vue/test-utils vue-te
![[Vue.js] ページネーション機能の作り方（弐）コンポーネントのテスト作成入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/8b190f87c3235eebeeba6810e4a69fa67f181295/height=288;version=1;width=512/https%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2019%2F03%2Fvue-patination-tutorial2-1.png)
[Vue.js] ページネーション機能の作り方とコンポーネント作成入門
[PHP] ページング機能の仕組みとか作り方とか が今年で10周年！ 今はPHPを書くことはWordpressを魔改造するときくらいで、もっぱらJavasScriptを使う事が多いです。 2018年はずっとVue.jsと戯れていたので、Vueでpaginationコンポーネントはどうやって作れば良いの？という視点でまとめてみました。 環境構築は面倒くさいのでCodeSandbox使います！ なのでローカルにインストールからやってみたい方はVueの公式ドキュメント片手にトライしてどうぞ。 ※以下ソースすべてES5以上の構文多用してます。 ドキュメントへのリンクを貼ってますので詳細はそちらを確認してください。 CodeSandboxにGithubアカウント（なかったら作る）でログインしたら、 ダッシュボードでCreate Sandboxを選択して、フォーク元になるVue.jsのサンドボックスを
![[Vue.js] ページネーション機能の作り方とコンポーネント作成入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe002d6b0c5185378b2650858f1994a9fb507b0b/height=288;version=1;width=512/https%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2019%2F03%2Fvue-pagination-tutorial3.png)
Twitter Cards 完全ガイド
「サイトにTwitterカードつけたい」とか、「キャンペーンのツイートにカードつくようにしたい」とか、フロントの人なら1度は言われたことあると思うし、まだ言われたことがなくてもこれから言われる可能性があると思う。 大体のことは公式の説明に書いてあるので、ほとんどそれをなぞった内容になるけど、実際使ってみて分かったこともいくつかあるのでまとめておく。困ったときの参考になれば幸い。 Twitterカードとは ツイートしたときに追加されるカードっぽい見た目のコンテンツである。（薄いグレーの線で囲われた部分） サイトの概要や写真、動画や音声などのメディア、アプリのダウンロードリンクなどリッチなコンテンツを追加できるので、ただのテキストとURLだけのツイートよりもタイムラインで圧倒的に目を惹きつける。そのため、サイトへのトラフィックやアカウントのフォロワー、アプリダウンロード数などを増やす目的で使わ
スマートフォンサイトを1080x1920pxのデザインサイズで作る
なんでもネイティブアプリのUIデザインが1080x1920pxだからと。 えーまじで、と。iPhone6+なら1242x2208pxでないの？と。 Webでそんな数字聞いた事ないんだけど今ってどうなの？と思ってググってみたんだけども iPhone/iPad解像度(画面サイズ)早見表 デザインアセットをiPhone6に対応するワークフロー iPhone6の時代のviewport設定について やっぱりWebだと1080なんてのはないなあと思い知らされた。 とはいえ時間もないし強引にやってみることにした。 デザインをみたら画像しかなかったので、1080x1920pxの等倍で画像切り出したりマークアップしたりして普通にサイト作った後に、CSSとJSで拡大縮小のおまじないかけて強制的に画面にフィットさせるという古典的手法を取った。 iPhoneを含めて大体の最新端末にはviewportを操作すれば何
Riot.js 触ってみたメモとサンプル
jQueryではもうｱｶﾝと思った時に挙った乗り換え候補はRiot.jsとMithril.js。 どっちもナウいんで一応両方試してみたんだけども、Riot.jsに落ち着いた感じであります。 なんでRiot.jsになったかというと、完全に個人的な好みの問題でして、 すごい大雑把にいうとRiot.jsはHTMLにJSを書くという方針に対してMithril.jsはJSにHTMLを書くという親のReact.jsの流れを汲む文化を継承してるんですが、試しで作ってる時に「HTMLにJS書く方が違和感ない」と思ったからなのでした。 あとはRiot.jsが企業に対してMithril.jsは個人であるといった、開発母体の差もちょっと気になる点でした。 機能面はどちらもミニマムでシンプルでAPI数少なくてとっつきやすいのでそんなに変わらないが、学習コストは独自ルールが多いRiot.jsの方が数段高いと思う。
[CSS3] background-clipの実例紹介
【CSS Property Advent Calendar 2013 — 22日目】 最近background-clipを愛用しているので何ができるのか実例を紹介。 background-clipとは background-clipは背景の適用範囲を指定するプロパティです。 指定は至ってシンプルなもので、 要素にborderとpaddingとbackgroundが設定されている場合に backgroundをどこに表示するか決めることしかできません。 border-box 背景をボーダーボックスに適用する（初期値） borderに重なる位置からコンテントボックスにかけて padding-box 背景をパティングボックスに適用する borderを避けてpaddingの位置からコンテントボックスにかけて content-box 背景をコンテントボックスに適用する borderとpaddingを避
![[CSS3] background-clipの実例紹介](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbbe468e6e3c1d88abdb0fc13eff84e8e41bd795/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2013%2F12%2Fbackground-clip1.png)
とあるソシャゲのHTML/CSS設計話
【Frontendアドベントカレンダー19日目】 Xboxに釣られて転職してから２年半…あっという間だった…。 関与したもの： スマホ版ピグ（リニューアルして面影無し） ピグファンタジア（11月末クローズ） 新規ゲーム ←今ここ 今は新規ゲームでコーディングの人としてjoinしてます。 新しいサービスを立ち上げる時に必要なHTMLとCSSの土台作りを全部やるということが、 「HTML/CSS設計」という言葉で装飾されることを知ったのは割と最近です。 マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。 ここが変だよソシャゲ開発 依頼を受けてサイトを作る場合は次のようなフローだと思います： クライアントと打ち合わせ 仕様が決まる デザイン決まる 値切られる 価格が……決ま…る コーディング クライアントチェック 突然の無理難題に戦慄走る テスト・修正
[CSS3] IE10の一般公開を受けてFlexible Boxの仕様を比較するサンプル書いた
IE10が出たそうで。 IE10でjsdoitのPortfolio見ると… — げこたん さん (@GeckoTang) 2013年2月27日 さっそくインストールしたらしい人柱をTLで目撃。きになる。 @geckotang スクショ — Tenderfeelさん (@Tenderfeel) 2013年2月27日 スマホにまみれた生活なのでプレビュー版から華麗にスルーしています。 インストールももちろんしてないので丁重にお願いしてみた。 @tenderfeel こんなんす #jsdoit twitter.com/GeckoTang/stat… — げこたん さん (@GeckoTang) 2013年2月27日 おやおや… jsdo.itのWorksはフレキシブルボックス（display:box）を使ってる。（とこれで知った） @geckotang え、flexible box未対応？それと
![[CSS3] IE10の一般公開を受けてFlexible Boxの仕様を比較するサンプル書いた](https://cdn-ak-scissors.b.st-hatena.com/image/square/911245dda353cf02b23d5414661615a5ad54d045/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2013%2F02%2Fbefqwfkcyaaelqljpg-large-300x219.jpg)
[CSS3] Androidのmask-imageに関する不具合について
CSS Programming Advent Calendar 2012の20日目の記事でCSS Maskingについて書きました。 その中でAndroidには不具合があるんだよね…っていうのを最後の方で紹介したとき、 参考としてリンクしていたのは@mattari_pandaさんが書いた Android4でmask-imageとアニメーションを同時に設定するとマスクしなくなる というデモでした。 でもよく調べてみたらそれだけじゃなかったんです。 検証するにあたって書いたデモはこれです。 以下の内容はReadmeと一部被ります。 Androidでの症状 mask-imageとanimationを同時に設定するとマスクしなくなる(Android4のみ) 症状が出るのは３つ目のドロイド君です。 mask-imageとanimationを同時に設定した場合はアニメーション対象のプロパティに関係なく
[css] CSS3時代の上下中央に配置するパターン
最近多用するので…。 要素の全画面化について 先に親になる要素を画面いっぱいに広げる方法について補足しておく。 大きく分けると絶対配置とサイズ指定の２つある。 絶対配置は、position:absoluteを指定した上で ４方向の位置を0（または任意の値）にする。 #wrapper { position:absolute; top:0; right:0; bottom:0; left:0; } サイズ指定は、widthとheightを指定するだけだが、 対象の要素だけでなくその親も高さと横幅がないと指定したサイズにならない。 特に高さについての指定がハマりやすい。 単純にbody直下に要素を配置しただけの場合、 <body> <div id="wrapper"></div> </body> htmlとbodyもheightを指定してないと画面いっぱいに広がらない。 html, body,
[Compass] 超訳 Configuration Reference
CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。 Compassの設定ファイルはRubyファイルです。 これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。 それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました！ ※この記事は完全な和訳ではありません。 基本的な書き方 コメント Windowsユーザー向けの注意 設定項目 動作に影響するもの URL関連 Sprite画像の自動生成用 コマンドラインでのオーバーライド コマンドライン経由で渡される設定の検査 Compass 用プラグインの読み込み コンフィグ関数 add_import_path asset_host asset_cache_buster watch コールバック on_sprite_sav
ディレクトリ名srcとかの謎と作法
githubで晒してあるソースを見たりするときに気になっていたことがあったんで 話の流れに身を任せつつ後ろの席のハイパーエンジニアに聞いてみた。 jQueryのリポジトリとか見ると ソースがsrcというディレクトリに入れてある。なにゆえsrcなのか？ 結構このsrcというディレクトリに入れているケースは多いのに ぐぐってもコレといった記事は見つからないから、 漠然と「そういう規則か何かがあるんだろう」などと思っていたのだけど、 単純にエンジニアにお馴染みの作法とのこと。 ディレクトリ篇 bin binary プロジェクトで使用する、各種コマンド置き場 build 最終的にビルドして自動生成された成果物置き場 以下２つもほぼ同じ意味： dist distribution 配付するもの dest destination 出力されたもの source ソースコード srcと省略する方が多い te
[Sass] Sass 3.2で実装された新機能がヤバい
8/10に3.2、8/15にバグフィックスした3.2.1がリリースされて ただでさえヤバイくらい高機能なSassがますますパワーアップした。 Sass信者のみなさんはすでにお使いでしょうか？ 晒したソースはオンラインコンパイラで試せます。 jsdo.itも対応してます。 @content これはmixinにブロックコンテンツを渡せるようにする合言葉。 mixinを作る時、渡されたブロックコンテンツを入れたい場所に@contentを配置すると @mixin iphone { @media only screen and (max-width: 480px) { @content; } } @includeするときに波括弧で括ってコンテンツを渡せるようになる。 @include iphone { body { color: red } } コンパイルすればこのとおり、@mixinの内容＋渡した
[MooTools, HTML5] ToDoアプリを萌え化してみた
Web Creatros Contest “Q” っていうのがjsdo.itでやってます。 商品がApple製品だったのでまた釣られてしましました（ノω＾） お題を呼んでわが身をふりかえってみると…… 仕事のToDoは会社が用意してくれるポストイットに書き、 プログラムに係わることは//TODO で書いている。 プライベートでは使う事がないから…… ほとんどToDoアプリをつかったことがなかった！ ……ならToDo管理以外にも使えるものだったら 私みたいな「ToDoアプリ？なにそれおいしい？」ユーザーも振り向いてくれるかもしれない。 などと考えていたら神様がそっと囁いた。 ﾉﾉﾉﾉﾉ （ ○○） ＜ 身近にイイ人材がおるじゃないか…ほれ、脳内に (||||) なるほど！脳内にいる住人とかタルパとか妄想とか俺の嫁とかに覚えてもらえばいいのか！ 具現化するに合う素材を探してみたら素敵な立ち絵素
![[MooTools, HTML5] ToDoアプリを萌え化してみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6bc0cbe35dddac1c05ba32096d854d4c8452f89/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2012%2F03%2Ftodoll-start.jpg)
Aptana Studio 3のこと（その２：使い方等）
Aptana3のβが出た頃に前のまとめを書いたんだけど、 βが取れた後もWebStormなどの波に揉まれつつ相変わらずAptanaを使っているので 前の記事に載せてない機能や使い方などについてまとめる事にします。 Project Explorer やApp Explorerで非表示のファイルやディレクトリを表示する .htaccessとか.gitignoreはデフォルトでは非表示になってます。 設定はビュー右上にある小さな逆三角をクリックすると表示するView Menuの中にある。 「Customize View…」をクリックすると、Available Customizationsウィンドウが開くので、 「.* resources」のチェックを外す。と非表示になっていたものが表示されるようになります。 しかし非表示のままでもいいものまで出てきてしまうのが微妙なところ。 「.* files」
[js,css] テンキーがついているスマートフォンの罠
Androidを爆発し隊・投げ捨て隊に所属するみなさん、 ますますスマホ戦線が活発化する中いかがお過ごしでしょうか。 スマホといえばiPhoneがその美しいデザインでこれぞスマホ！という概念を決定的に印象づけた ３〜４インチ前後のタッチパネルのものが主流ですが、 テンキーとか十字キーとかがついている狂った機種をお忘れじゃありませんか？ 狂気の007SH ぱっと見ガラケーなのに中身はAndroid。 画面はタッチパネル対応だから触ればタッチイベントが発生する。 007SHはソフトバンクから出てるものですが、シャープはauやdocomoにもテンキー付きAQUOS PHONEを出してます。なんてことしやがる。 私はこのデバイスに触れて初めてスマホをへし折りたいと思いました。 幸い今の会社はテスト端末が豊富なのでスマケー()も実機で見る事が出来たんですが、 手元に無ければこんな機種絶対頭から抜け落
![[js,css] テンキーがついているスマートフォンの罠](https://cdn-ak-scissors.b.st-hatena.com/image/square/d69adcda0505f32b218fcfafa0e739ce12a5456d/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2011%2F12%2F007sh.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロール催促ボタンとページトップへ戻るボタンの出し分け
External Tools（外部ツール）の設定項目メモ