はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Web技術でモバイルネイティブなユーザインタフェースデザインを提供するIonic Frameworkですが、Webで配信するとユーザのデバイスはモバイルだけということはなく、ユーザはデスクトップで閲覧する可能性もあります。そこで、デスクトップに対応させるいくつかのレイアウトのヒントをご紹介します。 1. SideMenuレイアウト まず一番ベーシックなデスクトップ対応はSideMenuを利用することです。TechFeed Proなど広く採用されています。 ポイントとしてはモバイルレイアウトではハンバーガーメニューをSideMenuをあくまでメニューの配置だけに利用することが多いですが、デスクトップではSideMenu上部（左上）にロゴを配置することが重要です。 デスクトップレイアウトでは左上もしくは上部中央にロゴがあることが多く、ロゴさえあればそれっぽく見えます。（暴論 もっとシンプルに配

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事はAngular Advent Calendar 2018の6日目の記事です。 概要 GitHubもCMSだよね クライアントがGitHub上で修正したらもっと幸せな世界が待ってる リスク管理や速度の部分はAngularのAOTビルドが担ってくれるよ Webサイト構築でこそ、Angularを使おう CMSに代わるGitHubという見方 CMSって皆さん利用されていますか？Contents Management System、簡単にいうと動的に入出力できるシステムで国内で最も活用されているWordPressもそのひとつです。 ちなみに、よく聞く「導入する理由」は「クライアントが更新できるから」。 ちなみに、CMSがない世界だと受託業務の業務負担はこんな感じです。 まぁ今だと修正依頼はメールがメインだと思いますが、せっかくクライアントが文面をデータ入力してくれても（もうFAXで修正依頼

世間のWebサイトをみてみると「横幅120pxのサムネイルに、1600pxの画像が使われている」ということがちょいちょいありまして、ソースコードを確認してみると ウインドウサイズが2000pxの場合の場合は800pxで表示して、スマホだと120pxで表示する。 またRetina対応をしているから、解像度の2倍が必要で、800px@2xだから、大きい方にあわせてる というパターンを結構みかけるので、あらためてimgの属性であるsrcsetとsizesについてまとめておきます。 大きい画像はファイルサイズが大きい おそらくこの記事をご覧いただく方には「何を当たり前な」と思われると思うのですが、もう少しお付き合いください。 猫のオリジナル画像があります。ちなみに、この画像は横幅1024pxで、ファイルサイズは74.0 KBです。 これをサムネイルで横幅150pxで表示した場合は、ファイルサイズは

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

GoogleはJavaScriptを読むことはできるが。 Googleの進化は早いもので、「JavaScriptフレームワークは検索に弱い」と言われたのは今は昔。JavaScriptをちゃんと読み込み、レンダリング後をインデックスしますので、今では検索結果に表示するためだけにServerSideRenderingやpre-renderingをする必要はなくなりました。 ただ、その一方で、Googleのクローラーで採用されているJavaScriptのバージョンは低いです。ES5を使ってる模様。ES6以降を使って書いているJavaScriptコードは、Googleのクローラーは認識しない可能性があります。 AngularはES5への互換をデフォルトでは外している AngularにはES5互換のためにスターターテンプレートにsrc/polyfills.tsが内包されています。これを使うと、ES5

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 10年以上前からWebの勉強は「まずHTMLを覚えて、フォントサイズをかえて『すごーい』」という学習がメジャーですが、それって本当に正しいのかなという記事です。 前置き ー Ionic Frameworkとは 「Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉」が発売されます。 IonicはHTML5でモバイルアプリをつくるためのプラットフォームです。 1ソースでWeb/iOS/Androidアプリがつくれることから、ドワンゴ、pixiv、Exciteといった有名企業も採用しており、「Webアプリをつ

（この記事はIonic Advent Calendar 2017の12/21のエントリーです） 以下のツイートが話題を集めました。 「Appleから、2019年からXamarinやPhoneGapでつくったアプリはリジェクトされる計画があるというメッセージをもらった」 A friend of mine received today this email from @Apple. @MikeCodesDotNet @ruiespinho @jsuarezruiz @mattleibow @matthewrdev @JamesMontemagno @jamesmcroft @Cheesebaron @aloisdeniel @adpedley @jassmith87 @onovotny @paulcbetts @GeoffreyHuntley @pierceboggan @migueldeic