ひっそりと、Webサービスをリリースしました。 http://tag-chat.net で、チャットがメインのSNSです。 自動でマッチングしてチャット相手を見つけてくれるマッチングチャットや、すぐにチャット相手を見つけてくれるフリーチャット、コミュニティチャット、フレンドチャットなど、とにかくチャットがメインのSNSです。 ■自分について 昨年の４月から、プログラムを学び始めた素人。２２歳。札幌在住。 ■今更SNSを作ろうと思ったきっかけ FaceBookがウザい。というか嫌い。 これがきっかけ。 顔本が良いSNSだと話題になっていたので、実名登録してみた。大学の知り合いが見つけてくれて、友達登録などが増える。（ほとんど話したことがない人からも友達登録が来て、「おぉ！これで俺も友達が増えるんだ！」とワクワクしていた）。 が、流れてくるのは自慢ばっかり。 コミュ障で彼女はおろか、女友達もほ

はじめに：「僕にもそんな頃があった」 先日、西脇.rb＆神戸.rbの合同勉強会として「RailsプログラマのためのSQL勉強会」を開催しました。 この勉強会は出題者（＝僕）が出したSQL問題を他の参加者が解く、というスタイルの勉強会です。 参加者の方の中には最近プログラミングを始めた、という人も何人かいました。 そういう人にとっては問題がちょっと難しかったので、ときどき僕がサポートに回って質問に答えたり、解き方をある程度教えたりしていました。 また、話がちょっと脱線して「僕が作ったこれぐらいのWebアプリは、伊藤さんなら何時間ぐらいで作れますか？」みたいな質問を受けたりもしました。 その中で言われたのが、 「説明されたらわかるけど、自分一人でこの答えにたどり着くのは無理です」 「えっ、そんな短い時間で作れるんですか」 といったようなコメントです。 そういったコメントを聞くと、「あー、僕にも

MacのTerminalは、コンパネの「ネットワーク環境設定」のプロキシ設定を拾ってくれないようです(´・ω・｀)ｼｮﾎﾞｰﾝ というわけでTerminalにproxyを設定する。 Terminalを開いて、 $ export http_proxy="http://servername:port" $ export https_proxy="https://servername:port" とすればよい。 解除するときは、 $ export http_proxy="" $ export https_proxy="" まあそれだけなんですがあんまりネットに載ってないようなので困っている初心者のために....

icotile has been terminated in March 2023. Until then, 82,690 twitter accounts have used the app since 2011. Thank you for using! icotile（アイコタイル）は 2023年3月にサービス終了しました。2011年のサービス開始以来、82,690 アカウントのご利用がありました。ご利用ありがとうございました！ What's icotile?"icotile" is a Web application which enables you to manage your Twitter's followers, followings and lists easily. icotile3 is available on both desktop and mobile. 「

毎月公開されたデザイン性の高いフリーフォントのみをピックアップし、まとめてご紹介しています。今回は、2018年6月度のフリーフォントまとめです。 プロフォント顔負けのウェイト数が揃う万能フォント、最近よく見かけるようになったレトロ、ビンテージフォント、高級感のある筆記体や手書きブラシフォントなど、実践で活用できる素材で、商用利用に対応したアイテムも多数収録しています。 商用利用の有無について一緒に記載しています、変更されている可能性もあるので、参照ページを確認するようにしましょう。 デザインの現場で役立つ、すごいフリーフォント素材60個まとめ 2018年5月度 【デザイナー必見】差のつくデザイン、すごいフリーフォントまとめ 木漏れ日ゴシック 「デジタル」と「先生が黒板に書いた字」を混ぜて割ったようなイメージ。手書きの流れを残して、カタカナの方が小さめで、優しい雰囲気を演出できます。 ※　個

CSSで子要素を親要素の中心に配置するには、水平と垂直の両方の方向に対して中央揃えにする必要があります。特に、子要素の幅や高さが不明な場合はやっかいです。 幅や高さが不明な子要素を親要素の中心に配置するIE8にも対応した古い方法、モダンブラウザ対応の最新の方法を紹介します。 Centering: The Newest Coolest Way vs. The Oldest Coolest Way 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 子要素を親要素の中心に配置するIE8にも対応した古い方法 子要素を親要素の中心に配置するモダンブラウザ対応の最新の方法 画像やテキストごとに適した配置方法は、下記の記事をご覧ください。 高さが分からない要素やテキストを上下中央に揃えるスタイルシートのまとめ 要素を上下左右の中央に配置、最近主

メモしていたのが溜まってきて自分用にまとめたのでシェアします。 ここ最近のばかりではなく少し古めのも多いですが、いずれも細字スタイルのフリーフォントで、シンプルなものからデザインされたものまで全50種類です。 使用時に作者確認が必要そうなものや個人利用のみというのがあるものの、全体的には商用利用も可能なフォントが多めです。 紹介しているフォントを使用する際は、ライセンス等は各自で再度確認してください。

こんにちは。 今回は好き嫌いを選択するだけでカラーパレットを作れるサイト「Palettable」！です。 好きか嫌いを一色ずつ選んで、カラーパレットを作るWebサービスを紹介します。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

Photoshopで普段私がやっているスライスのしかたを紹介します。 誰だって、できるなら楽したいですよね。 ごきげんよう、だれかです。 今回は私が何気に好きな作業、Photoshopでのスライスのしかたを紹介します。 スライスとは、簡単に言うと作ったデザインをコーディング用に分解して、ひとつひとつの画像にしていくことですね。webページを作成するのに欠かせない作業です。 ちなみに私、記事を書くのは挨拶含めてこれで3回目。まだちっとも慣れていません。 なもんで、ブログの記事を書く練習も兼ねてます。ドキドキだわ・・・。 スライスについて まずは、スライスの流れを簡単に説明します。 名前そのままの「スライスツール」を選択。スライスしたい範囲を枠で囲います。 必要があれば「スライス選択ツール」に持ち替えて、微調整をします。ちなみに、右クリック→「スライスオプションを編集」またはスライスをダブルク

こんにちは。フロントエンドのつっちーです。 以前は最先端感をプンプンさせていたSPA（シングルページアプリケーション）ですが、最近では事例や情報が増え、当たり前に選択される技術となってきたように感じます。今後もどんどん使われていくのでしょう。ですが、だからといってサーバーサイドテンプレート（Haml、Slim、テンプレートとしてのPHPなど）やHTMLファイルへのマークアップが無くなるわけではありません。SEO対策、CMSやフレームワークへの適応など、様々な理由でまだまだ使われていくはずです。 ではSPAと、サーバーサイドテンプレートやHTMLファイルへのマークアップと、両方に使えるフレームワークはないものだろうか？ そう思い調べてみたところ、Vue.js がまさにそれでした。案件でも実際に使用し、大きなメリットを感じられたため、記事にまとめておこうと思います。 Vue.jsのSPAでの用

エンジニア(プログラマー)をやっていると基本的には徐々にレベルアップしていきます。 しかしある点で閾値を越えて、レベルが一気に上がると感じる瞬間があります。 皆さんどうでしょうか? 自分の場合は クラスメソッドとインスタンスメソッドの違いをはっきり理解したことがそのきっかけでした。 これまでぼんやりとモデルにメソッドを追加していたものがかなり自信を持ってメソッドを追加出来るようになりました。 今回はクラスメソッドとインスタンスメソッドの違いを簡単に紹介して、他にも初級者から中級者に上がるようなパターンを考えてみたいと思います。 クラスメソッドとインスタンスメソッドの違い 本当にその名の通りなんですが、 クラス全体で使えるのがクラスメソッド あるクラスのインスタンスで使えるのがインスタンスメソッド 具体例を書くと、rubyでは class Dog #クラスメソッド def self.chog

はじめに プログラミング系の時事ネタは能動的に情報収集しないと入ってこないのですが、若手だった頃はどうやって情報を仕入れればよいのかさっぱり分かりませんでした。 情報収集のコツを掴んでからパッと視界が開けた経験があるので、特に新米エンジニアの方は参考にしてみてください。 ニュースアプリ Gunosy、SmartNewsなど色々試しましたが以下の２つがプログラミング系記事多めでした。 通勤時間などに流し読みして、気になるものは深く調べると良いです。 はてなブックマーク(テクノロジー) presso(webアプリ開発) ※2016年4月末に終了 ITニュースサイト 技術全般 TechFeed Menthas POSTD SELECK フロントエンド UX Milk Frontend Weekly 海外記事 TechCrunch Frasco Web系企業・エンジニア技術ブログ 最近はどの会社も

土曜日も1人で泊まれて、個室で気兼ねなくご飯食べれてかつ、お湯も良い宿を探せ 1人旅をするようになって、10年以上経ちます。 いつからか、大広間やダイニングでの食事も、バイキングもまったく平気になりましたが、10年前は「できれば部屋食もしくは個室食事処で夕食も朝食も食べられる宿に泊まりたい」と思っていました。 もともと、外食であれば大抵のお店に1人で入ることができたはずの私でも「宿の大広間で一人ごはん」には抵抗があったのですから、一人旅を始めて間もない、あるいはこれから始めようとしている方にとって、温泉宿での夕食がハードルになることは多いのではないでしょうか。 また、私は土日休みの会社員。泊まるのも圧倒的に土曜日が多いのですが、10年前は今よりもずっと、1人で泊まれる宿が少なくて宿探しに難儀しました。 そんなわけで今回は、これまで私が実際に一人で泊まった宿の中から ・夕食、朝食共にお部屋で

突然ですが、皆さんはJavaScriptのフレームワークを学習したことがありますか？ 数あるJavaScriptのフレームワークの中でも、シンプルで学習障壁が低いと言われているのが「Vue.js」です。ご存知でしょうか。 まだ比較的若い気鋭のフレームワークではありますが、データのやりとりを中心に様々なことを実装することができます。JavaScriptを触ったことがあるけれども、まだフレームワークまでは触ったことがないという方にはぴったりのフレームワークです。 そこで今回は、簡単なJavaScriptの知識しかない方でもスムーズに基本を理解できるように、わかりやすくVue.jsの概要について解説していきます。 Vue.jsとは？ JavaScriptのフレームワークとして有名なものに、「Node.js」や「AngularJS」、「jQuery」などがありますが、*「Vue.js」*とはどのよ

はじまり・ページを開くとYouTube埋め込み動画を自動再生させる方法？ 動画を自動再生させる事自体の行儀良し悪しについては、ここでは置いておきます。 とりあえず、僕個人は特にモバイル機器ではユーザーが望まないタイミングでギガを消費させるのは(言ってみたかっただけ)サイトの印象悪化につながりかねないので、やめておくのが無難だと考えてます。 所要で、ウェブページに埋め込まれたYouTubeの動画を自動再生出来る方法を調べる機会があったので、その調査のメモです。 先に結論・全環境対応させるには、多分videoタグを使うしか無い(消音限定) 執筆日の時点では、iOS/Android/PCの全環境でYouTubeの自動再生は多分無理です。 vimeo(ヘルプセンター)やDailyMotion(FAQ)等、他の動画サービスでも難しそうです。 自分のサーバー等に動画ファイルをアップロードして、そのUR

YouTubeの埋め込みコードで動画をWebサイトに埋め込むことが出来ますが、再生や停止をJSでコントロールしたい場合があり、調べてみました。 ちなみにYouTubeはie8のサポートはもうしていないみたいです。ie8でYouTubeにアクセスすると以下のような画面になります。 実装 Sample Page HTML HTMLでポイントなのは、iframeのsrcにenablejsapi=1というパラメーターを付加することです。 enablejsapiに1を設定することでプレーヤーJavaScript APIが有効になります。 その他のパラメーターはこちらを参照 → YouTube IFrame API Parameters <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wid

:before, :after, :last-child, :nth-child, :not など疑似classを使った小技、レスポンシブ用のレイアウトやフォントのサイズ指定など、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 前回紹介した時は12個でしたが、アップデートされ、20個まで増えています。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区切りにする 5. ネガティブな「:nth-child」を使用してアイテムを選択 6. SVGファイ

以下はCSS MENU MAKERというメニューCSS作成サイト内にあるブログ、10 Handy CSS Selectorsの日本語訳です。 いつも以上に意訳というか適当訳多め。 10 Handy CSS Selectors 空の要素、特定の要素、または任意の要素をターゲットにできる強力なCSSセレクタのことを知っていますか？ 経験豊富なフロントエンド開発者は皆知っています。 古い開発者はこれらの使用を嫌がるかもしれません。 しかしブラウザの開発はこんにち益々加速しており、今更使用を躊躇するべきではありません。 上記を念頭に置いて、今すぐ使い始めることができる便利なセレクタを10種類、以下に用意しました。 古のIEはサポートしていませんが、そのためにPolyfillというものが存在します。 + ある要素の直後に存在する要素だけを装飾したい、そのような場合は隣接 しぶりんセレクタ ( Adj

CSS3プロパティを使った、便利な実装テクニックを随時追加していきます。 1. 並んでいる要素の最後だけスタイルを適用しない ★対応ブラウザ → 確認 リストなどでマージンを調整する際、通常は:last-childで最後の要素のスタイルを上書きすると思いますが、:not()を使うことでもっとスマートに記述できます。