Join our community of software engineering leaders and aspirational developers. Always stay in-the-know by getting the most important news and exclusive content delivered fresh to your inbox to learn more about at-scale software development.
はじめに 今回はPython製のWebサーバ&WebフレームワークであるTornadoを使ってチャットを作ってみます。Tornadoを使う理由は、デフォルトでWebSocketに対応しているため、リアルタイムのサービスを作りやすいからです。 使うもの 使うものは以下の2つです。 Tornado jquery.ui.chatbox サーバサイドにTornado、クライアントサイドにjquery.ui.chatboxを使います。jquery.ui.chatboxを使うと比較的楽にチャットを作れます。 コード サーバサイドでメインの処理をしているのは以下のコード。waitersとmessagesに接続している人と送られてきたメッセージを記録しています。 class ChatHandler(tornado.websocket.WebSocketHandler): waiters = set() l
画像の軽量化やコード圧縮といったツールをはじめ、各種リファレンスサイト、利用している人が多いエディタやデザインツールのショートカット一覧など、web制作時に便利だと思うツール・サイト・チートシートを自分のブックマークがかなり乱雑化してきたのでその整理も兼ねて一気にまとめてみました。 もちろん他にもこういった便利なものは沢山ありますし、自分も普段からここで紹介しているもの全てを利用しているというわけではないのですが、こういったものを利用することで人によっては大幅に制作時間を減らすこともできると思います。 また、覚えておくとど忘れした時に容易に確認等もできたり、勉強時の参考にすることができるものもあります。 September 01, 2020 更新 リンク切れサイトを削除しました。(100サイト以下に縮小しました...。) January 16, 2016 追記 新たに5サイトを追加して10
[レベル: 中〜上級] Google for MobileというGoogle主催のイベントが12月9日にパシフィコ横浜で開催されました。 モバイル検索に関わるセッションに参加してきたので、この記事でレポートします。 セッションスピーカーは、先週の「Duncan と Eriko のなんでも相談室 – App Indexing 編 –」に登場したDuncun Wright(ダンカン・ライト)氏です。 ダンカンさんは、モバイルユーザーの検索体験を向上させエンゲージメントを高めるための最新技術について話しました。 背景 − なぜ検索とWebが重要なのか セッションの背景として、アプリの台頭が目立っているモバイルの世界でなぜ検索とWebが重要なのかをダンカンさんはまず説明します。 調査会社やGoogle内部のデータから次のような事実が明らかになっています。 一般ユーザーがインストールしているアプリの
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、ヤフーでiOSアプリを開発している林です。 私が関わっているYahoo!ショッピングでは、iOSアプリをObjective-CとSwiftの混在状態で開発しています。今年の6月末からこのスタイルに切り替え、新規で書くコードは原則Swiftを使い、徐々にObjective-Cで書かれたコードを減らしている状況です。一方で完全にObjective-Cのコードを捨てることは現実的でないとも考えており、混在状態がこの先もしばらく続く想定でいます。 Yahoo! JAPANのアドベントカレンダー14日目は、この形に至った経緯・開発の進め方・そこから得られた知見を共有したいと思います。 プロジェクトが動き出すまでの経緯 Yahoo
実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f
@kazumich さんにお声がけいただき、WCAN 2015 Winter でおよそ 60 分ほどのセッションを登壇してきました。32:9 のスクリーンがあるという、TED でもやるんかオイという特殊な環境でした。普段はプロジェクター的な投影なので、スクリーンの前に立つのが微妙なんですが、ここはディスプレイが壁面に大量に並んでいて自ら発光するので、部屋を暗くしなくてもテレビのように十分に見えますし前に立っても平気です。 一緒に登壇したのが @yhassy さんと @Hidehisa さんということもあり、近年まれに見る胃痛を伴う緊張を味わいながらお話させていだきました。(リアルにセッション終了後、1時間くらい胃痛がズキズキしてました) 技術的なお話でした 参加されたみなさま、メインセッションや LT に登壇された各位、ならびに運営されたスタッフの方々、ひとまずお疲れさまでございました。貴
見た目はとても重要だけど 第一印象は Web サイトやアプリデザインでも重要です。見た目が良いということで、使い始めてくれる場合がありますし、製品やサービスの評価が中身ではなく見た目で判断されることがあります。人は 0.05 秒で Web サイトの良し悪しを判断する傾向にあるので、見た目は良くしておくべきでしょう。しかし、長く使われる要因がビジュアルではなく、コンテンツということは多々あります。 例えば Reddit はデザインが洗練されたサイトとは言えませんが、世界的に利用されているサイトです。 利用者が求めているコンテンツがそこにあれば、見た目が少し良くなくても人は戻ってきます。 しかし、これは良質のコンテンツがあれば、デザインは必要ないという意味ではありません。先述したように、見た目で印象が変えることができますし、使い勝手も向上すればコンテンツへアクセスしやすくなるはずです。 そこで
この記事は「Webデザインセオリー Advent Calendar 2015」の11日目の記事です。@striveさんの「Webデザインの価値と効率を上げるため意識していること Webデザインセオリー Advent Calendar 2015」というとても戦略的でいい記事から一点、小手先の話ですみません・・・! デザインに写真を使うときにわたしがよくしていること 「デザインセオリー」というと「これをやればデザインはOK!」みたいに聞こえますが、もちろんそんなことはなく、自分が画像をトリミングしたりマスクするとき、イメージや印象を伝えるために、どんな手法をよく使うかということを実例を交えながらご紹介します。 グラデーションマスクにこだわってみる メインイメージなどで、写真の上にメッセージを重ねるのはよくある手法ですね。例えばこの緑をバックにした女性の写真を使用して、上に文字を重ねましょう。
<hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } </style>
これは Vim Advent Calendar 2015 の 9 日目の記事です。 はい、タイトルは盛りました。正直「実装」と言えるほどのものではないので最初に謝っておきます。すみませんすみません。 サクラエディタ (以下サクラ) というのは Windows 用のテキストエディタなんですが、とある事情でこのエディタを Vim ライクなキーバインドで使えるようにしたことがありました。これはその時の思い出話になります。 自己紹介 当時、私はとある零細下請け SIer で働くシステムエンジニアでした。回ってくるのは客先常駐の堅い現場ばかり。ネットに繋がっていない PC で作業することが殆どでした。 サクラエディタとは サクラエディタ サクラエディタはMS Windows上で動作する日本語テキストエディタです. 行く先々の現場では必ずと言っていいほどサクラが使われていて、私もほとんどのショートカッ
ごく普通のHTMLでも、BootstrapでつくったHTMLでも、あっという間にWordPressのテーマファイルに変換するオンラインサービスを紹介します。 HTML To WordPress HTML To WordPressは非常にシンプルな操作で、HTMLのフォルダをアップロードするだけで、簡単にWordPressのテーマに変換されます。変換したテーマはプレビューは無料で、テーマのダウンロードは1HTMLごとに$9、制作の手間を考えるとかなり魅力的な価格設定だと思います。 という訳で、静的なHTMLを用意してさっそく試してみました。 用意したHTMLは、こちら。 Land.io -GitHub ダウンロードページ 個人・商用利用、無料。 Bootstrap 4をベースにしたテンプレートで、新しいカードコンポーネントを使い、繊細なアニメーションでコンテンツを魅力的に見せています。 La
注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造(セマンティック)を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content(コンテンツ) テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width(幅) と height(高さ)プロパティで指定することができます。 padding(パデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く