投稿

文化祭史に名を残す、高校とその周りの周りの全ての人のための文化祭

イメージ
お久しぶりです、はるはるです。 えー何年ぶりでしょうか、もしこの記事を読んでいる方がいたら嬉しすぎて10回スクワットします(なのでコメントで教えてください!)。 RSSフィードとか機能してるのかな まあ、ひとまず今回の本題、文化祭やるらしいよー近かったら来てねーという記事です。 紹介する文化祭は千葉県立松戸高等学校の文化祭『松高祭』文化の部でございます〜 なぜ私が紹介するのか? なんと〜ホームページを作ったからです! まあ技術解説しなきゃ始まんないのでいきますよ。 いやしかし、記事を書きながら思い返すと、このテンションでこの日本語、とんでもない記事をこれまで書いてきたんだなと。 今はもう高校である程度の経験を積み、語彙も増えたりしながらでまともめな文が書けます。 ジャジャン、今回の1ポイントは cssのnth-childです! 例示と解説のためにパワポで画像作りました。 こんな感じで、あれをこれをそうしてこうすると、こうなります。 、、、 真面目に言いますと、このnth-childってどんな擬似要素なのってところは、()で指定した番目や範囲の要素に対して一括で適用できちゃうってことです。 下記に先ほどの解説図の中に書いていた内容を移しました! .humb-p span{ display: block; width:200px; height:20px; background: gainsboro; margin-top:10px; border-radius:10px; } .humb-p span:nth-child(2){ background: red; } 写真の通り、2番目のspanにのみ背景色が赤色になっています。これがnth-childですが、まだまだ沢山使い道や引数はあるので興味があればぜひご確認ください。 https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child さて、その文化祭に戻ると、松戸高校の松高祭は他の高校で松が名前につく学校の中でも類に見ないほどの来場者数の多さと、その成果物のクオリティの高さが度々話題になります。 今年は明日9月20日に開催されるということで、すごく楽しみですね! 心を...

【暇人専用】あの記事に登場した、機能に制限があるgithub.devについて

イメージ
--AD-- -- 今回は暇人専用と書いていますが、利用のヒントになる解説をしていきます。  あの記事に登場した、機能に制限があるgithub.devについて解説します 同じドメインで提供していてわかりにくい! はい、その通りだと私も思います(笑 実はGitHubの CodeSpace も github.dev も同じドメインで提供されていますが、まったく別のサービスで、混乱しやすいですよね 2つのサービスには、大きな違いがあり github.devだけのURLのエディタとCodeSpaceの違い(独自調査) github.devだけのドメインのエディター 機能/仕様 可否 リポジトリへ直接アップロード 〇 Visual StudioCodeの主な機能 〇 拡張機能 △※1 ターミナル(コマンドプロンプトみたいなやつ) × 時間制限なし 〇 ※1 一部、サーバ処理を必要としないものであれば動作する可能性があります。 CodeSpaceの場合 機能/仕様 可否 リポジトリへ直接アップロード 〇 Visual StudioCodeの主な機能 〇 拡張機能 〇 ターミナル(コマンドプロンプトみたいなやつ) 〇 時間制限なし × 時間制限は現状120コア時間になっているようです。

これはすごい。【GitHubの超進化Part2】

イメージ
--AD-- -- WEBエンジニア 集合!! 【エンジニアに朗報】VSCodeはもうインストール不要! って言ったらMicrosoftに怒られそうだけど...まあ みてみ、これ。 多分タイトルでバレてるけど、 Visual Studio CodeがなんとWebサイトで動いているんですよ。 Githubのリポジトリを直接編集して、GitHubPagesを使っていればFTPのアップロード作業とか無しでWebホスティングできるなど使い道は工夫すればたくさんある、超実用的な機能だと思います。 どうせ、見た目だけでしょ と、思ったそこのあなた! おぬし、過去にAndroidのオンラインエミュレータ探して使ったことあるな? (笑) 冗談です。 話をもとに戻すと、このGitHubの CodeSpace 機能は、WebサイトでWindowsアプリ版と同等の機能を使える!!!!! 右の写真を拡大してみてほしいんですが、なんとterminal機能も使えるんですよ。 ➡ サーバーがあなた専用に割り当てられている! ということなんですよ。 ちなみに、 4コアサーバと8コア (無料かわからん)を 選んで 使うことができ、 terminalにbashが使われていることから経験上、 Linux のUbuntuがサーバに使われていると思います。 使われているサーバの仕様やOSなどは、ターミナルから吐かせることもできると思いますが、今回は割愛させていただきます。ちょこっと追記:CPUはXeonみたいですよ 使い方 超絶簡単です。 リポジトリを開いたら、緑色の < >Code ▼ をおして、Localのタブから CodeSpace ていうタブに切り替えて、+ボタンを押してしばらく待つと見慣れたあの画面になるでしょう!これで完成です。  おまけ➡ 暇人専用【記事内でちょっと出てきたgithub.devについて】 正直、これは便利すぎたかもしれません。 今日、人類に革命が起き始めましたね。 今後もGitHub含めて、Webエンジニアの作業を快適にするアイデアをこのブログではshareしたいと思います!

総合アクセス数!

イメージ
--AD-- --   私が運営しているサイトのアクセス数を見れます! ※このサイトも含まれています!

技術解説 for ひらめきカレンダー Part1 ②

イメージ
--AD-- --  技術解説 for ひらめきカレンダー Part1-2 ということで前回に続いて解説していきます。 で、結局どう対処したのか それはGithubPagesを使うことでした。 ドメイン割り当ての手順はGlitchとほぼ同じで、DDNS NowのCNAMEにGithubPegesのドメイン部分を割り当てれば、認証まで勝手にやってくれて なんとSSLにも自動的に対応させてくれます! てなかんじで、チェックを入れれば強制SSL(私は常時SSLと読みますが) にも対応できちゃいます! 終わりに いかがでしたでしょうか。 ここまでいろいろすれば学べることもたくさんあると思います ぜひみなさんも挑戦してみてください。

技術解説 for ひらめきカレンダー Part1

イメージ
--AD-- -- この記事は技術に関する詳しい解説記事です。 一般の方は、 「ひらめきカレンダー」Part1  をご覧になることをお勧めします 技術解説 Part1 プロジェクト開始から3日が経過して 初期バージョンからいろいろ変更を加えてきましたが、まだまだ完成とは言えないですねー さて、今回は前に公開したPart1の技術的な解説記事になります。 サーバーどうする まず、このプロジェクトの達成条件(目的・目標)は、  ・技術力の向上  ・GASを知り、触れてみる   ・極限までカスタマイズできるようにする  ・出来る処理は自動化し、Excelなどで管理できるようにする  ・データの入力は専用フォームも利用できるようにする ということで今回はせっかくなのでサーバーサイドにも挑戦しました。 サーバーサイドにはPHPは今まで使ってきましたが、今回はサーバ負荷などを考え断念。 そんな中クライアントはGlitchを採用することになりました(あとでまた変更になります) GASがあるじゃない! サーバサイドをどうするか考えたとき、とんでもないアイデアを思いつきました。 ワイ  「GoogleスプレッドシートでHTTP応答できるならデータベースとしても使えて、Excel(ほぼ同じ)で管理できるなら最高やん」 となっていろいろ実験したところ、GASは奇跡的に100行未満で実装できました。 独自ドメイン 残る問題、ドメインが長すぎる点 これは無料で作らせてもらっている分、一見しょうがないと思いますが 長いURLだと内容がよくわからず打つのも面倒くさい、 という人は多い気がするので、こうなったら独自ドメインで短くするか... ドメインがプレミアム?! さすがにこの記事読む人は多分Webに精通している人がほとんどだと思うのですが、 基本的 にドメインは有料です。 そんなことはわかっていました。 探すと、どんどん見つかる問題。 ドメイン(3文字+.jpとか)だととても高いんですよ 実は、ドメインの値段にはプレミアムのようなものが設定されていて、何かが要因で発動すると高くなっているようです。←今回だと「短いドメインは覚えやすいから」のような理由と考えられます。 そこで一度見た無料ドメインtk tkとかのドメインならばなんと 基本 無料で、これだと思いました。 現実はそんなに...

「ひらめきカレンダー」 短いURLのリンク集作成システムをGASとJavascriptで実装した

イメージ
--AD-- --  寒い季節になってきました 最近、GASを使ってHTTP応答できることを知っていろいろ試していてその中で今回作ったものを紹介します。 写真1 これ 簡単に説明すると、リンク集です。 多分気づいたひともいると思いますがあれに似てないですか>>>? あれ、、 Link〇ire, Link〇ore ただ、それらと見比べると違うところがいくつかありました。 一番大きいのは、各種ボタンが2サービスは右にいるのに対して、 これは左寄せになっています。  正直どっちがいいかは知らないです 仕組みを軽く解説 GAS = スプレッドシートの制御、送られてきたデータをデータベースへ追加、照合する Glitch = 今回はクライアント処理用、/?の後のパラメータをデータとして送信する こんなかんじです。 現状カスタムドメインではhttps非対応なのは何とかしたいです  なんとか対応させましたが、ちょっと仕様を変更しました 便利でしょう!,以上 似てるサービス tuneco.re lnk.to orcd.co / ffm.to