サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
都知事選
qiita.com/gonshi_com
こんにちは。久しぶりのQiita投稿です。 今回は「ex-KAYAC Advent Calendar」の13日目の記事として寄稿させていただきます。 さて、改めて私の今やっていることを紹介させていただきますと、独立してから株式会社Lucky Brothers & co.という会社を設立し、主にWebの受託制作を行っています。 かれこれ3期目に突入致しました。 アドベントカレンダーということで改めて2018年という年を振り返ってみたのですが、一言で言うと「今年はフロントエンドエンジニアにとって大きな当たり年であった」と言えるのではないかと思います。特に私達の会社では、今までのいわゆる「Webサイト制作」だけの単一事業形態から脱し、他のあらゆるアプリケーション制作にも手を拡げられた年になりました。 そんな話をしようと思います。 Nuxt.js Vue.js製のフレームワークであるNuxt.js
23002342 を 23,002,342 と言った具合に、数値に対して 3桁毎にカンマを打って表示させたい場合、 僕は今まで愚直に正規表現を使って変換していました。 しかし、JavaScriptのNumberオブジェクトに標準で用意されている、 toLocaleString() というメソッドを使えば簡単に3桁区切りのカンマを打った状態で数値を出力することができるようです。 Sample:
wordpress等でphp-fpmをサーバーで使っている場合、 phpに新たなモジュールを追加したりphp.iniを更新した場合は、 php-fpmとnginxを再起動することを忘れずに
ELBでEC2 2台にアクセスを分散させていたのですが、ユーザのTwitterログインフローがおかしな挙動をするようになり、ハマりました。 結論としては、 サーバーが分散することによりセッションの状態維持が保証されず、 ログインしているはずなのにログアウト状態に戻ってしまうとか、そもそもTwitter OAuth認証のコールバックの時点で 「Session Expired」エラーが出るといった問題が起きてしまっているようでした。 これを解決するためには、 ロードバランサーの「ポート構成」から、 「ロードバランサーによって生成された Cookie による維持を有効化」 にチェックを入れると良いようです。 こうすることで、同一ユーザからのアクセスは同一のサーバーにアクセスを流すことが可能となり、セッション状態が破綻することがなくなりました。 Register as a new user and
2015 ver. Macで游明朝を使うかヒラギノ明朝を使うかは好みによるところでしょう。 WindowsだとHG明朝というのを指定することで、アンチエイリアスのかかった明朝体を表示することができます。 font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing
githubのpush先レポジトリを変更したい場合、 addコマンドではなくset-urlコマンドを使ったほうが好ましい。
割りとjavaScriptでハマりがちな定番例かとは思いますが、 ご多分に漏れず僕もハマってしまいました。 for文の中に非同期処理を入れる際の落とし穴です。 例えば、Imageオブジェクトのonloadメソッドのような非同期処理を for文の中に入れようとすると、 for(var i = 0; i < 5; i++){ img[i] = new Image(); img[i].onload = function(){ console.log(i); }; img[i].src = url; } とかって最初は書いちゃうかと思います。 これで、望まれる結果としてはimageのloadが完了した順に 3 4 2 1 5 とかって出力してほしいんですが、実際には 5 5 5 5 5 という結果が出力されます。 これは、console.logが出力している変数iが値そのものではなく、 あくまで参
iOSのsafariでは、画面下部に標準メニューバーが存在しています。 しかし、このメニューバーの挙動が厄介で、 webサイトを開いた状態ではメニューバーが表示されているものの、 少し画面をスクロールすると、このメニューバーがひょいっと下に隠れてしまいます。ついでに画面上部のアドレスバーも小さくなってしまいますね。 サイト上でスクロールに応じた演出や、 position: absolute; や position: fixed; を使って表示位置をシビアに調整しないといけない演出をやりたいとき、 この仕様がとても邪魔になってしまいます。 iOS7までは、viewportにminimal-uiなるものを指定することで、 このメニューバーを 一切表示しないという選択肢があったのですが、 iOS8からはこのminimal-uiが廃止されてしまいました。 そこで、cssを使って メニューバーが隠れ
にすると同時にopacityを1へとアニメーションしたい場合。 それをcssのtransitionを使って実現しようとすると、 css: .hoge{ display: none; opacity: 0; transition: opacity 1s linear 0s; } .hoge.show{ display: block; opacity: 1; }
# JIS第一水準 亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪
モーダルを表示させたとき、何も考えずにコーディングするとモーダルをスクロールしたいのに背景までスクロールされちゃう、 なんてことに陥りがち。 (モーダルの上端・下端を超えるスクロールをしたときや、モーダル外にカーソルを置いてスクロールしたとき等) これを防ぐには、モーダルが表示されているときは背景要素をfixedにするのが良さげ。 <div id="wrapper"> <p class="open"> <button>open modal</button> </p> </div> <section id="modal"> <!--modal content --> </section> // include jQuery var current_scrollY; // OPEN MODAL $( '.open button' ).on( 'click', function(){ curre
横の中央揃えは margin使えば簡単なんだけど、縦の中央揃えは 何かと厄介だったりします。 親要素のサイズが決まっている場合は、以下の方法が簡単です。 html <p class="container"> <span class="text">ここに複数行テキスト<br/>が入ります。</span> </p>
どういう条件で起こるのかはまだはっきり調べられてないけど、 たまにAndroid 4.0系でテキストの折り返し位置が明らかにおかしい場合がある。 正しい幅に対して半分くらいの位置で折り返してしまう。 そんなときは、適切な幅を指定したいDOMに対してbackground-colorを指定してあげると良いです。 注意すべき点は、 最下層のDOMに対してbackground-color を設定しなければならない。 backgroundプロパティではダメ。background-color でないといけない。 という2点です。 また、背景に色をおけない状況においては、透明png等を代わりに置くとよいようです。 ちょっとこれは知らないと到底思いつかないハックです。
cssのzoomプロパティを使用した状態で、jQueryのoffsetメソッドを使用すると正しい値を取得することができない。 一方で、ネイティブのoffsetTopを使用すれば、cssにzoomを使用していても正しい値を取得することができる。 従って以下のようにコードを書き換えると良い。 jQuery:
canvasのサイズをwindowサイズに合わせて画面いっぱいに表示させたい。 そんなとき、canvasのサイズ指定をjQueryの.css()を使ってやろうとするとうまくいきません。 具体的に書くと、 HTML:
スマホから検証するときなど、長いベーシック認証パスワードをわざわざ 手打ちで打ち込むのは面倒だし不毛ですよね。 そんなときはこのやり方を使いましょう。 例えば、 というURLに対して ID: piyopiyo PW: born というベーシック認証がかけられていたとき、 というURLに対してアクセスすれば、ベーシック認証を手打ちすることなくアクセスすることができます。 (アクセスした際に、このサイトは危険ですというようなメッセージが出ますが、「無視をする」を選べば問題なく開けます) このURLをスマホに対して送信し、そのまま叩けば手軽にスマホ検証を行うことができます。 もちろん、スマホへの送信は十分セキュリティの高い安全な方法で。 Register as a new user and use Qiita more conveniently You get articles that mat
長いURLをDOMの中に流し込むと、DOMにwidth指定しているにも関わらず、 そのwidth幅以上にDOMが広がってしまうことがあります。 URLは自動改行してくれない場合があるためです。 そんなとき、単語の途中であっても強制的に改行してくれるようにするcssプロパティが、
GoogleDocsのvisualization APIを使えば実現できます。 URLは、 ですね。JSON形式で指定したIDのスプレッドシートの中身を取得することができます。 ただし、SpreadSheetは「ウェブに公開」されている必要があります。 「ウェブに公開」状態にするには、スプレッドシートの画面から 「ファイル」→「ウェブに公開」でできます。 わざわざサーバーを立てることなく簡易的なAPIをさくっと作れるのは便利ですね。 値の更新もブラウザから簡単にできるのも便利です。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dar
このページを最初にブックマークしてみませんか?
『@gonshi_comのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く