かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ

（この記事は 地平線に行く とのマルチポストです） 本番環境でやらかしちゃった人 Advent Calendarで、このパターンのやらかしはなかったのでキーボードを叩くことにしました。 番外編のつもりでお楽しみください。 この記事が、新たな障害発生を防ぐことにつながれば幸いです。 何をやったのか ある日、ちょっとした調査のために本番データベースのデータを確認することになりました。 （個人情報が格納されているようなシステムではなかったので、必要であれば本番データベースへのアクセスが許されていました） もしメンテナンスがあればそのタイミングでやればよかったのですが、直近では特に予定はないとのことでした。そのため、システムが動いている状態のまま作業をすることにしました。 ごく単純な SELECT を実行するだけのつもりだったので、システムに影響がないと判断したためです。 その際、万が一コピペをミ

背景 間違って入ってしまったSI企業での開発経験談です。 入社前に「バックエンドの経験しかない」と伝えたがフロントもやる羽目に。 入って知ったLAMP環境での開発。あと顧客の窓口もやる羽目に。 私の担当するシステムは二期目で、引継ぎなし・ドキュメントなし・前任者なし、のトリプルコンボ。 PCは13インチのラップトップ、サーバはレンタルサーバ。 Gitなし、CIなし、規約なし、静的チェックなし（エディタはサクラ）。 既存コードがPHPなのにオブジェクト指向じゃない。フレームワーク使えない。 開発規模はだいたい20人月。期限は3か月。 偉い人「OSSﾊｾｷｭﾘﾃｨｶﾞｰ」 開発の流れ ローカル環境（MAMP）で実装。 実装したファイルをFTPソフトでレンタルサーバのテスト環境にアップロード（上書き）。 テストを行って（テスト仕様書なし）動けば本番環境にアップロード なお、開発環境を変える裁量は

この記事は「本番環境でやらかしちゃった人 Advent Calendar 2019」の1日目です。 https://qiita.com/advent-calendar/2019/yarakashi-production なかなか濃いラインナップが期待されますが、まずはさらっといきたいと思います。 具体性が乏しい部分もあると思いますが、そこはお察しください。。。 やらかし 背景（前提条件） いっていに昔の話です ETL（データ加工）サーバ 数十を超えるシステムからデータを集める BIツールなどで活用できるように各種加工処理を行い、DBなどにロードする 繁忙の違いはあれど、24/365で常時一定量の処理は稼働している 複数のチームが共存しているサーバ アプリ面では比較的疎 ETL処理のリリース前に本番サーバ上で試験をする取り決めになっていた 性能や本番相当データのテストが安全に行えるような環境

Product Huntをみていたら、　Stackというアプリが話題になっていたので、チラッとみてみました。 Webアプリを一元管理できるようで、有名どころだと「Franz」「Station」があります。 私は「Station」を愛用しており、乗り換える気持ちはなくて、「試しに触ってみるか」くらいの感覚でDLしました。 （Product Huntで超人気アプリを使ってみたかったというのもあります） 使ってみた結果、最高に便利な一元管理アプリで、速攻でstationから乗り換えました(掌返し) ぜひ皆様にその感動をいち早くお届けしたくて、超久しぶりにQiitaに投稿します。 →https://stackers.app/ ※2019/9/27時点、Mac限定のアプリです。 Stackを激推したい３つの理由 個人的にStackいいなぁと思うポイントは３つあります。 横スクロールで一望できる カテ

PHP 8から、PHPは「PHP」と「P++」という2つの言語を提供するようになる というキャッチーな紹介をするP++: 静的型付けをめざすPHPという記事がそれなりに話題になり、このニュースは目覚しく革新的な内容で、多くのひとの目を引き付けました。 これは早まった理解であり、ほとんど誤報と言ってもいい内容でした。2019年8月15日には提案者本人も、少くとも「P++」の計画を短期的に実現するととは非現実的であり時期尚早であることを認めています。 この記事では、PHP開発の現状、なぜ野心的なP++計画が提案され、事実上撤回されたかの経緯について紹介します。 [中立性のための表示] この記事の著者@tadsanはPHPの静的解析を強く推進する立場です。 PHPゆるふわCI入門 PHP型検査･夢と理想と現実) 三行で要約 PHPはバージョンを経るごとに「歴史的経緯」による負債が削ぎ落されてきた

この記事の概要 プログラミング学習を続けてきて、ちょっと疲れた人向け プログラミングに対するモチベーションが下がった時、息抜きに見ると良い映画リストの紹介記事を和訳したもの 元記事：https://medium.com/the-andela-way/10-movies-to-get-you-coding-again-3d463b1bd9af いずれもAmazon Primeビデオにラインナップされている（ダイレクトマーケティング） 作品ラインナップ １）SILICON VALLEY（ドラマシリーズ） ２）MR.ROBOT（ドラマシリーズ） ３）バトル・オブ・シリコンバレー（映画） ４）ソーシャル・ネットワーク（映画） ５）アイアンマン（映画） ６）スティーブ・ジョブス(2013)（映画） ７）ファウンダー ハンバーガー帝国のヒミツ（映画） ８）イミテーション・ゲーム/エニグマと天才数学者の

先日、同僚と「世の中のエンジニアはターミナルにどんなalias設定をしているんだろう？」という談義になったので、GitHub上の1000リポジトリのコードから調査してみました。 2019/04/10 コメントを元に微修正しました。コメントくださった方々、ありがとうございます。 2019/04/11 こんなのも書いてみました。 よく使われているvimrcの設定ランキング 2019/04/15 プラグイン版も書きました。よく使われているvimのプラグイン top20 aliasとは wikipediaより UNIXなどにおいてコマンドを別名で登録したもの。別名を登録するコマンド名。 長いコマンドやいつも利用するオプションを毎回入力するのは手間ですよね？ ターミナルの設定ファイルにaliasを記述することで、別名として定義することが可能というわけです。 調査方法 GitHub APIを利用 do

ガイヨウ オレ オマエ ゲンシジンスル プログラム カイタ ゲンシジン ジョシ ツカワナイ ゲンゴショリ スル ジョシ ケス ゲンシジン カンジ ヒラガナ シラナイ ゼンブ カタカナ スル サンプル import requests import json import sys BASE_URL = "https://api.ce-cotoha.com/api/dev/" CLIENT_ID = "オマエ アイディ イレル" CLIENT_SECRET = "オマエ シークレット イレル" def auth(client_id, client_secret): token_url = "https://api.ce-cotoha.com/v1/oauth/accesstokens" headers = { "Content-Type": "application/json", "charse

Webサービスでアカウント削除機能を要求するユーザの話はよく聞くわけですが、これには残念ながら全く意味が無いと、1Webエンジニアであるぼくは思っているのですが、その理由をだらだらと書いてみようと思います。非エンジニアでも分かるように書いたつもりですが、作者が特にそういう能力に秀でているわけでもないので難しいかもしれません。 技術的な問題 現代の多くのWebサービスはデータの保存をRDB(SQL)に依存しています。これには色々特徴があるわけですが、実際の実装を想定して説明していきましょう。 ユーザがいます。ここではUserというTableとしましょう。RDBで定義したTableは同じ形式の物を沢山保存することができます。なので、作られた沢山のUserは1箇所のTableに纏めて配置されます。 Twitterみたいなサービスを想像すると、ここでTweetできる必要がありますね。TweetはT

ここでは、最強のMarkdownエディタTyporaについて紹介する。 機能に関しては随時更新予定。 ざっくり概要 Typoraを使ってMarkdown書いているときの様子は以下のような感じになる。 後述するが、記述したその場でスタイリングしていく仕組みなので、「プレビュー表示」という概念がない。 そのため、目線を行ったり来たりさせる必要がない。 例えば、 上記のように#記号に続いて文字入力を行い、Enterキーで改行すると.... このように、自動的にその場でMarkdownの見出し表示になってくれる。 Typoraのいいところ 記述したその場でスタイリングしていく仕組み そのため、2つの画面を目で行ったり来たりする必要がない 操作が極めて直感的 高機能であるにも関わらず、インターフェースがとてもシンプル 数式・画像の挿入、表の作成など、通常のエディタだと苦戦するような操作も非常に簡単に

プログラミングは難しい 注意： この記事は「プログラミング学習とはかくあるべき」、「こうやって学習するのが一番」ということを言いたいのではなく、プログラムを勉強したいが右も左もわからない人に少しでも勇気と情報を与えることを目的としています。過去の挫折経験からか、なかば愚痴っぽくなっていますがご勘弁を はじめに自分のプログラミング歴を軽く紹介して起きます。 年 言語 学習目的 2010 C言語 学校の実習 2011 C++ 組み込み系 2012~2017 None None 2018 Go,Js,Scala,Python 研究、Web開発 といった感じです。2012~2017年がNoneになっているのには原因が「C言語に挫折し、とにかくプログラミングがしたくなかった」からです。そう思ってしまった原因と、そこから立ち直ったことがこの記事を書いた理由です。 「おいおい、C言語ごときで挫折とは情け

悲報 2019年6月26日現在、TeamSQLのサポートがなくなってしまったようでダウンロードできなくなくなりました。。 TeamSQL has retired and is not available for download anymore. 今までSequel Proを重宝してきましたが、それを超えるGUIツールが出てきました。 その名も、TeamSQL 現状サポートしているものだけでもかなり豊富 今後、elasticやmongoDBにも対応されるようです。 機能 クエリ保存 履歴保持 ファイル出力 抽出した結果をボタン１つでcsvやjson形式に保存可能。 共有 データをエクスポートしなくても共有が可能。 グループの作成が可能なため、特定のユーザー同士で簡単に共有ができるとこがメリット。 可視化 様々なチャートでクエリの可視化が可能。 そのままイメージとして保存も可能。 テーマ選択

コメント欄で「Software Design 誌 (2018/12) に寄稿した内容や修正などをこちらの記事にも適用したい」と言ったあと、やるやる詐欺でずっと放置していましたが、三年近く経ってようやく 2021年 7月に大幅に改訂し、同時に Zenn に引っ越すことにしました。 タイムゾーン呪いの書 (知識編) タイムゾーン呪いの書 (実装編) タイムゾーン呪いの書 (Java 編) なにやら長くなりすぎたので三部構成になっています。 この Qiita 版は、しばらく (最低一年は) 改訂前のまま残しておきます。 タイムゾーンの存在はほぼ全ての人が知っていると思います。ソフトウェア・エンジニアなら多くの方が、自分の得意な言語で、タイムゾーンが関わるなにかしらのコードを書いたことがあるでしょう。ですが、日本に住んで日本の仕事をしていると国内時差もなく1 夏時間もない2 日本標準時 (Japa

更新履歴 2018/08/23: コメント欄にその後の進展を書き込みました。申請内容としてTwitter側が欲している情報の参考になるかも。 2018/08/30: 記事の最後に謎な結末を追記しました。 背景 developer.twitter.com への新規登録がアナウンスされた なお、既存の apps.twitter.com は停止が予定されている 『プラットフォームの健全性向上を目指す開発者向けの新しい要件』 - 開発者ブログ Twitter ランド、開発者的にはどんどん生きづらくなって行きますね。つらい・・・。まぁ、スパマーがいるせいでこういった厳しい制限を設けなきゃいけない事情も分かるっちゃ分かるので仕方ないのかも。悪いのはスパマーなのだ（と思うことにする）。 User profile 関連付けるユーザープロファイルを選択します デフォルトでは、この@usernameは開発者ア

疲れてくると寄り目になっちゃう現象ありますよね。 これを有効活用する方法を思いついたので書き留めようと思います。 先日 react native でアプリを作ってたんですが、なんかの操作の前後で挙動が想定と違いました。 よく分かんなかったので、とりあえずデータの中身を表示させて、 ふとした拍子で再現しなくなると困るので念のためスクショを撮りました。 （左: バグる前 / 右: バグった後。データは今てきとーにでっち上げたものです。） 見ても分かんない、えーと、どうすんだっけ… Remote Debug 有効にして Chrome の…テキストを diff で…あぁ、目が寄るぅ…… あぁなんだ categoryId が変わっちゃってるじゃん、と一目瞭然ですね。 インデントと行数が揃ってるっていう前提の上ですが、寄り目を使うと diff 部分が マトリックスでラグってるとき風に（網膜上に）表示さ

ちまたで阿部寛のサイトが早いと話題になってます。 dev.toと阿部寛のホームページどっちが速いですか？ dev.toと阿部寛のホームページについてちゃんと計測させてくれ 阿部寛のサイトはベストを尽くしてるのか？ それを調べるために、阿部寛のサイトを高速化させてみたいと思います。 目指すべきスピード 最速はローカルのファイルへのアクセスだと思うのでこれを目指したいと思います。 file:///C:/abe_hiroshi/index.html ChromeのDeveloper Toolでレンダリング完了が「173ms」でした。 まぁここまでは無理だな… 阿部寛のサイトはどんなもん？ 速度はwebpagetest.orgで測ってみます。 レンダリング完了時間は「359ms」です。はえーな S3でホスティングしてみる サーバーを立てるほどでもないので、S3でWebホスティングしてそこにhtml

時は遡ること1年前… 以前、こんな記事を書きました。 会社が休みになるボタンを作ってみた [Amazon Dash Button] しかし、この Amazon Dash Button をハックした方式では以下の問題点がありました。 同ネットワーク内にサーバを立てておく必要がある ハック的な使い方をしているため、動作不安定 目を開ける必要がある ボタンを押す動作すら面倒くさい ノールックでボタンを押そうとするとボタン(半休/全休)を間違える そのくらい我慢しろや！という項目もありますが、 やはり運用していく上で一番面倒だったのは、自サーバをローカルに立てておく必要がある点でした。 ネットワークに流れる ARP パケットをイベントのトリガーにする仕組みなので、 サーバをクラウドへ持っていくことができなかったのです。 (あくまで、一般向けの Amazon Dash Button をハックして利用

ビジネスホテルはたまに利用するのですが、結構居心地が良いんですよね。仕事が捗ったこともありました。 ふと「一人開発合宿できるんじゃね？」と思い立ち、試してみたところ好評でしたので、今回まとめてみました。 対象読者 開発に専念したい（けど現状できてない）と考えている方 例1: 「最近だらけてるなー、開発アイデアはあるんだけど腰が上がらないんだよな……」 例2: 「思う存分、誰にも邪魔されずに開発しまくってみたいなぁ」 多人数参加型の開発合宿が合わずにモヤモヤしている方 一人開発合宿について興味を持った方 一人開発合宿とは まずは一般的な意味での「開発合宿」と、そこから派生した「一人開発合宿」について概要を話します。 開発合宿とは 開発合宿とは、開発を行うための合宿です。一般的には以下のニュアンスがあります。 複数人で行う 旅館に泊まる 開発は大会議室を借りて、そこに機材とか持ち込んで行う そ

はじめに 驚き最小の原則（法則）という言葉があります。 Wikipediaの記事を引用すると http://ja.wikipedia.org/wiki/%E9%A9%9A%E3%81%8D%E6%9C%80%E5%B0%8F%E3%81%AE%E5%8E%9F%E5%89%87 ユーザインタフェースやプログラミング言語の設計および人間工学において、インタフェースの2つの要素が互いに矛盾あるいは不明瞭だったときに、その動作としては人間のユーザやプログラマが最も自然に思える（驚きが少ない）ものを選択すべきだとする考え方である。 要するに、使うときに「おやっ？」という驚きが少ないほうが良いプログラムであるといえます1。 この記事では敢えて驚きの多いプログラムの書き方を紹介します。驚きの多いプログラムを読むとどんな気分になるか、実際に体験してみてください。もちろん、本当は驚きが少ないプログラムを書